近況報告たまに18歳未満の人や心臓の弱い人にはお勧めできない情報が含まれることもあるかもしれない、甘くなくて酸っぱくてしょっぱいチラシの裏。RSSによる簡単な更新情報を利用したりすると、ハッピーになるかも知れませんしそうでないかも知れません。動向はもえじら組ブログで。日経LinuxにてLinuxの基礎?を紹介する漫画「シス管系女子」を連載させていただいています。12.0a1で盛大にぶっ壊れてた。原因は、CSS3のborder-imageの先行実装である-moz-border-imageの仕様が変わったせいだった。当初の実装では、-moz-border-imageはこんな風に書くようになってた。stretch;「Metal」の場合、右の辺だけ5ピクセル幅でそれ以外の辺は10ピクセル幅という事にしていた。書くと、「タブの内容」の周囲に「10ピクセル幅の枠線」が付くことになるので、タブの高さが上下合わせて20ピクセル広がってしまう。10px;という感じでネガティブマージンとそれを相殺するパディングを指定して、枠線とタブの内容を重ねることでタブの大きさをそれほど大きく変えないようにしていた。それが、Nightlyではこんな事になってしまってた。新しいborder-imageの仕様に合わせて実装が変わったということなのか、「タブの内容の周囲に10ピクセル幅の枠線が付」いても、その分ボックスの大きさが広がるという事が無くなったようだ。かかわらずネガティブマージンを適用していたがために、今度は逆にタブの高さが上下合計で20ピクセルも小さくなってしまって、このスクリーンショットのように極細なタブになってしまっていた......という事だった。そこで、とりあえずネガティブマージンの指定を外してみたところ、タブの高さが変になる現象は改善された。今度はborder-imageに指定した画像の真ん中が抜けてしまう(今までは画像の中央部分が拡大されて背景画像代わりになっていた)という、また別の現象が起こっていた。最初は「バグか?」と思ったんだけど、Firefox自身の既定のスタイルシートでどう使われてるのかソースコードを調べてみたら、理由が分かった。以下の例のように、「fill」というキーワードを明示的に書かないと真ん中の部分は埋められないようになったということのようだった。497995で行われたもので、提案されてる最新の仕様が変わったので書き方も変えましょう、という話なんだけど、アドオンで古いバージョンのFirefoxにも対応させてる場合はそうもいかないんだよね。10ベースで、そっちは古い仕様に基づいた実装のまま出回っちゃうわけです。12でタブの真ん中が透明になってしまうし......あちらを立てればこちらが立たずの典型だ。ネガティブマージンを使ってる部分はいかにもハック的だから、別のファイルに分けてchrome.manifestで条件付きのディレクティブで読み込ませるのもいいと思うんだけど、fillキーワードの方はそれはちょっと気が進まなかった。4文字のためにファイル分けるなんて、メンテナンスコストの増え方と得られる効果が割に合わない気がした。Inspectorで見てみたら見慣れない「-moz-border-image-なんちゃら」系のプロパティがいくつも表示されてた)ということが、解決の糸口になった。10にとっては-moz-border-image-sliceは未知のプロパティなので、古い環境では2行目は無視される)ということだ。Transitionsで書き直してみるにあたり、自分で書いてみるまでよく分からんかったので、理解している内容をまとめてみることにした。Transitionsのフルスペックの説明でもないし、「こんなことができるぜすげーだろ!」というデモでもない。現実的にどういう場面でどういう風に使う事ができるのか、という事を淡々と述べます。Transitionsを理解するための手助けになれれば幸いです。主な用途マージンや色などの値を数値で表せるプロパティや、画像を表示する系のプロパティなどについて、スクリプトあるいは:hoverなどの疑似クラスによって動的に値が変化するようにしている場面で、元の状態と新しい状態の間をなめらかに変化させるようにする。50px;}メニュー項目の例1(hoverで右に動きます)メニュー項目の例2(hoverで右に動きます)メニュー項目の例3(hoverで右に動きます)この例では、分かりやすくするために敢えて指定を分けて書いている。ここでは以下のようなことが起こっている。0;が適用されている。:hoverの状態になると、margin-leftが50pxになるようにアニメーションが始まる。:hoverの状態が解除されると、margin-leftが0になるようにアニメーションが始まる。何ができる?CSSだけでやれる範囲でいうと、上記のサンプルのように「:hoverになった時にぽわーんとなめらかに出てきて、:hoverが解除されたらぽわーんとなめらかに引っ込む」ようなGUI要素をスクリプト無しで書けるようになる、という所に意義がある。例を挙げると、以下のような物が該当するだろう。:hoverの時だけ出っ張るメニュー項目が、なめらかに出っ張る/引っ込むようになる、とか。:hoverすると色が変わるボタンが、「じわっ......」と色が変わるようになる、とか。:hoverで影が付く時に、「じわっ......」と影が濃くなる、とか。メニューが透明な状態から「じわっ......」と表示されていく、とか。アイコンが90°回転する時に回転がなめらかになる、とか。スクリプトと組み合わせて使う場合、トゥイーンのための実装が要らなくなる(ネイティブ実装に任せてしまえる)というのが多分最大のメリット。ポジショニングやマージンの調整で要素の表示位置を変える時、単に新しい値(=アニメーションの終了時点の値)を設定するだけでトゥイーンしてくれる。CSSで初期値とdurationとイージング関数を指定しておいて、スクリプトで終了値だけを動的に指定する、という使い方。CSSのクラスセレクタであらかじめいくつかの終了値のセットを定義しておいて、スクリプトでclassNameを書き換えて終了値を間接的に指定する、という使い方。タイマーの管理が不要になるので、複数のアニメーションを同時に走らせる場合、アニメーションが全体的に軽くなると思われる。前のアニメーションが行われている間にまた値を変更した場合、現在の時点の値からの変化になる。アニメーションの中断と再開のための面倒なコードは不要。margin-leftが0であったのを、20pxを設定してアニメーションが始まり、20pxに向けて変化していっている最中の10pxの時点でmargin-leftを0に再設定した場合、前のアニメーションが中断されて、新たに10pxから0に向けて変化するアニメーションが始まる事になる。スクリプトでも動的疑似クラスでも。Glass有効時のネイティブアプリのボタンみたいな物をWebに簡単に持ち込めるようにする」「GUIの端々にほんのちょっとだけ小粋なアニメーション効果を加えたい時に、スクリプトを書かなくてもよくなる」という話ですね。Transitionsを理解しやすいと思います。Transitionsの仕事ではない。アニメーションと連動したスクリプトの複雑な制御。Eventsのイベントリスナで捕捉可能なtransitionendイベント(WebKitではwebKitTransitionEnd)が発行されるので、アニメーションの終了だけは検知できる。それ以外のタイミングではイベントは発行されない(アニメーションが始まったかどうかも分からない)。無限に繰り返すアニメーション。ループするアニメーションのデモではスクリプトと組み合わせていて、transitionendイベントを使ってその都度新しい「アニメーション終了時点の値」を設定し直してやることで、アニメーションを繰り返している。Transitionsだけではループはできない。どんなプロパティでもアニメーションできるわけではない。Draft)にアニメーションできるプロパティの一覧がある。アニメーションが始まるまでの遅延(省略すると0);これで1セットと考えると分かりやすい。Unitsの時間の値で指定する。250ミリ秒で完了させたい時は250ms(ミリ秒単位)または0.25s(秒単位)と書く。アニメーションが始まるまでの遅延も同様。イージング関数(値の変化の仕方)には、以下のいずれかを指定できる。linear等速直線運動的な変化ease-in最初はゆっくり、最後にいくにつれて激しく変化ease-out最初は激しく、最後にいくにつれてゆっくり変化easeゆっくり始まって、途中で最高速になり、最後はまたゆっくり変化ease-in-outeaseをもう少しきびきびさせたような感じcubic-bezier()ベジェ曲線でアニメーションの変化の仕方を指定linearease-inease-outeaseease-in-outcubic-bezier(0,1,1,0)cubic-bezier(0,0.2,1,0.5)現状ではまだ仕様が固まっていなくてどのベンダも先行実装の段階なので、ベンダープレフィクス付きの指定を書いてやらないといけない。TransitionsがRecommendationになったら、ベンダープレフィクス無しの記述だけでいけるようになるはず。Dayという日だそうなので、このサイトもCSSを無効化してみました。HTMLの方を書き換えるのがめんどくさかったので、スタイルシートの方を空のファイルに入れ換えただけですが。フィードリーダで見てる人には違いが分からない罠。このサイトで何故スタイルが無効になっているのかについて詳しい理由を知りたければ、年に一度のCSS素っ裸デーのサイトを見るがいいYO!)普段何気なくスルーしているスタイルシートを敢えて無効にすることによってWeb標準技術というものをプロモートする、というのがこのイベントの趣旨だそうです。