明日もデザインで食べていこう![02]Firefox待望の次期バージョン4/CSS3やHTML5機能実装を徹底解剖!
── 秋葉秀樹 ──

投稿:  著者:


みなさん、こんにちはーー。秋だと言うのになんだかちっとも涼しくならないここ大阪ですが全国の皆さん、お元気でしょうか? AKB......いや、秋葉秀樹です。まだまだ夏バテ対策は必要ですね。急に冷たい水を一気に飲むのは気をつけましょうっ!!

●Firefox4に搭載される予定のCSS3 transition

さて、前回からCSS3の機能紹介をしていましたが、ココに来てFirefox4のリリースが近い! というウワサを聞いたので、急遽、Firefox4(beta)は、どう変わるの? を一部ですが調べてみました。



前回は僕が自作したWebアプリ、とも言えないCSS3グラデーション生成サービスと、CSS3で可能なアニメーションについて、簡単に解説しました。ところが割とデベロッパーやクリエイターに使われているFirefox(バージョンは3.6)だと、アニメーションが効きません。「transition」が実装されてないんですね...。

では、Firefox4では? モジラのデベロッパーサイト「Firefox 4 for developers - MDC」にこんな記事が出てます。
< https://developer.mozilla.org/en/Firefox_4_for_developers#CSS
>
「New CSS transitions support is available in Firefox 4.」
新実装をフィーチャーしてお届け、って感じですね。
< http://www.mozilla.com/en-US/firefox/beta/technology/#feature-css
>
確かにtransitionがFirefox 4 betaから実装されていますね。

で、前回のサンプルをFirefox4ベータで試したところ見事に「ニョキっ」とボタンがCSSだけで拡大しました! 成功!
< http://akibahideki.com/digicre/case_02/ex02.html#img01
> (図1)
よかったです!!

●CSS3で画像を回転

前回では、CSS3のtransitionを使って拡大/縮小だけを取り上げましたが、回転も可能です。

拡大/縮小:scale
回転:rotate
せめてこれだけでも覚えるとよいでしょう。他にも平行四辺形に歪ませるskewや、一気に拡大/縮小や回転や位置を変更するmatrixというのがあるのですが、これを説明しだすと数学的な説明が必要になってくるので、割愛しましょう。

図2のCDの盤面にマウスを当ててください。
< http://akibahideki.com/digicre/case_02/ex02.html#img02
>
ソースコードは下記の通りですが、前回のscaleを使った動きが分かっていたら問題ないでしょう。

【HTMLコード】
<img id="disc" src="images/disc.png" alt="DISC">

【CSS3コード】
#disc{
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
}

#disc:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}

やっと動いた!!
Firefox4 betaでは「-moz-transition: 1s linear;」が働くので、ちゃんと回転します。「linear」は、前回「ease-out」だったところで、まっすぐな動きを意味します。すなわち、イージングはしない、始めも終わりも等速運動をする設定ですね。

ちなみに僕の環境だと、Safari5、Firefox4beta、Chrome6、Opera6でみ〜んな動いてくれました。このあたりの案件ベースに乗っけて使うには、IE9の正式リリースでどうなるか、期待したいところですね。

▼まとめ
CSS3のアニメーションや変形はFirefox4から(beta通りにリリースされたら)可能です!


●Operaが積極的に実装していたForm機能、Firefox4では?

< https://developer.mozilla.org/en/HTML/HTML5/Forms_in_HTML5
>
今までの(XHTML1やHTML4での)Form機能で、例えば未記入チェックとか、複数の添付ファイルをアップさせるとか、そのままの仕様では出来ませんでした。未記入チェックに関してはJavaScriptやサーバー側のCGI等によって判断をしないといけなかったり、日付を入力する時にカレンダーを表示させるときもJavaScript等の力を借りていました。

メールアドレスが正しく入力されているか、判断するにもプログラムが必要でした。これらのことがHTMLだけで出来るというフォーム機能。
OperaとFirefox4betaを比べると見た目的にも機能的にもかなり違いがあって、これからに期待ってとこです。
< http://akibahideki.com/digicre/case_02/ex02.html#img03
> (図3)

▼まとめ
フォームに関してはOperaがかなり実装を進めているけれど、策定中なため、かなり仕様が変更されるかもしれません。今のところブラウザ共通で使えるHTML5のフォームはまだまだ時間がかかりそうです。

●ライセンス完全フリーの動画コーデックに対するプロジェクト「WebM」をサポート

さらにHTML5の新機能、video要素に関する話題。このFirefox4(ベータですが)、特に僕の期待していたWebMがいよいよサポートされるとの事です。まあ、ベータなんで、100%喜べませんが、このWebMは動画のコーデックのライセンス料を無償で扱えるためのプロジェクトなんです。

例えば動画や音声って本来とっても重たくって、「圧縮」をしないとインターネットコンテンツとしては、なかなか使えないんです。だから、圧縮技術(コーデック)が色々出回って、代表的なモダンブラウザがVideo要素をサポートしたはいいけど、各ブラウザのコーデック対応がバラバラだったんです。

「だったらW3Cが、このコーデックにしろよ!」と言いたいところですが、そうも出来ない背景があったワケです。その大きな理由が「特許」だという人もいます。

現在モダンブラウザは大きく2つのコーデックをサポートしたりしなかったりしてます。その一つが「H.264」もうひとつが「Theora Ogg」というもの。(Theora Oggは「セオラ・オッグ」または「セオラ・アッグ」なんて色々発音されているようです)

それぞれに「特許」が絡んでいます。「いつ使用料を請求されるかわからないコーデック」を使うのはためらいますよね? Safariを開発しているAppleはH.264の特許保持企業なので、H.264をサポートしたがるのは当然うなずけますが、そんなの僕らにとってなんのメリットもないかと、今は思います。

そこで2010年5月のGoogle I/O基調講演で「オープンなコーデック」として発表された「WebM」というプロジェクト。当時はAdobe FlashやSkypeで実績のあるVP6という高品質なコーデックごと巨額で買収して、最近は進化したVP8という動画コーデックを提供するって話でした。特許料もいらない、誰でも自由に(ちょっとした規約はありますが)使える動画コーデックを支えるプロジェクトとして「WebM」が登場したわけです。

WebMが普及して欲しい、各ブラウザもサポートして欲しい! という願いが高まっています。普及しないと、一つの動画に複数のコーデックを使った動画を作らないといけないわけで、大変ですね。

H.264側は「今は無償で使っていいけど、その期間は2015年までだよ」と言っていたのですが、8月に「無償の動画コンテンツに関しては、コンテンツ提供者はライセンス料を払わなくていい」なんて言っています。きっとWebMに対抗する策ではないかと言われています。

▼まとめ
「WebM」はコーデックの正式な名前ではありません、プロジェクトの名前です。それはライセンスフリーで使用出来る動画フォーマットをまとめたプロジェクトで、今後期待されています。しかし、ライセンスフリーに関してはH.264も条件付きで名乗りを上げてきているので、またクロスブラウザが難しいかと思われます。

ではでは。Videoにまつわるお話はとても重要だと思っているので、またそのうちお話したいな、と思います。

【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>
テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。
HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。
Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。