Flashを閃光のごとく高速化するための基礎知識：速いFlash/ActionScriptチューニング入門（1）（2/2 ページ）

» 2010年03月09日 00時00分公開

[河北啓史，チームラボ株式会社]

Flashチューニングが必要となる3つのパターン

　とはいえ、やみ雲にチェックをしても効率が悪いので、チューニングが必要なパターンを大まかに分けて当たりを付けるのがいいでしょう。考え方は人それぞれですが、筆者が考える大まかなパターンを以下に示します。

　大体このどれかのパターンに収まることが多いです。まずは、ざっくりと怪しい場所を見つけていきましょう。

【1】「だんだん重くなる」パターン

　放置し続けたり、操作を繰り返していくと、だんだんと処理が重くなっていくパターンです。主に参照上のゴミやGCの兼ね合いによって引き起こされます。想定ユーザー滞在時間によっては問題になりにくいですが、放置するとPCが固まるので。注意が必要です。

【2】「タイミングで重くなる」パターン

　操作時のアニメーションや、外部ファイルの読み込みの処理など、何らかのイベントが発生した際に重くなるパターンです。トリガが明確であるため、最も当たりを付けやすいパターンといえます。

【3】「常に重い」パターン

　インタラクションに関係なく、常に重くフレームレートが低くなってしまうパターンです。カメラインタラクションや動画、アニメーションの処理など、TimerクラスやENTER_FRAMEイベントを用いた処理が原因である可能性が高いです。

注意！　「重いのは、本当にFlashか？」

処理負荷の高い場所に当たりが付いたら、「早速Flashを修正して……」といきそうになりますが、もう少しだけ待ってください。Flashは、基本的にWebブラウザ上で実行されます。そのため、JavaScriptの処理やほかのリクエスト処理とかち合うと、極端に重くなる可能性があるためです。

特に、ExternalInterfaceクラスやAjaxを同時に実行しているようなWebサイトの場合は、重いのはFlash以外の処理である可能性も視野に入れておいた方がいいでしょう。

「総合的にチェックをした結果、やはりFlashが重いようだ」となって初めて、細かくFlashの実装を見直していくことも、全体の品質を上げるという意味で大事なチューニングといえます。

重い処理をピンポイントで探るコーディングテクの一例

　処理負荷が高そうな場所に当たりが付いたら、どのシンタックスにどの程度時間がかかっているかを細かく調べます。その際に、ピンポイントで処理時間を調べる方法として、trace関数とgetTimer関数を使うのが最も簡単です。

　例えば、for文の処理時間を調べる場合には、以下のように記述します。

// 現在時刻のタイマーを取得
var now:Number = getTimer();
// 1 から 1000000 までの合計値を計算する
var total = 0;
for( var i = 1; i < 1000000; i++ ){
   total += i;
}
// 処理にどの程度かかったかを調べる
trace( getTimer() - now );

for文の処理時間を調べるFlashサンプルのコード

　前述のFlex Builder（Flash Builder）やFlash IDE（Flash Professional）などの開発環境／オーサリングツールを持っている読者は、上記のコードをコピーして実行してみてください。処理に何ミリ秒かかったかをこれで知ることができます。

for文の処理時間を調べるFlashサンプル

　マシンパワーが高すぎると、「0」と表示されるかもしれませんが、その際には再帰回数を100万回から1000万回に増やすなどして試してみてください。

　また、この処理は「チューニングによって、どの程度の速度改善がされたか」を調べる方法としても有用です。

また注意！　「Flash Playerの種類・バージョンも考慮せよ」

実行速度は、マシンパワーだけでなく、Flash Playerの種類（デバッグ版など）やバージョンによっても異なります。

必ず、想定されるバージョンのFlash Playerを使って最終チェックをしましょう。

ActionScriptチューニングにおける改善点

　重そうな処理を発見したら、次は重い原因を探ります。

処理順序
型
変数や関数へのアクセス頻度
キャッシュ処理
通信の処理タイミング
イベント処理
アルゴリズム

　などなど、チェックすべき点は多岐にわたります。

型1つで処理時間が10倍以上変わってしまう

　例えば、前述のfor文の処理に関していえば、型が指定されていないことが遅い原因として考えられるので、型を設定してあげるだけで劇的に早くなります。

var now:Number = getTimer();
// total の型を uint にする.
var total:uint = 0;
// i の型を uint にする.
for( var i:uint = 1; i < 1000000; i++ ){
   total += i;
}
trace( getTimer() - now );

for文の処理時間を調べるFlashサンプルに型指定を加えたサンプル

for文の処理時間を調べるFlashサンプルに型指定を加えたサンプル

　この処理だけで、筆者の環境では、400msが30msまで高速化されました。「型を適切に指定してあげるかあげないか」、この違いだけで10倍以上の速度差が出てしまいます。

　なぜここまで差が出るかを正確に説明しようとすると、型解決・型推論といった比較的専門的な話を含むので、ここでは詳細は割愛します。

　例えば、仕分け作業をお願いされたときに、「開けるまで中身が分からないもの」と「中身が書いてあるもの」だったら、後者の方が作業は格段に楽ですよね、そんなイメージです。

　スクリプト言語での開発に慣れてしまうと、型を正確に書くことを忘れがちですが型1つでここまで処理時間が変わってしまうことは、理解しておいて損はないでしょう。

速度チェックができるアプリを試そう

　参考までに、実際に速度チェックができるアプリケーションを作るためのテンプレートを「wonderfl」（面白法人カヤックが運営する、Flashアプリを作ることのできるオンラインサービス）にて作成しましたので、興味がある方は以下を実行してみてください。

Template for Performance Check - wonderfl build flash online

　テンプレートのため、このまま実行しても意味が分からないと思います。上記リンクから「wonderfl」のサイトに行くと、コードを確認できます。「wonderfl」のアカウントをお持ちでしたら、このテンプレートを基に、計測するコードを埋め込むようにFORK（コードの改編）して、色々な処理の時間を試してみてはいかがでしょうか。

　また、今日紹介したサンプルFlashアプリのように実行速度を計測できるプログラムサンプルが、「wonderfl」にもポストしてありますので、興味がある方はご覧ください。

まだまだ初歩の初歩、次回から役立つテク満載！

　いかがだったでしょうか。普段からデバッグやチューニングをされている方には、少々物足りなかったかもしれません。次回以降は、重くなりやすい処理の実例を挙げながら「なぜ重いのか」「複合的な要因があるか」「より軽くなる方法が存在するか」「どの程度効果があるか」を具体的に解説していく予定です。

　次回は、MovieClip関連の処理に関して、もろもろ解説できればと考えています。これからの連載もよろしくお願いします。

＠IT関連記事

作って学ぶAIRウィジェットの基礎→応用
最近よく聞くAdobe AIRって何だっけ？ウィジェットを簡単に作れるらしいけど…… と曖昧な知識のあなたに贈る超入門連載。楽しいサンプルを作って基礎から応用まで学ぼう

現場で使えるFlex実践テクニック
本連載では、Flex開発で基本となる特徴的な機能から一歩進んで、実開発の現場でよく使われるテクニックについて、より実践的に解説します

画像とコードの触媒Flash Catalystについて語りますと
WebとUIをつなぐトリックスター（3）　先月発表があったアドビの新ツールFlash CatalystとFlex Builder 4を実際に使ってみた。その感想とアドビ社員たちが語ったことを紹介しよう
デザインハック＜リッチクライアント 2008/12/26

Flash CS5のiPhoneアプリ変換機能は無駄にならない
D89クリップ（15）　Flash CS5製とiPhone SDK製のアプリの違いや、Flash Lite 4.0などFlashプラットフォームのモバイル対応について、Flashのエバンジェリストに聞いた
デザインハック＜リッチクライアント 2009/12/24