以前からサイト検索機能をアップさせたいと思っていました。検索結果表示のスピードアップです。。今後エントリーが増え続けてくるとMovable Typeの検索機能ではストレスを感じるようになってくる。そんなことからいろんな検索（サーチ）機能のカスタマイズを探してみました。結果、Google AJAX Search APIを利用したサーチ機能に切り替える方向に決めました。
使ってみた感想は、なかなかいい感じです。検索結果表示も早い方だと思います。また、Custom Search Engine：Google Co-opの実装も合わせて表示できるので訪問者にとっては、いい検索機能だと思います。（試しに一度検索機能を使ってみてください。）
今回はこの便利なGoogle AJAX Search APIを利用した検索機能をMovable Typeに実装する方法を紹介します。一度使ってみるとわかりますが、自分のブログにも欲しくなると思います。日々、情報を探している自分が常々思っていたことを自分のブログで実践・改善できるのはうれしいです。これからこんなサーチ機能がほとんどのブログに実装されるといいなと思います。
Google AJAX Search API
1.）まずは、Google AJAX Search APIにて、APIを取得します。
2.）Google AJAX Search APIサイトへ赴き、 Start using the Google AJAX Search APIをクリックして次のページへ。
3.）Tosを読んで、同意した後（I have read and agree with the terms and conditions にチェック入れる）、自分のサイトのアドレスを入力してGenerate API Keyボタンをクリック。
4.）次のページでAPI Keyが表示されます。一番下の長いコードが表示されています。そちらを全部コピーして別ページに貼り付けて保存しておきます。
Google AJAX Search実装コード
コピーしたコードは、Web Search・Google Maps Search・Video Searchなどが一緒になっています。また、defaultのコードだとサーチフォーム下に結果表示がでるようになっています。これだと芸がないのでいろいろと探してみました。
ちょうどカスタマイズしたコードを紹介しているブログがありましたのでそちらをベースに必要な部分だけを取り出しました。AJAX Search API Playground: Google AJAX Search API in Bloggerにて、カスタマイズしたコードを紹介されています。参考にしてください。
以下に表示するのは、さらに検索機能だけに絞ったコードです。
javascriptコード
<head></head>内に記述するコードです。
3箇所ご自分のサイトで使えるように修正するところがあります。先ほど取得したAPI Key・サイトアドレス・サイト名です。
option:検索サイトタブを増やす
以下のコードのパターンを設定して、上記コードの29行目と31行目の間に追加すれば、他のサイト検索表示もタブにて表示されるようになります。
Custom Search Engine：Google Co-opの場合は、APIをサイトアドレスの部分に追加します。Custom Search Engineが機能するには時差の関係もあると思いますが1日はかかると思います。（最初は検索表示されません。）
xmlコード
フォームとサイト検索結果表示させるコードです。お好きな場所に貼り付けてください。
フォーム
検索結果表示
cssコード
defaultでCSSが設定されていますが、ご自分のサイトのスタイルに合わせて検索結果表示なるCSSでカスタマイズしてみてください。以下は、各検索結果表示でのid/class要素と当サイトでカスタマイズしたCSSコードを表示させておきます。
以下の画像をクリックしてください。クリックで元に戻ります。また、ドラッグドロップで移動も可能です。
実装でのアドバイス
実装に際して、Movable Typeにおいてのアドバイスは<head></head>内に記述するコードは、モジュールで管理しておくといいと思います。実装や今後の書き換えなどの手間が省けます。MTのレイアウトカスタマイズ：ブロックのモジュール化を参考に。
既存の検索部分のコードもモジュールにしてしまいます。それからインクルードするのですが、<noscript><$MTInclude module="search"$></noscript>こんな感じでnoscriptタグで囲ってそのままコードとして残しておけばいいかと思います。他のブログサービスを利用している方も同じように既存の検索フォーム部分は、noscriptタグで囲ってあげるといいと思います。そうすれば、スクリプトOFFのときは、既存の検索フォームが表示されるようになります。
このサーチ機能の短所
使っておもいましたが、検索結果表示に制限があります。また、表示を消す場合は、検索ボタン左の×印を押さなければなりませんので、そのことを告知しておくといいかも。それか自分でスクリプトを作って結果表示を消すボタンを実装してみてもいいと思います。とりあえず、私はそこまでのスキルがないのが現状です。
参考サイト
以下に参考にするといいサイトを紹介しておきます。BloggerとTypePadに実装できるので大抵のブログに実装できると思います。
- AJAX Search API Playground: Google AJAX Search API in Blogger
- http://ajaxsearch.blogspot.com/2006/09/google-ajax-search-api-in-blogger.html
- Google AJAX Search API Playground
- http://ajaxsearch.typepad.com/
- Google AJAX Search
- http://dutchisms.typepad.com/google_ajax_search/
- Google Custom Search Engineを試す(ついでにGoogle AJAX Search APIも) - 将来のＰＣ業界パワーバランス
- http://rblog-tech.japan.cnet.com/0061/2006/10/google_custom_s_cef4.html
Google AJAX Search API & Google Co-op
- Google AJAX Search API
- http://code.google.com/apis/ajaxsearch/
- Google Co-op
- http://google.com/coop/cse/
その他のMovable Typeでのサーチ機能をアップする方法で参考になるサイト
- MovableType のサイト内検索を Ajax 化
- http://a-h.parfe.jp/einfach/archives/2005/1219200713.html#search_word=ajax%20json
- 今日のMovable Type：Ajaxを利用したMT用超高速検索システムはスゴすぎる！: 世界中の１％の人々へ
- http://www.dakiny.com/archives/movable-type/movable_typeajyaxmt/
- あんちもん2.Lab: JSON Feed のススメ
- http://www.antimon2.atnifty.com/2006/12/json_feed.html
jQueryでのサーチ機能を探しまくりましたが、いいのが見つかりませんでした。
今度は、Custom Search Engineの実装方法などを紹介したいと思います。
今回は、Google Web Searchだけの紹介ですが、Google Video Search・Google Map Searchなどを実装される方からもトラックバックいただけるとうれしいです。よろしくお願いします。
コメントする