ホーム » ビジネスブログ » Ajax (システム開発) »

@ITで「prototype.jsでYouTubeをインクリメンタルサーチ」の記事を書きました

2007年10月11日

@ITで「prototype.jsでYouTubeをインクリメンタルサーチ」の記事を書きました

投稿者 志田

志田です。

先日(といっても記事が出たのは10/4でだいぶ経ってしまいましたが)、弊社が@ITのリッチクライアント & 帳票のコーナーで連載を担当させていただいている「パターンとライブラリで作るAjaxおいしいレシピ」の、第2回目の連載記事が公開されました。

 prototype.jsでYouTubeをインクリメンタルサーチ (1/3) ─ @IT
 
http://www.atmarkit.co.jp/fwcr/rensai/ajaxrecipe02/ajaxrecipe02_1.html


 atmarkit_ajaxrecipe02.png

手前味噌ではありますが、今回の記事の中で私がポイントだと思っている点を、ここでご紹介をさせていただけたらと思います。

 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本記事を書いていく予定になっていますので、また次回も是非よろしくお願いします!

投稿者 志田 : 2007年10月11日 08:37

カテゴリー: Ajax (システム開発)

タグ: Ajax


Movable Type用高機能メールフォーム生成プラグイン A-Formの詳細へ
Movable Type用会員限定サイトプラグイン A-Memberの詳細へ
Movable Type用予約サイト構築プラグイン A-Reserveの詳細へ
ARK-Web×CSR(企業の社会的責任)

アークウェブの本

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む

Movable Type プロフェッショナル・スタイル

Movable Type プロフェッショナル・スタイル

ビジネスサイト構築におけるCMSとしてのMTの活用方法について、豪華執筆陣による実践的MT本です。八木が共著で執筆しました。続きを読む

Web屋の本

Web屋の本

Web 2.0時代の企業サイトの構築・運用などの戦略を考える「Web屋の本」 (技術評論社)を、中野・安藤が執筆しました。続きを読む

新着はてブ

Loading

アーカイブ

応援しています

  • キッズ・セーバー
  • ソロモン・リリーフ ─ソロモン諸島を応援する有志による、震災復興支援プロジェクト─

    (終了しました)

RSS配信

 

サービスおよびソリューション一覧


最新情報・投稿をチェック


このページのトップに戻る

Photo by A is for Angie

Powered by Movable Type Pro 6.3.8