はてなブックマークはメニューをmap要素以外で実装するかarea要素のcoords属性をちゃんと指定してほしい
はてなブックマーク( http://b.hatena.ne.jp/ )のメニュー(トップ〜動画のあれ)はmap要素を用いて実装されています。この記事を書いた時点でのHTMLを引用します。
<div id="category"> <span> <img src="http://cdn-ak.b.st-hatena.com/images/scategory.png" usemap="#catmap" alt="カテゴリー" style="margin-top: -60px;"> </span> <map name="catmap" id="catmap"> <area coords="0,0,47,92" href="/" alt="トップ" title="トップ"> <area coords="0,0,87,92" href="/hotentry" alt="総合" title="総合"> <area coords="0,0,127,92" href="/hotentry?mode=general" alt="一般" title="一般"> <area coords="0,0,166,92" href="/hotentry/social" alt="社会" title="社会"> <area coords="0,0,232,92" href="/hotentry/economics" alt="政治・経済" title="政治・経済"> <area coords="0,0,297,92" href="/hotentry/life" alt="生活・人生" title="生活・人生"> <area coords="0,0,403,92" href="/hotentry/entertainment" alt="スポーツ・芸能・文化" title="スポーツ・芸能・文化"> <area coords="0,0,468,92" href="/hotentry/knowledge" alt="科学・学問" title="科学・学問"> <area coords="0,0,555,92" href="/hotentry/it" alt="コンピュータ" title="コンピュータ"> <area coords="0,0,632,92" href="/hotentry/game" alt="アニメ・ゲーム" title="アニメ・ゲーム"> <area coords="0,0,691,92" href="/hotentry/fun" alt="おもしろ" title="おもしろ"> <area coords="0,0,733,92" href="/video" alt="動画" title="動画"> </map> </div>
これはHTMLのイメージマップという機能を使用しています。img要素にusemap属性を指定すると、そのusemap属性に指定した値を持つmap要素に結び付けられます。そしてそのmap要素の子であるarea要素がimg要素のイメージのどの部分に対応するかは、area要素のcoords属性によって決まります。
area要素は、指定した順番から前面に並びます。上記の例の場合、トップが一番前面に来て動画が一番後ろ側になります。そして、area要素がhref属性を持っている場合、a要素と同じようにハイパーリンクとして扱われます。area要素にはshape属性を指定することもできますが、この属性を指定しない場合はrectangleというキーワードが指定されたものとして扱われます。
ここまでが前提知識。
Vimiumのhit-a-hintとの兼ね合い
Google Chromeの拡張にVimiumというものがあります。Vimiumを使うとウェブブラウジング中の全ての操作をキーボードのみで行うことができます。(デフォルトでは)fキーを押すと画面内のハイパーリンクの矩形内の左上あたりにヒントが浮かび上がり、その状態でヒントに表示されたキーを叩くと、そのリンク先に飛べるようになっています。これを「hit-a-hint」というらしいです。
この記事を書いている時点でのVimium(1.29)では、href属性付きのarea要素はハイパーリンクとして扱われません。つまりhit-a-hintに反応しません。僕個人としては、はてなブックマークはよく利用しているのでメニューもhit-a-hintを使って移動したい所です。実は既に対応させるパッチは書いているのですが、正直実用に耐えるレベルではありません。ちゃんとhref属性付きのarea要素をhit-a-hintに反応するように出来ているのに、です。
というのは、上記のHTMLのarea要素のcoords属性を見てもらうと分かるのですが、全て1番目と2番目が0に指定されています。この場合のcoords属性の4つの値に何を指定するかは以下の通りです。
rectangle 状態 では、area 要素は、正確に 4 つの整数を持たなければいけません。最初の整数は、3 つ目の整数より小さくなければいけません。そして、2 つ目の整数は、4 つ目の整数より小さくなければいけません。この 4 つの整数はそれぞれ、イメージの左端から矩形の左側までの距離、上端から上側までの距離、左端から右側までの距離、上端から下側までの距離を、すべて CSS ピクセルで表したものでなければいけません。
area 要素 - 組込コンテンツ - HTML要素 - HTML5 タグリファレンス - HTML5.JP
上記のはてなブックマークのメニューの場合、coords属性の1番目と2番目の値は0です。イメージの左端から矩形の左側までの距離とイメージの上端から上側までの距離は全てのarea要素で同じになります。
先程も述べましたが、hit-a-hintのヒントはハイパーリンクの矩形内の左上あたりに浮かび上がります。ここで、href属性付きのarea要素をハイパーリンクとして扱い、ヒントを表示させた場合にどうなるでしょうか。coords属性の値からも分かるように、全てのarea要素の左上の位置は同じなので、全てのヒントが重なってしまいます。ヒントが表示されるようにできたとはいえ、全部重なってしまっているのでは流石にユーザビリティ上問題ありです。というわけでまだ公開していません。
個人的にはこの実装は変だと思っていて(なんでcoords属性の1番目と2番目の値を0にしているのかよく分からない)、ちゃんとcoords属性をそれぞれの矩形の大きさに指定するか、それともnav要素なりなんなりを使ってa要素を使う普通のリンクとして実装するかしてほしいなあと思うわけです。
