Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
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では、特定の要件に基づくカスタムアプリをビルドできるように複数の方法を用意しています。ビルド方法は次の中から選択できます。


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

Vega Studioは、Fire TVやその他のVega対応プラットフォームでのアプリの作成、ビルド、実行、テスト、デバッグ、パフォーマンス分析を可能にする統合開発環境（IDE）です。このセクションでは、Vega Studioを使用してVegaアプリをビルドする手順について説明します。

前提条件

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

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

  1. Visual Studio Code（VS Code）を開きます。

  2. アクティビティバーから [Vega拡張機能] アイコン VVDアイコン をクリックして、[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. プロジェクトのパッケージ名を<トップレベルドメイン>.<会社名>.<アプリ名>の形式で入力します。

    例：com.org.vegaproject

    プロジェクトのパッケージ名を入力したら、Enterキーを押します。

    Vega Studioにより、選択したテンプレートに基づいてプロジェクトが作成されます。開いているプロジェクトでbasic-turbo-moduleまたはidl-turbo-moduleテンプレートを選択すると、Vega Studioによりマルチルートワークスペースが作成されます。新しいプロジェクトがフォルダとして表示されるため、ターボモジュールを依存関係として使用し、両方を同じVS Codeウィンドウで開発できるようになります。Vega Studioにより、開いているプロジェクトに依存関係として新しいbasic-turbo-moduleが追加されます。turbomoduleの作成時に複数のVegaアプリを開いている場合は、拡張機能から、ターゲットアプリを選択するように求められます。

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

  1. [Kepler] > [プロジェクト] からプロジェクトを選択します。

    画面にプロジェクトを選択する場所が表示されています
    プロジェクトの選択

  2. [Build Mode] セクションからビルドモード（デバッグまたはリリース）を選択します。

    ビルドモードオプション

  3. [Devices] セクションの [再生] ボタン [再生] ボタン をクリックして、対象仮想デバイスを起動します。

  4. プロジェクト名の横にある [ビルド] ボタン [ビルド] ボタン をクリックしてビルドプロセスを開始します。

ビルド出力の表示

  1. VS Codeの統合ターミナルパネルに移動します。
  2. [出力] タブを選択します。

  3. ドロップダウンリストから [Kepler] を選択します。

    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. [Kepler Studio] > [Devices] に移動し、[VirtualDevice:Tv] を選択します。

  2. [再生] ボタンをクリックして仮想デバイスを起動します。

  3. VVDウィンドウが開き、デバイスの読み込みが完了するまで待ちます（VirtualDevice:Tvのステータスは「読み込み中...」ではなく「準備完了」になります）

  4. プロジェクト名の横にある [再生] ボタンをクリックします。

    詳細については、Vega仮想デバイスを参照してください。

Fire TV Stickの場合：

  1. [Kepler Studio] > [Devices] からFire TV Stickデバイスを選択します。

  2. プロジェクト名の横にある [再生] ボタンをクリックします。

    詳細については、Fire TV Stickを参照してください。

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

React Native Packagerを停止するには次の2つの方法があります。

オプション1： VS Codeステータスバーからの操作

画面には、VS CodeからReact Native Packagerを停止する場所が表示されます
ステータスバーからReact Native Packagerを停止する

下部にあるVS Codeステータスバーにある [React Native Packager] ボタンをクリックします。カーソルを合わせると、[Stop Packager] というツールチップが表示されます。

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

画面に、VS CodeコマンドパレットからReact Native Packagerを停止する場所が表示されています
コマンドパレットからReact Native Packagerを停止する

  1. コマンドパレットを開きます。

    Mac： Cmd+shift+P Linux： Ctrl+Shift+P

  2. 「React Native: Stop Packager」と入力して選択します。

    いずれかのオプションを使用してPackagerを停止した後、[Kepler Studio] > [Projects] からアプリを再起動します。アプリ名の右にある [再生] ボタンをクリックします。

手順6： Vegaアプリのデバッグ

Vega Studioにはデバッガーが組み込まれています。これを使用するには、Vega Studioでのデバッグにある手順に従います。

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

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


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

Vegaコマンドラインインターフェイス（CLI）には、コア機能を備えた事前ビルド済みのプロジェクトテンプレートが用意されており、開発を迅速に進めるために役立ちます。各プロジェクトテンプレートには、マニフェストファイル、ネイティブモジュール、適切なディレクトリ構造など、アプリをVegaデバイスで実行するために必要なすべてのファイルと構成が含まれています。

前提条件

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

プロジェクトテンプレート

使用可能なプロジェクトテンプレートの一覧の表示：

クリップボードにコピーしました。

kepler project list-templates

kepler project list-templatesを実行すると、次のプロジェクトテンプレートが表示されます。

  • hello-world - React Native v0.72に依存するアプリを作成するには、このプロジェクトテンプレートを使用します。
  • basic-turbo-module - カスタムターボモジュールを作成するには、このプロジェクトテンプレートを使用します。
  • idl-turbo-module - サポートされているReact NativeのすべてのバージョンおよびネイティブのIDL APIと互換性があるアプリを作成するには、このプロジェクトテンプレートを使用します。

手順1： プロジェクトの生成

  1. アプリを作成するには、kepler project generateコマンドを使用します。

    このコマンドは次の4つの引数を受け取ります。

    • --template - Vegaプロジェクトのテンプレート（例：hello-world）
    • --name - アプリ名（スペースや特殊文字は入力しないでください）
    • --packageId - アプリの一意の識別子
    • --outputDir（省略可能） - プロジェクトの場所プロジェクトの場所を指定しない場合、その場所はシステムによって現在の作業ディレクトリ内に作成されます。

    サンプルコマンド：

    以下のコマンド例では、keplersampleappという名前の新しいアプリを作成します。このコマンドは、プロジェクトの場所へのパスを出力します。

    クリップボードにコピーしました。

    kepler project generate --template hello-world --name keplersampleapp --packageId com.amazondeveloper.keplersampleapp --outputDir keplersampleapp

  2. 新しく作成したアプリに移動します。

    クリップボードにコピーしました。

    cd keplersampleapp

手順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シリーズコンピューター用の仮想デバイスでアプリを実行するには、このファイルへのパスを使用します

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仮想デバイスでのアプリの実行を参照してください。

Last updated: 2025年10月10日

フォローする

サポート対象デバイス

amazon_developer_logo

© 2010-2025, Amazon.com, Inc. or its affiliates. All Rights Reserved. 無断複写·転載を禁じます。

利用規約

Amazon開発者ブログ

お問い合わせ