Latest topics 近況報告

transitionendイベントが発火されないことがあるというバグが修正されそう - Jan 10, 2011

CSS Transitionsではアニメーションの終了時にtransitionendというイベント（webkitではwebkitTransitionEnd）が発行される事になってて、Minefieldに既に入ってる「タブを開く時にアニメーションする」「タブを閉じる時にアニメーションする」という機能でもこれが使われてる。具体的には、max-widthをアニメーションさせることでタブがぬるっと生えてきたりぬるっと縮んでいったりという効果を与えて、アニメーションが終わった後で実際にタブの要素を削除するという風な事が行われている。

このtransitionendイベントがたまに発行されない事があって、そのせいで「閉じたはずなのにタブがそのまま残ってしまう」「タブが開かれた後に行われるはずの処理が行われない」といった問題が発生していた。特に、ツリー型タブではタブバーの向きを横長ではなく縦長に変更していて、その絡みでmax-widthのアニメーションの代わりにmax-heightとかmargin-topとかopacityとかをアニメーションさせるようにしてるんだけど、そのように複数のプロパティについて異なるdurationでアニメーションを行うようにしてる時にこの問題が顕著に発生するようで、しかし確実に問題を再現させる条件がはっきりと分かっておらず、Bugzillaに報告しようにも報告できない状態が長く続いてた。

それが今回、ひょんな事から確実に問題が再現する条件を特定できたので、Bugzillaに既に存在していたBug 613888 – Sometimes transitionend doesn't fireに再現性100％のテストケースを投稿してみた。

そしたら、そこからの動きが早かった。タイトルが示すように「時々しか起こらない」ということで割と優先度低めの扱いだったっぽいのが、hardblockerになってblocking2.0になって（つまりこのバグが直らなきゃFirefox 4はリリースされないという致命的なバグと認識された）、David Baronさんがパッチを書いてくれて、ついでに僕の投稿したテストケースを元にした自動テストもパッチに含めてくれて、あとはレビューとチェックイン待ちという状態になっている。

べつに僕が最初に問題を見つけた訳ではないし、僕が実際にパッチを書いたわけでもないけれども、自分のやったことがきっかけになって厄介なバグが修正に至ったと思うと、率直に言って「やったぜ！！！」と自分の事のように嬉しく感じてる。

このエントリで何を言いたかったのかというと、要するにその「やったぜ」の自慢話ということなんだけど、それと同時に、再現性100％のテストケースや再現手順を特定することは大事なんだよ、それを自動化することも大事なんだよという事も伝えたかったのです。

再現性100％の手順が判明していればすぐに開発者の環境でデバッグできるし、自動テストがあればそれをそのままリポジトリに取り込むこともできる（＝今後のregressionの発生を予防できる）。パッチを書けない人でも書けないなりの協力はできるのです。単に「動かないよ」と言うだけの場合よりも、原因特定のための検証を開発者がやる手間が省けるから、効率がいいしバグも早く直る訳です。

• Mozillaの自動テストには、Mozillaのリポジトリに含まれているテストで実際に使われてるフレームワークが列挙されている。
• 今回のテストケースではその中の1つのMochitestを使った。
  • Mochitestは基本的にはMozillaのビルド環境を整えた上で使う物だけど、MochiTest makerと最新のナイトリービルドを使えば、Mozillaのビルド無しにテストケースを書いて試すことができる。
  • 実際にどんなテストがあるかは、MXRで「bug_」を名前に含むファイルを検索してみると色々な例を見れる。
• FirefoxのUIの上で操作した時に起こるバグの再現だったら、MozmillやUxUが使えるはず。

というわけで、バグ報告には確実に問題を再現できる手順（できれば自動テスト）を添えて下さいね、という話なのでした。

16日追記。パッチがチェックインされた後のナイトリービルドで、自分の環境では上記の問題が解消されていることを確認できた。よかった……これで安心してFirefox 4を迎えられるよ。

Linuxで一度にオープンできるファイルの最大数を変える - Jan 07, 2011

Ubuntuの場合、初期状態では1つのプロセスで開けるファイルの最大数は1024個までと決まっているようで、それ以上の数のファイルを開こうとするとエラーになる。普通に使っててこの制限を気にする場面は全然無いんだけど、自動テストで大量のファイルを処理するようなやつを実行するとたまにこの制限に引っかかってしまうことがある。

現在の制限がどうなっているかは、ulimit -a で調べられる。open filesと書いてある所の数値がそれだ。

この制限を一時的に緩和するには、ulimit -n 任意の整数 とやればいいらしい……んだけど、ulimitはsudoでは実行できないようだった。rootで操作すればいいんだけど、普通にUbuntuを使ってるとrootにはなれないので、この方向を頑張るのはちょっとやる気が出ない。

代わりの方法として、/etc/security/limits.conf を編集するという手もある。例えばすべてのユーザに対してファイルの最大オープン数を2048個に増やしたければ、/etc/security/limits.confに以下のような指定を書き加える。

* soft nofile 2048
* hard nofile 2048

これで再起動すれば、すべてのユーザについて、1プロセスで扱えるファイルの最大数が2048にまで増える。

新しいタブとかウィンドウとかで「戻る」を押しても戻れねえよムキーッとなる問題を解消するアドオン「親のタブに戻る（Back to Owner Tab）」をリリースしたよ - Jan 07, 2011

Back to Owner Tabというアドオンを作ってみた。

例えば初心者ユーザにはこういう事がありがちだろう。

• ブラウザのウィンドウを常に最大化して使っている。
• タブとかウィンドウとかよく分かってない。「戻る」ボタンを押せば1つ前のページに戻れる、という事は（教わったので）知っている。
• リンクをクリックした結果新しいページが表示されたとして、それがただのページ遷移なのか、新しいタブで開かれたのか、新しいウィンドウで開かれたのか、違いがよく分かってない。
• 新しいウィンドウで開かれたページを見終わって「元のページに戻ろう」と思って「戻る」ボタンをクリックするが、ボタンをクリックしても何も起こらない。

こういう場面で、「戻る」をクリックしたらとにかく元のタブなりウィンドウなりに戻るようにするのが、このアドオンだ。

だいたい、ウィンドウを最大化してたりタブを表示しないようにしてたりすると、「戻る」で戻れるのかそうでないのかすぐには分からないから、初心者でなくてもこういう物には意味があると思う。

Firefox 3.5以降では browser.tabs.selectOwnerOnClose が true で且つそのタブが「新しいフォアグラウンドのタブ」として開かれた時にだけ「このタブの親はこのタブですよ」という情報が保持される。また、JavaScriptではwindow.openerでオープン元のウィンドウを辿ることができる。このアドオンは、これらの情報を手がかりにして「親のタブ」を検索するようになってる（ツリー型タブがあるならツリーの構造から親のタブを検出する）。

確かタブブラウザ拡張にもこういう機能を含めてた気がするんだけど、それらを単機能の拡張機能として再実装した時に取りこぼしてた。その後、ツリー型タブにこの機能を含めてくれという要望が何回か来てたんだけど、今だったら browser.tabs.selectOwnerOnClose があるから別にツリー型タブに依存した機能にしなくてもいいよなーと思ったので、こうして今回新たに1つのアドオンとして作ってみたというわけ。

Add-on SDKは使ってないけどBootstrapped Extensionsの形にしてあるので、Minefieldでは再起動無しでインストールできる。昨年の発表では「Bootstrapped Extensionsでは『戻る』ボタンの挙動をオーバーライドするみたいな事はできない」と言ったけど、やってみたらできてしまった。あと、そのために使った方法がFirefox 3.6では動作しなくてちょっと悩んだんだけど、Firefox 3.6ではそもそも絶対に再起動が必要だから「変化を可逆的にする」事にこだわらなくてもいいので、そこは横着してダーティなやり方を使ってる。

なんとなく既出のような気もしたけど、「back owner」とかその辺の単語で検索してもそういう物を見つけられなかったので、じゃあ作るか……と思って作ってみた。既出だったら恥ずかしい。

ちなみに、似たような目的のアドオンでTab Historyという物もある。こちらは「新しいタブを開く時に、元のタブの『戻る』『進む』の履歴を引き継ぐようにする」というアプローチを取っている。僕もTab Historyを使ってたんだけど、せっかく作ったので、しばらくはBack to Owner Tabを使って様子を見てみようと思ってる。

Inkscape向けのマンガ用A4-B5テンプレート - Dec 26, 2010

最近は同人のマンガは全部ComicStudioで作ってるんだけど、今自宅のメインのWindowsマシンが（多分）マザーボードの故障で修理中で手も足も出ないので、タブレットでデジタル作業というのはさすがに諦めてアナログ作画で何とかしようと思ったのです。

で、仕上がり寸法B5の作品にしたいと思ってるんだけど手元にはA4のPPC用紙しかないので、トンボとかガイド線とか一式が入ってるテンプレートが必要になったのでInkscapeで作ってみたのです。

A4-B5.svg

途中、Inkscapeでのトンボ（トリムマーク）の作り方が分からなくて詰まった。やり方の解説を見つけたのでメニューを見てみても、Ubuntu 10.10のInkscapeだと「エクステンション」メニュー直下に「プリントマーク」が無いし（サブメニューを辿ったら「レンダリング」の中にあった）。

寸法は、用紙がA4、裁ち切り線がB5、基本枠（セリフ等を基本的にはこの中に収めるようにしなさいという枠）はA5です。トリムマーク以外はシアン10％になるようにしてあるので、普通にコピー機で白黒コピーしたら多分コピーされない。はず。

料理 - Dec 25, 2010

イブが終わって世間のクリスマス気分がすっかり終わった間のある今日になって、半分はヤケで、クリスマスらしい料理という物を作ってみようと思い立ったのです。

これならできるんじゃないか……？と思った物を適当に3つほどピックアップした。

• クリスマス☆レンジでミートローフ by veryベリー [クックパッド] 簡単おいしいみんなのレシピが90万品
• クリスマスに本格！パンプキンスープ☆ by こまつた [クックパッド] 簡単おいしいみんなのレシピが90万品
• ＨＢで簡単シュトーレン by ぱんぱんぱんだ☆ [クックパッド] 簡単おいしいみんなのレシピが90万品

結論から言うと、まともにできたのはミートローフだけだった。これは電子レンジとクッキングシートとボウルと包丁とまな板と皿があればそれでできて、時間も手間もかからないし失敗もない。素晴らしい。日常的に作って全然アリだと思った。

フードプロセッサーもジューサーもミキサーもないのにポタージュスープ的な物を作ろうというのは間違いだった。レシピをよく見ないまま作り始めて途中でそれに気がついて、おたまの底とかスプーンとかを使って何とか材料を細かく潰そうと頑張ってみたんだけど、どうも粒が残る。調理器具を手に入れたらもう一度やってみたい。

あとお菓子。ホームベーカリーとか無いし素材をあらかじめ暖めておくのも忘れてたしオーブン機能のあるレンジもなくてオーブントースターしかないしで、これも散々だった。菓子作りは計量が命だというのをどこかで聞いた記憶はあったのでそこだけはちゃんとやったけど、無塩バターじゃなく普通の塩入りバターを使ってしまったし、どうにも生地がベタベタしたままだし、手持ちの道具はオーブントースターだけだし、ハケも持ってないし（Jetpackを作った時に使った物はさすがに使えない）、で、なんかよく分からない物ができあがった。思ってたほどは酷くはなかったけど、その後で普通に買ってきたケーキを食べたらそっちが死ぬほどうまかったので、プロの人はすごいなあと思った。

どれも作るの初めてだったし3種同時進行というのも初めてだったし、世の中そううまくはいかないものだなあということを実感したのでした。364日フライングで練習したということで、この経験を活かせる時が来る事を願う。

ゆうきまさみ開業30周年記念企画展に行ってきた - Dec 25, 2010

渋谷PARCO 1で開催されている原画展で、パトレイバーの原稿の展示が23日で終わるという事を22日になって知って、慌てて行ってきた。

単行本は実家に置いてきたんだけど、展示されてたイングラム対グリフォンの最終戦の原稿を見てると、最終戦を読んだ時の興奮が蘇ってきて涙目になりかけた。「機動警察パトレイバー」は本当に名作だと思う。未読の人はほんとに1回読んでみるといいです。

で、帰宅してその勢いで劇場版第1作を見た。ブルーレイだけど、5.1chじゃない方の音声を選ぶと（ステレオPCMで）サウンドリニューアル版でない当時の音声で楽しめるという事に、初めて気がついた。5.1chサラウンドの環境なんか持ってないから音声を選び直したんだけど、これは嬉しいサプライズだ。「呪ってやるー！！」は当時の演技の方が好きなのです。

ツリー型タブがCSSの!importantを使いすぎているせいで他のアドオンと衝突する（Tree Style Tab conflicts Tab Utilities, ColorfulTabs, and other tab-related addons because it uses too many "!important" rule in its CSS.） - Dec 18, 2010

Q

With BOTH Tree Style Tab AND Tab Utilities enabled at the same time, the ColorfulTabs extension makes no difference - no tabs get colored. I have reported this to the author of Tab Utilities since it has worked properly in all previous versions of Tab Utilities. But here's his answer:

TU hacks the ColorfulTabs code to reduce its use of "!important", but Tree Style Tab still uses "!important" for tab background-color. I may revert TU's changes, but IMO it's Tree Style Tab who behaves improperly. It uses too many unnecessary "!important" modifiers in CSS rules, which also leads to the conflict with TU for the pinned tabs' position.

Can you fix this please?

ツリー型タブとTab Utilitiesが同時に有効になっている時、ColorfulTabsは何の変化ももたらしません──つまり、タブに色が付きません。Tab Utilitesの以前のバージョンは正しく動いていたため、私はこの件をTab Utilitiesの作者に連絡しました。しかし彼はこう言っています：

Tab Utilitiesは「!important」の使用を減らすようにColorfulTabsのコードに手を加えていますが、ツリー型タブはまだ多くの「!important」指定をタブの背景色に指定しています。私はTab Utilitiesに加えた変更を取り消すかもしれませんが、しかし私の考えでは、ツリー型タブのやり方の方が間違っています。ツリー型タブはあまりに多くの不必要な「!important」指定をCSSの中で使っており、これはTab Utilitiesの「ピン留めされたタブ」の配置を壊す原因にもなっています。

この件について修正してもらえませんか？

A

Those "!important" are surely required, because appearance of tabs can be modified by third-parties' theme. For example, if a theme defines black background with white text, then partially applied styles from TST possibly make lighter background with white text -- yes, it is very hard to be read. To avoid these cases, I decided to use "!important" rules. Actually I got some "bug reports" like this. If I remove those "!important", I'll get similar bug reports again -- I'm very sorry but I don't want that.

Instead, I made an option for "highly compatibile for other addons". See the configuration dialog of TST, "Appearance" panel. There is an option "Default (Specified by the Theme)" in built-in themes. If you choose the option, TST doesn't apply any "!important" rule for tabs. I believe that the option makes TST compatible with Tab Utilities and ColorfulTabs.

それらの「!important」指定は必要な物なのです。タブの外観がサードパーティ製のテーマによって変更される事があるのがその理由です。例えば、あるテーマが背景色を黒に、文字色を白に設定していた時、ツリー型タブのスタイル指定が部分的に適用されてしまうと、明るい背景色と白い文字の組み合わせになってしまうことがあります──これはとても読みにくいですよね。こういったケースの発生を防ぐために、私は「!important」指定を使う事を決めました。実際、私はそういう「バグ報告」を受け取った事があります。もしこれらの「!important」指定を削除したら、私は再びそういった報告を受け取る事になるでしょう──申し訳ありませんが、私はそれを望んでいません。

その代わりに、私は「他のアドオンとの互換性を高く保つ」選択肢を設けました。ツリー型タブの設定ダイアログの「外観」パネルを参照してください。ここでタブバーの表示スタイルとして「なし（テーマ本来の表示スタイル）」を選択すると、ツリー型タブは「!important」指定が付いたスタイル指定を適用しなくなります。これを選択する事で、ツリー型タブとTab UtilitiesやColorfulTabsの衝突は回避できるものと私は考えています。

木村拓哉艦長代理の宇宙戦艦ヤマト - Dec 14, 2010

話題のSPACE BUTTLESHIP ヤマト、見てきましてん。感想。

• 木村拓哉は総理になっても弁護士になっても木村拓哉だなあ。
• 第3艦橋って……死亡フラグ……
• アナライザーかっこいいよアナライザー。
• 森雪さんはいつの間に木村さんと恋愛関係になったのでしょうか。

正直かなりなめてかかってた（最悪、実写デビルマンを想定してた）から、最初の戦闘で結構「おおっ！」と思った。コスモゼロにギミックが加わってたり、アナライザーがでっかくなってたり、森雪の役所が生活班長じゃなくなってたり、デスラーの設定が今時のSF風になってたりと、色々入ってたアレンジについては、僕はこれはこれでアリだと思えた（ガミラス星人が青塗りの日本人俳優だったらコメディですよね）。まあ、僕自身が原作にそれほど強い思い入れが無いからかもしれないけど。

重力どないなってんのん？　とか、なんで放射線があった方が住みよい種族なのに放射能を除去できるん？　とか、突っ込めそうな所はたくさんあるけど、まあ、堅い事言わないで頭空っぽにして気楽に楽しんだらいいと思います。

しかし主役のラブストーリー展開はあまりに唐突すぎるなーとは思った。真田さんの「本当の弟のように」も。世界観とか舞台設定の強引さ不自然さは「そういうもの」として僕は気にならないんだけど、人間関係のそういうのはすごく……気になる。時間が限られてるんだし、恋愛に振るのかそうでないのかスッパリ割り切ればよかったのになー。そこの所の不自然さがなければ、もっと手放しで褒められたんだけど。

XULに追加された「layer」属性には、XULと低レベルのレイヤの入り交じりっぷりが顕れていた - Dec 11, 2010

Firefox4 オワタ - alice0775のファイル置き場で既報だけど、Bug 588764 – Content area needs a grey border and shadow around itというバグのパッチでborderのためだけに新たにXULのボックスが追加された。

最初このパッチを見た時、僕は「なんじゃこりゃ」と思った。こんなもんレイアウト目的の空divと同じ発想じゃないか！　何やってんだ！　こんなもんCSSのborderでやりゃいいじゃないか！　と。（既にタブの中にもレイアウト調整用のボックスが入ってるけど、まあ、それはさておく。）

でも当該バグの最初の方についてるコメントや最初のバージョンのパッチでは、hbox#browser（ブラウズ領域のコンテナ要素）に対してCSSでborderを設定してるんだよね。それで分からなくなった。何でわざわざ、ボーダーのためだけにXUL要素を増やしたのか。そこには何か理由があるんじゃないのか？　っていうかそもそも、この追加された要素に付いてるlayer="true"ってのは何なんだ？

と疑問に思ったので議論の流れを追ってみたら、Bug 590468 – Reduce size of chrome document layer due to status barという別のバグが参照されていた。layerという属性もこのバグのパッチで導入されたらしい。

そっちの議論を読んでみたところ、どうもこういうことらしかった。

1. ブラウザウィンドウのXULの要素ツリーは、（部分的に省略して要点を残すと）

   <vbox>
     <toolbox/>
     <hbox id="browser" style="background:transparent">
       <browser/>
     <hbox>
     <hbox id="browser-bottombox/>
   </vbox>

   となっている。
   • この時、hbox#browserは透明だが、toolboxとhbox#browser-bottomboxは不透明なので、結果的に、その上位のvbox要素はウィンドウ全体を覆う大きさの描画領域を持つ事になる。
   • browser（コンテンツ領域のインラインフレーム）の描画領域は、最上位のvboxの描画領域の上に載っかっている形になる。
   • そのため、例えばツールバー上の1箇所に変更があった時であっても、最上位のvboxの描画領域全体が再描画されて、その上に載っかっているコンテンツ領域の描画領域も再描画される、という無駄な処理が沢山行われてしまう。
   • それだけでなく、最上位のvboxの描画領域全体の情報を保持するために無駄にメモリを使う事になる。必要なのはtoolboxとhbox#browser-bottomboxの分のメモリだけで、hbox#browserの部分（完全に透明）のメモリは不要なのに。
2. この無駄をなくしてパフォーマンスを改善するためには、描画領域の大きさをもっと賢く計算する必要がある。この例だったら、「最上位のvboxの大きさの描画領域」ではなく、本当に必要な「toolboxの大きさの描画領域」と「hbox#browser-bottomboxの大きさの描画領域」という2つの最小限の領域を求めるようにしないといけない。
3. しかし、今それをやるには人的リソースが足りない。
4. なので次善の策として、「このXUL要素には専用に描画領域を割り当ててくれ」ということをGeckoの低レベル（よりネイティブ寄り）の描画処理に伝える方法として、XULにlayerという属性を導入する。
   • layer="true"が指定されたXUL要素は、強制的に専用の描画領域を持つようになる。
   • hbox#browser-bottomboxが専用の描画領域を持つようになった事で、最上位のvboxのために必要な描画領域はtoolboxの大きさだけで済むようになった（hbox#browserの部分が透明なので、その部分は描画領域が確保されなくなる）。
5. この変更によって、toolbox、コンテンツ領域、hbox#browser-bottomboxのそれぞれが、お互いに重なり合わない描画領域を形成するようになった。
   • ひいては、描画周りのパフォーマンスが向上した。

最近はWebGLとかどんどんネイティブ寄りの所に突っ込んでいってパフォーマンス改善に注力してるようなので、こういう事もまあ必要なんだろう。Firefox 4リリースが近くて大規模な変更を入れられる余裕が無いから、インテリジェントな判断が必要な所について、インテリジェントな判断のためのロジックを実装する代わりに、人力でインテリジェントな判断をあらかじめ下しておこう、という苦肉の策のようだ。

そこで最初の話に戻るんだけど、単純にhbox#browserにCSSでborderを設定してしまうと、こういう事が起こってしまうという指摘がなされたようだ。

1. hbox#browserのボックスが完全な透明ではなくなってしまう。
   • よって、最上位のvboxの描画領域がtoolbox＋hbox#browserの大きさに拡大されてしまう。
2. すると、描画領域がコンテンツ領域と重なる状態に戻ってしまう。
   • 描画周りのパフォーマンスが落ちてしまう。これじゃ元の木阿弥だ。
3. なので、hbox#browserにCSSのborderを設定するのは諦める。
4. 代わりに、hbox#browserの中・コンテンツ領域の前後にボーダーのためのボックスとしてvbox#browser-border-startとvbox#browser-border-endを追加して、さらにそれらをlayer="true"と指定する。
   • これで、toolboxとvbox#browser-border-startとvbox#browser-border-endとhbox#browser-bottomboxとコンテンツ領域のそれぞれが、重なり合わない描画領域を持つ状態になる。
   • よって、描画周りのパフォーマンス低下は起こらない。

Alice0775さんが「やっつけ仕事」と評した事について、僕は最初は単に「空divのようなボックスの使い方」についてだけ言っていたのだと思ったんだけど、このような背景事情を知って、それではなくて「インテリジェントな判断をするためのロジックを組むという真っ当なやり方をせずに、人力で解決する」というアドホックな対応の事をこそ「やっつけ仕事」と評されていたのだと、やっと悟ったわけです。

という風にlayer="true"が導入された背景を調べた事によって、アドオン作者も「Firefoxのウィンドウ内にXUL要素を追加すると、場合によっては最上位のvboxの描画領域が広がる事でパフォーマンスが低下してしまう」ということを意識しておかないといけないのだなあ、ということが分かった。ああ、もう、実に厄介な話だなあ……

タブを検索する機能が欲しい / How to search tabs? - Dec 08, 2010

Q

It would be nice if you could search the tabs.

タブを検索できるといいんですが……

A

Tab Filter or Search Tabs will help you.

Tab FilterかSearch Tabsを使ってみるとよいでしょう。