NAVER JAPAN：Flashを活用した新しい検索体験
第1回 「画像検索」「スマートファインダー」「フォトエディター」の概要
今月号の記事
- Adobe AIR Contest 2009
Grand Prix は「ブログパーツデスクトップ」 - 大重美幸の
「これ見落としてませんか？ActionScript 3.0」
第1回 「Buttonコンポーネント」 - NAVER JAPAN：Flashを活用した新しい検索体験
第1回 Flashならではのサービス - バスキュール×東京ガールズコレクション
-リアルイベントへのFlashサイト、モバイルコンテンツの新たな提案- - 不況の中、台頭するオンラインソーシャルゲーム
- 角川グループ「アニメNewtypeチャンネル」が
「SDK for FeliCa & Adobe AIR/Adobe Flash」を採用 - 2009年8月注目記事
- サービス & サポート情報
- イベント／セミナー情報
無数のサイトが検索サービスを提供しており、多くのユーザーを獲得しようといろいろな取り組みを行っています。中でも本誌が注目したいのは、7月に公開された NAVER JAPAN です。NAVER JAPAN では、これまでにない検索体験を提供しようと、Flash を活用した画期的なユーザーインターフェイス構築に取り組んでいます。今後4回に渡って、その取り組みの詳細について紹介していきます。
連載第1回目は、Flash を有効活用した3つのサービス「画像検索」「スマートファインダー」「フォトエディター」の概要をお届けします。
NAVER Japan の紹介
NAVER は韓国 No.1 の検索ポータルで、韓国国内で 70% のシェアを持つ世界第5位の検索サービスです。日本では7月1日にオープンβサービスを開始しました。
Yahoo! Japan や Google などの強豪検索サービスが過半数のマーケットシェアを占める日本検索市場において、どのようにして独自のポジションを築いていくか―NAVER Japan の UX デザインチームに与えられたミッションは、他の検索サービスと差別化された UX（User Experience）、UI（User Interface)の実現でした。
NAVER が目指す「検索」は、今までの「検索」の定義やコンセプトとは異なるものです。そのため、必然的に、UI も旧来型の検索サービスの UI ではなく、ユーザに新しい体験を与えるようなものにする必要がありました。そのポイントとなったのが、Flash の活用です。ユーザに新しい検索体験をさせるため、適切な場所に Flash を活用しながら、多様な環境でも一貫性がある UX を提供するために力を入れてきました。
NAVER のサービスの中で特に Flash を有効活用した3つのサービス、画像検索、スマートファインダー、フォトエディターを今後3回に分けて詳細に紹介していきます。どうぞお楽しみに。
今回は、これから紹介する3つのサービスの概要を簡単に説明させていただきます。
画像検索（Flash の大容量データ処理）
1. URL
2. 制作仕様
- Flash Professional + Flex Builder
3. 基本構成
- 画像検索結果を表示するという基本的な機能だけでなく、関連度・更新日時順、画像サイズ、カラーなどの検索オプションを提供。さらに、ユーザの求める検索結果をページング無しで快適に検索できるようにサポート。
- ユーザの多様なブラウザサイズに合わせて可変配置をサポートし、別途ブラウザのサイズを調整しなくても検索結果を参照できるようにしながら、サムネイルサイズ調整オプションを提供することで、ユーザの求める最適の環境を実現。
- サムネイルモードと、イメージ別 に元イメージを確認できる詳細拡大モードを同時に提供し、ページを移動することなく、イメージを確認することが可能。
- 詳細拡大モードにはスライドショー機能を提供し、利便性よく元イメージの参照が可能。
- AJAX History 機能を適用し、アドレス窓の URL をコピーしてユーザが見ている画面を共有したり、他のページに移動した後最後に参照していた画面に戻ったりすることができる機能を提供。
4. UX 重点事項
- iPod など最新のインタラクションに慣れているユーザの期待値を満足させるユーザ体験を提供。
- 既存 HTML ページの縦型スクロールとは異なる横スクロール構造を適用し、Web 上で iPod を使用するような画面ドラッグ型のナビゲーションを提供。
- クリック、ドラッグ、マウス操作、キーボードなど予想できる全てのインタラクションを適用し、多様なユーザの嗜好と環境に合わせた操作性を提供。
5. 技術概要
- プロジェクトの重点事項：一般的な検索結果よりも優れたユーザ体験を提供し、多様なユーザニーズに応えるために基本構造から細部要素まで新規制作。
- プロジェクトのフレーム： MVC（Model View Controller）デザインパターンを適用し、Model、View、Controller の役割を厳密に区分して効率的な OOP（Object Oriented Programming）を追求。
- デザイン要素の Asset セッティングは Flash を利用し、ActionScript の開発は強力なスクリプティング及びデバッグをサポートする Flex Builder を使用。
- サムネイルコンテイナーとサムネイル間の管理分離を通じてコードの安定性及びパフォーマンスを向上。
- 多くの検索結果を素早く処理するため、現在画面に表示されない結果はクリアー処理をするなどのメモリ管理を通じて、最小のメモリ使用と軽快なインタラクションを実装。
スマートファインダー（ActionScript と JavaScript の協業）
1. URL
2. 制作仕様
- Flash Professional + Flex Builder
3. 基本構成
- 検索キーワードが特定できなくても、提供される多様なオプションを絞り込むことにより、ユーザが求める情報を効率的に探すことができるサービス。
- 全般的なオプションの管理は AJAX が担当し、その結果だけを Flash が構成する方式。
- Flash 結果は基本的に NAVER 画像検索で利用する UX を同じく提供。
- Flash だけではサポートできないクロスブラウジング環境でもユーザのインタラクションを提供できるよう JavaScript と協業。
4. AJAX ― Flash 連動
- 結果要請のためのオプションの組み合わせ及びデータ要請プロセスはすべて AJAX が管理し、その結果と状態変化だけを Flash で反映できるように分離。
- 部分別 に RIA ページの大きい両軸の AJAX と Flash が一番効率的な機能を分担。
- External Interface を通じた call と callback を使用して js との状態変更を送受信。
- Flash Player が ActiveX、Plug-In などで作動するブラウザ環境による差を克服するために、マウス操作、キーボードなどのイベントを JavaScript と一緒に確認して、多様な環境をサポートできるように制作。
5. 技術概要
- データ要請と受信は AJAX を通じて処理し、結果値は Flash が仮想 DB 化して効率性を追求。
- 頻繁な External Interface 連結を防ぐため、AJAX と Flash 間の緊密な協業及びデバッグ。
- クロスブラウジングのサポートのため、JavaScript と ActionScript 間のイベント処理。
- AJAX との協業を通じ、AJAX History を適用してブラウザのページ移動の際に初期化される既存 Flash サービスの短所を補完して、現在ユーザが見ている結果セットをそのまま共有できるようにサポート。
フォトエディター （Flash CS4 の長所）
1. URL
2. 制作仕様
- Flash CS4 Professional + Flex Builder 3.02
3. 基本構成
- Flash CS4 のローカルファイル読み込み／書き込み機能を基に、ユーザのパソコン上にあるイメージをロードして操作。
- Flash だけを利用して Web 上で Photoshop のようなイメージ編集をサポート。
- イメージ回転、クロップ、サイズ変換機能を提供。
- 自動補正、白色補正、色調補正、レベル補正などカラー変換機能を提供。
- 範囲選択、移動、変形などの編集機能を提供。
- バケツ、ブラシ、消しゴム、テキストなどのドローイング機能を提供。
- ぼかし、シャープ、モザイク、効果などのフィルタを提供。
4. Flash CS4 の活用
- Flash Player 10 のローカルファイルアクセス機能を利用してイメージを直接参照・保存。
- 複雑なフィルタを Pixel bender を利用することで効率的に開発。
- 3D の Z軸機能追加によってテキスト機能のエディターに適用。
- 強力になった Vector を使用し、簡潔なコード作成が可能に。
- GraphicsPathWinding オプションを利用して自由選択ツール（lasso）をより効率的に開発。
5. 技術概要
- Winding rule は Vector ラインを描くときに描 かれる方向によって空領域が生じる規則だが、自由選択ツールでは Non-zero winding rule を適用してツールの利便性を高めた。
- Flash Player 10 は Array と似ているが、より早 い Vector タイプをサポート。Jpeg エンコーダーに使用する Array を Vector に変更しただけでエンコード速度を約2倍改善することが可能に。
