シリーズ妄想 (1) - アップルはWebKitをFlash対抗プラットフォームに進化させようとしているのか

こんにちは。ひさしぶりすぎて自分のブログなのに人のブログを更新しているかのような妙な違和感を覚えていますががちゃんと生きています。先週半ばくらいまでちょっと忙しくて更新の時間や気力をなかなか捻出できずにいたのですが、今週はなぜか水を打ったように静か。いろいろネタは溜まるばかりでアウトプット出来ていませんでしたが、またマイペースに書いていきたいと思います。

で復帰後初のエントリーはというと、これが勢いだけで書いてしまった相当妄想気味な内容です。名付けて「シリーズ妄想」、第1回のテーマは冒頭で若干触れましたが、アップルが密かに推し進めているかもしれないというWebKitまわりの野望について。

高度なアニメーションをサポートしつつあるCSS

Safari 4を既に試された方はすでにご存知だと思いますが、このムービーはSafari 4の初回起動時に表示されるWelcomeページのアニメーションをキャプチャしたものです。Windows版では初回起動時にスタートページが表示され、Welcomeページへアクセスすると僕の環境ではSafari 4がフリーズしてしまったので、いまのところMac版のみの対応なのですかね。

実際にこのページを見てみて、あるいはVimeoのこのムービーをご覧になっていかがでしょうか？真っ先にFlashによる演出だと思われた方は、残念ながらハズレです。アップルは自社サイトに自社テクノロジーではないFlashを滅多なことでは採用しない傾向にあります。それを良くご存知の方は、ではお得意のQuickTimeムービーだよねと判断されたと思いますが、惜しいですが今回はそれもちょっと違うのです。

このムービーに見えるWelcomeページの正体は、HTML 5でマークアップされたFlashでもQuickTimeでもないページで、アニメーションはなんとCSSで定義されています。みなさんがムービーとして認識していたほとんどの動きはCSSで制御された単なる複数枚の「画像」で、本当にムービーなのはSafariアイコンのコンパスの針の動き（QuickTimeムービー, .mov）だけなんですね。サウンドもMP4ファイルをHTML上で読み込んでいるにすぎません。

ソースコードを覗いてみると、HTMLとCSSはそれぞれ以下の様にマークアップされています。

CSSソース中に“-webkit” の接頭詞が付いた見慣れないセレクタやプロパティが多数あることに気づかれましたでしょうか。実はこれらはすべてSafariのレンダリングエンジンである「WebKit」がCSS 3で採用した独自拡張になります。Safari 3の旧版WebKitにもいくつかは実装されていましたが、最新版のWebKitではさらにその拡張が進んだようで、その証拠にSafari 3ではWelcomeページを開いてもこのアニメーションは再生されません。

ここでは詳しくは解説しませんが、例えばWelcomeページにアクセスして一番初めに表示されるアップルロゴのアニメーションは

@-webkit-keyframes apple-icon {
	from {
		opacity: 0;
		-webkit-transform: scale(3);
		-webkit-animation-timing-function: ease-out;
	}
	22% {
		opacity: 1;
		-webkit-transform: scale(1.1);
		-webkit-animation-timing-function: linear;
	}
	30% {
		opacity: 1;
		-webkit-transform: scale(1);
		-webkit-animation-timing-function: linear;
	}
	82% {
		opacity: 1;
		-webkit-transform: scale(0.92);
		-webkit-animation-timing-function: ease-out;
	}
	to {
		opacity: 0;
		-webkit-transform: scale(0.2);
		-webkit-animation-timing-function: ease-in;
	}
}

body.go #apple div.icon {
	-webkit-animation-name: apple-icon;
}

のように記述され、キーフレームごとの透明度・スケール（拡大率）・イージング（加速度）などアニメーションの設定がCSSで細かく定義されていることが分かります。そしてアニメーション再生のタイミングについても -webkit-animation-delay と -webkit-animation-duration プロパティによってやはり厳密に定義されています。Safariアイコンの針の動きは前述した通りムービーなのですが、その透明度やスケールはやはりCSSで制御されている。

こうした複雑なCSSとサウンドとの同期により、Safari 4のWelcomeページはFlashやQuickTimeによるムービーと見まがうかのような高度なアニメーションを実現しているわけです。なんとなく存在は把握していたものの、ここまでWebKitの独自拡張が進んでいるとは思っておらず、これに気づいた時は正直驚かされました。

WebKit

Webの制作者という目線で見れば、静的でしかなかったCSSの表現力が増すのは好ましい、というよりワクワクする部分でもあります。しかし対応したブラウザがほとんど無いような技術を直ぐにクライアントワークに活かすことはできません。今踏まえておくべきは、これはSafariではなくしつこいようですがそのレンダリングエンジンである「WebKit」の独自拡張であるということ。

実はWebKitをレンダリングエンジンに採用しているブラウザは意外に多く、Safari (Mac/Windows)のほかSiira, OminiWeb, Sunrise, Stainless, iCab, Lunascape（レンダリングエンジンとしてWebKitを選択可能）、そしてMac版はまだリリースされていないものの採用は決まっているGoogle Chrome (Mac/Windows)が挙げられます。今後のアップデートでこうした兄弟ブラウザもいずれはSafari 4と同等の機能をもったWebKitを採用してくることが予想されますので、今後Safari 4のWelcomeページのようにCSSによるアニメーションを表示できる環境は増えてくることになります。

ただし問題は市場シェア。現在はブラウザ戦争の真っ只中と言えますが、IE (Internet Explorer)がどんどんシェアを低下させている一方でFirefoxとともにSafariはそのシェアを拡大させ続けています。とは言ってもSafariのシェアは8.29%（2009年1月）で、先に挙げた「WebKitを採用するブラウザ」というくくりで見ても合計でおそらく10%程度ですね。確かに多くはありません。しかし勢力として無視できない数値ではあります。

IEに次ぐ第2勢力であるFirefoxは現在Geckoという独自のレンダリングエンジンを採用しているのですが、FirefoxがWebKitへ乗り換える可能性は無いと思いますが、実はこのGeckoもWebKit同様 “-moz” で始まるCSSの独自拡張を実装しています。根拠はありませんが、お互い独自拡張で仕様の混乱を招くことは避けたいはず、双方のCSS独自拡張が今後統合される可能性を全面的に否定することはできません。もしそうなった場合、WebKit/Gecko陣営ともCSSによるアニメーションをサポートすることになりますね。

とまぁここまではPCプラットフォームでの話で、お気づきかもしれませんが一切モバイルプラットフォームに触れていない。そしてこのモバイルプラットフォームこそがアップルの壮大な野望を実行に移す舞台となるかもしれません。

WebKitがモバイルプラットフォームを席捲する

ではモバイルプラットフォーム（特にスマートフォン）においてWebKitのシェアはいかがなものか。ここからが面白い。

WebKitをレンダリングエンジンに採用するモバイル向けブラウザとして筆頭にあげるべきはやはり、iPhoneとiPod touch（以降単にiPhoneとする）に搭載されているSafariです。iPhoneにおいてSafariは唯一のブラウザ^※1であり、故にWebKitのシェアは100%ということになる。

またオープンソース・プラットフォームとして話題に上っているGoogleのAndroidも “Chrome Lite” と呼ばれるデフォルトブラウザでWebKitを採用しており、Windows Mobile OSで人気のIris BrowserもまたWebKitだ。

そしてABI Researchによる報告によれば、モバイルプラットフォームで世界1位に君臨するNokiaのシェアは38.6%にも上り2位のSamsungを大きく引き離す圧倒的なシェアを誇っている。そのNokiaが多くの端末に搭載するOSはNokia自身が開発し後にオープンソース化したSymbianで、デフォルトブラウザに採用している レンダリングエンジンは“S60WebKit”。その名の通りWebKitがベースとなったものです。さらに、だ。世界市場シェア残りの4強（Samsung〈2位〉, Motorola〈3位〉, Sony Erricsson〈4位〉, LG〈5位〉）のうちSony Erricssonを除く3社もまたWebKit陣営であると言ったら驚きませんか？

PCにおいてもWebKitはじわじわと勢力を伸ばしつつあるように思いますが、モバイルプラットフォームにおいてはその台頭っぷりがめざましい。このあたりの詳しい解説は林信行さんによるこちらのコラムが興味深いです。

以上を踏まえて、WebKit最新版におけるCSS独自拡張の話に戻るとします。もしもSafari 4に採用されたように、この最新版のWebKitがサポートする仕様がシェアが爆発的に拡大しつつあるモバイルプラットフォームにも浸透したら？CSSによるアニメーションが世界中の多くのモバイル端末上で再生可能な状況となります。そして、もう既にその一歩が踏み出されている。

iPhoneはSafari 4よりも先にCSSアニメーションをサポートしていた

驚くことにiPhoneのSafariにはMac版Safari 4の登場よりも先行して、最新版WebKitでサポートされているCSS独自拡張が実装されていたことが分かりました。iPhoneをお持ちの方はぜひSafari 4のWelcomeページ（http://www.apple.com/safari/welcome/）にいますぐアクセスして、ページを見てみて欲しい。

いかがですか？サウンドとSafariアイコンのムービーは再生されないものの、CSSで定義された部分のアニメーションはちゃんと動くことが分かったと思います。しかもGPUによるレンダリングのためかSafari 4に見劣りしない非常に滑らかな描画がされたはずです。Flashではなく、CSSで。

iPhoneに不足している機能としてFlashは非常に良く挙げられるものの一つです。ところがユーザーから常に要望としてあり、Adobeも必至にラブコールを送り続けているにも関わらず依然としてアップルがFlash搭載に消極的なのは何故か。表向きにはジョブズの口によりいくつかの理由が語られていますが、本当のところはアップルがAppStoreで構築したエコシステムの崩壊を怖れているからに他ならないと思います。一部ではiPhone用のFlashが開発されているという報道もありましたが、具体的にはいまだ聞こえてきておらず、Flashの採用はアップルのビジネスモデルにとって非常にデリケートな問題であり続けている。

とはいえ、アップルとしてもFlashの様なリッチな表現力がiPhoneに必要であると考えている。でもFlashは怖いのでそれならばFlash以外で実現させてしまおうという一つの回答が、このWebKitのCSS独自拡張かもしれません。

CSS + JavaScriptベースのアニメーション・オーサリングツールがアップルから登場!?

WebKitのCSS独自拡張によりCSSを使ってiPhone上でもアニメーションの描画が可能となりました（なっていました）。とは言うものの、Flashの表現力にはまだまだ遠く及びません。しかしこのままWebKitが進化を遂げていけばCSSにさらなるセレクタやプロパティが追加され表現力が向上する可能性が見込まれますし、またJavaScriptの力を借りればFlashのようなイベント処理のほかサウンドやムービーなどリッチメディアの制御も十分可能と考えられます。JavaScriptによるDOM操作でCSSを書き換えることが出来るわけですから、現状でもSafari 4のWelcomeページを超えるアニメーションの制作は可能なのでしょう。

しかしながら。ソースコードを紐解いていけば理解できなくはないですが、複雑なアニメーションをCSSで記述する作業というのはかなり非直感的すぎる。自分が全く慣れていないせいもありますが、Flashならタイムライン上でサクッとオーサリング出来てしまうようなアニメーションをCSSで書くというのはかなり骨折りなことです。

そこで、ピンときた。アップルはWebKitで動作するCSS + JavaScriptによるアニメーションを制作するためのオーサリングツール、つまりGUIでインタラクティブなアニメーションを組むことが出来てそれをCSSとJavaScriptに書き出し可能ななんらかのツールを開発する気ではないのか、と。

前述したようにモバイルプラットフォームでWebKitが市場を席捲することになったとして、そうしたツールさえあればWebKitそのものがFlashに取って代わりスタンダードな存在になる可能性が無きにしもあらず。いや、市場席巻の前にまもなくiPhone用にそうしたツールが登場してもおかしくないのではという気さえしてきました。そのツールで制作したものは当然PCプラットフォームにおけるWebKit搭載ブラウザでも動作することになりますから、PCプラットフォームでのシェアの動向によってはそちらでも大きなポジションを占めるようになるかもしれません。

...といろいろ書きましたが、つい先日スマートフォン向けのFlash Player 10が発表になったりとAdobeは具体的な動きをみせており、iPhoneにFlashが載るかは別問題としてモバイルプラットフォームでは全くもってFlashの方が有利であることに変わりはありません。

大人な事情の部分に折り合いがつきさえすれば明日にでもiPhone用のFlash Playerがリリースされたとしてもおかしくありませんしそちらの方が現実的ですので、そうなったら笑ってやってください。

HTMLもCSSも着実に進化

というわけで色々と妄想がひろがりんぐしてかなり突拍子もない話を展開してしまいましたが、なにしろ「シリーズ妄想」ですので。

しかし妄想でないのは、Safari 4はHTMLとCSSが次の段階へと進んだことを示す具体例であること。上で述べたアニメーションに関してはWebKitの独自拡張でありますが、Safari 4は2010年には勧告予定となるCSS 3のプロパティを先行して数多く実装しているブラウザであり、同様に2010年勧告予定で現在はドラフト段階のHTML 5をフルサポートするブラウザでもあります。

HTML 5・CSS 3の実装が進むのは勧告後に正式対応した各ブラウザが出揃ってからかな...くらいに考えていたのですが、なんとアップルのSafari 4ページは既にHTML 5でマークアップされていますよ！

HTML 5は非対応のブラウザでも最低限表示できるように明示的に設計されているため、まぁ先行で実装を行うサイトが現れてもおかしく無いとは思っていましたが、自分の中でまだまだ実験的と思い込んでいたものがアップルのような大企業のページで普通に使われだしていることにびっくり。

というわけでようやく「そこそこ出来ます。」と言えるようになったHTMLとCSSもあやしくなってきた。泣ける。。特定の分野のエキスパートになるという道もあるけれど、でもマルチに動きたいという自分自身の希望もあって色々と技術や知識を身につけて多くのことを経験しようと努めておりますが、正直あっぷあっぷな情勢になってまいりました。今年は不況の上そんなわけでマジで旅行とかノホホンと休んでる場合じゃないかもと恐れを抱く、2009年早春。