Yahooの検索サービスをサイト内に設置する

• Jul032006
• Author: bzbell
• Categories: Customize
• Tags: Ajax, Customize, Yahoo Developer Network

• Prev Page: MovableType 3.3 用タグクラウド追加
• Next Page: 最近のトラックバックをエントリごとに一覧する２

わたしは前々からOgawa::Memorandaさんのサイト内検索が気になっていました。

試してみれば分かると思いますが、ちょ～っと他では見かけないサイト内検索フォーム。
当然、新しいもの好きなわたしとしては、欲しくて、欲しくてたまりませんでした(＞∀＜　)

Ogawa::Memorandaさんは、わたしのお気に入りのサイトの1つですが、なんせ知識( 技術 )レベルが格段に違う、月とスッポン、象とアリくらい違うので、設置するのが一苦労です（つω-`｡）
わたしの場合、出てくる単語1つとっても、「何それ…」ってのがたくさんあるので、そこから調べていかないといけないから大変 (;￣∇￣A

でも、何とか設置できて、しばらく様子をみていたのですが、とくに問題も見られなかったので、今回はYahooの検索サービスを利用したサイト内検索フォームを設置するカスタマイズを紹介します。

Googleの検索フォームも同様ですが、Yahooのクローラにキャッシュされないと、いくら検索フォームだけ設置しても検索結果として表示されません。

Yahoo!デベロッパーネットワークとAjaxを組み合わせてサイト内検索フォームを作っています。
Ajaxとは、わたしも詳しいことは分かりませんが、JSとXHTMLを組み合わせた技術なんだそうです。

う～ん…ごめんなさい!!
これ以上のことは説明できません。逆に教えてもらいたいくらいです。
Ajaxとは

以前、WYSIWYG(ウィジウィグ)を設置したときに、わたしも始めて知りました。
世の中いろんな技術があるんですね。最近では WEB2.0 なんていう単語もよく耳にしますが、「何それ…」ってなかんじで、ぜんぜんついていけない。

そんな話はサラぁ～と流して、Yahooの検索サービスを利用したサイト内検索フォームのカスタマイズを説明します。

お世話になったサイトは、当然Ogawa::Memoranda様です。

▼必要なJSおよび、スクリプトの入手はこちらから▼
Ogawa::Memorandaさんのサイトから以下のJSなどを入手してください。

• AjaxClient.js： 適当Ajaxライブラリ
• YSearch.js： AjaxClient.jsを使用するYSearchクライアントライブラリ
• ysearch-json.cgi： Yahoo!検索Webサービスを叩いて結果をJSONで返すCGI
• ysearch-json.fcgi： 上記のFastCGI版
• ysearch.html： サンプルHTML・各自環境で動作確認できます。

▼必要なPearlモジュールの入手はこちらから▼

LWP::Simple

XML::Simple

JSON

JSON::Converter

JSON::Parser

CGI::Fast

基本的には、これらのPerlモジュールは既に存在していました。
ですが、もしなかった場合には別途入手してインストールする必要があります。

Yahoo!デベロッパーネットワークに登録

まず、Yahoo!検索Webサービスを利用するために、Yahoo!デベロッパーネットワークに登録して、アプリケーションIDを取得します。

Yahoo!デベロッパーネットワークの登録は、既にヤフーIDを持っているなら、そのままログインして 画面左にある「アプリケーションIDの登録」をクリックしてください。
そして、画面指示に従って登録を済ませます。

登録したら、アプリケーションIDは忘れないように各自で保存してくださいね。

アプリケーションIDの取得が済んだところで、上記URLから各ファイルを入手して、各自の環境に合わせて修正します。

ysearch-json.cgi の修正

まず、ysearch-json.cgi を修正します。
ysearch-json.cgi をテキストエディタで開いてください。修正内容は以下の通り。

116行目
変更前
<dd><input type="text" name="site" value="" /></dd>
変更後
<dd><input type="text" name="site" value="●●●.com" /></dd>

青い字の部分に各自のサイトのドメインを指定します。
例えば、わたしのサイトなら bizcaz.com と指定します。

113行目
変更前
<dd><input type="text" name="country" value="" /> (<a href="http://developer.yahoo.co.jp/search/countries.html">supported countries</a>)</dd>
変更後
<dd><input type="text" name="country" value="ja" /> (<a href="http://developer.yahoo.co.jp/search/countries.html">supported countries</a>)</dd>

青い字の部分に ja を追加します。

76行目
変更前
<form method="get" action="./ysearch-json.cgi" />
変更後
<form method="get" action="http://●●●.com/ysearch/ysearch-json.cgi" />

青い字の部分に ysearch-json.cgi のアップロード先URLを指定します。

10行目
変更前
my $YJWS_APPID = "[insert your AppID]";
変更後
my $YJWS_APPID = "アプリケーションID";

青い字の部分に登録したアプリケーションIDを指定します。

4行目
my($MT_DIR);
BEGIN {
require File::Spec;
if (!($MT_DIR = $ENV{MT_HOME})) {
if ($0 =~ m!(.*[/\\])!) {
$MT_DIR = $1;
} else {
$MT_DIR = './';
}
$ENV{MT_HOME} = $MT_DIR;
}
unshift @INC, File::Spec->catdir($MT_DIR, 'lib');
unshift @INC, File::Spec->catdir($MT_DIR, 'extlib');
}

上記コードを新規追加します。
一通り修正したら、ファイルを保存してください。

ysearch-json.fcgi の修正

次に ysearch-json.fcgi を修正します…といいたいところですが、わたしの環境では Fast CGI というPerl モジュールが使えなかったので、このファイルは使用していないんです。
このFast CGI モジュールが使えると、検索処理などが早いようです。

もし、Fast CGI モジュールが使える環境をお持ちでしたら、このファイルを先ほどの ysearch-json.cgi と同じ要領で修正を行ってください。

ちなみに、ロリポップ、さくらインターネット共に使えませんでした。
わたしのやり方が悪かったのかな。

Ysearch.js の修正

このJSは、検索結果を表示するためのスクリプトです。
各自のサイトにあったデザインを出力するよう修正することができます。 修正内容は以下の通りです。

67行目
変更前
'site': YSearch.site
変更後
'site': '●●●.com'

58行目
変更前
'uri': 'ysearch-json.fcgi',
変更後
'uri': 'http://●●●.com/mt/ysearch-json.cgi',

4行目
変更前
YSearch.site = site || 'as-is.net';
変更後
YSearch.site = site || '●●●.com';

各青い字の部分を各自の環境に合わせて修正します。
一通り修正したらファイルを保存します。

ysearch.html の修正

このファイルは、サイト内検索フォーム設置前の動作確認用のファイルです。
このHTMLで検索結果が表示されれば、後は各自のサイトにフィードバックするだけです。 修正内容は以下の通り。

28行目
変更前
<script type="text/javascript">YSearch.init('[Your Hostname]',10);</script>
変更後
<script type="text/javascript">YSearch.init('●●●.com',3);</script>

青い字の部分に各自のドメインを指定します。

5行目
変更前
<script type="text/javascript" src="AjaxClient.js"></script>
<script type="text/javascript" src="YSearch.js"></script>
変更後
<script type="text/javascript" src="/ysearch/AjaxClient.js"></script>
<script type="text/javascript" src="/ysearch/YSearch.js"></script>

青い字の部分に AjaxClient.js のアップロード先を指定します。
赤い字の部分では、YSearch.js のアップロード先を指定します。
一通り修正したらファイルを保存してください。

各ファイルのアップロード

以下のようにファイルをアップロードします。

• ysearch-json.cgi
  mt/ ディレクトリの中にアップロードします。 また、パーミッションを各自の環境に合わせて変更します。
  わたしの場合は、755 としました。

• ysearch-json.fcgi
  mt/ ディレクトリの中にアップロードします。
  上記と同様に、パーミッションを各自の環境に合わせて変更します。

• AjaxClient.js
  index.html があるディレクトリの中に、ysearch ディレクトリを新規作成して、その中にアップロードします。

• YSearch.js
  上記と同じ場所にアップロードします。

• ysearch.html
  上記と同じ場所にアップロードします。

AjaxClient.js、YSearch.js、ysearch.html に関しては、アップロード先はどこでも構いません。
各自の環境に合わせてアップロードしてください。

その際、ysearch.html で修正した AjaxClient.js、YSearch.js のアップロード先を合わせてくださいね。

以上で、Yahoo!検索Webサービスを利用したサイト内検索フォームの前準備は完了です。

動作確認

ブラウザから、ysearch.html を表示してください。
そして、各自のサイトにまつわるキーワード検索をしてみてください。

正しく検索結果が表示されればOKです。
検索結果が表示されなかった場合、以下の原因が考えられます。

• Ysearch.jsの修正ミス
  Ysearch.js で ysearch-json.cgi のパスは正しいか確認してください。

• アプリケーションIDの記述ミス
  ysearch-json.cgi中のアプリケーションIDが正しいか確認してください。

• 各Pearlモジュールがインストールされていない。
  このカスタマイズでは、前の方で記したPerlモジュールが必要不可欠です。

  各Perlモジュールが、mt/lib または、mt/extlib ディレクトリの中にインストールされているか確認してみてください。
  インストールされていなかった場合には、各自でインストールしてください。

Yahoo検索フォームの設置

ここまでくれば、あとは各テンプレートに設置するだけです。
ysearch.html の<body>～</body>の間のコードを、設置するテンプレートに追加します。

以上で、Yahoo!デベロッパーネットワークとAjaxを組み合わせた、Yahoo検索フォームの設置ができました。
お疲れ様です♪

SEE YOU♪

• Related Entries
• 08/04/26Movable Type のコメントを Ajax で投稿する２
• 07/07/16Ajaxによる投票をやってみる - 補足 -
• 07/07/08ブログ内検索を高速化(jQuery版)
• 07/06/22jQueryで非同期通信(Ajax)やってみる
• 07/02/10特殊な投稿機能について
• 07/01/28Ajaxでアンケート投票する
• 07/01/03Ajaxによる投票をやってみる
• 06/12/10AjaxによるCAPTCHA認証をやってみる
• 06/12/01タグ検索をAjaxで表示する
• 06/11/28MovableTypeのコメント、トラックバック一覧をAjax化

• Edit
• Permalink
• Comments(2)
• Trackbacks(0)