NAVER JAPAN：Flashを活用した新しい検索体験
第3回 スマートファインダー＿ Ajax で Flash の不得手を補う
今月号の記事
スマートファインダーは、「人物」「ゲーム」「自動車」などのテーマごとに用意された情報を、オプション項目を選択しながら絞り込む検索サービスです。その技術的な特徴は、Flash と Ajax の連携にあります。オプション項目の UI などには Ajax、検索結果表示には Flash を使っています。
その理由は、リソースの有効活用という点だけでなく、Flash での操作性を向上させるためでもあります。1つの技術に固執することなく、技術を組合せ、それぞれの長所を活かすことで、利便性の高いサービスを提供することができます。
UI 概要
スマートファインダーは人物、映画、TV、自動車などの専門テーマを様々な条件でピンポイントに検索することができる新感覚のフィルタリング検索ツールです。例えば「自動車」ファインダーであれば、今まで販売された自動車に関する情報について、車種、価格帯、販売年、販売国、排気量、燃費など、検索条件をマウスで選択していくだけで、適切なキーワードが思い浮かばなくても、知りたい情報を直感的かつ簡単に調べることができます。
このサービスは「知りたい情報をただ調べる」だけの従来の検索とは異なり、「検索という行為そのものを楽しむ」という体験をユーザに提供するためのサービスです。現在は人物、ゲーム、自動車、映画、グループ、TV、大学の7分野でサービスを提供しています。
フィルタリング検索ツールという特性上、（検索前の段階で）整理されていない情報を、ユーザの選択条件に応じて、結果を素早く、わかりやすく整理された状態で表示させることによって、求める情報が簡単に得られるという利便性を提供する必要があります。
そのため UI 開発では一つのテーマに対して多様なオプションを提供し、これらを効率的にサーバー側に渡す必要があるため、Ajax はモジュール化を通じてテーマ別（人物、自動車、ゲームなど）オプションを構成・管理し、Flash はこの結果を効率的にディスプレーする役割を担当しています。
なお、スマートファインダーの検索結果を表示している Flash UI は、NAVER の画像検索サービスでサポートしている全てのユーザインタラクションをサポートしています。データ管理とオブジェクト管理は画像検索と同じロジックで処理し、画面にディスプレーされる要素の変化やデータ条件の管理のみスマートファインダーの独自UIを採用するなど、サービスごとに最適化された構造でフレキシブルな機能を提供しています。
Ajax との連携
上記で説明したように、スマートファインダーのオプション UI および情報は Ajax が担当しています。これはオプション UI と情報を全て Flash で処理している画像検索とは一番異なる部分です。内部的なメリットとして、こうすることで以前制作した旧バージョンのスマートファインダー（http://theme.naver.jp/映画ファインダー）の構造とプラットフォームをそのまま利用できる利点がありました。その結果、Flash UI では条件の管理は考慮せず、必要な情報だけ Ajax に request してサービスに必要な結果のみを表示することができます。
Ajax はデータの処理以外に、Flash のサイズ調整や Firefox などで処理しにくいマウスホイール、Flash が Focus されていない場合のキーボードイベントを処理する等、Flash をサポートしています。Flash 単体で処理できない部分に関しては Flash 開発者が一番よくわかっているので、Ajax 開発者・Web 開発者との継続的なコミュニケーションを通じて問題を解決していく課程が必要です。
Ajax History
Flash で構成されたサービスは、ページの更新をしないままデータを変更して表示できるメリットがある反面、HTML ページのように内部の情報の変化がブラウザで認識できる単位に区分できない問題があります。
これを解決するため、スマートファインダーでは Ajax History を利用して Flash の状態が変更された際、Hash（ページのアドレスの「#」記号）以降の情報を動的に変化させることにより、ブラウザの「戻る」ボタンを機能させています。
ユーザはページ変化がない RIA 環境でより高いクオリティのインタラクションを体験できると同時に、例えばブラウザの「戻る」ボタンを利用できたり、現在閲覧している情報をブックマークしたり、ブラウザの URL をコピーして他人と共有したりなど、一般的な HTML ページを利用する際の利便性を享受することが可能になります。
この作業は Flash 内部で正常ではない流れを作る可能性があるため、細心の注意を払った処理とテストが必要ですが、ユーザに高い利便性を提供するためには欠かせない機能だと考えています。
UI 開発はどの技術を使うのかではなく、どのように調和させるのかが重要
Flash は素晴らしい RIA 開発ツールですが、Web サービスの開発において（RIA 開発は論外ですが……）Flash の限界に関しても認識する必要があります。その限界を超えるためには、企画・デザイン・Web 開発者などプロジェクトメンバー間で協力し、密接なコミュニケーションを行うことが必要です。
スマートファインダーの場合は既存サービスとの連携のため、オプション管理と結果表示という2つの機能で完全分離されましたが、ある面では Ajax と Flash のそれぞれの長所が融合した良い OOP の形態ではないかと思います。「サービス」という大きい観点では Flash も一つの部分に過ぎませんので、HTML・CSS と JavaScript、データ API など他のあらゆる要素と「調和」することが、良い UI 開発の条件だと思います。
最後に
Flash 開発者は ActionScript が一番楽だから、という理由で Flash のみを利用して全ての機能を構成しようとする傾向があります（もちろん違う方もいらっしゃると思いますが……）。
しかし、大規模サービスを開発・運営していくためには、多様なユーザ環境への配慮と、Flash 内部のロジックとは無関係な API サーバーの変更や新しいバージョンのブラウザで生じる問題などに対する維持・補修も考慮する必要があります。
このとき Flash が独断的に全ての機能に含まれていると、「難しくてややこしいブラックボックス」になってしまうため、JavaScript やサーバー側との役割分担を通じて Flash の限界を克服し、外部のコード修正を通じて問題解決の方向性を提案するのが理想的な Flash 開発ではないかと思います。
次回は Web 上で強力なイメージ編集ができる「NAVERフォトエディター」を紹介します。
