脳log[HTML: 2007-02-07～]

♪ [Firefox][HTML] font-family:fantasy と font-family:cursive でどせいさんフォント

驚いた。Firefoxでブラウズ中に普通のサイトでどせいさんフォントが表示されたから。

そのサイトは font-familyとして fantasyを指定していた。自分はどせいさんフォントをインストールしていた。でも Firefoxが fantasyと cursiveなフォントとして どせいさん を選んだ理由がわからぬ。そんな設定項目があっただろうか。(フォントにそういうメタデータが含まれているのだろうか。プロポーショナルか等幅かをプログラムが見分けられる(はず)のだから不思議はないか)

♪ [IE7][Hiki][HTML] IE7でマウスがおかしい

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で実現していた。

臭う、臭うぞ。でもここまで。そのうち直るでしょ。

♪ [HTML] <a href="javascript:void(0)"> と自分で書いて初めて気付くその便利さ

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);
  }
}

と、かなり冗長。

♪ [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件目を過ぎたところまで表示してる。ここまでくるとおすすめの精度が悪くて参考にならない。でも自分で止めるところを決められるのは良い。

♪ [HTML]classってスペースで区切って複数設定できるのね (HTML4.01)

(´・ω・`) 知らなんだ。

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.2

class = cdata-list [CS]

この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。