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

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

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

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

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

統合検索のまとめを。

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

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

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

この検索用の CSS を１つ。
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 アソシエイトID／Subscription Idとか、Yahoo! のアプリケーションIDとか取得して、これらソースの該当部分を修正しないとダメなんだけど、説明書くのがめんどうになったから、てきとうに探してみてね。

参考にしたサイト。

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

JJworkshop.com

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

Comments