にーやんのブログ

あまびき開発 31 日目。

ボタンの追加

検索結果の各商品欄に Amazon.co.jp の商品ページへのリンクボタンと、Amazon.co.jp の「ウィッシュリスト」（現在の「ほしい物リスト」）に追加するためのボタンを追加した。

次の URL（{ASIN} に追加する商品の ASIN が入る）にアクセスすれば、ウィッシュリストに追加できるらしい。Amazon の仕様変更で使えなくなる可能性がある、と思っておいた方がよさそうだけれど。

http://www.amazon.co.jp/gp/registry/add-item.html?ie=UTF8&type=wishlist&asin={ASIN}

サブウィンドを開く処理

上記のボタンをクリックしたときに同一ページで開くと検索結果が消えてしまうので、新しいウィンドウを開くようにする。

XHTML 1.0 の Strict では target="_blank" が使えないので、JavaScript の window.open で新しいウィンドウを開くようにする。cl.pocari.org - target="_blank" を使わないで新しいウィンドウでリンクを開く方法やスクリプトOFFでもちゃんと閲覧できるように　サブウインドウを開く弊害と対策 - ［ホームページ作成］All Aboutを参考にした。

でもキーボードショートカットで開こうとすると、やはりポップアップ扱いになる。このあたりは要検討。

Yahoo! ウェブ検索経由でもサムネイルを表示

Yahoo! ウェブ検索で検索した場合の結果にもサムネイル画像を表示するようにした。

画像の URL は、ASIN から推測。たとえば小さい画像は次の URL にアクセスすれば見られる（{ASIN} に商品の ASIN が入る。「俺流amazonの作り方―Amazon Webサービス最新活用テクニック」p.114 より）。

http://images.amazon.com/images/P/{ASIN}.09._SCTHUMBZZZ_.jpg

もしこの URL に画像が存在しない場合には、hail2u.net - Weblog - Amazonの画像置換 #2の方法で「画像なし」画像を表示させる。もともとは日本の Amazon（09）に画像がない場合にアメリカ/カナダ（01）の画像に置換するものだが、画像がない場合に 1x1 の画像が返ってくるのは同じなので。

画像の拡大については、とりあえず見送り。

この記事は、Amazon.co.jp 商品検索サイト「あまびき」の開発中につけていたメモを、ブログ用にまとめ直したものです。

あまびき開発 29 日目と 30 日目。

29 日目

• あまびきでは Yahoo! Web 検索経由で Amazon.co.jp を検索できるようにしているが、たつをさんの Yasazon - ヤサゾンと思いっきりかぶっていることに今さらながら気づいた。アフィリエイト用のリンク作成という機能もかぶっている。
• キーボードショートカットのヘルプを作成。

30 日目

• 検索結果の最終ページの場合に、最後の商品の後ろに空白を追加して、最後の商品が結果表示欄の一番上まで来るようにした。

この記事は、Amazon.co.jp 商品検索サイト「あまびき」の開発中につけていたメモを、ブログ用にまとめ直したものです。

あまびき開発 28 日目。

キーボードショートカットの実装

Handling Keyboard Shortcuts in JavaScript の shortcut.js を使ってみることにした。

jQuery プラグインにも、キーボードショートカット用の rikrikrik: shortKeys jQuery plug-inがあるが、Opera と Safari で多少問題があるようなので、とりあえずこちらを採用。

なお shortcut.js では disable_in_input オプションを使えば、入力フォーム欄（input や textarea）にキーボードショートカットが適用されなくなる:

shortcut.add("a", function(){
    alert('"A" is clicked!');
},{
    'disable_in_input': true
});

この記事は、Amazon.co.jp 商品検索サイト「あまびき」の開発中につけていたメモを、ブログ用にまとめ直したものです。

あまびき開発 26 日目と 27 日目。

26 日目

Blueprint ライブラリを試す

秋元@サイボウズラボ・プログラマー・ブログ: Blueprint CSSデザインのためのオープンライブラリで紹介されていた Blueprint という CSS フレームワークを使って index.html とスタイルシートを書き直してみた。

Blueprint を試したのは、The Yahoo! User Interface Library (YUI) よりも幅指定の自由度が高そうなのと、指定の仕方がより直感的だと思ったから。

27 日目

YUI を試す

The Yahoo! User Interface Library (YUI) を試してみる。

YUI には、CSS 関連のライブラリとして、Reset CSS、Fonts CSS、Grids CSS、Base CSS の 4 つがある（version 2.3.0 時点）。

最初の 3 つを全部利用する場合、yui > build > reset-fonts-grids にある reset-fonts-grids.css で一括読み込みでき、なおかつ、個別に読み込むよりもページ読み込みのパフォーマンスがいいらしい。以下に引用:

Yahoo! UI Library: Base CSS
Including the "reset-fonts-grids.css" file will give you more efficient pageload performance as compared to including each of the foundation files separately.

……が、結局 YUI 用に手直しするのに時間がかかりそうだったので、とりあえず YUI の使用は断念。

Blueprint も断念

さらに、前日試した Blueprint を使用した場合にも問題が発生。Blueprint を使用し、かつ、ウィンドウの幅が 960px（Blueprint のデフォルトの幅）より小さかった場合に、ツールチップを表示するときに画面が細かく揺れることに気づく。Blueprint の問題というよりも、ツールチップとの相性的なものなのかもしれない。

結局、あまびき本体に関しては、自前の CSS で行くことにする。Reset CSS とかだけは使うかもしれないが。

この記事は、Amazon.co.jp 商品検索サイト「あまびき」の開発中につけていたメモを、ブログ用にまとめ直したものです。

あまびき開発 25 日目。

bgiframe プラグインの導入

ヘルプ用のウィンドウを表示したときに、IE6 でのみ select メニューが透けて見えるのに気づいた。Tooltip プラグインと同様に bgiframe プラグインを適用することで対処する。

bgiframe プラグインは、「$('<div><p></p></div>').bgiframe();」とすると、「<div><iframe class="bgiframe"><p></p></iframe></div>」というように iframe 要素を挿入するものらしい。IE6 にのみ適用される。

ちなみにヘルプ用のウィンドウは、z-index などを指定することによって #wrapper 要素の上に重ねて表示している。

サーバーへの設置

実際にレンタルサーバー上に設置してみる。とくに問題なく動いた。

JavaScript の圧縮・難読化

JavaScript ファイルを圧縮・難読化した。

最初に /packer/ を試したが、差し替えてみるとエラーが出た。あとでわかったが、セミコロンが抜けていたのが原因だったようだ。JavaScript では改行も文の区切りとしてみなされるため、セミコロンなしでも改行があればエラーが出なかった。しかし圧縮する際に改行が取り除かれるため、セミコロンがなしではまずい箇所が出てくる、ということらしい（if ～ else 文のような場合はセミコロンなしでも）。

次に、高機能な JavaScript 圧縮ツール「jsjuicer」 - WebOS Goodies で紹介されていた jsjuicer というコマンドライン型の圧縮ツールを使ってみた。こちらは /packer/ で問題になった箇所（セミコロンなしで、改行が文の区切りになっている行）は、そのまま改行として残してくれるようだ（if ～ else 文についても同様）。

ただし、/packer/ の方が圧縮率も若干高いようだ（さらに Base エンコードを有効にすればもっと高くなる）が、上記の理由で当面は jsjuicer を使うことにする。

jsjuicer を使うときに気をつけたほうがいいかもしれないこと

• Windows 用のバイナリ（実行ファイル）は「A win32 version is available.」の「is available」のリンクからダウンロードする。
• VC8（Visual Studio C++ 2005） でコンパイルされているので、動作には VC8 のランタイムのインストールが必要。jsjuicer のホームページ（Windows 用のバイナリのすぐ右のリンク）からダウンロードできる。Microsoft のホームページ（Visual C++ 2005 SP1 再頒布可能パッケージ (x86)）からもダウンロード可能。

この記事は、Amazon.co.jp 商品検索サイト「あまびき」の開発中につけていたメモを、ブログ用にまとめ直したものです。