Hello Worldアプリの作成

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

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

事前の準備

Vegaでビルドを開始する前に、Vega SDKをインストールする必要があります。SDKには、アプリの作成、ビルド、実行に必要なツールが含まれています。

Hello Worldアプリのビルド

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

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

1. VS Codeを起動します。

2. アクティビティバーのVega拡張機能アイコンをクリックして拡張機能に移動します。

   

3. [+] アイコンをクリックして、新しいプロジェクトを作成します。
4. テンプレートhello-world（React Native 0.72ベースのテンプレート）を選択します。
5. プロジェクトディレクトリを選択します。

6. アプリに名前を付けます。この例では次の名前を使用しています。

   アプリ名： VegaProject

   パッケージ名：com.mycompany.VegaProject

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

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

1. Vega拡張機能で、ワークスペース内のVegaProjectを見つけて選択します。
2. ビルドモードを [Debug] に設定します。これにより、高速リフレッシュがデフォルトで有効になるため、アプリに保存した変更はすべてリアルタイムでアプリに反映されます。

3. VegaProjectの横にあるビルドボタンをクリックします。

4. VS Codeの [出力] タブで、ビルドの成功メッセージを確認します。

手順3： Vega仮想デバイス（VVD）での実行

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

1. 拡張機能パネルの [Devices] で [VirtualDevice:Tv] を選択し、再生ボタンをクリックします。
2. VVDウィンドウが開くのを待ちます。
3. VegaProjectの横にある [Play] ボタンをクリックします。

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

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

関連リソース

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

• Vegaのサンプルアプリを使用してアプリ開発を加速させます。
• Vegaビデオアプリのチュートリアルを完了してください。チュートリアルでは、W3Cメディアプレーヤーを使用してビデオアプリを作成する手順を詳しく説明します。
• すべてのビルドオプションを確認し、ほかのテンプレートやネイティブモジュールを試します。
• ドキュメントでその他の開発オプションを確認します。

• 前へ – Vega SDKのインストール
• 次へ - サンプルアプリ

---

Last updated: 2025年10月1日