Flashを閃光のごとく高速化するための基礎知識：速いFlash/ActionScriptチューニング入門（1）（2/2 ページ）
Flash/ActionScriptチューニングの基礎知識から実践的テクニックまでを紹介する連載。読みながら試せるオンライン・サンプルもあります。Adobe AIR/Flexにも応用可能です
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 );
前述のFlex Builder（Flash Builder）やFlash IDE（Flash Professional）などの開発環境／オーサリングツールを持っている読者は、上記のコードをコピーして実行してみてください。処理に何ミリ秒かかったかをこれで知ることができます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
マシンパワーが高すぎると、「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 );
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
この処理だけで、筆者の環境では、400msが30msまで高速化されました。「型を適切に指定してあげるかあげないか」、この違いだけで10倍以上の速度差が出てしまいます。
なぜここまで差が出るかを正確に説明しようとすると、型解決・型推論といった比較的専門的な話を含むので、ここでは詳細は割愛します。
例えば、仕分け作業をお願いされたときに、「開けるまで中身が分からないもの」と「中身が書いてあるもの」だったら、後者の方が作業は格段に楽ですよね、そんなイメージです。
スクリプト言語での開発に慣れてしまうと、型を正確に書くことを忘れがちですが型1つでここまで処理時間が変わってしまうことは、理解しておいて損はないでしょう。
速度チェックができるアプリを試そう
参考までに、実際に速度チェックができるアプリケーションを作るためのテンプレートを「wonderfl」（面白法人カヤックが運営する、Flashアプリを作ることのできるオンラインサービス）にて作成しましたので、興味がある方は以下を実行してみてください。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
テンプレートのため、このまま実行しても意味が分からないと思います。上記リンクから「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
WebデザイナのためのHTMLチューニング入門
Webサイトを見た人の印象を良くするのか悪くするのかには“速度”が大きくかかわってきます。FirefoxのプラグインYSlowで測る7つの計測ポイントから“速い” HTMLの書き方を学びましょう
「デザインハック」コーナー
著者紹介
河北 啓史（かわきた ひろふみ）
WebサイトのHTML/CSS/Flash/JavaScriptといったフロント部分の開発やUI制作のディレクションを担当。現在は、UI検証のためのプロトタイプ作りや実験的なUIのモックアップ作成といった細かいものから、「サグールテレビ」のような大規模のFlashプロジェクトまで幅広く担当している
Copyright © ITmedia, Inc. All Rights Reserved.