基本はこう。
Logicoolのサイトのタブコントロールはキーボードインターフェイスを具えていて偉い、と書いたばかりだが、スクリプトがオフだと、タブの切り替えができないばかりか、タブの中身、肝心の情報が表示されないのはイクナイ。
スクリプトで各タブの表示・非表示を切り替えているのだろうが
ではなく
が、より良いやり方ではないか。(一瞬全ての情報が表示されてすぐに消える、というのは気にすることではないと思っている)
ロジのサイトのこのスクリプトは見栄えをいじるだけなので、HTMLとスクリプトを切り離して、最初に HTMLのみでページを作り、スクリプトは後からアタッチするものだと考えて欲しかった。
スクリプトに依存する要素があって切り離せない場合は、Amazon.co.jpがやっているように
方法が賢いと思っている。
驚いた。Firefoxでブラウズ中に普通のサイトでどせいさんフォントが表示されたから。
そのサイトは font-familyとして fantasyを指定していた。自分はどせいさんフォントをインストールしていた。でも Firefoxが fantasyと cursiveなフォントとして どせいさん を選んだ理由がわからぬ。そんな設定項目があっただろうか。(フォントにそういうメタデータが含まれているのだろうか。プロポーショナルか等幅かをプログラムが見分けられる(はず)のだから不思議はないか)
http://vvvvvv.sakura.ne.jp/ds14050/w/
Internet Explorer 7 で上の Hikiページを表示すると、右上のメニューを除いてテキストを選択することもリンクをクリックすることもできない。キーボードでの操作はできる。
スクリプトは仕込んでない。外部スタイルシートは hiki_base.cssと pain.cssが読み込まれている。 <style>タグが一カ所使われている。HTMLは Anothoer HTML-lintでチェックして対応がとれてないタグは存在しなかった。
(ページのどこでも)ダブルクリックするとまるで見当外れのページ右下の Generated が選択されるからスタイルシートの float辺りがくさい。
pain.cssをみてみると
div.main {
float:right;
width: 78%;
}
div.sidebar {
float:left;
width: 20%;
(以下略)
という記述があり、サイドバーの表示を floatで実現していた。
臭う、臭うぞ。でもここまで。そのうち直るでしょ。
onclickでごにょごにょする HTML要素があって、そいつに Tabキーでフォーカスをあてたいなと思ったときに最初に思いついたのが
<a href="javascript:void(0)">ほげほげ</a>*
のように Aタグで囲う方法。遅まきながら、この時初めてステータスバーに javascript:void(0)と表示される何もしないリンクの存在意義に気付いた。こいつがあると Tabキーでフォーカスをあてられるし、Enterキーでクリックすることもできる。そしてスクリプト(onclickハンドラ)で処理できる。簡単かつ使える範囲の広い方法。javascriptを切ってるブラウザではそもそも onclickハンドラが動かないから javascriptスキーマを使うことの是非は問われないし。onclickハンドラでキーボードとマウスをまとめて処理できることや、対応するブラウザの多さなど、書けば書くほどこれしかないって思えてくる。
次に考えついたのが、9日に "tabindexはフォーカスの順番を決めるだけのものではないのだなぁ。" と書いたように、IE(>=5.0)や Firefox1.5で、tabindexを付けることでリンクやフォームの部品以外の要素をフォーカス可能にする方法。
IEの場合、
<element>.tabIndex = 0 // 0 => フォーカス可能にはするが、タブオーダーは指定しない
<element>.onkeypress = function(){ if(event.keyCode == 13) this.click() } // Enter->Click
で済むが、Firefoxの場合 click()が実装されてるエレメントがフォームの部品などに限られているので
<element>.tabIndex = 0 // 同上
<element>.onkeypress = function(event){
if(event.keyCode == 13) {
var event2 = document.createEvent("MouseEvents");
event2.initMouseEvent("click", true, true, event.view, event.detail, event.screenX, event.screenY, event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, 0, null);
this.dispatchEvent(event2);
}
}
と、かなり冗長。
* href="" だとそのページ自身へ移動(=リロード)してしまう。void(0)以外に href="#" を使う流派もある様子(でもイマイチ)。
15アイテムずつ表示するのは一緒だけど……
以前は「おすすめの理由は」っていうリンクがあるだけだったのに、「〜などを評価されたお客様におすすめします」って、最初から一冊だけだけどおすすめの理由が表示されてる。これはページの移動が減るなあ。
出版日も表示されてる。
マウスオーバーに合わせて「嫌い(☆)」「好きではない(☆☆)」「普通(☆☆☆)」「好き(☆☆☆☆)」「大好き(☆☆☆☆☆)」と表示され、クリックすると評価が送信される。ページ遷移はない。
「持っています」「興味がありません」も従来はハイパーリンクだったものが、ページ遷移無しでアマゾンに送信されるようになっている。
ソースを覗いてみると、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>
<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>
よくわからない HTML、ところどころ XHTML風味。何れにしろ Broken みたいなっ。
アマゾンみたいなサイトでは HTMLの理念理想よりブラウザ互換性の方が大事でしょうが、見映えと関係ない細かな部分ではソースの統一をして欲しいな。(<br />なんて <br>でいいでしょ)
これまでは 100件ちょっとで「次のページ」が無くなって打ち止めになったけど、現在 400件目を過ぎたところまで表示してる。ここまでくるとおすすめの精度が悪くて参考にならない。でも自分で止めるところを決められるのは良い。
* Ajaxを XmlHttpRequest, MSXMLオブジェクトを利用した、ページ遷移を伴わないサーバーとの通信(HTTP GET/POST)、(とそれによるページ更新)とするなら
(´・ω・`) 知らなんだ。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.2
class = cdata-list [CS]
この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。