APIが利用できるようになりました。APIではサポートされていなかったJSONP(前回記事参照)による動画の検索ができるようになりましたので、今回のサンプルでは、この新APIを使ってJavaScriptから直接YouTubeの動画を検索させます。するたびに検索する「インクリメンタルサーチ」方式にします。Searchパターン」と呼ばれています(後述)。今回はAjaxライブラリとしてprototype.jsを使用します。prototype.jsは世界中で広く利用されているAjaxライブラリ/JavaScriptフレームワークです。Tutorials」)。rc0になって新しく追加された機能についても、サンプルのソースコードを解説しながらいくつか紹介していきます。インクリメンタルサーチとは?まずはサンプルを直接使ってみると分かりやすいと思います。次のページのキーワードの入力ボックスに「熱海温泉」と入力し、表示された動画のサムネイルをクリックしてみてください。APIを使って作成したものです。Tube側の仕様の変更などによりアプリケーションが動作しなくなる場合もありますが、あらかじめご了承ください。「熱海温泉」と入力し終わる前に検索が自動的に行われたと思います。このように、検索キーワードの入力が完了する前に、自動的に入力途中のキーワードを使って非同期で検索をすることで、検索をより素早く行うのが、「インクリメンタルサーチ」です。有名なサイトでは、Appleが「インクリメンタルサーチ」を採用しています。検索機能はさまざまなWebシステムで必要となる機能です。Appleの見せ方のように検索結果の「ちょっと見機能」として盛り込むと、ユーザーにさらなる利便性が提供できるケースも多いと思いますので、「インクリメンタルサーチ」はお勧めのテクニックです。Patternsで定義されている用語を使って、ポイントとなるテクニックを整理して紹介していきます。今回のサンプルアプリケーションで使用しているAjaxデザインパターンは次のとおりです。Throttlingパターンイベントが発生するたびにサーバに情報を送信するのではなく、一定の間隔を置いて送信することでサーバの負荷や回線の負荷を軽減Popupパターン既存のコンテンツに一時的に前面にレイヤーを重ねて、レイアウトを変更せずに追加情報などを表示したり、ちょっとした作業領域を提供できる「Popupパターン」は、ツールチップのような見せ方のものから、今回のサンプルのウィンドウのような見せ方のものまでを含むパターンですが、今回のような見せ方に限定する場合は「lightbox」などと表現した方が意味は分かりやすいかもしれませんね。今回は「Popupパターン」として、LightWindowというprototype.js系ライブラリを使用しています。前回と同様にアプリケーションの役割をMVC(モデル・ビュー・コントローラー)に分割しました。下記の図で、どのような流れで処理が行われるかを確認しましょう。コントローラー、モデル、ビューのシーケンス図コントローラーで、キーワードのチェック頻度をコントロール例えば、ユーザーが検索キーワードの入力ボックスにキー入力をするたびに、毎回YouTubeへの検索を行うようにしたとしましょう。キー入力スピードが速い人であれば、例えば0.1秒に1回のペースくらいで、サーバへアクセスが発生することになり、サーバ上のリソースやネットワークの回線に負荷が掛かってしまいます。Throttlingパターン」を使って負荷を減らす工夫をしました。具体的には、キー入力イベントを監視するのではなく、0.5秒置きに、コントローラーが呼び出されるようにし、その際にキーワードに変化があるかどうかを判定して、変化があった場合のみ、検索を行うようにしました。モデルで、前回の検索条件との比較とJSONPの実行を担当モデルは前回の検索キーワードを保持し、前回と検索キーワードが同じなら検索は行わず、前回からキーワードが変わった場合のみJSONPでYouTubeに検索を行います。今回ビューが担当する描画は次の2個所です。rc0の新機能やAjaxパターンの使いど使いどころを解説します。メールマガジンをご購読ください。Japanスマートジャパン3Dモデラボキャリア@IT自分戦略研究所エンジニアライフディルバートアプリITmediaねとらぼねこらぼついトピ!ITmediaはアイティメディア株式会社の登録商標です。