脳log[20060407] アマゾンのおすすめページがリニューアルしてる。

2006年04月07日 (金)

✍

♪ [Amazon][HTML]アマゾンのおすすめページがリニューアルしてる。

15アイテムずつ表示するのは一緒だけど……

○ 情報量が増えてる

以前は「おすすめの理由は」っていうリンクがあるだけだったのに、「〜などを評価されたお客様におすすめします」って、最初から一冊だけだけどおすすめの理由が表示されてる。これはページの移動が減るなあ。

出版日も表示されてる。

○ その場で(ページ遷移無しで)評価が変更できる。でも Ajaxじゃない*。

マウスオーバーに合わせて「嫌い(☆)」「好きではない(☆☆)」「普通(☆☆☆)」「好き(☆☆☆☆)」「大好き(☆☆☆☆☆)」と表示され、クリックすると評価が送信される。ページ遷移はない。

「持っています」「興味がありません」も従来はハイパーリンクだったものが、ページ遷移無しでアマゾンに送信されるようになっている。

ソースを覗いてみると、Javascriptが使用可能なら

window.location.href="〜"

とやってる。これは普通ページを移動するときに使うけど、そうはならない。からくりは以下のレスポンス。(注: id と名の付くものをそのまま載せるのはまずいかもしれないので正規表現に置換してある)

HTTP/1.x 204 NoContent
Date: Thu, 06 Apr 2006 18:42:18 GMT
Server: Server
x-amz-id-1: [0-9A-Z]{20}
x-amz-id-2: [0-9A-Za-z/=]{44}
Vary: Accept-Encoding,User-Agent
Content-Encoding: gzip
Connection: close
Content-Type: text/html; charset=Shift_JIS

Firefoxは 204 NoContent を受け取ったものだから新しいページを表示できなくて古いページを表示し続けるというわけ。

Javascriptが使用不可ならフォームを使って、(確認してないけど)スクリプトと同じ内容を POSTしてる。レスポンスも同じ 204 NoContentだろう。

○ 「次のページ」「前のページ」の他に、現在のページを再表示するリンクが追加。

評価などを変更しましたか? ここをクリックするとおすすめ商品の情報が更新されます。

というのがページ下部にある。内容は単なる javascript:location.reload() だけど需要のあるリンクだと思う。表示中のページに加えた評価を加味した最新のおすすめを表示したいと思うもの。

キーボード派は F5を押せばいいと言うでしょうがキーボード派はお呼びでない様子。

× 「持っています」「興味がありません」にはフォーカスが移らないのでキーボードで操作できない。

「興味がありません」を例にとるとソースはこう↓。丸々スクリプトで中身を出力してる。(スクリプトOFFなブラウザには <noscript><form>〜</form></noscript>が用意してあるので重複して表示しないように。)

<td style="white-space: nowrap;">
	<script language="Javascript" type="text/javascript">amz_js_showNotInterested(asin, notInterested);</script>
</td>

amz_js_showNotInterested()が何を返すかというと

function amz_js_showNotInterested(asin, notInterested){
    var imageID = "notInterested." + asin;
    document.write("<img src="+'"'+ + checkboxImages[notInterested] + +'"'+"");
    document.write("onclick="+'"'+"amz_js_sendNotInterested('" + asin + "', 'alt');"+'"'+" ");
    document.write("onmouseover="+'"'+"amz_js_notInterestedMouseOver('" + asin + "', 'alt');"+'"'+" ");
    document.write("onmouseout="+'"'+"amz_js_notInterestedMouseOut('" + asin + "', 'alt');"+'"'+" ");
    document.write("id="+'"'+ + imageID + +'"'+" ");
    document.write("border="+'"'+"0"+'"'+" valign="+'"'+"bottom"+'"'+" />");
}

一つの <img>要素。リンクでないただの画像にフォーカスは移りません。

というわけで、スクリプトが OFFの場合はフォームと画像ボタンが表示されるのでキーボードで操作できるはずだが、スクリプトONの場合はマウス必須。

× ☆の評価もキーボードでできない。

☆の部分のソースを見ると、☆の画像は一つで、6つの<area>を持つ<map>を適用することで個々の☆のマウスオーバー効果やクリックの処理をしている。評価送信のトリガはハイパーリンクを使ったものではなく <area onClick="〜" />。だから、☆にフォーカスは移るんだけど Enterを押しても反応しない。クリックをエミュレートするキーボードショートカットがあれば何とかなるが。

因みに ☆評価に対応した <noscript> なフォームは用意されてないのでスクリプトオフでは☆自体が表示されないはず。

× <html>が二つ？それってあり？

改行とインデントをいじって HTML要素の内容を省略したソースが以下。

<html>
  <head>
    <title>Amazon.co.jp: おすすめ商品</title>
    <script language="Javascript1.1" type="text/javascript"></script>
    <style type="text/css"></style>
    <style type="text/css"></style>
    <style type="text/css"></style>
  </head>
  <body>
    <html>
      <head>
        <title></title>
        <style type="text/css"></style>
        <script language="Javascript1.1" type="text/javascript"></script>
      </head>
      <body bgcolor="#FFFFFF" link="#003399" alink="#FF9933" vlink="#996633" text="#000000">
……
      </body>
    </html>
  </body>
</html>

Content-Typeヘッダは text/html
doctype宣言はない
<meta>タグもない
<img />, <br />など中身のない要素に XHTML風の記法
だけど <input>は <input />でなく <input>
対応する閉じタグのない <li>, <p>, <option>もある
<b>といった物理要素もある

よくわからない HTML、ところどころ XHTML風味。何れにしろ Broken みたいなっ。

アマゾンみたいなサイトでは HTMLの理念理想よりブラウザ互換性の方が大事でしょうが、見映えと関係ない細かな部分ではソースの統一をして欲しいな。(<br />なんて <br>でいいでしょ)

○ おすすめ表示件数の上限が無くなった？

これまでは 100件ちょっとで「次のページ」が無くなって打ち止めになったけど、現在 400件目を過ぎたところまで表示してる。ここまでくるとおすすめの精度が悪くて参考にならない。でも自分で止めるところを決められるのは良い。

* Ajaxを XmlHttpRequest, MSXMLオブジェクトを利用した、ページ遷移を伴わないサーバーとの通信(HTTP GET/POST)、(とそれによるページ更新)とするなら