Firefox の T シャツと傘をもらう ― 2006年09月02日 23時31分
ちょっと前に Mozilla Foundation の人からメールが来て、JavaScript のテストケース作成に協力してくれたお礼として何かあげるから Mozilla Store International から好きなのを選んでね、何個でもいいから、と言われたので、Firefox グレースケール T シャツと Firefox / Thunderbird の傘がいいですと返信したら早速荷物が届いた。
メールには ship the item
とあったのでてっきり船便でのんびり来るのかと思っていたら、航空便で予想外の速さに驚き。その分送料も高くついたみたいで、イギリスからの発送だったのだが、同封されていた明細を見ると全体の半分近くが送料で占められていた。
最初は不在通知が届いたのが再配達してもらうのも面倒で直接郵便局の窓口まで受け取りに行き、T シャツと傘がどのように梱包されているのかと思ったら、直径 5 センチ、長さ 1 メートルほどの紙製の筒の真ん中くらいに A4 レターサイズほどの住所が書かれた包みがテープで何重にも留められていた。
包みを開けてみるとまず出てきたのは iPod nano の写真、どうやら発送会社のキャンペーンで iPod nano が当たるようだ。T シャツはまあ見た目どおりの T シャツだが、傘のほうはというとこれがまず長い。普段使いのユニクロの傘よりも 10 センチは長い。ということは開けば 20 センチは大きくなるわけで、西洋人というのは大きな傘を使うのだなと思わず感嘆してしまう。柄は普通の傘のように J の字型に曲がってはおらず、先端は結構とがっており、傘というよりもまっすぐな杖といった感じ。ワンタッチで閉じられるボタンまで付いている。いい物をもらったとは思うがもったいなくて雨の日には使えない。
それにしても Mozilla Foundation の利益がこんなところで使われているとはね。開発者に報酬を与えるという話はどうなっているんだろう。
スタイルシート変更 - ショコラ ― 2006年09月12日 01時53分
スタイルシートを変更した。あまり関係ないけどロイズの板チョコ (ラムレーズン) が非常においしい。
画像を作るのが面倒だったので画像は一切使っていない。また、前回のスタイルは IE 5.5 以下でも同じレイアウトを再現させようとした結果少々入り組んだものになってしまったので、今回は IE 5.5 以下でのレイアウトの再現はあきらめ大まかな配置をシンプル (当社比) なものにしてみた。細かい点をいうと font-family の指定をやめた。見出し部分は欧米フォントだけでも指定しようかと思ったが IE のバグの範囲がよくわからないのでそれもやめた。印刷用スタイルも指定したら IE 5.5 以下ではバグのため常に印刷用スタイルが適用されるようになってしまったが、内容が読めなくなるわけではないのでそのまま放置。IE 7 での確認はしていないが IE 7 でも inherit キーワードには対応していないのかな?
レイアウト崩れを防ぐために pre 要素には overflow: auto と指定してあるのだけど、いちいちスクロールバーを動かすのは面倒くさいので JavaScript が有効な場合にはスクロールバーが出ている pre 要素の幅を切り替えられるようにしてみた。IE 6 だと幅を広げたときにレイアウトが崩れるけど面倒くさいので放置。ついでに普段は 2 段組みレイアウトなのを 1 段組みにも切り替えられるようにもした。こういったレイアウトの変更というのは急に切り替わると戸惑うからアニメーションでもつけたほうがいいのかもしれないが面倒くさいのでそこまではしない。Safari での確認もしていないけど確認できる環境がないのでそれも放置。
というわけで「面倒くさい」と「放置」がキーワードとなった今回のスタイル変更であった。なお、配色の決定にあたっては HTML Color Code Combination Chooser を大いに活用させてもらった。
tabindex とフォーカス ― 2006年09月18日 20時12分
レイアウトを動的に変更する際にはアニメーションをつけたほうがいいかもしれないけど面倒くさいといっていたのだが、物は試しとつけてみた。JavaScript が有効ならば pre 要素の幅切り替えのサンプルや右に出ている「メニューを本文の右側に表示」チェックボックスでその効果を確認できる (IE 5.5 以前など古いブラウザでは表示されない) 。わかりやすくなったのかうっとうしくなったのか、はたまたそんな機能自体いらないと思われているのか。
ところで、こういったことを実現するにあたって問題になってくるのがクリック可能な、すなわち onclick にイベントハンドラが結び付けられた項目を HTML でどう表現するかだ。具体的にいうと a 要素を使って href 属性には無意味な値を設定するか、span 要素などその他の要素を使うかで、これに関しては「Googleがonclickにはhref="javascript:void(0)"も付ける理由？」「フォーカスとjavascript:void(0)の話・2」(指向性メモ)で取り上げられている。私としてはリンクでないものに a 要素は使いたくないし、かといってキーボードによるアクセスを無視する気にもなれなず、さりとて livedoor Reader ほどの規模ならともかくこんなところで独自にショートカットキーを実装したところで誰も覚えてはくれないだろう。そこで今回は div 要素に tabindex 属性を使うことにした。
tabindex 属性は HTML 4 ではリンク関連要素やフォームコントロール要素にしか存在しないが、HTML 5 とも呼ばれる Web Applications 1.0 の草案ではすべての HTML 要素につけられるようになってり、とりうる値も 0 以上の整数から任意の整数へと拡張されている。この値が正である場合は小さい値を持つ要素から大きい値を持つ要素に、0 である場合は要素が文書に登場した順にタブによるフォーカスの移動が起こり、負である場合はタブによるフォーカスを受け取らない (クリックなどでフォーカスを与えることはできる) のだが、注目すべきは普段フォーカスを受け取らない要素に指定した場合、その要素がフォーカスを受け取れるようになるという点である。
とはいえ現在メジャーなブラウザで tabindex 属性による任意の要素へのフォーカスの付与に対応しているのは IE 5.01 以降 (IE の仕様を WHATWG が追いかけたのだろう) と Firefox 1.5 (Gecko 1.8) 以降のみなのだが、Opera に関しては Shift + 矢印キーで click イベントにハンドラが割り当てられた要素にも移動できるし、D / E キーを使えば任意の要素にアクセス可能だ。Safari でも要望は挙がっているもののまだ誰も作業に取り掛かっていない様子。
ちなみに span 要素などにフォーカスがある状態で Enter キーを押した場合、Opera 9 では keypress イベントと click イベントが発生するが、その他のブラウザでは keypress イベントしか発生しない。よって a 要素の場合とは異なり keypress イベントにも適宜ハンドラを割り当てておく必要がある (a 要素の場合も万全を期すならば keypress イベントにハンドラを割り当てておくべきだろうが) 。詳しくは (といってもあまり詳しくないが) span 要素に tabindex 属性を指定した場合に発生するイベントのテストを確認のこと。
ということで対応ブラウザが少ない (といっても 8 、9 割はカバーしているような気がするが) というのもこの方法の欠点のひとつだが、もうひとつの欠点として HTML 4 / XHTML 1 として妥当でなくなるということがある。DOM 2 HTML の HTMLElement インターフェースには tabIndex プロパティなど存在しないから、DOM から tabIndex プロパティを設定する分には tabindex 属性とは関係ないという詭弁も頭をよぎったが、それでも getAttribute で取得できてしまうし。
そんなこんなで Firefox 1.0 以下 (確認していないがおそらく Safari も) などではキーボードによるアクセスができなくなってしまうが、ホイールスクロールやミドルクリックしてしまったときの混乱を考えるに、クリック可能な項目にはそれが適切な場合を除き a 要素を使わず、tabindex によるフォーカスの付与を選択するというのもありなのではと思った次第。
ECMA-357 (E4X) 仕様邦訳公開 ― 2006年09月21日 20時15分
ECMA-357 ECMAScript for XML (E4X) Specification 2nd edition の邦訳を公開したので宣伝。以下雑談。
E4X の 4 というのは for の当て字だと思っていたら E4X の後継を E5X と呼ぼうとか言ってる人がいた。何じゃそりゃ。
あと私の環境だとなぜか IE では実体参照 ∉ (∉ 、∈ の否定) が豆腐に化ける。
ブギーポップ再読 ― 2006年09月30日 07時26分
はてなブックマークを覗いていたら注目のビデオにブギーポップ関連のものが挙がっていました。ちょうどちょっと前にブギーポップシリーズを再読したのですが、以前読んだときは『VSイマジネーター』『ハートレス・レッド』『ペパーミントの魔術師』の順で好きだったのが、今回は『パンドラ』に圧倒されました。特にラストシーン、谷川流の言う「王道」(の変則) だと思いますが、私の心に来る展開です。シリーズ最高作としてその名を挙げる人が (少なくとも私の周りでは) 多いのもうなずけます。
ついでに『ビートのディシプリン』も読みました。内容はよかったのですがラスト、ではなく「序章」が……。連載時には付いてなかったそうですが、この風呂敷きちんとたたんでくれるんですよね?
さらにアニメ『Boogiepop Phantom』も見ました。最初は原作を読んでいても全然意味がわからないと思っていたのですが第 4 話『MY FAIR LADY～けがれなき少女への愛～』で完全に惹きつけられました。『N・H・Kにようこそ!』と同じ「イタさ」を感じる話です。こちらのほうが自己投影はしにくいのですが、N・H・K と違ってギャグがない分一気に魅せられてしまいます。後は早乙女君の「今や、あなたは僕らの敵だ」が聞けたのがよかったところ。
しかし最初に読んだときから気になってはいたのですが「うう……」の多用や、面白くないという意味での「つまりません」(『夜明けのブギーポップ』p. 171) という表現はいかがなものでしょうか。今回「嫌われたくない、としか思わないことはできないのだ。」(『VSイマジネーター Part 1』p. 241) という一文が出てきたときには思わず我が目を疑ってしまいました。三重否定そのものは涼宮ハルヒシリーズにも出てきますが (溜息か退屈にあったはずですが今は見つけ出せませんでした)、あれは古泉という説明好きな人物の台詞だからまだ許せるもの。地の文で使われるのは正直読みづらいと思うのですが。
最近のコメント