アプリの作成
このページでは、Vega SDKを使用してアプリを構築する手順を説明します。SDKには、複数のテンプレートと、2つのビルドアプローチとして Vega StudioとVega CLIが含まれています。Vega Studioはコマンドパレットからコマンドを提供するVS Code拡張機能で、Vega CLIはターミナルベースのコマンドを提供します。
初めてVegaでアプリをビルドする場合は、Hello Worldアプリの作成を参照してください。
前提条件
Vega SDKをインストールします。
すべてのビルドオプション
Vegaでは、開発者が独自の要件に基づいてカスタムアプリを作成できるように複数の方法が用意されています。ビルド方法は次の中から選択できます。
Vega Studioを使用したアプリのビルド
Vega Studioは、アプリのビルド、実行、テスト、デバッグ、パフォーマンス分析を行うことができるVS Codeの拡張機能です。Fire TVやその他のVega対応デバイスをサポートしています。このセクションでは、Vega Studioを使用してVegaアプリをビルドする手順について説明します。
手順1： Vegaプロジェクトを作成する
-
VS Codeを開きます。
-
アクティビティバーからVega拡張機能のアイコン
をクリックして、[Vega Studio] パネルを開きます。 -
[プロジェクト] セクションの [+]（Vegaプロジェクトの作成）アイコンをクリックします。
-
プロジェクトテンプレートを選択します。
- helloWorld - React Native v0.72に依存するアプリを作成するには、このプロジェクトテンプレートを使用します。
- basic-turbo-module - カスタムターボモジュールを作成するには、このプロジェクトテンプレートを使用します。
- idl-turbo-module - サポートされているReact NativeのすべてのバージョンおよびネイティブのIDL APIと互換性があるアプリを作成するには、このプロジェクトテンプレートを使用します。
注： コマンドパレットを使用してプロジェクトテンプレートを表示することもできます。MacではCommand⌘+Shift+P、LinuxではCtrl+Shift+Pを押して、「Vega Project: Create a new Vega project」と入力します。 - プロジェクトのディレクトリを選択します。
-
アプリのプロジェクト名を入力します（スペースや特殊文字は使用できません）。
例： MySampleProject
プロジェクト名を入力したら、Enterキーを押します。
-
プロジェクトのパッケージ名を
<トップレベルドメイン>.<会社名>.<アプリ名>の形式で入力します。例：com.mycompany.vegaproject
プロジェクトのパッケージ名を入力したら、Enterキーを押します。
Vega Studioにより、選択したテンプレートに基づいてプロジェクトが作成されます。
プロジェクトを開いた状態で
basic-turbo-moduleテンプレートまたはidl-turbo-moduleテンプレートを選択すると、Vega Studioによってマルチルートワークスペースが作成されます。新しいプロジェクトは、同じVS Codeウィンドウにフォルダとして表示されます。Vega Studioは、開いているプロジェクトに新しいターボモジュールを依存関係として追加します。複数のVegaアプリを開いている場合は、拡張機能から、ターゲットアプリを選択するように求められます。
手順2： Vegaアプリをビルドする
-
[Vega Studio] > [Projects] からプロジェクトを選択します。
![[Projects] メニューの下でSampleAppプロジェクトを選択する画面のスクリーンショット。](https://m.media-amazon.com/images/G/01/mobile-apps/dex/vega/build-an-app/select-project._TTH_.png)
-
[Build Mode] セクションからビルドモード（デバッグまたはリリース）を選択します。
![[Build Modes] メニューから [Debug] オプションまたは [Release] オプションを選択する画面のスクリーンショット。](https://m.media-amazon.com/images/G/01/mobile-apps/dex/vega/build-an-app/build-modes._TTH_.png)
-
[Devices] セクションの [再生] ボタン
![[再生] ボタンのスクリーンショット](https://m.media-amazon.com/images/G/01/mobile-apps/dex/vega/build-an-app/play-button._TTH_.png)
をクリックして、対象の仮想デバイスを起動します。 -
プロジェクト名の横にある [ビルド] ボタン
![[ビルド] ボタンのスクリーンショット](https://m.media-amazon.com/images/G/01/mobile-apps/dex/vega/build-an-app/build-icon._TTH_.png)
をクリックして、ビルドプロセスを開始します。
![[Projects] メニューの下でSampleAppプロジェクトを選択する画面のスクリーンショット。](https://m.media-amazon.com/images/G/01/mobile-apps/dex/vega/build-an-app/select-project.png)
![[Build Modes] メニューから [Debug] オプションまたは [Release] オプションを選択する画面のスクリーンショット。](https://m.media-amazon.com/images/G/01/mobile-apps/dex/vega/build-an-app/build-modes.png)
ビルド出力の表示
- VS Codeの統合ターミナルパネルに移動します。
- [出力] タブを選択します。
-
ドロップダウンリストから [Vega] を選択します。
info build-kepler completedと表示されます。
注： ビルドに失敗した場合は、Vega Studioでのビルドに関する問題の修正を参照して、トラブルシューティングの手順を確認してください。
手順3： （任意）カスタムポートを構成する
ポート8081が既に別のプロセスで使用されている場合は、カスタムポートを指定できます。
- VS Codeで、[Code] > [基本設定] > [設定] に移動します。
- 検索ボックスに「React Native Port」と入力します。
- ポート番号を入力します。
-
プロンプトが表示されたら、VS Codeを再読み込みします。
デバッグセッションを開始すると、Vega Studioは、デバイスの共有の環境設定を自動的に
/data/shared_preferences.jsonに構成します。
手順4： Vegaアプリを実行してテストする
Vega仮想デバイスを使用する場合
-
[Vega Studio] > [Devices] に移動し、[VirtualDevice:Tv] を選択します。
-
[再生] ボタンをクリックして仮想デバイスを起動します。
-
VVDウィンドウが開いてデバイスの読み込みが完了するまで待ちます。
注： Vega Studioの [Devices] セクションに、「VirtualDevice:Tv」のステータスが「Loading...」ではなく準備完了として表示されます。 -
プロジェクト名の横にある [再生] ボタンをクリックします。
詳細については、Vega仮想デバイスを参照してください。
Fire TV Stickを使用する場合
- [Vega Studio] > [Devices] から、Fire TV Stickデバイスを選択します。
-
プロジェクト名の横にある [再生] ボタンをクリックします。
Fire TV Stick上でアプリが開きます。詳細については、Fire TV Stickを参照してください。
手順5： （任意）React Native Packagerを停止する
React Native Packagerを停止するには、VS Codeステータスバーを使用する方法と、VS Codeコマンドパレットを使用する方法の2つがあります。
オプション1： VS Codeステータスバーからの操作
下部にあるVS Codeステータスバーで、[React Native Packager] ボタンをクリックします。ボタンにカーソルを合わせると、[Stop Packager] というツールチップが表示されます。[Stop Packager] ツールチップボタンをクリックします。
![VS Codeステータスバーの [React Native Packager] ボタンに [Stop Packager] ツールチップが表示されている画面のスクリーンショット。](https://m.media-amazon.com/images/G/01/mobile-apps/dex/vega/build-an-app/rn-packager.png)
オプション2： VS Codeコマンドパレットからの操作
-
コマンドパレットを開きます。
Mac： Cmd+Shift+P
Linux： Ctrl+Shift+P
-
「React Native: Stop Packager」と入力して選択します。
注： Packagerを停止した後は、[Vega Studio] > [Projects] からアプリを再起動します。アプリ名の右にある [再生] ボタンをクリックします。
手順6： Vegaアプリをデバッグする
Vega Studioにはデバッガーが組み込まれています。これを使用するには、Vega Studioを使用して1行ずつデバッグを実行する方法の手順に従います。
手順7： アプリのパフォーマンスを分析する
Vega Studioには、アプリパフォーマンスの分析と最適化に役立つツールが用意されています。詳細については、次のページを参照してください。
Vega CLIを使用したアプリのビルド
Vegaコマンドラインインターフェイス（CLI）には、コア機能を備えた事前ビルド済みのプロジェクトテンプレートが用意されており、開発を迅速に進めるために役立ちます。各テンプレートには、Vegaデバイスでアプリを実行するために必要なファイルと構成が含まれています。これには、マニフェストファイル、ネイティブモジュール、適切なディレクトリ構造が含まれます。
プロジェクトテンプレート
使用可能なプロジェクトテンプレートの一覧を表示するには、次のコマンドを実行します。
vega project list-templates
vega project list-templatesを実行すると、次のプロジェクトテンプレートが表示されます。
- helloWorld - React Native v0.72に依存するアプリを作成するには、このプロジェクトテンプレートを使用します。
- basicTurboModule - カスタムターボモジュールを作成するには、このプロジェクトテンプレートを使用します。
- idlTurboModule - サポートされているすべてのReact NativeバージョンおよびネイティブのIDL APIと互換性があるアプリを作成するには、このプロジェクトテンプレートを使用します。
手順1： プロジェクトを生成する
-
アプリを作成するには、
vega project generateコマンドを使用します。このコマンドは次の4つの引数を受け取ります。
--template- Vegaプロジェクトテンプレート（例：helloWorld）。--name- アプリ名（スペースや特殊文字は入力しないでください）。--packageId- アプリの一意の識別子。
重要： packageIdは<tld>.<会社名>.<アプリ名>という形式にする必要があります。com.amazonは使用しないでください。--outputDir（省略可能）- プロジェクトの場所。プロジェクトの場所を指定しない場合、その場所はシステムによって現在の作業ディレクトリ内に作成されます。
サンプルコマンド：
以下のコマンド例では、
sampleappという名前の新しいアプリを作成します。このコマンドは、プロジェクトの場所へのパスを出力します。vega project generate --template helloWorld --name sampleapp --packageId com.amazondeveloper.sampleapp --outputDir sampleapp -
新しく作成したアプリに移動します。
cd sampleapp重要： デフォルトでは、マニフェストファイルに記述されるpackageIdはcom.amazondeveloper.appnameになります。アプリを作成するときは、packageIdを独自のドメイン名の逆引きDNS表記に置き換えてください。com.amazonは使用しないでください。
手順2： アプリをビルドする
依存関係をインストールし、ビルドを実行します。
npm install
npm run build:app
このコマンドは、必要なNPM依存関係をインストールし、ネイティブコードをビルドした後、Metroバンドラーを使用してJavaScriptをバンドルします。
ビルドによって、アプリパッケージのvpkgを含む以下のようなbuildフォルダが作成されます。
├── hellovega
│ ├── build
│ │ ├── x86_64-release
│ │ | ├──hellovega_x86_64.vpkg # x86コンピューター用の仮想デバイスでアプリを実行するには、このファイルへのパスを使用します
│ │ ├── armv7-release
│ │ | ├──hellovega_armv7.vpkg # Fire TV Stickでアプリを実行するには、このファイルへのパスを使用します
│ │ ├── aarch64-release
│ │ | ├──hellovega_aarch64.vpkg # Mシリーズコンピューター用の仮想デバイスでアプリを実行するには、このファイルへのパスを使用します
ビルドが成功したら、buildフォルダにターゲットアーキテクチャの.vpkgファイルが含まれていることを確認してください。
VPKGファイルの場所
ビルドによって、次の場所にVPKGファイルが生成されます。
一般的なパス構造：
<プロジェクトルート>/build/<CPUアーキテクチャ>-<ビルドタイプ>/<プロジェクト名>_<CPUアーキテクチャ>.vpkg
開発ビルド：
<プロジェクトルート>/build/<CPUアーキテクチャ>-debug/<プロジェクト名>_<CPUアーキテクチャ>.vpkg
リリースビルド：
<プロジェクトルート>/build/<CPUアーキテクチャ>-release/<プロジェクト名>_<CPUアーキテクチャ>.vpkg
例：
- プロジェクト名：hellovega
- VPKGの場所：~/workspaces
- リリース版VPKGの場所（アプリの申請でアップロードするファイル）：
~/workspaces/hellovega/build/armv7-release/hellovega_armv7.vpkg
ターミナルウィンドウで、React NativeのJavaScriptバンドラーであるMetroが起動します。Metroはエントリファイルを受け取り、すべてのコードと依存関係を含む単一のJavaScriptファイルを返します。
手順3： 高速リフレッシュを設定する
高速リフレッシュとは、再ビルドしなくてもアプリの変更を確認できるReact Nativeの機能です。Vega Studioでは高速リフレッシュが自動的に有効になりますが、Vega CLIでは手動でセットアップする必要があります。
詳細なセットアップ手順については、Vega CLIを使用した高速リフレッシュの設定を参照してください。
手順4： Vega仮想デバイスでアプリを実行する
Vega SDKにはVega仮想デバイスが含まれており、物理デバイスを必要とせずにアプリを実行およびテストできます。
詳細な手順については、Vega仮想デバイスでのアプリの実行を参照してください。
関連トピック
- Vega Studioでのビルドに関する問題の修正
- Vega仮想デバイスまたはFire TV Stickでのアプリの実行
- Vega CLIを使用してアプリをビルドするための高速リフレッシュの設定
- Vega拡張機能に関する問題を解決する
Last updated: 2026年3月31日
