原文 作成日: 2012/12/3

Getting started with Adobe Scout

 

Adobe Scout は、デスクトップ(Flash Player)とモバイルデバイス(Adobe AIR)の両方で実行する Flash コンテンツ用の次世代プロファイラーです。以前理解しづらかった Flash コンテンツの動作をよく理解できるようになります。特に、非常に簡単に使用を開始できる点が魅力です。Scout には複雑なセットアップ手順が一切ありません。

Scout が存在する前は、Flash Builder プロファイラーを使って、ActionScript 3 のコードレベルでパフォーマンスの問題を調査できましたが、Flash Player の内部動作はまったく見ることができませんでした。描画の問題に遭遇したり、Flash API を誤って使用していたりした場合でも、舞台裏の状況を見ることができなかったため、プロファイラーを使用しても何が問題なのかを知ることができなかったのです。

Scout は Flash Player 内部の動作に関するデータを収集することによって、このような問題を解決します。ActionScript コードとランタイムの相互作用が理解しやすくなるため、パフォーマンスの問題の根源を突き止めることができます。

Adobe Scout の仕組み

Scout は、Flash Player 11.4 および Adobe AIR 3.4 で導入された Telemetry(テレメトリー)機能に依存しています。これは、Flash ランタイムの内部だけでなく、それが実行する ActionScript に関する詳細情報を収集して Scout に送信する機能です。Scout はこのデータをグラフを使って簡潔明瞭に示すため、コンテンツにおけるパフォーマンスの問題をすばやく診断することができます(図 1 を参照)。

Scout では、Flash Player のデバッガーが不要です。つまり、ユーザーが実行するものと全く同じ SWF と Web ページを使って、リリース環境でコンテンツをプロファイリングできるのです。また、最も重要なポイントとして、Scout ではコンテンツをフルスピードでプロファイリングできるため、ユーザーが遭遇する実際のパフォーマンスの問題に専念することができます。

SWF で詳細 Telemetry を有効化

Scout は、特別な作業を行わずに使い始めることができます。Scout の実行中に SWF を実行するだけで、新しいセッションが表示され、データの入力が始まります。ただし、SWF がデフォルトで Scout に提供するのは、基本的な情報のみです。ActionScript コードの情報や、DisplayList レンダリングと Stage3D の詳細情報など、利用できるすべてのデータにアクセスするには、SWF で詳細 Telemetry を有効にする必要があります。Adobe がデフォルトですべての情報を表示しないようにしているのは、他のユーザーが Scout を使用して簡単にあなたのコンテンツの詳細を取得できないようにするためです。しかし心配はいりません。詳細 Telemetry は簡単に有効化でき、Scout の強力な機能を完全に解き放つことができます。

詳細 Telemetry の有効化には、いくつかの方法があります。

Flash Builder 4.7の使用

詳細 Telemetry を最も簡単に有効にでき、Adobe が推奨している方法は、Scout サポートがビルトインされた Flash Builder 4.7 を使ってプロジェクトを構築することです。

Flash Builder 4.7 には、詳細 Telemetry を有効化する新しい ActionScript コンパイラーオプションが含まれます。これを新しいプロジェクトと既存のプロジェクトの両方に使用できます。

  1. プロジェクトのプロパティを開きます。
  2. 「ActionScript コンパイラー」を選択します。
  3. 「詳細な Telemetry を有効にする」を選択します(図 2 を参照)。

有効化すると、ActionScript コード、DisplayList レンダリングおよび Stage3D に関するデータを受信することができます。

Flash Professional ユーザーガイド

Flash Professional には、詳細 Telemetry を有効化するための UI がまだ統合されていません。これは次のバージョンで追加される予定ですが、それまでは https://github.com/adamcath/telemetry-utils から Python スクリプト(add-opt-in.py)をダウンロードして使用することができます。Python をインストールしていない場合は、http://python.org で詳細を確認のうえ、ダウンロードしてください。その後、SWF で add-opt-in.py スクリプトを実行すれば、準備完了です。

このアプローチは、既存の SWF でプロファイリングが必要なのに、リコンパイルを簡単に行えない場合にも役立ちます。

詳細 Telemetry が有効になっているサンプルコンテンツ

実際に使用されている既存のコンテンツを使って Adobe Scout をテストする場合は、詳細 Telemetry が有効化されている次のようなサイトを例として参照できます。

Scout を開いて上記のリンクに移動するだけで、その機能を試すことができます。

ローカルおよびリモートプロファイリング

Scout を使用するには、次のコンポーネントが必要です。

  • Flash Player 11.4 (プラグインまたはスタンドアロン)または Adobe AIR 3.4
  • Adobe Scout デスクトップアプリケーション

Scout を実行するマシンでデスクトップコンテンツをプロファイリングする場合、必要となるコンポーネントは上記のみです。Scout を実行中にコンテンツを実行するだけで、Scout に新しいセッションが表示されます。

また、「リモートプロファイリング」という機能を使用して、Scout を実行しているマシンとは異なるマシンでコンテンツをプロファイリングすることもできます。これを行う場合の最も一般的なシナリオを次に示します。

  • デスクトップマシンでコンテンツを実行し(Flash Player を使用)、別のコンピューターで Scout を実行する。この方法は、リモートプロジェクトのデバッグや、コンテンツを実行するマシンで Scout を実行できない場合に役立ちます。
  • モバイルデバイスでコンテンツを実行し(Adobe AIR を使用)、別のコンピューターで Scout を実行する。これは、対象のデバイスでパフォーマンスを調整する、モバイルコンテンツ開発において一般的な方法です。

デスクトップコンテンツのリモートプロファイリング

リモートデスクトップマシンでコンテンツを実行する場合、Scout を実行しているアクセス可能なマシンに Flash Telemetry データを送信します。これを行うには、Flash コンテンツを実行するマシンに .telemetry.cfg という特殊なファイルを作成する必要があります。ファイルの場所は、実行しているオペレーティングシステムによって異なります。

  • MacOS:~/.telemetry.cfg
  • Windows:%HOMEDRIVE%%HOMEPATH%\.telemetry.cfg

注意:Chrome でコンテンツを実行する場合は、詳細について、このガイドの最後に記載された「よくある質問」を参照してください。·

例えば、Scout が IP アドレス 192.168.1.20 のマシンのポート 7934 で実行しているとします。. Scout に接続するには、.telemetry.cfg ファイルは次のようになります。

TelemetryAddress=192.168.1.20:7934 SamplerEnabled = true CPUCapture = true DisplayObjectCapture = false Stage3DCapture = false

最後の 4 行は「新しいセッションの設定」にある Scout のオプションに対応しますが、ここで重要なのは、リモートプロファイリングを実行する場合は、これらを手動で入力するという点です。.telemetry.cfgを設定したら、リモートコンテンツを実行するだけで、Scout に表示されるようになります。

モバイル AIR のリモートプロファイリング

モバイルデバイスでの設定は、iOS および Android の両方に提供されている Scout Companion アプリを使用して簡単に行えます。このアプリをインストールすると、Scout の場所を特定し、その後、Scout を使用して、受信するデータを設定できます。

アプリを使用するには次の手順に従います。

  • Scout を実行しているコンピューターと同じ Wi-Fi ネットワークにデバイスが接続されていることを確認してから、Scout Companion アプリを起動します。Scout を実行しているコンピューターの検索が実行され、すべての Scout インスタンスのリストが表示されます。
  • コンピューターの名前が表示されたら、それをクリックして接続します。
  • Scout デスクトップアプリケーションで、収集するデータを選択します。この内容は、Companion アプリにも反映されます。
  • AIR モバイルコンテンツを起動すると、Scout に新しいセッションが表示されます(図 3 を参照)。

Scout でセッションを開始する

ローカル Flash コンテンツを実行する場合、または前のセクションの指示に従ってリモートコンテンツと Scout が通信するように設定した場合、プロファイリングを開始することができます。ブラウザー内、Flash Player のスタンドアロン版、または Adobe AIR でコンテンツを起動すると、新しいセッションが Scout に表示されます。たくさんの鮮やかな色がチャートに表示され始めたらプロファイリングが機能している証拠です。

Flash Player は、Flash コンテンツが読み込まれた時点で Scout が存在するかどうかをチェックするため、Scout を開始する前にコンテンツが実行している場合は、コンテンツを読み込み直す必要があります。画面の左側には、開いているセッションのリストが SWF の名前およびドメインと共に表示されます。新しいデータの入力を停止する場合は、セッションの横にある四角形の赤い停止ボタンをクリックします(図 4 を参照)。Flash コンテンツの実行を停止すると、セッションは自動的にデータの記録を停止し、停止ボタンが無効化されます。

デフォルトでは、Scout に読み込まれるすべての Flash コンテンツは新しいセッションとなります。このため非常に簡単にプロファイリングを開始できますが、同時にブラウザを別のタスクに使用している場合は、好ましくありません。Flash コンテンツを含むページを読み込むたびに、新しいセッションが表示されるからです。

さらに詳細な制御のために、不要なセッションをフィルタリングするように Scout を設定することができます。セッションの横にあるフィルターアイコン(図 5 を参照)をクリックすると、Scout は同じ名前を持つ SWF に対してのみ新しいセッションを開始するようになります。つまり、セッションに埋もれることなく、異なる Web サイトをブラウズすることができますが、自分のコンテンツを再読み込みした場合は新しいセッションが表示されます。·

新しいセッションの設定

Scout でセッションを開始できる状態になったので、次は収集するデータの種類について考えます。画面の左側のセッションのリストの上に「新規セッションの設定」というセクションがあります(図 6 を参照)。ここには、Flash Player が送信できるデータの各種カテゴリが示されています。Scout の一部の機能は、該当するデータの収集を有効にしている場合にのみ機能することに注意してください。

新しいセッションを開始する前に、収集するデータの横にあるボックスをオンにします。セッションの途中でこの設定を変更することはできないため、あらかじめ何を測定するのかについて考えておくことが重要です。ある ActionScript 関数に費やされる時間など、パフォーマンスを測定する場合は、オーバーヘッドの低いデータのみを収集するようにします。これを行わないと、Flash Player でデータの収集と送信のために余計な作業が実行されてしまうので、正確なタイミングデータが得られない場合があります。

以下に、取得するデータのカテゴリを簡単に説明します。

  • 「基本 Telemetry」は常に有効に設定されます。Flash Player の内部処理や CPU および GPU メモリ使用率の概要に関する情報を提供します。
  • 「ActionScript サンプラー」は、コールスタックの周期的なスナップショットを取って、ActionScript コードの実行にかかる時間を測定します。統計サンプリングを使用するため、このオーバーヘッドは低くなっています。十分に長い期間のサンプルを確認すると、どの関数に最も長い持間がかかっているのかが見えてきます。
  • 「CPU 使用率」は、オペレーティングシステムによって報告される、Flash Player が使用する CPU 時間の量を定期的に測定します。これは、Mac OS のアクティビティモニター、または Windows のタスクマネージャーに相当するものです。
  • 「DisplayList レンダリングの詳細」は、DisplayList のレンダリング中のすべてのオブジェクトを細かく分類し、画面上に視覚的にマッピングします。これにより、レンダリングに最も時間のかかる画面の領域を把握できます。
  • 「Stage3D の記録」は、Scout 内で再生とステップスルーを行えるように、コンテンツが実行する Stage3D の各コマンドをキャプチャします。これにより数分もしないうちに数ギガバイトに及ぶデータが生成される場合があるので、記録モードの設定オプションを遅延に設定することができます。これにより、Scout が Stage3D データをキャプチャし始めるタイミングを制御できます。

「基本 Telemetry」以外のカテゴリを有効化するには、コンテンツの「詳細 Telemetry」が有効になっている必要があることに注意してください。

Scout によるプロファイリング

Scout のユーザーインターフェイスは、単純かつ効率的に使用できるようにデザインされています。データを把握しやすく、不要な情報を取り除くために豊富なビジュアル機能が搭載されているため、パフォーマンスの問題の原因をすばやく突き止めることができます。ユーザーインターフェイスには、さまざまなパネル(図 7 を参照)があり、初めは多少圧倒されるかもしれませんが、それぞれに焦点を当てて確認することで、それらがどのように相互作用するのかがわかります。

各パネルは、タブをドラッグし、任意の場所に移動して再配置できます。また、パネルを閉じた場合は、ウィンドウメニューからもう一度開くことができます。パネルの特定のレイアウトは「ワークスペース」と呼ばれ、ウィンドウメニューで、異なるワークスペースを保存して切り替えることができます。

開いているセッションのリストと新しいセッションの設定オプションが表示される左側のサイドバーは、折り畳みボタン(図 8 を参照)をクリックして非表示にできます。

このセクションの残りの部分では、その他のパネルについて、Scout での作業中に一般的に使用する順に説明します。最も重要なパネルは、中央にある、たくさんのチャートを持つフレームタイムラインです。ここには、SWF の各フレームに費やされる時間の詳細と、メモリ使用率やイベントのチャートが表示されます。

セッション内での移動を簡単に行えるように、画面の上部にフレームタイムラインのズームアウトビューが表示されています。これは、セッション概要と呼ばれ、セッション全体においてアクティビティのスパイクが存在する場所を一目で確認できます。

セッション概要

アクティビティに大きなスパイクが見られる場所など、セッション内の特定の時間またはイベントにジャンプする場合は、表示する部分をセッション概要でクリックします。デフォルトでは、各フレームに費やされる時間を示すチャートが表示されますが、それを右クリックすることで(図 9 を参照)、その他のチャートも表示できます(図 10 を参照)。

これらは、フレームタイムラインで利用できるチャートに対応しており、選択すると、セッション全体でそのチャートの総合的なビューを表示できます。これは、ある期間のメモリ使用率を監視する場合に特に役立ちます。例えば、非常に緩やかに発生するメモリリークは、十分な期間コンテンツを実行することで、セッション概要にはっきりと示されることになります。

フレームタイムライン

パフォーマンスの問題を特定するために使用する Scout のメインパネルはフレームタイムラインです。このパネルの上部にあるチャートは、セッションを個別のフレームに分離して、Flash Player が各フレームにかける時間を示すフレーム時間を表示します(図 11 を参照)。

最も注目すべきポイントは赤いラインです。これは、達成する必要のあるフレームレートを満たす場合に、各フレームの制限時間であるバジェット時間を表します。例えば、30 fps (フレームパーセカンド)で実行する SWF では、1 フレーム当たり 33 ミリ秒(1000 ミリ秒/30 フレーム)のバジェットがあることになります。言い換えると、1 フレーム当たり 33 ミリ秒を超える時間を費やすと、アプリケーションにフレームのつまずきやスキップが起こるようになるため、全く好ましくありません。

図 11 では、バジェットを超えているため修正を要するフレームが明確に示されています。赤いバジェットラインがばらついているのが気になるかもしれませんが、これは SWF のフレームレートを動的に変更できるようになっており、この特定のコンテンツで動的な変更が発生しているためです。

フレーム時間チャートで次に注目するポイントは、各バーの様々な色です。それぞれの色は Flash Player が実行する異なるアクティビティを表しているため、各フレームで最も長い時間を費やしたアクティビティを確認できます。

  •              ActionScript の実行
  •           DisplayList レンダリング
  • 黄色         ネットワークとビデオ
  • オレンジ        その他(ガベージコレクション、イベント処理などのアクティビティ)

この色付けを覚える必要はありません。次で説明する「概要」パネルで、それぞれの色の意味が示されているからです。また、チャートの特定の部分にマウスポインターを合わせると、その意味を示すツールヒントが表示されます(図 12 を参照)。

フレームタイムラインパネルにはその他にもいくつかのチャートがあります。CPU 使用率 はその名が示すとおりですが、複数のコアを搭載したマシンの場合、CPU 使用率は 100% を超えることがあります。メモリを細かく示すチャートもあり、チャートの色はメモリの各種類に対応しています(これらの色も概要パネルに説明されています)。

表示するチャートは、フレームタイムラインパネルの上部にあるボタンを切り替えて選択できます。図 11 には、フレーム時間、CPU 使用率、およびメモリチャートのみが示されています。「イベント」をクリックすると、メモリチャートの下にイベントのトラックが表示されます(図 13 を参照)。それぞれの横のトラックは、特定の種類のイベントを表しており、青いバーの濃度によって、各フレームで発生したそれぞれの種類のイベント数が示されます。

イベントトラックは次のとおりです。

  • マウス:マウスイベントが発行されたかどうか
  • キーボード:キーボードイベントが発行されたかどうか
  • ネットワーク:ネットワーク I/O オペレーションが発生しているかどうか
  • タイマー:Timer クラスが使用されているかどうか
  • レンダリング:レンダリングが発生しているかどうか
  • Trace イベント:ActionScript コードで trace() が呼び出されたかどうか

ご覧のとおり、フレームタイムラインパネルでは、アプリケーションのホットスポットをすばやく検出し、時間が多く費やされている場所を特定し、その原因を突き止めることができます。

概要

概要パネルは、「フレームタイムライン」のチャートの色を説明していますが、単なる凡例ではありません。フレームタイムラインでフレームの範囲をクリック&ドラッグして選択すると、概要パネルは選択されたフレームのデータをまとめて、それらのフレームで平均して何が発生しているかを示すことができます。

図 14 は、2 つのフレームが選択された概要パネルを示しています。最初に注目するのは、左上にあるフレームレート数です。これは 1.8 fps に過ぎませんが、ターゲットフレームレートは 24.0 fps であったので、フレームレートは 248% もバジェットを超過していることになります。コンテンツは滑らかに実行されないので、おそらくその原因を突き止めたいところでしょう。

時間の内訳を見ると、ほとんどが ActionScript コードの実行に費やされていることがわかります。これは、コードが何を行っているのかを調査し、最適化を行う上でのヒントとなります。Scout にはこれを行うために他のパネルが用意されていますが、これらについては後ほど確認することにしましょう。右側の小さな歯車アイコンをクリックすると、選択項目の合計時間(図 14 を参照)と 1 フレーム当たりの平均時間の表示を切り替えることができます。

このシナリオでは、ActionScript が明らかに問題となっているため、他のカテゴリを除外して、ActionScript の実行のみに焦点を絞ることができます。Scout には多数の色が使用されており、気が散りやすいため、不要な色を取り除くことにします。

「ActionScript」カテゴリをクリックすると、残りのカテゴリがグレー表示されます(図 15 を参照)。さらに注目すべき点は、フレームタイムラインもフィルタリングされていることです。このため、各フレームで実行された ActionScript コードのみのチャートを確認できます(図 16 を参照)。実際のところ、Scout のすべての色がフィルタリングされるため、関心のあるデータのみに簡単に焦点を絞ることができます。

フィルタリングするカテゴリをクリックする機能のほか、一部のカテゴリは、より詳細な情報を表示するように展開できます。図 17 では、ビットマップメモリを展開して、より詳細な内訳を示しています。フレームタイムラインに新しい色が表示されるため、時間の経過と共にどのように変化するのかを確認できます。

上位アクティビティ

上位アクティビティパネルには、Flash Player 内部のアクティビティについて、概要パネルよりも詳細な情報が表示されます。時間を ActionScript などのハイレベルなカテゴリに分けるのではなく、特定のイベントの処理といったアクティビティの単位で詳細な内訳を表示します(図 18 を参照)。

右側の列の数字は、各アクティビティに費やされた時間と、Flash Player によってそのアクティビティの実行に費やされた時間の割合(%)を反映します。この例では、ほとんどの時間(54% または 2,279 ミリ秒)が、enterFrame イベントのイベントハンドラーに費やされているため、最適化の対象と考えられます。これについては、後述の ActionScript パネルの解説で説明します。

アクティビティシーケンス

上位アクティビティパネルには、最も時間のかかるアクティビティが表示されますが、各アクティビティの正確な実行順を確認するためにも役立ちます。これが、アクティビティシーケンスパネルの目的です。複数のフレームに及んでデータを収集する上位アクティビティパネルとは異なり、アクティビティシーケンスパネル(図 19 を参照)は、1 つのフレームに限定した情報を示します(複数のフレームを対象とすると、表示するデータが多すぎる結果となります)。

アクティビティシーケンスパネルには、1 つのフレーム内のアクティビティについて、その正確な実行順がネストされて表示されます。例えば、図 19 では、92% の時間が enterFrame イベントの処理に費やされており、これにより gameObjectDie イベントの時間が 61% となっているのがわかります。また、イベントハンドラーの際に、かなりの量のガベージコレクションが行われていることと、テキストレイアウトが更新されていることもわかります。

デフォルトでは、0.5 ミリ秒未満のアクティビティはアクティビティシーケンスパネルと上位アクティビティパネルから除外されるので、最も時間のかかるオペレーションのみに集中することができます。これは、左上のフィルターボタンをオフにして無効化することができます。

ここでのカラースキームは、概要パネルと共通しているため、異なるパネルを簡単に照らし合わせて確認することができます。概要パネルでカテゴリをフィルタリングすると、関心のあるアクティビティ以外のすべてがグレー表示されるので、探している情報のみに焦点を絞ることができます。

ActionScript

ここまでは、Flash Player の内部アクティビティを見てきましたが、最も関心を引いているのは、おそらく ActionScript 3 コードの動作だと思います。これは ActionScript パネル(図 20 を参照)で示されています。

ActionScript パネルを最初に確認する場合、ActionScript コードで Flash Player が呼び出すトップレベルの関数呼び出しのリストが表示されています。展開して、すべてのコールスタックを表示するには、「上から下へ」設定の右にある「すべてを展開」ボタンをクリックします(図 21 を参照)。Alt キーを押しながらいずれかの三角形をクリックしても、すべてを展開できます。

コールスタックを下にスクロールすると、最も時間のかかっているネイティブ呼び出しを突き止めることができます。図 22 では、Context3D.present 呼び出しが 35% の時間を費やしており、最も負荷の高い呼び出しであることがわかります。

デフォルトでは、ActionScript パネルはコールスタックの「上から下へ」ビューで表示され、スタックの上方にエントリポイント、下方にネイティブ呼び出しがリストされますが、個別の関数の処理にかかった時間を確認するために、このビューを逆に表示するほうが便利な場合もよくあります。この場合は、パネルの上部にある「下から上へ」を選択します。

また、概要パネルの「ActionScript」カテゴリを展開すると、各パッケージに費やされた時間に関するハイレベルビューも確認できます。ActionScript パネルでは、さらに把握しやすいように、関数に色付けがされています。ネイティブ関数は青色、カスタム ActionScript は水色、Stage3D は明るい青緑色で色付けされます。図 23 は、これらの色が付けられた「下から上へ」ビューを示しています。

また、概要パネルを使って、特定のパッケージに存在しないすべての関数をフィルタリングすることもできるため、関心のあるコードを簡単に特定し、それに焦点を絞ることができます。図 24 は、invawayders パッケージを確認する場合の様子を示しています。

「下から上へ」ビューでは、親ノードは個別の関数であり、「単体時間」列には、選択されたフレームでその関数に費やされた総合時間が示されます(別の関数に属する呼び出しは含まれません)。親を展開すると、コールスタックが逆の順で表示されます。これには、何が親関数に対して呼び出しを行ったか、その呼び出しによって親の単体時間にどのような影響があったのかが示されます。

ActionScript パネルは、「フレームタイムライン」で選択されたフレームで実行されていた ActionScript コードの総合ビューを示します。このデータは、統計サンプリングによって取得されたものなので、サンプルの数が多いほど、より正確なデータが得られることに注意しておく必要があります。右上に悲しい顔のアイコンが表示される場合は、選択するフレームを増やす必要があります。

ActionScript パネルのもう 1 つの便利な機能は、上位アクティビティパネルとアクティビティシーケンスパネルを使ってデータを操作できることです。これらのパネルで特定のアクティビティをクリックすると、ActionScript パネルをフィルタリングできます。例として、図 25 は、上位トップアクティビティパネルで mouseDown イベントをクリックした場合の ActionScript パネルを示しています。その特定のイベントハンドラー内で実行された ActionScript のみが表示されます。

ActionScript イベントハンドラーだけでなく、任意のアクティビティでフィルタリングできます。例えば、図 26 では、ActionScript パネルはガベージコレクションによってフィルタリングされています。ActionScript に対して呼び出しを行うイベントとは異なり、ガベージコレクションは、コードの実行中に取得することができます。ガベージコレクションでフィルタリングすることによって、どの関数がガベージコレクションを引き起こしたかを確認することができます。これは、コールスタックにインライン表示されます。特定の関数が多数のガベージコレクションを引き起こす場合、メモリ割り当てが高すぎる可能性があります。

トレースログ

ActionScript のサンプリングと同様に、Scout はコード内のすべての trace() ステートメントの出力を収集します。フレームタイムラインのイベントトラックには、trace() ステートメントを実行したフレームが示され、1 つのフレームを選択した場合、これらはアクティビティシーケンスパネルに表示されます。また、1 つ以上のフレームを選択すると、トレースログパネルに完全な trace() の出力が表示されます(図 27 を参照)。

パネル上部のツールバーにボタンが 2 つあります。1 つ目のボタンでは、各 trace() ステートメントの横にあるタイムスタンプの表示のオン、オフを切り替えることができます。図 27 では、これはオンになっています。2 つ目のボタンでは、ハイライトした trace() 出力が発生するフレームのみを含めるように、選択したフレームを絞り込むことができます。例えば、図 27 でこのボタンをクリックした場合、出力「SUPER DUPER : AbstractScene」が発生したフレーム(0:07.902)に移動します。

セッション情報

Scout では、他の人と簡単にデータを共有することができます。例えば、ある Flash コンテンツでパフォーマンスの問題を発見した場合、Scout セッションを記録して FLM ファイルとして保存し、それを使って問題をデバッグできるように同僚に送信できます。しかしこれだけの量のデータがあると、Flash Player を実行していたマシンや使用していた Flash Player のバージョンなどの重要な情報を簡単にトラックできなくなるおそれがあります。

そこで、Scout のセッション情報パネルを確認すれば、これらの情報を簡単に確認することができます。このパネルでは、セクション別に、実行していた SWF、Flash ランタイム、マシンのオペレーティングシステムとハードウェア、および Scout で収集した Telemetry データの種類に関する詳細な情報が提供されます(図 28 を参照)。

DisplayList Rendering

これまで、Flash Player や ActionScript の実行内容の診断に役立つパネルを多数見てきました。しかし、問題がレンダリングに関わっている場合はどうでしょうか。Scout の主な魅力の 1 つは、レンダリングの問題の突き止めに役立つことです。

従来の Flash DisplayList をレンダリングに使用している場合、新しいセッションの設定で「DisplayList レンダリングの詳細」をオンにすることで、問題の詳細な情報を収集することができます。1 つのフレームを選択すると、DisplayList レンダリングパネルにこのデータが表示されます(図 29 を参照)。

パネルの左側には、選択されたフレームで発生したすべてのレンダリングパスとそれにかかった時間のリストが表示されます。レンダリングパスは、必ずしも完全にフレームの境界と一致しているわけではないので、あるフレームで開始するレンダリングパスが次のフレームで終了している場合もあります。1 フレームに 1 つ以上の完全なレンダリングパスがある場合、レンダリングの頻度が高すぎる可能性があります。例えば、必要でないときに updateAfterEvent() を呼び出している場合があります。

DisplayList レンダリングパネルは、デフォルトで「ヒートマップ」モードで開きます。これは画面上でどの領域が描画されたかを示します。最も明るい領域は、レンダリングに最も長く時間がかかった領域で、領域をクリックすると、右側のツリー表示でその領域がハイライト表示されます。ここで、レンダリングパス中に発生する内容や各ステップにかかった時間の詳細を確認できます。

「領域」モードに切り替えると、レンダリングパスのさらに詳細なビューを表示できます(図 30 を参照)。これは、画面上の領域を、レンダリングエンジンの一部として Flash Player が使用する 4 つのカテゴリに分類します。これらのカテゴリを理解することによって、各フレームで変化のある領域を無駄にキャッシュしないといったように、レンダリングのパフォーマンスを大きく改善することができます。

4 つのカテゴリ(パネルの上部に表示)は色付けされており、それぞれをオンまたはオフに切り替えることができます。

  • 「領域」(赤)は、画面のピクセルを含む外接矩形で、再描画する必要があります。これは、Flash Player のデバッガーバージョンの DisplayList レンダリング機能から取得する情報と同じものです。
  • 「更新されたサーフェス」(青)は、このレンダリングパスで更新されたサーフェスです。サーフェスは Flash Player がフィルター、ブレンドモード、ビットマップキャッシュおよびビットマップを使用するときに内部的に作成するビットマップです。
  • 「キャッシュされたサーフェス」(黄色)は、複数のフレームで再利用できるようにランタイムによってキャッシュされたサーフェスです。このレンダリングパスでは、再度レンダリングされたキャッシュのみが示されます。
  • 「表示オブジェクト」(緑)は、DisplayList に追加するベクターコンテンツです。ここでも、レンダリングされた表示オブジェクトのみが示されます。

右側のアクティビティも、同じスキームで色付けされています。表示の任意の領域をクリックすると、対応するアクティビティがハイライト表示されます(図 31 を参照)。エントリの横の小さな点は、更新が必要だったために領域が再描画されたことを示します。

Stage3D レンダリング

Flash で使用する GPU 対応のコンテンツを開発する場合、新しい Stage3D API を活用することになります。これは、デスクトップ(Adobe AIR 3.0 以降と Flash Player 11 以降)とモバイル(Adobe AIR 3.2 以上)の両アプリケーションにおけるレンダリングを高速化するための GPU のプラットフォームアグノスティックな(プラットフォームにとらわれない)使用方法です。3D コンテンツを開発する場合もあれば、2D コンテンツを GPU を使ってレンダリングする Starling などの 2D フレームワークを使用する場合もあります。

Scout で「Stage3D の記録」をオンにすると、Flash Player はコンテンツが実行するそれぞれの Stage3D コマンドを Scout に送信するようになります。言い換えると、Context3D オブジェクトで実行されるすべての呼び出しが記録されるということです。Stage3D レンダリングパネルでは、これらのコマンドをステップごとに再生することができます(図 32 を参照)。

このパネルには、選択されたフレームのすべての Stage3D コマンドがリスト表示されます。任意の描画呼び出し(Context3D.drawTriangles)をクリックすると、パネルの左側が更新され、その呼び出し直後のバックバッファーの状態が表示されます。スペースキーを押すと、次の描画呼び出しにジャンプするので(バックスペースキーを押すと前の描画呼び出しにジャンプします)、シーンのレンダリングを簡単にステップスルーできます(図 33 を参照)。

コンテンツに render-to-texture を使用している場合、バックバッファーの代わりに、現在選択されているレンダーターゲット(レンダリング先のテクスチャ)が自動的に表示されます。

それぞれの Stage3D コマンドは、コマンドに渡された順に表示される引数と共に、コンパクトに表示されます。それぞれの引数の意味が不明な場合は、コマンドリスト上で右クリックして「引数名を表示」を選択します。

Stage3D レンダリングパネルは、Scout に Stage3D エンジンが内蔵されているため、描画呼び出しをステップスルーできます。ランタイムは Scout にビットマップを送信しているのではなく、各 Stage3D コマンドと、テクスチャ、プログラム、バッファーなどの引数を送信しています。そのため、Scout を使用して、興味深い方法でシーンを調査し、コンテンツのデバッグを行えるのです。

パネルの上部にあるツールバーからオンにできるワイヤフレームモード(図 34 を参照)は、各オブジェクトの裏に描画されたものを確認できるように、三角形のエッジのみがレンダリングされたシーンのプレビューを示します。

Stage3D レンダリングパネルを使用するには「Stage3D の記録」をオンにする必要がありますが、GPU メモリに関する有用な情報は必ずキャプチャされます。すべての Stage3D コンテンツについては、概要パネルの「GPU メモリ」セクションを参照し(図 35 を参照)、セッション概要とフレームタイムラインで対応するチャートをオンにすることもできます。

各シーンの描画呼び出し数と、通常アップロードするテクスチャによって占有されるリソースメモリの内訳を確認できます。

Stage3D プログラムエディター

Scout にはアプリケーションが実行する Stage3D コマンドの完全な情報が含まれるので、各コマンドをインタラクティブに修正し、これらのレンダリングにおける効果を確認することができます。Context3D.drawTriangles を呼び出すたびに、いくつかの三角形を画面に配置する頂点プログラムと、それぞれの三角形の各ピクセルを色付けするフラグメントプログラムの 2 つのプログラムを実行するように GPU に指示しています。Scout では、Stage3D プログラムエディターを使って、これらのプログラムをインタラクティブに表示して編集することができます。

Stage3D レンダリングパネルで、描画呼び出しをクリックしてから(図 36 を参照)、ウィンドウメニューから Stage3D プログラムエディターを開いて切り替えます(図 37 を参照)。これには、その描画呼び出しが実行した頂点プログラムとフラグメントプログラムの AGAL コードが表示されます。

これらのプログラムをそれぞれインタラクティブに編集し、「アップロード」をクリックして、変更されたプログラムを使って Scout でシーンをレンダリングしなおします。図 38 は、Stage3D レンダリングパネルのシーンを示しています。選択された描画呼び出しのフラグメントプログラムは次のようになります。

//fragment program (agal 1) tex ft0, v0, fs1 <2d, linear, miplinear, repeat> tex ft1, v1, fs2 <2d, linear, miplinear, repeat> mul oc, ft0, ft1

このプログラムの最初の 2 行は 2 つの異なるテクスチャからサンプリングされており、最後の行で、ピクセルの出力の色を決定するために両方のテクスチャを掛け合わせています。最初のテクスチャ(fs1)は建物の壁のレンガのパターンに使用し、2 つ目のテクスチャ(fs2)は影に使用されます。

プログラムの修正がどのように作用するかを確認するには、2 つのテクスチャを掛け合わせる代わりに、最初のテクスチャに基づいて色を設定するように、最後の行を変更します。

//fragment program (agal 1) tex ft0, v0, fs1 <2d, linear, miplinear, repeat> tex ft1, v1, fs2 <2d, linear, miplinear, repeat> mov oc, ft0

「アップロード」をクリックすると、新しいプログラムでレンダリングされたシーンを確認できます(図 39 を参照)。一部の描画呼び出しが紫色になっており、使用するプログラムが編集されたことがわかります。Stage3D プログラムエディターで「リセット」をクリックすると、元のプログラムに戻すことができます。

次に、2 つ目のテクスチャ(影)のみを表示するようにプログラムを更新します。

//fragment program (agal 1) tex ft0, v0, fs1 <2d, linear, miplinear, repeat> tex ft1, v1, fs2 <2d, linear, miplinear, repeat> mov oc, ft1

もう一度「アップロード」をクリックすると、影のみがレンダリングされていることを確認できます(図 40 を参照)。

このインタラクティブな編集機能はデバッグ処理に非常に便利であり、それに加えて AGAL プログラムの記述方法を学習するためにも使用できます。

Scout での検索

Scout バージョン 1.1 では、セッション内を簡単に移動できる 2 つの新機能が提供されています。新しい検索メニューがあり、その中の最初の項目は「フレームに移動」です(図 41 を参照)。これを使用すると、セッション内の特定のフレームにすぐにジャンプできます。

2 番目の、最も便利な機能は、「検索」です。画面下部に検索バーが開き、現在のセッションで検索するテキストを入力できます(図 42 を参照)。

入力すると同時に、開いているすべてのパネルで、入力したテキストが検索されます。このテキストが含まれないものはすべてグレー表示になるので、検索対象に簡単に焦点を絞ることができます。また、開いているパネルで見つかった一致の数もわかります。図 43 は、ActionScript パネルおよび上位アクティビティパネルで「context」という単語を含むものを検索する場合を示しています。ActionScript 関数名と、アクティビティ、トレースステートメント、表示オブジェクトの名前、Stage3D コマンドが、開いているパネルに応じて検索されます。

「>」ボタンまたは「<」ボタンをクリックすると、検索結果を前後に移動できます。現在の結果は目立つように大きいフォントで表示されます。結果を見ていくと、ツリー内の行が開かれ、スクロールすると結果が表示されます。これは、大規模なアプリケーションで特定の関数呼び出しを検索する際に非常に便利です。

おそらく、最も便利な機能は、別のフレーム内のテキストを検索する機能でしょう。「>>」ボタンをクリックすると、Scout では、現在選択しているフレームを過ぎて、検索対象のテキストが含まれているフレームが見つかるまで検索が行われます。その後、そのフレームまでジャンプして、表示されているパネルに検索結果がない場合は、パネルを開いて該当する結果までスクロールします。「<<」ボタンも同じ操作ですが、検索方向が逆になります。

FAQ

以下は、Scout を使用し始める上で役に立つ一連の FAQ です。

Flash Player を Scout に接続できません。なぜですか。

セッションが表示されない場合は、次の対策を行います。

  • Adobe Scout のバージョンが最新のものであることを確認します。
  • Flash Player のバージョンが十分に新しいことを確認します。
  • モバイルプロジェクトの場合は、最新バージョンの SDK または Flash Builder で構築されていることを確認します。
  • モバイルプロジェクトの場合は、Companion アプリが接続されていることを確認します。
  • また、.telemetry.cfg ファイルが適切なコンテンツを含む正しい場所にあることを確認します。
  • Scout サーバーが稼働していることを確認します。Scout を開き、Web ブラウザーに「localhost:7934」と入力します。これに対し、すぐに「サーバーが接続を切断しました」、「データが受信されません」のような応答が返ります(Scout は HTTP サーバーではないためこれらに類似した応答が返されます)。Scout には、「Telemetry のデータが有効ではないので、新しいセッションを開けません」というエラーメッセージが表示されます。ブラウザが長時間停止し、「サーバーが見つかりません」などの応答がある場合は、ソケットが機能していません。ファイヤウォールとセキュリティの設定を確認してください。環境設定/ポート上で新規セッションをリッスンで Scout のポートを変更できます。これを行う場合は、必ず .telemetry.cfg ファイルを更新してください。

iOS または Android 版 Scout Companion アプリが接続できない場合は、次の対策を行います。

  • Scout Companion アプリが最新のものであることを確認します。
  • Companion アプリがマシンを検出できない場合は、「その他」を選択して IP アドレスを入力すると接続できるかどうかを確認します。
  • デバイスから別のアプリを使用してマシンに接続できるかを確認します。マシンに Web サーバーを設定して、それに接続することもできます。
    • Mac OS で、システム環境設定/共有に移動し、「Web 共有」を有効化します。
    • Windows で、インターネットインフォメーションサービス(IIS)を有効化します。
    • 使用しているマシンから自身の Web サイトにアクセスできることをテストします。
    • 次に、デバイスから同じテストを行います。

Chrome からどのようにリモートプロファイリングしますか。

Chrome で Flash Pepper プラグイン(デフォルトで有効)を使用している場合、.telemetry.cfg ファイルは多少不便な場所にあります。これは、Chrome のサンドボックス機能によって、Flash Player によるファイルの読み取り場所が制限されるためです。.telemetry.cfg ファイルは次の場所にあります(ファイルの形式はまったく同じです)。

Mac OS:   ~/Library/Application Support/Google/Chrome/Default/

Pepper Data/Shockwave Flash/UserHome/.telemetry.cfg

Windows:  %HOMEDRIVE%%HOMEPATH%\AppData\Local\Google\Chrome\

User Data\Default\Pepper Data\

Shockwave Flash\UserHome\.telemetry.cfg 

「GPU を待機」とはどういう意味ですか。

Stage3D アプリケーションでは、必要なフレームレートを得るために、CPU と GPU が互いに同期している必要があります。いずれかがオーバーロードすると、フレームレートは落ちてしまいます。「GPU を待機」に非常に長い時間がかかる場合、これは GPU がオーバーロードしていることを意味しています。いくつかの可能性が考えられます。

  • GPU は 60 fps より速くなりません。これよりも速く画面を更新しようとしても、単にブロックされます。60 fps を達成している場合は、この GPU の待機時間を気にする必要はありません。
  • フレームレートが一定して低い場合は、GPU への負荷が高すぎるので、3D コードを最適化する(またはさらに強力なデバイスで実行する)必要があります。例えば、レンダリングする三角形を減らす、より単純な AGAL プログラムを使用する、より小さいテクスチャを使用するなどです。GPU では時間を測定できないため、現在のところ Scout は、GPU でどの処理が遅くなっていたのかを直接示すことはできません。ただし、「Stage3D の記録」をオンにして Stage3D レンダリングパネルを見ると、どの Stage3D コマンドを実際に実行しているかを確認でき、それらをステップスルーして、シーンにどのような影響を与えているかを確認できます。この作業をより効率的に行う方法を見つけられるかもしれません。
  • フレームレートがジッター、振動、またはのこぎり波状のパターンを示す場合は、CPU と GPU の同期に関わる Flash Player の問題が発生している可能性があります。Adobe は現在この問題に取り組んでいます。

Scout がクラッシュまたはエラーを表示しました。どうしたらよいでしょうか?

セッションを保存する前に Scout がクラッシュした場合、次の場所からデータを復元できます。ここには 1 つ以上の FLM ファイルがあります。

Mac OS:  /var/folders/… …/Adobe Performance Data

Windows:  %HOMEDRIVE%%HOMEPATH%\AppData\Local\Temp\Adobe Performance Data

Mac OS では、実際の場所は異なる場合がありますので、Finder で /var/folders に移動し、「Adobe Performance Data」を検索するのが最良の方法です。

FLM を開いたときに Scout が再度クラッシュする場合、不具合の可能性がありますので、その FLM を Adobe にお送りください。その問題が問題の修正に役立つ可能性があります。

エラーが発生する場合、Scout ログからその他の情報を得られる場合があります。

Mac OS:  ~/Library/Preferences/Adobe/Scout/1.0/logs

Windows:  %HOMEDRIVE%%HOMEPATH%\AppData\Roaming\Adobe\Scout\1.0\logs

次のステップ

ここまで、Adobe Scout の機能と使用方法について学習してきました。次は、実際に使用しながら、Flash Player または AIR で実行するゲームを細かく調整することに挑戦できます。

必要条件

この記事に必要な予備知識

Adobe Scout リリースノートをお読みください。



その他必要な製品:

Adobe Scout Companion アプリ(iOS 版)

Adobe Scout Companion アプリ(Android 版)

Adobe Scout Companion アプリ(Kindle 版)

ユーザーレベル

中級