クックパッド開発者ブログスマートフォン用の表示で見るクックパッド開発者ブログ2018-11-02KomercoアプリでFirebaseからの画像取得を速くした話こんにちは。Komerco事業部エンジニアの高橋(id:yosuke403)です。Komercoは、「料理が楽しくなるマルシェアプリ」をコンセプトに、料理が楽しくなる器やカトラリー、リネン雑貨等を出品/購入できるサービスです。現在はiOS版のアプリケーションを提供しています。先日、Komercoアプリの画像表示の速度を改善したので、それについて書こうと思います。背景と成果Komercoで商品を選ぶユーザにとって、商品画像は当然重要なものです。以前は、アプリを起動してみると画像の表示が遅く、商品一覧をスクロールするとしばらく経ってから画像が表示される状況でした。こちらは改善前のバージョンで、会社のWiFiに接続し、初回起動(キャッシュなし)から新着商品一覧を表示したときの様子です。セルが表示されても画像が表示されるまで少し時間がかかり、特に素早くスクロールされると画面上のセルが全てプレースホルダーになってしまいます。次に改善後のバージョンで同環境で操作した様子です。Storageを使用しています。Firestoreはデータをドキュメントという単位で扱い、ドキュメントには数値や文字列といった値を格納することができます。ドキュメントはコレクションというグループでまとめられています。Storageのリファレンスを持つドキュメントが格納されています。画像のIDはImageドキュメントのIDに対応しており、これによりアプリはProductドキュメントから、対応するImageドキュメントを取得できます。商品一覧画面が表示されてから商品画像を取得するまでのフローは次のようになっています。Storageから画像データの取得ここから分かるように画像を取得するまでにFirebaseと何度か通信する必要があります。2〜4についてはセルの表示ごとに発生するため、素早く商品一覧をスクロールした際などは、リクエストが大量に発生して処理に時間がかかっていました。加えて、個々のリクエストについてもレスポンスが遅く、こちらもリクエストが詰まる要因になっていました。既存の対応策この課題は以前から認識しており、対策としてキャッシュを利用したリクエスト数の低減をすでに行っています。一度取得したImageドキュメントや画像データをローカルにキャッシュして、何度も通信が発生しないようにしています。speakerdeck.comしかし初回起動時や久しぶりに起動したときなど、キャッシュがない状態のときはやはり画像取得は遅い状態でした。画像取得フローProductドキュメントにimageURLという画像のURLを格納するフィールドを追加しました。これによりフローは次のようになりました。画像取得に必要な通信は2のみになりました。2の通信速度もかなり改善しています。以下では行ったことについて詳しく説明します。Storage上の画像データの在り処を他ドキュメントと共有したり、Imageドキュメントから得られる画像リサイズの完了イベントを取得したりすることができました。今回はパフォーマンスを優先し、Imageドキュメントを介さず、Productドキュメントに付与された画像のURLを使うようにしました。これにより、改善前の画像取得フローの2と3の通信を省略することができました。ここで言う画像のURLは、以前のフローの3で得られるダウンロードURLとは違うのですが、理由は次の節で説明します。Functionsを利用しました。FunctionsではFirestoreのドキュメントの作成・更新をトリガーに処理を実行できます。これを利用して、Productドキュメントに更新がかかったときにimageIDをチェックし、変化があれば画像のURLを取得してProductドキュメントに付与します。Functions側の実装は概ね次のようになっています。これはProductドキュメントの新規追加時の例ですが、更新の際もimageIDが変更されたかをチェックしている以外は同じような実装になります。Functionsを利用するメリットは、Productドキュメントを更新するクライアントのアップデートが不要であることです。Komercoでは購入用のKomercoアプリとは別に出品用のアプリがあるのですが、出品用アプリはimageURLの存在を気にする必要はありません。そのため、このアプリの強制アップデートはせずに今回の対応が可能でした。画像データを取得する時間を短縮する全体的にレスポンスが遅い原因はリージョンの問題でした。アジア太平洋(東京)」に画像データを移すだけで、かなり改善しました。Storageを直接見に行くようにすると更に速くなりました。これは、Firebaseではリクエストの検証をし、アクセス権の有無を確認しているためと思われます。今回の商品画像は公開しても問題なかったので、全ユーザに閲覧権限をつけて公開状態にしています。Functions自身がURLを生成してProductドキュメントに付与します。米国」のためにレスポンスが遅いのですが、現状では東京リージョンは利用できません。リリースは予定されている模様なので、もう少し待ちたいと思います。改善前のユーザのデータは無いのですが、手元のビルドで計測してみたところ、セルの表示が始まってから画像が表示されるまでに平均1.5秒ほどかかっていました。これは会社のWiFi環境で計測したので、実際ユーザの手元ではもっとかかっていると思います。改善後については、画像データ取得自体の時間は中央値で66ミリ秒程度、95パーセンタイル値で841ミリ秒でした。画面上での表示も概ねこれに近い時間で行われていると思います。最後にKomercoは6月にリリースしたばかりのサービスで、改善の余地はたくさんある状態です。作りたい機能もまだまだありますが、こういったサービスのパフォーマンスの改善も怠らないようにしたいと思います。2018が催され、様々なニュースが発表されましたね。APIが気になっています。MessagingのUIをカスタマイズして運用するKomerco事業部エンジニアの岸本(@_sgr_ksmt)です。F...2019-07-05Firebaseで運用するKomercoの管理用アプリケーションの開発こんにちは。Komerco事業部エンジニアの高橋(id:yosuke403)です...2018-11-15デザインとエンジニアリングをつなげる取り組みこんにちは、Komerco事業部デザイナーの藤井(@kenshir0f)です。Firestoreのrulesのテストを全てローカルエミュレータを使うように書き換えた...Komerco事業部エンジニアの岸本(id:sgrksmt)です。sgrksmt)です。使ったセキュリティログ検索基盤の構築サービス特性にあった検索システムの設計戦略クックパッド採用説明会「クックパッドはサービスの作り手を採用したいんです。/*}*/スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。