志田です。
先日(といっても記事が出たのは10/4でだいぶ経ってしまいましたが)、弊社が@ITのリッチクライアント & 帳票のコーナーで連載を担当させていただいている「パターンとライブラリで作るAjaxおいしいレシピ」の、第2回目の連載記事が公開されました。
prototype.jsでYouTubeをインクリメンタルサーチ （1/3） ─ ＠IT
http://www.atmarkit.co.jp/fwcr/rensai/ajaxrecipe02/ajaxrecipe02_1.html
手前味噌ではありますが、今回の記事の中で私がポイントだと思っている点を、ここでご紹介をさせていただけたらと思います。
1. インクリメンタルサーチの実装の仕方
2. prototype.js 1.6.0の新機能
まず、インクリメンタルサーチの方です。
これは
・私たちが作るWebサイトでも検索機能があるサイトは非常に多い。
・インクリメンタルサーチの実装の簡単な組み込み方を知っていれば、
手軽に導入をしてユーザーの使い勝手を向上できる。
と思い紹介しました。
インクリメンタルサーチのメリットは、
1. 単語をすべて入力する前に目的のものを見つけることができる
2. キーワードの入力間違いに事前に気づくことができる
3. さまざまな検索条件をスムーズに試すことができる
4. ドリルダウン検索がスムーズに行える
などいろいろあると思います。
ただ、実際に自分のサイトに組み込むとなると、サーバーの負荷や、クライアント側のレンダリング時の負荷の方が気になりますよね。
こういった負荷の問題に対する対策として、
・検索結果の表示件数を少なくする
・個々の検索された対象についての情報を減らす
(サムネイルとタイトルだけ、など)
・検索結果をデータベースに毎回問い合わせるのではなく、
サーバーサイドでキャッシュする
・サーバーに毎回検索結果を問い合わせるのではなく、
検索済みのものがあればクライアントサイドで
キャッシュしてそれを表示する
・検索条件の変更の監視頻度を調整する
などさまざまな対処方法があります。
まずは作ってみて負荷の問題が浮上したら、もっとも効果的なものが何かを検討し、試してみるとよいと思います。
(特にYouTubeのように)ユーザーの導線の中でも検索からの導線がかなり強いサイトでは、インクリメンタルサーチが競合サイトとの差別化にもなりえますし、「お、おもしろい!」と思わせるようなしかけがコンバージョンに良い影響を与えることもあると思います。
是非、皆さんのサイトでも導入を検討してみていただければ幸いです。
次に、prototype.jsの1.6.0の新機能の方です。
記事内で取り上げたのは、
・クラス定義の仕方
・DOM読み込みと同時に実行を開始するDOMContentLoadedイベントの部分
・テンプレート機能の部分
・Element要素からupdate()が呼べるようになった点
でした。
これらの機能のいくつかにはjQueryの影響が見られると思います。
本家の新機能紹介の記事中に、
#87940 - Pastie
http://pastie.caboo.se/87940
のプラグインを使えば、jQueryのように、
($$(“div.widget”).show().highlight())
といった書き方もできるようになる、といったことも書いてありますし、Prototype.jsを使っているユーザーの中から、jQueryのように簡潔に書けるようにしたいというニーズが生まれていることがうかがえると思います。
僕個人も、prototype.jsは、jQueryよりも堅牢で(jQueryのUI用ライブラリinterface.jsのバグでは何度か泣かされました^^; )、パフォーマンスも良い点が非常に魅力なのですが、jQueryに比べると書き方が多少冗長になってしまうところがちょっと気になっていました。
ですが、それも次の1.6.0で改良されてきているな、という印象でした。
基本的にソースがオープンであるJavaScriptは、ライブラリ同士がお互いによい影響を与え合っており、進化もとても早いので、今後も要注目ですね!
それ以外のprototype.js 1.6.0の新機能については、
Prototype JavaScript framework: Prototype 1.6.0 release candidate
http://www.prototypejs.org/2007/8/15/prototype-1-6-0-release-candidate
にありますのでよろしければ読んでみてください。
以上、簡単ですが「prototype.jsでYouTubeをインクリメンタルサーチ」の内容のご紹介をさせていただきました。
これ以外にも記事には
- MVCでの組み方
- GData YouTube API
- JSONPライブラリ
- LightWindowライブラリ
- SWFObjectライブラリ
などいくつかのポイントが盛り込まれておりますので、是非読んで見てください!
次回の連載のネタは、今のところExt JSを使ったサンプルを考えています。
毎月1本記事を書いていく予定になっていますので、また次回も是非よろしくお願いします!