サイトの修正が、あまりに地味すぎて変化に気づいてもらえないくらいなんだけど、けっこう弄くってる。
これでも…。
外見の変化は、トップバナー下の検索に「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
(インデックステンプレート再構築時に同時に再構築するよう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> <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カート仕様)
Comments