原文 作成日: 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 を実行する。これは、対象のデバイスでパフォーマンスを調整する、モバイルコンテンツ開発において一般的な方法です。

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

リモートデスクトップマシンでコンテンツを実行する場合、Flash Telemetry データを Scout を実行しているアクセス可能なマシンに送信します。これを行うには、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 コンパニオンアプリケーションを使って簡単に行えます。このアプリケーションをインストールすると、Scout の場所を特定し、その後、Scout を使って、受信するデータを設定できます。

アプリケーションを使用するには次の手順を行います。

  • Scout を実行しているコンピュータと同じ Wi-Fi ネットワークにデバイスが接続されていることを確認してから、Scout コンパニオンアプリケーションを起動します。Scout を実行しているコンピュータの検索が実行され、すべての Scout インスタンスのリストが表示されます。
  • コンピュータの名前が表示されたら、それをクリックして接続します。
  • Scout デスクトップアプリケーションで、収集するデータを選択します。この内容は、コンパニオンアプリケーションにも反映されます。
  • 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 参照)。1 つの三角形で 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 参照)。

セッション情報

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

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

DisplayList レンダリング

これまで、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 を使用し始める上で役に立つ一連の FAQ です。

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

 

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

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

iOS または Android 版 Scout コンパニオンアプリケーションが接続できない場合は、次の対策を行います。

  • Scout コンパニオンアプリケーションが最新のものであることを確認します。
  • コンパニオンアプリケーションがマシンを検出できない場合は、「その他」を選択して 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 

「Waiting for GPU (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 では、実際の場所は異なる場合があるため、ファインダーで /var/folders に移動し、「Adobe Performence 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 Companion app for iOS

Adobe Scout Companion app for Android

Adobe Scout Companion app for Kindle

 

ユーザーレベル

中級