as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
Ring
AWS
ドキュメント
Support
Contact Us
My Cases
開発
設計と開発
公開
リファレンス
サポート

Hello Worldアプリの作成

Hello Worldアプリの作成

このチュートリアルでは、Vega SDKのVS Code拡張機能であるVega Studioを使用して、初めてのVegaアプリを作成、ビルド、実行する手順を説明します。この例では、React Nativeアプリテンプレートに基づいてVegaProjectというアプリを作成します。このアプリは、Vega SDKに含まれるシミュレートされたFire TV StickであるVega仮想デバイスで動作します。

Vega CLIやその他のアプリテンプレートの使用など、すべてのビルドオプションを調べる場合は、アプリのビルドを参照してください。

前提条件

Hello Worldアプリの作成

手順1: テンプレートから新しいアプリを作成する

まず、Vegaテンプレートを使用して新しいアプリを作成する必要があります。

  1. VS CodeのアクティビティバーでVega機能拡張アイコンVegaアイコンのスクリーンショットを選択して拡張機能に移動します。
  2. [+] アイコンをクリックして、新しいプロジェクトを作成します。
  3. hello-worldテンプレート(React Native 0.72ベースのテンプレート)を選択します。
  4. プロジェクトディレクトリを選択するか新しく作成し、そのディレクトリを開きます。
  5. プロジェクトとパッケージに名前を付け、それぞれの名前の入力後にEnterキーを押します。この例では次の名前を使用しています。

    アプリ名VegaProject

    パッケージ名:com.myorg.VegaProject

  6. ワークスペースのプロンプトが表示されます。ワークスペースに名前を付け、任意の場所に保存します。

    ワークスペースのプロンプトのスクリーンショット。ここでワークスペースに名前を付け、保存場所を選択します。

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

次に、アプリをテストモードでビルドします。

  1. Vega拡張機能で、ワークスペース内のVegaProjectを見つけて選択します。

    Visual Studio Codeで [Projects] メニューの下に表示されるVegaProjectプロジェクトの位置を示すスクリーンショット。
  2. ビルドモードを [Debug] に設定します。これにより、高速リフレッシュがデフォルトで有効になるため、アプリに保存した変更はすべてリアルタイムでアプリに反映されます。
  3. VegaProjectの横にあるビルドボタンをクリックします。

    VegaProjectプロジェクトのビルドボタンの位置を示すスクリーンショット。
  4. VS Codeの [出力] タブで、ビルドの成功メッセージを確認します。

    2025-12-16 15:07:44.151 [info] [native-build] kepler ktbuild exited with code 0
    2025-12-16 15:07:44.198 [info] info build-kepler completed
    

手順3: Vega仮想デバイス(VVD)での実行

最後に、VegaのFire TV StickシミュレーターであるVega仮想デバイス(VVD)でアプリを実行します。

  1. 拡張機能パネルの [Devices][VirtualDevice:Tv] を選択し、再生ボタンをクリックします。

    VirtualDevice:Tvの [Play] ボタンの位置を示すスクリーンショット。
  2. VVDウィンドウが開くのを待ちます。
  3. VegaProjectの横にある [Play] ボタンをクリックします。

    VegaProjectの [Play] ボタンの位置を示すスクリーンショット。

アプリを実行すると、VVDにHello Worldアプリの内容が反映されます。

VVDで実行されたVegaのHello Worldアプリテンプレートのスクリーンショット。

おめでとうございます! これで初めてのVegaアプリが正常に作成され、実行されました。App.tsx内のテキストの一部を変更して(必ず保存してください)、実行中のアプリに変更がリアルタイムで反映されることを確認してください。

関連リソース

初めてのVegaアプリの作成が完了したら、次のリソースを活用して理解を深めてください。


Last updated: 2025年12月17日