kaourantin.net: Core Animation

Windowsユーザーの自分にはピンと来ないものの、どうやらMacでのFlashPlayerのパフォーマンスが（かなり？）向上するという話の様子。ということで、早速自分なりに意訳してみました。間違ってるところなどあるかもしれませんので、あくまで以下文章についての正確な内容は上記Tinic氏の元記事をご覧下さい。

2010年2月11日（木）

Core Animation

驚くべき事に、この一年でFlash Playerエンジニアリングチームには本当にたくさんの出来事があった。いろんな事を話したいのはやまやまだけど、この記事ではKevin Lynchが最近触れた内容、特にMacのパフォーマンスとCore Animationに関する彼のコメントについて掘り下げてみようと思う。いつもFlashに関する文脈の中でパフォーマンスについての言及があると多くの注目を集めてきたが、技術的な背景はしばしばPRの中（？）に失われてきた。

さて、Flash Player 10.1のCore Animationとはなんぞや？AppleがCore Animationについてまとめた文書があるので、それを見てみよう。

Core Animationとは高いパフォーマンスのcompositing engineと、簡単に使えるアニメーションプログラミングインターフェースとを統合したObjective-Cフレームワークのことである

なんだかFlashにバッチリ合いそうな感じでしょ？まさに、Flash Player 10.1は、このフレームワークの力を借りて、OS X上で動作するSafariや他のブラウザーが抱えているいくつかの技術的な問題に取り組もうとしているんだ。

The drawing model jungle on OS X

Core Animationを目指すより具体的な内容について触れる前に、OS Xで、プラグインがブラウザーウィンドウに描画を行う方法について簡単に見てみよう。Windowsでは一通りしかないのに対し、OS Xでは4通りもある。

1. QuickDraw。Operaや旧世代のFirefox, Safariでデフォルトモードとして使用される。
2. Quartz 2D（あるいは Core Graphics）。新しいFirefoxとSafariでサポートしている。
3. OpenGL。僕の知る限りまだこの方法をサポートしているブラウザーはない。
4. Core Animation。現在はOS X + Safari 4の組み合わせでのみ対応。さらに現在のバージョンでは警告が表示される。

これらの描画モデルの違いに加え、デザイナーはFlashコンテンツを埋め込むのに3種類の異なるwmodeを選択することができる。

1. Normal
2. Opaque
3. Transparent

Normalにすると、SWFの上にHTMLをオーバーラップして表示させる事はできなくなる。Opaqueだとそれができるようになり、TransparentにするとSWFが透過となり、その下にあるHTMLが表示されるようになる。これらの内容を考慮にいれた上で、それぞれのケースでどの描画モデルが使用されるのか（そして、Flash Player 10.1のリリース前に我々が変更しなければならない点）について示した、下記のような表を作った。

Flash Player 10.0:

	Safari 4	Firefox 3	Opera 10
Normal	Quartz 2D	QuickDraw	QuickDraw
Opaque	Quartz 2D	QuickDraw	QuickDraw
Transparent	Quartz 2D	QuickDraw	QuickDraw

Flash Player 10.1:

	Safari 4 (*)	Firefox 3	Opera 10
Normal	Core Animation	Quartz 2D	QuickDraw
Opaque	Quartz 2D(**)	Quartz 2D	QuickDraw
Transparent	Quartz 2D(**)	Quartz 2D	QuickDraw

(*)Core Animationのサポートが進行中のナイトリービルド版を使用。
(**)SWFがHTMLページのfront mostオブジェクトである時にはCore Animationが使われる。

Quartz 2Dについてはどうなる？

Quartz 2Dの基本的な前提については、Appleが次のように述べている：

Quartz 2DはiPhoneアプリケーションの開発と、カーネル外の全てのMac OS Xアプリケーション環境で利用可能な二次元描画エンジンである。Quartz 2Dはディスプレイや印刷デバイスに関係なく、unmatched output fidelityな（出力先の忠実度にマッチしない？）低レベルで軽量な2Dレンダリングを提供する。

Quartz 2Dは、アニメーションとか動画再生のようなマルチメディアアプリケーション向けにデザインされたものではない。それはOpenGL, Core Video, Core Animationの領域だ。SafariがHTMLコンテンツの描画にQuartz 2Dを使うのは、大体のケースではコンテンツが静的であることを考えると非常に合理的と言える。Flashが出てさえこなければみんなうまく行くんだ。例えば、Flash PlayerがQuartz 2D描画モデルを使ってSWFコンテンツを再生する場合、全面的にブラウザーが関与しなければならなくなる。イベントの流れはこんな感じ（Sharkでスタックトレースすることもできます）

1. 新しいフレームを表示する場合、Flash PlayerはNPN_InvalidateRectを使ってその領域の更新を要求する。
2. ブラウザーはFlash Playerから提供された矩形をそのdirty regionに追加する。
3. ブラウザーは描画リスト（HTML DOM）を検索し、dirty regionが含まれるノードを一つ一つ描画していく。
4. ブラウザーはFlash Playerインスタンスが含まれるノードを見つけると、まずHTMLの背景を描画する。次にFlash Playerに対して、要求された領域を直ちに描画することを伝えるイベントを投げかける。
5. Flash Playerはここでやっとフレームを描画する。

まあ今のところはそこそこ合理的だと思う。じゃあ技術的な問題とは何か？例えばページの背景にCSS gradientを用いたような、非常に込み入ったHTMLページを考えてみよう。そこに秒間30フレームで動作するSWFファイルを追加する。すると、Flash Playerではなく、ブラウザー側で非常に時間がかかるということがわかるだろう。ここでCore Animationが真価を発揮することになる：ステップ3と4が要らなくなるのだ（SWFが最前面に表示された最大の（？）オブジェクトである限り）。

Flash PlayerでのCore Animation

Flash Player 10.1では、この技術的な問題を解決するため、Core Animation描画モデルを実装した。Instead of using a CGImageRef + CGContextDrawImage to get the bits to screen we pass a CAOpenGLLayer to Safari and use an OpenGL texture of type GL_TEXTURE_RECTANGLE_ARB to get our bits to the screen.

Core Animation描画モデルのサポート自体はAppleからもたらされたもので、僕たちは両者にとってこの技術的な成果が完了できるよう、一生懸命取り組んだんだ。その通り！これはまさに、AppleとAdobeのエンジニアが合同で努力したものなんだ。SafariとCore Animationプラグインとのほぼ完全な統合を果たした今、Flash Playerの将来のバージョンでは、Open GLの能力をさらに活かせたらいいなと思っている。そして、それが特別なwmodeとかを設定しなくても済むようにと。I am pretty stoked about it.

2010年2月10日現在、皆さんに公開できるような安定した状態に近づいている。つまり、Flash Player10.1, OS X 10.6とSafariのアップデート版（あるいはナイトリービルドのWebKit）が必要になるだろう。それらが無い場合には何も見えないだろう。

一体どんな違いがあるの？

これがFlash Playerのパフォーマンス問題に関する万能薬だということはない。ただ、ブラウザー上でのより複雑なWEBコンテンツの体験を向上するという、より大きな目的に対する小さなステップだと言える。ここに、Flash Player 10.0 とFlash Player 10.1との比較が可能なテストケースを用意した（Safariでのみ動作）。これはあくまで極端なテストケースであるという事を忘れないようにね。

Flash Player 10.0 + nightly WebKit + OS X 10.6

Flash Player 10.1 + nightly WebKit + OS X 10.6

追伸：Core AnimationがCocoa APIだって気づいたかな？そう、Flash Player 10.1はついに真のCocoa appになったんだ（非CocoaのFirefoxやOperaをサポートするCarbon fallbackもついてるよ）。

object{
	outline:none;
}

Flashコンテンツのid（attributes.id）を指定していない場合

HTMLコンテナのidとして指定しているidに対して、CSSでoutline:none;を設定すると直ります。

例えば、SWFObject 2 HTML and JavaScript ジェネレーター v1.2で、サイズの指定を「100 x 100%」にして生成した下記のようなhtmlソースの場合。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta http-equiv="Content-Script-Type" content="text/javascript;" />
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
			var params = {};
			var attributes = {};
			swfobject.embedSWF("untitled.swf", "myAlternativeContent", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
		</script>
	</head>
	<body>
		<div id="myAlternativeContent">
			<a href="http://www.adobe.com/go/getflashplayer_jp">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	</body>
</html>

CSSで下記のように指定します。

#myAlternativeContent {
	outline:none;
}

Flashコンテンツのid（attributes.id）を指定している場合

outline:none;を使うのは一緒ですが、HTMLコンテンツのidに対してではなく、Flashコンテンツのid（attributes.id）に対してCSSを指定します。

例えば、下記のソースの場合：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta http-equiv="Content-Script-Type" content="text/javascript;" />
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
			var params = {};
			var attributes = {};
			attributes.id = "myFlashContent";
			swfobject.embedSWF("untitled.swf", "myAlternativeContent", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
		</script>
	</head>
	<body>
		<div id="myAlternativeContent">
			<a href="http://www.adobe.com/go/getflashplayer_jp">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	</body>
</html>

CSSは下記のように指定します。

#myFlashContent {
	outline:none;
}

SWFObject2のフォーラムでも取り上げられているけど、回答が着いてない模様。twitterでもつぶやいてる人がいたりもしたんだけど、肝心の解決策が見つからない・・・、と思った矢先、非常に参考になったのが下記の記事。

lancia desginlogue: [Flash] FireFox 3.6 の 親切の様な困った仕様対策(クリックでスクロール出ちゃうやつ)

Progressionの場合。
progression.cssの#flashcontent:focus に対して以下を追加！

outline:none;

で・・・いけました。

これだ！ということで、上記を参考に試行錯誤して、なんとか解決できました。よかった。

【追記】CSSでobject要素にoutline:none;を指定する

この問題、フルFlashに限った事ではないみたいですね。どうやらFirefox3.6から、SWFObject（など）でSWFを表示させている場合、SWFにフォーカスが移るとSWFの周囲に1ピクセルのドットが表示されるようになった、ということらしいです。実際、フルFlashでもなんでもない、HTMLページに普通に埋め込まれているFlashコンテンツをクリックしてみたところ、確かに周囲にドットが表示されました。

SWFObjectのFAQページに以下のような記述がありましたが、もしかしてこちらのほうがより有効かもしれませんね。

15.Windows版Firefox3でwmodeをtransparentかopaqueにした時、SWFの周囲に点線が表示されるのはなぜ？

（中略）下記のスタイルをページの頭で指定すると解決します。

<style type="text/css" media="screen">
	object{outline:none;}
</style>

「Firefox3.6で」っていう話ではないし、wmodeを変更した時限定のトピックですが、やってる事（要素の周囲のドットボーダーを消す）は一緒。実際、試してみましたが、この方法でもＯＫでした。

僕がこの話を知ったのは先日のHTML5 Tech Talk#3でのことです。このセミナーの中では、上記のようなHTML5の特性によって、ウェブサイト（ウェブページ）のファイルサイズが減少し、パフォーマンスの向上が見込まれる、という話がありました。

でもって、さっき見つけたのが下記の記事。

ページ表示が速いとグーグルで上位に表示されるように – 1/16～1/22のWeb担の記事まとめ | Web担当者Forum

こちらの記事は「まとめ記事」なんですが、実際に見だしとなっている内容が取り上げられているのは下記の記事。

Googleは平均ページ読み込み時間を順位決定に含める予定 – PubCon 2009より | Web担当者Forum

記事の後半で、下記のように述べられています。

ページ読込時間が検索順位の決定要因に

ランドの記事で触れられているように、ページ読込時間の重要性についてはグーグル関係者が何度か述べているし、カッツ氏自身もこのセッションで、

これまで検索順位の決定要因に速度は含まれていなかったが、将来的には含めることも考えている

と述べた。カッツ氏は、速度のチェック方法と高速化する方法に関して参考になるサイトをいくつか紹介してくれた。

• WebPagetest――URLを入力し、テストするページなどの設定オプションを選んで、テストしよう！
• Google Codeの「Let’s make the web faster」（ウェブ速度を高めよう）――サイトの速度向上のための方法いろいろ。
• Google Code Labsの「Closure Tools」――JavaScriptコンパイラ。

これらの情報から導き出されるのは、ちょっと極論かもしれませんが、下記のようなことでしょうか。

• 他の条件が同等だった場合、より軽いページが上位に表示されるようになる（可能性がある）。
• SEOの観点からしても、今後はページ容量が軽くなることがこれまで以上に重要となる。
• ページ容量の削減に貢献するHTML5の導入が遠からず必須となる。

HTML5の勉強を急がねばですね。