あまびき開発日誌 #7
あまびき開発 7 日目。
マウススクロールによるページ遷移の実装に挑戦。
イメージとしては、オモロ 検索エンジン SAGOOL サグールや次世代検索インターフェイス実験 - goo ラボの「スクロール検索」のような感じ。
とりあえず、次のような手順でやってみることにした。
- ページの末尾までスクロール（-> スクロールした距離を計算）。
- そこでさらにマウスホイールが回される（-> マウスホイールイベントを検知）。
- 次のページを取得して追加表示。
マウスホイールイベントの取得には、Mouse Wheel Extension プラグインを利用。スクロールした距離の測定には Dimensions プラグインの scrollTop() 関数を利用し、それが検索結果を含むブロックの高さを超えたときに次のページを読み込むようにする。
とりあえず動くようになったので、「次へ」ボタンクリックによるページ遷移は廃止した。
この記事は、Amazon.co.jp 商品検索サイト「あまびき」の開発中につけていたメモを、ブログ用にまとめ直したものです。
あまびき開発日誌 #6
あまびき開発 6 日目。
今日は、画像ビューワ部分を作った。検索結果のサムネイル画像（SmallImage）をクリックすると、大きい画像（LargeImage）を別ウィンドウで表示するというもの。
作成までの経緯
最初は ThickBox 3 プラグインを使おうと思ったが、うまく動作せず。他のプラグインとバッティングしているのかもしれないが、結局、原因がわからないので使用をあきらめる。
BlockUI プラグインにも画像を拡大表示する関数 displayBox があるので試してみる。こちらはうまく動いたが、カスタマイズ（スタイルシートの設定とか）が難しそう。
結局、自分で関数を作ることにする。
中央揃え
画像ビューワを中央揃えしたいので、center.js プラグインを使ってみた。しかし、目的とするものを作るには物足りない気がしたので、結局、却下。
なお、最初、center.js プラグインがどこにあるのかわからなかったので、検索して /plugins/center/center.js - jQuery - Development から入手した。
とりあえず、Dimensions プラグインの width() と height() を使って document の幅と高さを求めて、css() で top と left を設定することにした。
// 画像ビューワの上と左の位置を調節
$("#imageviewer").css("left", Math.round(($(document).width() - $("#imageviewer").width()) / 2));
$("#imageviewer").css("top", Math.round(($(document).height() - $("#imageviewer").height()) / 2));
追記: jQuery 1.2 から、Dimensions プラグインを使わなくても width() と height() で window と document の幅と高さを取得できるようになっています。
この記事は、Amazon.co.jp 商品検索サイト「あまびき」の開発中につけていたメモを、ブログ用にまとめ直したものです。
あまびき開発日誌 #5
あまびき開発 5 日目。
ソート機能の実装
Amazon ではカテゴリ（SearchIndex）ごとにソートの指定方法が異なるので、カテゴリの選択にあわせてソート用の select メニューの内容を切り替えるようにしたい。jquery selectCombo プラグインというのが見つかったので使ってみる。
selectCombo 用の CGI をつくる
selectCombo では、リクエストに応じてサブメニューの情報（値とメニューに表示するテキスト）を JSON 形式で返す CGI を用意する必要がある。そこで Python を使って CGI を作成した。selectcombo.py?q=Books のようにアクセスし、q の値に応じて出力する値を変えるという単純なもの。
なお、CGI 側で出力する JSON の Content-Type は、Nix::WebLab: JSON の response header を参考にした。
追記: 2007-09-16 現在、selectCombo は使用していません。
selectCombo の一部を改造
selectCombo ではメニューの一番上の（または初期状態で選択される）項目の value が "" であることを前提としている。もし "" でない場合、最初にアクセスしたときに、サブメニューが表示された状態になってしまう。そこで jquery.selectCombo1.1.js の 31 行目を
if($(this).val() == '' && ...（以下略）
から
if($(this).val() == 'Blended' && ...（以下略）
のように変更した。これについては、他の方法もあるかもしれない。
この記事は、Amazon.co.jp 商品検索サイト「あまびき」の開発中につけていたメモを、ブログ用にまとめ直したものです。
あまびき開発日誌 #4
あまびき開発 4 日目。
ページめくり機能（仮）の実装
TotalPages が 2 以上の場合は、ページめくりできるようにした。
「次へ」リンクをクリックすると、ItemPage + 1 で次のページを Amazon にリクエスト。$.post() を使って POST メソッドでアクセスする。
// POST メソッドで CGI にアクセス
$.post("CGI のアドレス", {
// オプション（省略）
}, function(data){
// コールバック関数（省略）
});
この記事は、Amazon.co.jp 商品検索サイト「あまびき」の開発中につけていたメモを、ブログ用にまとめ直したものです。
あまびき開発日誌 #3
あまびき 開発 3 日目。
CGI 関連
CGI が日本語の検索語に対応していなかったのを修正。
Python で URL エンコードするには、urllib モジュールの quote/quote_plus（後者は空白を+に置換）を使うらしい。
- 参考:
- 「みんなのPython」 （柴田淳著、p.213）
- pythonグループ - 獨習Python - PythonでURIエンコードするには）。
フォーム関連
jQuery BlockUI Plugin を使って、検索ボタンを押すと UI をブロックして「しばらくお待ち下さい...」のメッセージを表示するようにした（Ajax 処理停止後にブロック解除）。
Creator 要素の抽出
昨日の Creator を join で結合できない問題のつづき。
each 関数では「jQueryオブジェクトとして扱いたい場合は，$(this)とラッパする必要があります」（jQuery 開発者向けメモ）というのを読んで、やってみたら何とかできた。
var creators_array = new Array(); // 配列の生成
$("ItemAttributes/Creator", data).each(function(){ // 各要素をいったん配列に追加
creators_array.push($(this).text()); // $(this) で jQuery オブジェクトとして扱われる
});
var $creators = creators_array.join("、"); // slice で抜き出してから読点（、）区切りの文字列
商品画像がない場合の処理
商品画像は ImageSets 要素から抽出しているが、ImageSets 要素がない場合は、no image 画像を表示するようにした。
if($("ImageSets", this).text() != ""){ // ImageSets が空でなければ
// ImageSets の中から画像の URL を抽出
var $image_small = $("ImageSets/ImageSet/SmallImage/URL", this).text(); // 小さい画像
} else { // さもなければ
// no image 画像で代替
var $image_small = "./image/noimage.png"; // 小さい no image 画像
}
この記事は、Amazon.co.jp 商品検索サイト「あまびき」の開発中につけていたメモを、ブログ用にまとめ直したものです。
