Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
Ring
AWS
ドキュメント
Support
Contact Us
My Cases

Console

as

開発
設計と開発
公開
リファレンス
サポート
メインコンテンツへスキップ
このページでは、Vega SDKを使用してアプリを構築する手順を説明します。SDKには、複数のテンプレートと、2つのビルドアプローチとして Vega StudioとVega CLIが含まれています。Vega Studioはビジュアルインターフェイスを提供するVS Code拡張機能で、組み込みのデバッグ機能と自動高速リフレッシュを備えています。Vega CLIはターミナルベースのワークフローを提供し、手動による高速リフレッシュのセットアップが可能です。 初めてVegaでアプリをビルドする場合は、Hello Worldアプリの作成を参照してください。

​
前提条件

  • Vega SDKをインストールします。
  • アプリのmanifest.tomlでOSのバージョンを宣言します。[os.version]セクションがない場合、ビルドは失敗します。これを追加するには、プロジェクトルートから次のコマンドを実行します。
    マニフェスト構造の詳細については、Vegaアプリのマニフェストファイルの概要を参照してください。

​
ビルドオプション

ビルド方法は以下から選択できます。

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

Vega Studioは、アプリのビルド、実行、テスト、デバッグ、パフォーマンス分析を行うことができるVS Codeの拡張機能です。Fire TVやその他のVega対応デバイスをサポートしています。このセクションでは、Vega Studioを使用してVegaアプリをビルドする手順について説明します。

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

  1. VS Codeを開きます。
  2. アクティビティバーからVega拡張機能のアイコンVega Studioのアイコンをクリックして、Vega Studioパネルを開きます。
  3. [プロジェクト] セクションの [+]（Vegaプロジェクトの作成）アイコンをクリックします。
  4. プロジェクトテンプレートを選択します。
    • helloWorld - React Native v0.83に依存するアプリを作成するには、このプロジェクトテンプレートを使用します。
    • helloWorld-rn72 - React Native v0.72に依存するアプリを作成するには、このプロジェクトテンプレートを使用します。
    • basic-turbo-module - 独自のネイティブロジックを呼び出すためのスタブを含むサンプルのターボモジュールです。
    • idl-turbo-module - IDLで定義されたネイティブOS APIを使用するサンプルのターボモジュールです。
    • vegaWebview - WebViewアプリを作成するには、このプロジェクトテンプレートを使用します。
  5. プロジェクトのディレクトリを選択します。
  6. アプリのプロジェクト名を入力します（スペースや特殊文字は使用できません）。 例：MySampleProject プロジェクト名を入力したら、Enterキーを押します。
  7. プロジェクトのパッケージ名を<top-level domain>.<company_name>.<app_name>の形式で入力します。 例：com.mycompany.vegaproject プロジェクトのパッケージ名を入力したら、Enterキーを押します。 Vega Studioにより、選択したテンプレートに基づいてプロジェクトが作成されます。 プロジェクトを開いた状態でbasic-turbo-moduleテンプレートまたはidl-turbo-moduleテンプレートを選択すると、Vega Studioによってマルチルートワークスペースが作成されます。新しいプロジェクトは、同じVS Codeウィンドウにフォルダとして表示されます。Vega Studioは、開いているプロジェクトに新しいターボモジュールを依存関係として追加します。 複数のVegaアプリを開いている場合は、拡張機能から、ターゲットアプリを選択するように求められます。

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

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

​
ビルド出力の表示

  1. VS Codeの統合ターミナルパネルに移動します。
  2. [出力] タブを選択します。
  3. ドロップダウンリストから [Vega] を選択します。 info build-kepler completedと表示されます。

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

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

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

​
Vega仮想デバイスを使用する場合

  1. [Vega Studio] > [Devices] に移動し、[VirtualDevice:Tv] を選択します。
  2. [再生] ボタンをクリックして仮想デバイスを起動します。
  3. VVDウィンドウが開いてデバイスの読み込みが完了するまで待ちます。
  4. プロジェクト名の横にある [再生] ボタンをクリックします。 詳細については、Vega仮想デバイスを参照してください。

​
Fire TV Stickを使用する場合

  1. [Vega Studio] > [Devices] から、Fire TV Stickデバイスを選択します。
  2. プロジェクト名の横にある [再生] ボタンをクリックします。 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] ツールチップが表示されている画面のスクリーンショット。

​
オプション2：VS Codeコマンドパレットからの操作

コマンドパレットのReact Native Stop Packagerコマンドを示すスクリーンショット。
  1. コマンドパレットを開きます。 Mac： Cmd+Shift+P Linux： Ctrl+Shift+P
  2. 「React Native: Stop Packager」と入力して選択します。

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

Vega Studioにはデバッガーが組み込まれています。これを使用するには、Vega Studioを使用して1行ずつデバッグを実行する方法の手順に従います。

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

Vega Studioには、アプリパフォーマンスの分析と最適化に役立つツールが用意されています。詳細については、次のページを参照してください。

​
関連トピック

最終更新日 2026年10月26日