as

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

Vega Studioのセットアップ

Vega Studioのセットアップ

Vega Studioは、Visual Studio Code(VS Code)とKiroの拡張機能です。Vegaソフトウェア開発キット(SDK)をインストールすると、このツールも自動的にインストールされ、以下の機能が提供されます。

  • 統合されたデバッグツール
  • リアルタイムでのパフォーマンスの監視
  • 組み込みのアプリ最適化機能
  • Fire TV Stickデバイスの直接管理
  • 包括的なテスト機能

Vega SDKのインストール時には、自動的にVS CodeにVega Studioが構成されます。Kiroをお使いの場合は、Vega Studioを手動でインストールする必要があります。Vega Studioを使用すると、VS CodeまたはKiroのコマンドパレットからすべてのVega開発ツールとコマンドに直接アクセスできます。

セットアップの確認

  1. VS CodeまたはKiroを開き、アクティビティバーにあるVega拡張機能アイコンインストールが成功するとVS CodeまたはKiroのアクティビティバーに表示されるVega拡張アイコンのスクリーンショットを探します。また、[Code] > [設定] > [拡張機能](Kiroでは [Kiro] > [Settings] > [Extensions])に移動することもできます。

  2. 次に、[拡張機能: Marketplace] 検索フィールドに「Vega Studio」と入力します。

    Vega拡張機能アイコンが表示された場合は、アプリの作成に進むか、Vega StudioのVega Studioの探索詳細な構成オプションを確認してください。

    Vega拡張機能アイコンが表示されない場合は、Vega Studioの手動インストールに進んでください。

Vega Studioの手動インストール

以下のインストールオプションのいずれかを選択します。 Microsoft Marketplace、Vega SDK、Open VSX Registry(Kiro 用)。

オプション1: Microsoft Marketplaceからインストールする

  1. [インストール] を選択します。
  2. [Open Visual Studio Code] をクリックします。
  3. メッセージが表示されたら、[続行] をクリックします。
  4. アクティビティバーでVega拡張機能アイコンを探します。

オプション2: Vega SDKからインストールする

  1. ターミナルを開き、次のコマンドを実行します。

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

    vega setup-studio --install
    
  2. メッセージが表示されたら、[リロード] をクリックします。

  3. アクティビティバーでVega拡張機能アイコンを探します。

オプション3: KiroでOpen VSX Registryからインストールする

  1. Open VSX RegistryでVega Studio拡張ページに移動します。
  2. [ダウンロード] をクリックします。
  3. 使用しているシステムに対応するアーキテクチャを選択します。
  4. Kiro Kiroアイコンを開きます。
  5. [Settings] アイコン > [Command Palette]…(MacではCmd+Shift+P、LinuxではCtrl+Shift+P)を選択します。
  6. Extensions: Install from VSIX…」と入力し、コマンドを選択します。
  7. 手順3でダウンロードした.vsixファイルを参照します。
  8. アクティビティバーでVega拡張機能アイコンを探します。

Vega Studioパネルの探索

Vega Studioをインストールすると、[Vega Studio] パネルからすべての開発ツールにアクセスできるようになります。

  1. VS CodeまたはKiroを開きます。
  2. アクティビティバーでVega拡張機能アイコンを探します。
  3. Vega拡張機能アイコンをクリックすると [Vega Studio] パネルが開き、次のセクションが表示されます。

    • [Projects] - 開発プロジェクトを作成、管理、整理します。
    • [Build Modes] - デバッグとリリースのビルド設定を構成します。
    • [Devices] - 接続されているデバイスの管理と監視を行います。
    • SDK Manager - SDKバージョンのインストール、表示、切り替えを行います。
    • [App Performance Tools] - アプリのパフォーマンスの監視と最適化を行います。
    • [Help and Feedback] - ドキュメントやスタートガイドへのアクセスと、サポートリクエストの送信ができます。

Vegaプロジェクトの管理

[Projects] セクションには、現在のプロジェクトの一覧と、各プロジェクトをビルド、インストール、実行するためのオプションが表示されます。

[Vega Studio] パネルの [Projects] セクションのスクリーンショット。現在のプロジェクトのリストとビルド、インストール、実行のオプションが表示されています。

ビルドモードの選択

[Build Modes]セクションでは、Vegaアプリの [Debug][Release] のいずれかのビルドを選択できます。選択内容は、変更されない限り、それ以降のすべてのビルドに適用されます。

[Build Modes] セクションのスクリーンショット。Vegaアプリのビルドを設定するための [Debug and Release] 切り替えオプションが表示されています。

デバッグモード

デバッグモードは、開発とテスト用に設計されています。デバッグモードでは、デバッグ用のアーティファクトが生成され、Metroパッケージャー(React NativeのJavaScriptバンドラー)が有効になります。このモードでは、高速リフレッシュ(英語のみ)を使用してコードをリアルタイムで更新できます。

Vega Studioでは、デバッグモードの使用時に自動的に高速リフレッシュが有効になります。高速リフレッシュを使用するには、次の手順に従います。

  1. Vega Studioでアプリをビルドします。
  2. Vega仮想デバイスまたはFire TV Stickでアプリを実行します。
  3. コードに変更を加えます。デバイス上で即座に変更が反映されます。

リリースモード

リリースモードは、最終的なデプロイと公開を目的とした、最適化された本番環境用コードを作成します。リリースモードでは、高速リフレッシュなどの開発機能は無効になり、デバッグ情報が削除され、ファイルサイズが小さくなります。これにより、実行時のパフォーマンスが向上します。

デバイスの表示

[Devices] セクションには、コンピューターに接続されているすべてのデバイス(仮想デバイスまたは物理デバイス)が表示されます。デバイスを接続または切断すると、デバイスの一覧が自動的に更新されます。

[Devices] セクションのスクリーンショット。接続されたデバイスを右クリックすると表示されるデバイスオプションを含むコンテキストメニューが表示されています。

このインターフェイスからデバイスを起動できます。

[Devices] セクションのデバイスリストのコンテキストメニューから仮想デバイスを起動する方法を示すスクリーンショット。

プロジェクトを実行するデバイスを選択します。

[Devices] セクションのデバイスリストメニューからターミナルを開くことができる場所を示すスクリーンショット。

ターミナルセッションを開いてデバイスを直接操作することもできます。

Vega SDK Managerをインストールしてバージョンを切り替える方法

[SDK Manager] セクションでは、新しいSDKバージョンをインストールしたり、インストールされているSDKバージョンを表示したり、インストールされているバージョンを切り替えたりできます。

Vega Studio拡張機能セクションでプロジェクト起動オプションを設定できる場所を示すスクリーンショット。

新しいSDKバージョンをインストールするには:

  1. Vega Studioのサイドバーにある [SDK Manager] セクションを選択します。
  2. [Install New SDK] を選択するか、使用可能なバージョンの横にある[+] アイコンを選択します。
  3. インストールが完了するまで待ちます。

SDKのバージョンを切り替えるには:

  1. Vega Studioのサイドバーにある [SDK Manager] セクションを選択します。
  2. アクティベートするバージョンを選択します。
  3. プロンプトが表示されたら、VS CodeまたはKiroをリロードします。

コマンドパレットからSDKを管理することもできます。SDK Managerのコマンドの完全なリストについては、Vega Studioコマンドを参照してください。

パフォーマンス監視ツールへのアクセス

このセクションから、アプリを最適化するためのパフォーマンス監視ツールにアクセスできます。一部のツールは、アプリが物理デバイスで実行されている場合にのみ使用できます。

[App Performance Tools] セクションのパフォーマンス監視ツールとデバッグツールを示すスクリーンショット。
  • Activity Monitor - アプリのメモリとCPU使用率をリアルタイムで監視します。
  • Memory Monitor - アプリのメモリ使用量をリアルタイムで監視します。
  • App KPI Visualizer - 主要業績評価指標を測定し、アプリがパフォーマンス基準を満たしているかどうかを検証します。
  • Chrome Dev Tools - アプリの検査、デバッグ、プロファイリングを行います。VS Codeに組み込まれているデバッガーの代わりに使用できます。

フィードバックや問題の送信、リソースとガイドの検索

このセクションには、以下のリンクが表示されます。

  • [Feedback] - フィードバックや問題をVegaチームに送信できます。
  • [Documentation] - Vega向けの開発を始めるためのリソースにリンクします。
  • [Walkthrough] - プロジェクトの設定、ビルドモード、デバイスの管理、パフォーマンスツールに関するガイドを提供します。
  • [Create bug report] - システム、デバイス、ログに関する診断情報を収集します。
[Help and Feedback] セクションの [Feedback]、[Documentation]、[Walkthrough]、[Create Bug Report] などの利用可能なリソースを示すスクリーンショット。

[Create bug report] リンクをクリックすると、システム、デバイス、ログに関する診断情報を収集するバグレポートツールがアクティブ化されます。このツールにより、情報がコンピューター上のファイルとして保存され、サポートチケットを送信するときに添付できます。

レポートには以下の情報が含まれます。

システム情報

  • オペレーティングシステムの詳細(プラットフォーム、バージョン、アーキテクチャ)
  • ハードウェア情報(メモリ、CPU)
  • 環境の詳細(Node.jsバージョン、SDKバージョン)

デバイス情報

  • 接続されているVegaデバイスのリスト
  • デバイスの詳細(タイプ、OS、アーキテクチャ)
  • デバイスのステータス情報

ログファイル

  • Vega Studio拡張機能のログ
  • React Nativeアプリのログ
  • Vega SDKのログ
  • デバイスログ(接続されているデバイスのログ)
  • デバイスからの最新の集約クラッシュレポート(ACR)

プライバシーの保護

バグレポートを送信する前に、ファイル全体を確認してください。ファイルには、ユーザー名、ホームディレクトリのパス、ファイルのパスなどの個人情報や、その他の機密データが含まれている可能性があります。レポートの内容を評価し、送信前に個人情報をすべて削除してください。

バグレポートの作成が必要な場面

次のような場合は、バグレポートを作成して送信してください。

  • Vega Studioでエラーまたは予期しない動作が発生する
  • Vega Studioがクラッシュまたはフリーズする
  • 機能が期待どおりに動作しない
  • 仮想デバイスまたはデバイスがクラッシュする

バグレポートの作成方法

  1. Vega Studioで [Help and Feedback] ビューを開きます。
  2. [Create Bug Report] をクリックします。

    システムによって次の処理が実行されます。

    • バグレポートファイルが生成されます(これには数分かかる場合があります)。
    • ファイルがホームディレクトリに保存されます。
    • ファイルの場所が表示されます。
    • Amazonアプリストア開発者サポートページが開きます。
  3. Amazonアプリストア開発者サポートページが表示されたら、必要な情報を入力します。
  4. 生成されたバグレポートファイルをサポートチケットに添付します(サイズ制限は10MB)。

システムによるレポートの作成に失敗する場合:

  1. VS CodeまたはKiroを再起動します。
  2. 手順1~4を繰り返します。

サポートが必要な場合は、

問題を解決したり、答えを見つけたりするには、次のリソースを使用します。

詳細オプションの構成

Vega Studioには、開発環境をカスタマイズするための高度な設定が用意されています。これらのオプションを使用して、拡張機能の動作をワークフローに合わせて調整します。

デバイスの自動検出

Vega Studioでは、デバイスの一覧が自動的に更新され、接続ステータスがリアルタイムで表示されます。

デバイス検出を有効にするチェックボックスをオンにする場所を示すスクリーンショット。この機能は自動デバイス検出と呼ばれます。

デバイスの自動検出をオンまたはオフにするには:

  1. [拡張機能] > [Vega Studio] に移動します。
  2. [Vega] > [Features: Automatic Device Detection] に移動します。
  3. この機能をオンにするには、チェックボックスをオンにします。機能をオフにするには、チェックボックスをオフにします。

ビルドターゲットアーキテクチャの最適化

Vega Studioは、ターゲットデバイスのアーキテクチャ向けのアーティファクトのみを作成することでビルドを最適化し、ビルド時間とパッケージサイズを削減します。

Vega Studio拡張機能設定パネルの [Build Target Architecture Optimization] チェックボックスのスクリーンショット。

たとえば、Fire TV Stickをターゲットに設定する場合:

  • 含まれるもの:armv7アーティファクト
  • 含まれないもの:x86_64およびaarch64アーティファクト

ビルドのターゲットアーキテクチャの最適化をオンまたはオフにするには:

  1. [拡張機能] > [Vega Studio] > [Settings] に移動します。
  2. [Vega] > [Features: Build Target Architecture Optimization] に移動します。
  3. この機能をオンにするには、チェックボックスをオンにします。機能をオフにするには、チェックボックスをオフにします。

起動オプション

Vega Studioでは、VS CodeまたはKiroでアプリ起動コマンドのパラメーターを設定できます。

起動オプションを構成するには:

  1. 設定を開きます。

    • Mac: [Code] > [基本設定] > [設定] (VS Code)または[Kiro] > [Settings] > [Settings](Kiro)
    • Linux: [ファイル] > [ユーザー設定] > [設定] に移動します。
  2. 構成オプションを選択します。

    • [ユーザー] - 現在のユーザーのすべてのプロジェクトに適用されます。
    • [ワークスペース] - ワークスペース内のすべてのプロジェクトに適用されます。
    • [プロジェクト] - 特定のプロジェクトに適用されます。

    たとえば、以下の画像では、構成する設定オプションとして [ワークスペース] が選択されています。

    Vega Studio拡張機能セクションでプロジェクト起動オプションを設定できる場所を示すスクリーンショット。
  3. [拡張機能] > [Vega Studio] に移動します。
  4. [Vega Launch Options] セクションで、使用する起動オプションを入力します。

モノレポのサポート

Vega Studioは、npmYarnのワークスペース(v0.20以降)を通じてモノレポレイアウトをサポートしています。セットアップ手順、設定オプション、トラブルシューティングについては、モノレポサポートのセットアップを参照してください。

次の手順


Last updated: 2026年3月17日