これは、Facebook Engineering Blogからの投稿の翻訳であり、おそらく、それが説明しているソリューションの本質ではなく、Facebookでの開発の「キッチン」についてのストーリーでは興味深いものです。 2010年9月末に登場し、数日前にわずかに改善された、更新された写真表示機能について話しています。
Photo Viewerの更新について考えてみると、多くの困難に直面しました。 明らかに、写真はFacebookの最も人気のある機能です。 ユーザーは毎日1億枚以上の写真をアップロードしていますが、これを目的とした機能はかなり前に作成されており、明らかに改善が必要でした。
完了した作業のおかげで、ユーザーは写真をさらに5％表示するようになりました。これは、量的には毎日約10億回の追加の表示を意味しています。
どうやってやったの現在の問題のリストを作成することから始めました。
- 信頼性に関して最大の問題が発生しました。 画像のダウンロードが遅くなり、プロセスが無期限にフリーズする場合があります。 ユーザーは、写真とコメントを表示するために、ブラウザーでページを更新する必要がありました。
- ニュースフィードから写真を表示するときは、新しいタブで写真を開くか、表示後に前の位置に戻るためにフィードを再スクロールする必要があることに耐えなければなりませんでした。 コンピューターに精通している人にとっては、これはたいしたことではありませんでしたが、ユーザーの多くは不便を経験しました。
- 写真のコメントを表示する機能も、最も便利な方法で実装されていませんでした。 プロセスは次のようになりました。写真を見て、ページを下にスクロールして署名とコメントを確認し、次に戻る必要があります。
- 写真のアップロードとキャッシュ、およびコメントの投稿用に設計されたJavaScriptも、最適な方法で実装されていませんでした。 ブラウザ技術とそれらの要件がはるかに進んでいるという事実を背景に、それは長年不変のままでした。
私たちの課題は、上記の問題を解決し、理想的には、写真を表示したり、人々にラベルを付けたり、好きな写真にコメントを付けたり、「いいね」を付けたりできる、より楽しく機能的な新しい機能を作成することでした。
いくつかの設計概念を特定し、実験を開始しました。 ほとんどすぐに、ポップアップを使用することで、直面しているいくつかの課題を同時に解決できることがわかりました。 ポップアップウィンドウを使用すると、ニュースフィードの現在の位置を保存でき、同時に最小量のダウンロードデータで実装できます。
フォトビューアーの初期コンセプト窓の初期設計がすぐに気に入ったという事実にもかかわらず、写真の説明、そこに写っている人々のコメントやマークの余地がないことは明らかでした。 ウィンドウのデザインを完成させ、サイズを大きくし、作業の対話性を高めました。 同時に、ユーザーの画面の解像度が許す限り、写真を大きなサイズで表示する機会を提供しました。
初期プロトタイプ写真ビューアー次に、プロトタイプテストの結果に基づいて、いくつかの重要な決定を下しました。 まず、暗い背景では、写真がよりカラフルに見え、画面上で完全に目立つことがわかりました。 次に、右側の列を削除すると、写真自体のための空きスペースが増え、ページの幅全体を占めるようになりました。 そして、最後に、写真を見るときに暗い背景が提供するすべての利点にもかかわらず、それに書かれたキャプションやコメントを読むのはかなり難しいことが明らかになりました。 そのため、大きなサイズの写真に対応した2色版のウィンドウを使用しました。
フォトビューアーのフルスクリーンバージョンそこで、設計を決定し、プロジェクトのエンジニアリング側で作業を開始しました。 大きなサイズの写真を処理する必要性に関して、いくつかの重大な問題が発生しました。 たとえば、一部の写真は大きすぎて小さな画面に完全には収まりません。 私たちのタスクは、画像をスクロールして全体を見る必要性からユーザーを救うことでした。 さらに、プロジェクトの作業を開始する前であっても、大きな写真のコメントを表示する問題を解決するという課題に直面していました。 したがって、写真の下部に空きスペースを用意する必要がありました。これは常に画面に表示されます。
その結果、設計開発のために次の基準を決定しました。
•キャプションとコメントのために、写真の下部に最低100ピクセルを残す必要があります。これらは常に画面に表示される必要があります。 これは、ユーザーの画面の解像度が低すぎる場合に写真を圧縮する必要があることを意味していました。
•ポップアップはメインページの上部に表示され、必要に応じてスクロールする必要がありますが、ページ自体はバックグラウンドで静止したままである必要があります。
•APIの再設計を必要とせずに、新しい機能を簡単に追加できる必要がありました。
•作業量とパフォーマンスの低下がこのバージョンでの作業の利点と比較して大きすぎる場合、新しいIE6ブラウザー機能のサポートを拒否することにしました。
•JavaScriptの使用を最小限に抑える必要がありました。
最終ソリューション：より多くのCSS、はるかに少ないJavaScript最終的なソリューションは、CSS機能を使用して、JavaScriptを使用せずにポップアップを操作することに基づいていました。 HTMLを見て、使用されている行ごとのコードを見てみましょう。
- まず、ライトボックスを作成する必要があります。 固定位置のルートタグ
fbPhotoTheaterを使用することで、コンテンツをbodyから分離することができました。 ルートタグのwidthとheight 100%に設定し、 overflowパラメーターをbodyにhiddenに設定することで、バックグラウンドでページ自体を変更せずにコンテンツをスクロールできます。 container要素は、ライト960pxの水平コンテンツの境界線960px設定し、ライト960pxの位置を画面の中央に設定します。 ライトボックスの構造を調整した後、残りの要素を使用してその内容を正しく配置します。max-height 820px要素のheight 100% 、 max-height 820pxです。 これらのうち、720ピクセルは写真自体に割り当てられ、残りの100ピクセルはライトボックスの下部の署名とコメントに使用されます。 これは、 photoInfoWrapperの下部境界線から100ピクセルの高さにphotoInfoWrapperを配置することによって実現されます。 したがって、常にstageWrapperの下部に隣接します。- 要素
stageBackdrop 、 stageWrapperおよびstageActionsは、CSS内で同じ位置になければなりません。 これにより、相互のオーバーラップが保証されます。 max-height 720 px 、 top 0およびbottom 100pxます。 このbottom値のおかげで、署名用に画面の最下部に100ピクセルがあることが保証され、 max-heightは、 max-heightすぎる写真でもライトボックスのコンテンツを許容範囲内に保ちます。 また、 stageWrapper 、値がtext-align:center設定され、写真が中央の水平位置を占めるようになります。 stage要素は、写真を中央に垂直に配置するために使用されます。 これは、位置決めでJavaScriptを使用する唯一の方法です。 stageは、 line-height値をline-heightに設定する必要があります。これにより、imgの子はvertical-align: middleポジショニングを取得します。 このソリューションのメリットは注目に値します。これは、ユーザーが複数の写真をスクロールするたびにではなく、計算を1回だけ行う必要があるという事実にあります。- 画像自体については、パネルの境界線に常に収まるように、
max-height 100%が設定されます。 - 最後に、
photoInfoWrapper要素の下にあるはずのphotoInfoWrapper要素に対して、相対的な位置付けのtop: – 100px 。 このため、空の間隔が埋められます。
マークアップが終了したら、JavaScriptの内容の修正に取りかかりました。 機能の古いバージョンは、署名、コメントなどとともに20個のパックで写真をアップロードしました。 AJAXを使用します。 その結果、写真を読み込むだけの場合の3倍の時間がかかりました。 関連情報から画像を分離すると、パフォーマンスがさらに向上しました。 現在、AJAXリクエストごとに、より多くの写真をロードし、関連データを少なくして、リクエストへの応答時間を最適化できます。 写真のダウンロードの最大速度を確保するために、ユーザーが写真を反転する方向を追跡し、次の5枚の写真を読み込みます。 これにより、写真は事前にブラウザのキャッシュに入れられ、すぐに表示されます。
データを読み込むときに、PhotoTheater JavaScriptクラスからそれらに関する情報を分離しました。 データの各リクエストに応じて、Photo Viewer要素の識別子とこれらの要素に挿入する必要があるHTMLコードを含むキーを持つオブジェクトが来ます。 各要素のコンテンツを設定するサイクルを実装しました。 この決定により、JavaScriptを変更せずにHTMLのデザインとレイアウトを変更できます。 最後に、ダウンロード速度を最大化するために、フルバージョンのURLを含むHTML5属性を各写真アイコンに添付しました。 したがって、ユーザーがアイコンをクリックすると、その属性からURLを取得し、AJAXリクエストを使用せずに最初の写真を表示できます。 したがって、写真を表示するための機能の平均読み込み時間は現在0.5秒未満です。
作業の結果、少量のダウンロードデータと高い表示速度を備えたソリューションが得られました。 このため、表示の利便性と機能のインタラクティブ性を高めることができました。 これにより、ユーザーが直面するエラーが少なくなり、データのロードを待機するインジケータが表示される可能性が低くなります。
Facebookの開発から受け取ったのと同じくらい、Facebookの機能の新しいバージョンを使用して写真を表示して楽しんでいただけることを願っています。
写真を表示するための機能の最終バージョン。