サイト検索とAmazon検索を統合

サイトの修正が、あまりに地味すぎて変化に気づいてもらえないくらいなんだけど、けっこう弄くってる。
これでも…。
外見の変化は、トップバナー下の検索に「Amazon」が加わったことだけ。

ってことで、第二弾の「Amazon Web Services」をサイト検索に組み込んだ。
最速インターフェース研究会」のサンプルを参考にして(というかパクって)、かなりかっこよく組み込めてる。(…と思う)
結構楽しい動きをするんだこれが。

まーこれで Amazon での売上が上がるってこともないだろうけど…。
いいんだ。
自分で使うんだから…。

これで一応完成。
BLOG内検索と、Yahoo! を利用したサイト内検索/Web検索、Amazonカテゴリ検索を1つのインターフェースで統合できた。
(検索結果表示もそれとなく統一感が出てるんじゃないかと思うが…)
MTのテンプレートも更新し、各エントリーページにも似たような検索を挿入してある。

統合検索のまとめを。

実装はわりと簡単
(調べるのと、統合するのは面倒だったけど…)

使っている Javascript は、下の5つ。
  prototype.js
  odj.js
  blog_ajax_json_search.js
  amazon-search.js
  total-search.js
  ※ ライセンスはそれぞれのコードを確認

Amazon Webservice 用の XSL を1つ。
  aws2json.xsl
  ※ 最速インターフェース研究会のを、ほぼそのままです

この検索用の CSS を1つ。
  second-content.css

BLOG検索用に、TMテンプレートを追加。出力は「search_data」。
(インデックステンプレート再構築時に同時に再構築するようMTで設定)

<?___ encoding="<$MTPublishCharset$>"?>
{data: [
<MTEntries lastn="3000">
{title:"<$MTEntryTitle remove_html="1" encode_js="1"$>",link:"<$MTEntryLink$>",body: "<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$>"},
</MTEntries>
{"title": "", "link": "", "body": ""}
]
}

HTMLの検索フォームはこんな感じ

<form name="TotalFind" STYLE="margin: 0px;" onsubmit="doSearch(1); return false;">
<label for="q" accesskey="f"></label>
<input id="q" class="fo" name="q" size="25" value="検索(F): 検索文字を入力" onblur="if(this.value==''){this.style.color=''; this.form.reset()}" onfocus="this.value = ''; this.style.color = '#000';" />
<input type="image" value="検索" src="/img/find.gif" align="absmiddle" border="0" title="検索開始"/>
<a href="javascript:findHelp();"><img src="/img/question.gif" border="0" align="absmiddle" title="検索の使い方"></a>&nbsp;&nbsp;
<input class="ch" type="radio" name="mode" value="blog" checked />BLOG内
<input class="ch" type="radio" name="mode" value="jjw"/>JJWorkshop内
<input class="ch" type="radio" name="mode" value="web"/>Web全体
<input class="ch" type="radio" name="mode" value="ama"/>Amazon -
<select id="genre" class="genre" disabled>
<option value="books-jp">和書
<option value="books-us">洋書
<option value="music-jp">ポピュラー音楽
<option value="classical-jp">クラシック
<option value="dvd-jp">DVD
<option value="vhs-jp">ビデオ
<option value="electronics-jp">電化製品
<option value="software-jp">ソフトウェア
<option value="videogames-jp">ゲーム
<option value="kitchen-jp">ホーム&キッチン
<option value="toys-jp">おもちゃ&ホビー
<option value="sporting-goods-jp">スポーツ
<option value="hpc-jp">ヘルス&ビューティ
</select>
<input id="p" type="hidden" name="p" />
</form>

あと、設置には Amazon アソシエイトIDSubscription Idとか、Yahoo! のアプリケーションIDとか取得して、これらソースの該当部分を修正しないとダメなんだけど、説明書くのがめんどうになったから、てきとうに探してみてね。

参考にしたサイト。

  hail2u.net (Yahoo! Search Web Servicesを利用したサイト内検索)
  暴想 (Ajaxでバックナンバーを検索するJavaScript)
  最速インターフェース研究会 (Amazon最速検索を作ってみた)
  drk7.jp (Amazonカート仕様)