アプリの作成

​

Vega Studioを使用したアプリのビルド

​

前提条件

1. Vega SDKをインストールします。

​

手順1：Vegaプロジェクトを作成する

1. Visual Studio Code（VS Code）を開きます。
2. アクティビティバーからVega拡張機能のアイコンをクリックして、Kepler Studioパネルを開きます。
3. [プロジェクト] セクションの [+]（Vegaプロジェクトの作成）アイコンをクリックします。
4. プロジェクトテンプレートを選択します。
   • hello-world - React Native v0.72に依存するアプリを作成するには、このプロジェクトテンプレートを使用します。
   • basic-turbo-module - カスタムターボモジュールを作成するには、このプロジェクトテンプレートを使用します。
   • idl-turbo-module - サポートされているReact NativeのすべてのバージョンおよびネイティブのIDL APIと互換性があるアプリを作成するには、このプロジェクトテンプレートを使用します。
5. プロジェクトのディレクトリを選択します。
6. アプリのプロジェクト名を入力します（スペースや特殊文字は使用できません）。 以下に例を示します。 My3PSample プロジェクト名を入力したら、Enterキーを押します。
7. プロジェクトのパッケージ名を<top-level domain>.<company_name>.<app_name>の形式で入力します。 例：com.org.vegaproject プロジェクトのパッケージ名を入力したら、Enterキーを押します。 Vega Studioにより、選択したテンプレートに基づいてプロジェクトが作成されます。開いているプロジェクトでbasic-turbo-moduleまたはidl-turbo-moduleテンプレートを選択すると、Vega Studioによりマルチルートワークスペースが作成されます。新しいプロジェクトがフォルダとして表示されるため、ターボモジュールを依存関係として使用し、両方を同じVS Codeウィンドウで開発できるようになります。Vega Studioにより、開いているプロジェクトに依存関係として新しいbasic-turbo-moduleが追加されます。basic-turbo-moduleの作成時に複数のVegaアプリを開いている場合は、拡張機能から、ターゲットアプリを選択するように求められます。

​

手順2：Vegaアプリをビルドする

1. [Kepler] > [プロジェクト] からプロジェクトを選択します。
2. [Build Mode] セクションからビルドモード（デバッグまたはリリース）を選択します。
3. [Devices] セクションの再生ボタンをクリックして、対象の仮想デバイスを起動します。
4. プロジェクト名の横にあるビルドボタンをクリックして、ビルドプロセスを開始します。

​

ビルド出力の表示

1. VS Codeの統合ターミナルパネルに移動します。
2. [出力] タブを選択します。
3. ドロップダウンリストから [Kepler] を選択します。 info build-kepler completedと表示されます。ビルドが失敗した場合は、エラーメッセージを展開して問題を特定してください。

​

手順3：（任意）カスタムポートを構成する

1. VS Codeで、[Code] > [基本設定] > [設定] に移動します。
2. 検索ボックスに「React Native Port」と入力します。
3. ポート番号を入力します。
4. プロンプトが表示されたら、VS Codeを再読み込みします。 デバッグセッションを開始すると、Vega Studioは、デバイスの共有の環境設定を自動的に/data/shared_preferences.jsonに構成します。

​

手順4：Vegaアプリを実行してテストする

1. [Kepler Studio] > [Devices] に移動し、[VirtualDevice:Tv] を選択します。
2. [再生] ボタンをクリックして仮想デバイスを起動します。
3. VVDウィンドウが開き、デバイスの読み込みが完了するまで待ちます（VirtualDevice:Tvのステータスは「読み込み中…」ではなく「準備完了」になります）
4. プロジェクト名の横にある [再生] ボタンをクリックします。 詳細については、Vega仮想デバイスを参照してください。 Fire TV Stickの場合：
5. [Kepler Studio] > [Devices] からFire TV Stickデバイスを選択します。
6. プロジェクト名の横にある [再生] ボタンをクリックします。 詳細については、Fire TV Stickを参照してください。

​

手順5：（任意）React Native Packagerを停止する

1. コマンドパレットを開きます。 Mac： Cmd+shift+P Linux： Ctrl+Shift+P
2. 「React Native: Stop Packager」と入力して選択します。 いずれかのオプションを使用してPackagerを停止した後、[Kepler Studio] > [Projects] からアプリを再起動します。アプリ名の右側にある再生ボタンをクリックします。

​

手順6：Vegaアプリをデバッグする

​

手順7：アプリのパフォーマンスを分析する

• アプリのKPIの測定
• アプリのUIの滑らかさとフォアグラウンドメモリの測定
• UIレンダリングアプリのパフォーマンスの問題の特定
• アプリのパフォーマンスのモニタリングと記録
• アプリのメモリのモニタリングと記録
• アプリのオーバードロー検出の構成