連載
» 2013年07月29日 17時30分 UPDATE

無料でCreative Cloudを使い倒せ(8):Flash+ScoutによるWebアプリチューニング (2/2)

[廣畑大雅,taiga.jp, クラスメソッド株式会社]
前のページへ 1|2       

FlexアプリケーションをScoutでプロファイリング

 「Telemetry未使用のコンテンツに対してもScoutがそれなりに使用できる」ということは、ActionScript 2.0以前のコンテンツや、Flexアプリケーションも対象になるということです。筆者が以前作成したPixelBender+Flex 4を使用したアプリケーションを実際にプロファイリングしてみます(Flash Builder 4.7サンプルアプリケーション:PixelBenderSample.fxpが必要となります)。

 事前にScoutを立ち上げておき、Flash Builderにサンプルファイルをインポートしたら、早速ビルドしてデバッグしてみましょう。アプリケーション画面が表示されたときには、Scoutがすでにセッションを構築しているはずです(図910)。

 アプリケーションが起動したら、Webブラウザを閉じるかScoutが検知したSWFのセッションを停止します。

09.png 図9:PixelBenderSample
10.png 図10:サンプル実行直後のScoutの状態

 サンプルのセッションを停止した後、図10を見ると、最初の6フレームに黄色の棒グラフが密集していることに気付くと思います。Flex 4のアプリケーションは、実行直後にFlexフレームワークの初期化や、いくつかのランタイム共有ライブラリ(RSL)をダウンロードするというデフォルトの処理が行われるのですが、それらが実行されているのが、グラフから確認できます。

 「概要」パネルの「SWF処理」のフレーム時間をクリックすると、フォーカスされます(図11)。

11.png 図11:「概要」パネルの「SWF処理」にフォーカス

 「SWF処理」(フォーカスされたアクティブな項目)を再度クリックすることによって、デフォルトの全選択状態に復帰します(図12)。

12.png 図12:「概要」パネル―全選択状態に復帰

 次は、サンプルアプリケーションを起動してScoutにセッション検知させた状態で、少し操作してみましょう。“image 1”、“image 2”、“image 3”と書かれているボタンバーをクリックすることで、画像がクロスフェードして切り替わります(図13)。

13.png 図13:画像切り替え中

 何度か画像を切り替えたらSWFのセッションを停止して、Scoutでプロファイリングします。「セッション概要」セクションを見た瞬間に気付くと思いますが、緑色の棒グラフが割り当て時間を示す赤水平線を突き抜けて数カ所で突出しているのが分かります。ついでに、「DisplayListレンダリング」にフォーカスしておきます(図14)。

14.png 図14:エフェクトが走るたびに棒グラフが突出する

 図14を見て、描画処理が瞬間的に重くなりすぎていることに気付けたので、次に具体的な原因を探っていきます。突出しているフレームを1つ選択して、「アクティビティシーケンス」パネルを見ます(図15)。

15.png 図15:「フレーム時間」パネルで1つフレームを選択することで、「アクティビティシーケンス」に情報が表示される

 「ダーティ領域のレンダリング」の項目がフレーム処理の86%を占めており、その中の大半は「フィルターの適用」が占めていることが分かります。他の突出しているフレームを選択しても「フィルターの適用」が問題であることは一目瞭然です。

 「ダーティ領域のレンダリング」が問題であることが分かったので、再描画領域を小さくしてみます。サンプルアプリケーションのソースを以下のように修正します。

<s:BitmapImage
    id               = "image"
    width            = "500"
    height           = "375"
    smooth           = "true"
    verticalCenter   = "0"
    horizontalCenter = "0"
    source.first     = "{ASSET_IMAGE_1}"
    source.second    = "{ASSET_IMAGE_2}"
    source.third     = "{ASSET_IMAGE_3}"
 />
Main.mxml : 修正前
<s:BitmapImage
    id               = "image"
    width            = "100"
    height           = "75"
    smooth           = "true"
    verticalCenter   = "0"
    horizontalCenter = "0"
    source.first     = "{ASSET_IMAGE_1}"
    source.second    = "{ASSET_IMAGE_2}"
    source.third     = "{ASSET_IMAGE_3}"
 />
Main.mxml : 修正後

 ビルド後、再度SWFを実行して何度かエフェクトを走らせ、Scoutのセッションを停止してプロファイリングをします(図16)。

16.png 図16:エフェクト対象の画像を5分の1に縮小して再プロファイリング

 単純にエフェクト対象の画像サイズを小さくした以外、特に修正していませんが、エフェクト中でも各フレーム時間が割り当て時間をオーバーすることなく実行されていることが確認できます(図17)。

17.png 図17:再プロファイリングの結果

 初歩的なことですが、描画処理の面積が広くなると処理が遅くなるという問題が、明確に分析でき、解決できたことになります。

まとめ

 以上がTelemetry API未使用コンテンツにおけるScoutのプロファイリングでした。Scoutの基本機能がすべてのSWF(AIR)コンテンツに対して使用できることが分かったと思います。

 皆さんも一度、Scoutをダウンロードして、使ってみてはいかがでしょうか。

 次回は、Telemetry API+モバイルを使用したScoutのリモートプロファイリングに関して解説する予定です。

taiga_hirohata.png

廣畑大雅 プロフィール

taiga.jp

フリーランス エンジニア/アーキテクト

クラスメソッド株式会社 プリンシパル

Adobe Community Professional


「無料でCreative Cloudを使い倒せ」バックナンバー
前のページへ 1|2       

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。