NAVER JAPAN：Flashを活用した新しい検索体験

第2回画像検索_快適さを生むデータ管理と画像リスト管理

今月号の記事

第1回目では、NAVER JAPAN が提供する Flash を活用したサービスの概要をお届けしました。第2回目は、その中の画像検索サービスを取り上げ、快適な検索体験を実現するポイントを解説します。通常の画像検索と異なり、NAVER JAPAN の画像検索では、ノンリフレッシュで検索結果を閲覧でき、しかもユーザーがウインドウをリサイズしたり、サムネイルサイズを変更したりすると表示内容がダイナミックに変化します。このような高負荷が予想されるサービス内容ながら、快適な体験を生み出すコツはデータ管理と画像リスト管理にあります。

UI 概要

NAVER の画像検索は、検索結果を連続して素早く検索できるように設計されています。多様なインタラクションをサポートしながら、ユーザ環境に最適化されたUIを提供しています。

データ API 管理の効率化
クリック、マウスホイール、画面ドラッグなど多様なインタラクションをサポート
ユーザのブラウザサイズに最適化された UI 構成
サムネイルのサイズの変更による利便性の向上
画像表示の制御を通じてメモリーおよび CPU の使用率の最適化
別ページに移動することなく元画像の確認が可能
全体画面、スライドショー機能をサポート

データの管理

連続的に検索結果を早く表示するためには、データの管理が必要です。また、一般的なページ単位の検索結果と異なり、ユーザ環境によって1回のローディングに必要なデータの数が変わってきます。しかし、その都度必要なデータを要請すると、キャッシュサーバーを利用して素早く結果を渡すことができなくなります。これを解決するために Flash 内に検索結果データを管理する Class をセッティングし、それ以外の Flash 構造ではデータの処理に関与しないようにすることでサーバーの負荷を最小化しています。

DataManager

ユーザの画面に表示している画像の数のデータを呼び出したい場合、サーバーは別途の結果を用意する必要があります。また、同一ユーザがブラウザのリサイズなどで表示結果を変更する場合は、同一データを再要請する必要があります。結果 API サーバーが同一条件による同一結果を提供する場合であればキャッシュサーバーを利用して検索サーバーの負荷を減らし素早い結果の伝達ができますが、上記の場合はこのメリットを活かせません。

このような問題を解決するため、DataManager はデータを一定単位で繰り返し要請して結果を受け取る処理を担当しています。同一条件の検索結果を保存しつつ、追加要請をせずにデータを渡すことが可能です。つまり、DataManager というキャッシュサーバーを Flash 内に置いてデータロードに必要な負荷を最小化しているのです。

これにより、UI 内のリストと詳細ビューモードを構成する ListModel と DetailModel は、DataManager にデータを要請して結果を event で受信する以外はデータ管理をしなくても済みます。

画像リスト管理

画像検索の特性上、たくさんのデータとイメージを管理してユーザ環境に最適化された UI を提供すると同時に、快適なパフォーマンスを維持する必要があります。そのため画像リストは大きく ①サムネイル item と ②サムネイルを含んでいる container に分けて管理しています。

具体的には、画面のサイズ（Flash のステージサイズ）に対して画像の大きさを演算して表示できる column と row を求め、各 item の x、y を演算します。また、start index に対する container の位置を演算して制御しています。

その結果、ページ移動の場合には item の位置は固定したまま container の移動だけで処理することができますし、サムネイルサイズの変更やブラウザのサイズ変更に対しては item と container を同時に移動することで処理できます。

しかし、container 内に持続的にitem DisplayObjectを維持したり、load した画像を含めていたりすると、メモリーとパフォーマンスに影響します。この場合は、現在表示されている item とページ移動などに必要な item だけ生成します。表示されない item に対しては image unload およびオブジェクト removeChild を実行して、最適のパフォーマンスおよびメモリー安定性を確保しています。

すべての UI は start index 一つでコントロール

Model と View を管理するためには、一つの基準を設定することが得策です。NAVER の画像検索では、すべてのページ構成と移動を start index 一つで管理しています。

Ajax history などを通じて任意の位置から始まる場合にも、start index を参照して構成します。ページの移動、スクロールバーの位置設定にも、start index を利用してディスプレイを更新します。

このように中央集権的な管理を行うことにより、多様な View の変化に対しても安定的で簡単な規則を適用して処理できるよう設計いたしました。

最後に

NAVER 画像検索の場合は、上記以外にも JavaScript と連動してマウスホイール、キーボード操作などを多様なブラウザでも同一に処理したり、Flash で作られた UI の限界といわれている現在 state の保存、および URL のコピーを通じて共有したりするために、Ajax history をサポートしています。この部分は次回「スマートファインダー ― Flash と Ajax の連動」でより詳しく説明します。

‹ 戻る