Vega Studioのセットアップと使用方法

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

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

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

​

前提条件

1. VS Codeを開き、アクティビティバーから [Vega Extension] アイコンを探すか、[コード] > [基本設定] > [拡張機能]に移動します。
2. 次に、[拡張機能：マーケットプレース] 検索フィールドに「Vega Studio」と入力します。 [Vega Extension] アイコンが表示された場合は、アプリの作成に進むか、Vega Studioの基本機能と詳細な構成オプションについて学んでください。 [Vega Extension] アイコンが表示されない場合は、Vega Studioの手動インストールに進んでください。

​

Vega Studioの手動インストール

以下のインストールオプションのいずれかを選択します。

​

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

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

​

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

1. Vega SDKがPATHに含まれているかどうかを確認します。
   export KEPLER_SDK_PATH=<SDKへのパス>
   export PATH=$KEPLER_SDK_PATH/bin:$PATH
   
   を実際のディレクトリパスに置き換えます。
2. ターミナルを開き、次のコマンドを実行します。
   kepler setup-studio --install
   
3. メッセージが表示されたら、[リロード] をクリックします。
4. アクティビティバーで [Vega Extension] アイコンを探します。

​

基本機能の使用方法

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

1. VS Codeを開きます。
2. アクティビティバーで [Vega Extension] アイコンを探します。
3. Vega拡張機能アイコンをクリックすると [Vega Studio] パネルが開き、次のセクションが表示されます。
   • [Projects] - 開発プロジェクトを作成、管理、整理します。
   • [Build Modes] - デバッグとリリースのビルド設定を構成します。
   • [Devices] - 接続されているデバイスの管理と監視を行います。
   • [App Performance Tools] - アプリのパフォーマンスの監視と最適化を行います。
   • [Help and Feedback] - ドキュメントやスタートガイドへのアクセスと、サポートリクエストの送信ができます。

​

Vegaプロジェクトの管理

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

​

ビルドモードの選択

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

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

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

1. Vega Studioでアプリをビルドします。
2. Vega仮想デバイスまたはFire TV Stickでアプリを実行します。
3. コードに変更を加えます。デバイス上で即座に変更が反映されます。
   • [Release] モード - 最終的なデプロイと公開を目的とした、最適化された本番環境用コードを作成します。高速リフレッシュなどの開発機能は無効になり、デバッグ情報が削除され、ファイルサイズが小さくなります。これにより、実行時のパフォーマンスが向上します。

デバッグモードとリリースモードの違いは、Vega向けReact Nativeを含むすべてのVegaアプリに適用されます。デバッグモードでは高速リフレッシュなどの開発ツールが提供されている一方、リリースモードではアプリを本番環境向けに最適化することができます。

​

デバイスの表示

[Devices] セクションには、コンピューターに接続されているすべてのデバイス（仮想デバイスまたは物理デバイス）が表示されます。デバイスを接続または切断すると、デバイスの一覧が自動的に更新されます。 このインターフェイスからデバイスを起動できます。 プロジェクトを実行するデバイスを選択します。 ターミナルセッションを開いてデバイスを直接操作することもできます。

​

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

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

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

​

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

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

• [Feedback] - フィードバックや問題をVegaチームに送信できます。
• [Documentation] - Vega向けの開発を始めるためのリソースにリンクします。
• [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を再起動します。
2. 手順1～4を繰り返します。

​

サポートが必要な場合

問題を解決したり、質問への回答を得たりするには、次のリソースが役立つ可能性があります。

• サポートケースを作成して、Amazonサポートから直接サポートを受ける
• DevAssistantを使用して必要な情報を検索する
• コミュニティフォーラムにアクセスして、ほかの開発者が同様の問題を報告していないか確認する

​

詳細オプションの構成

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

​

デバイスの自動検出

Vega Studioでは、デバイスの一覧が自動的に更新され、接続ステータスがリアルタイムで表示されます。 デバイスの自動検出をオンまたはオフにするには：

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

​

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

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

• ✅ 生成：armv7アーティファクト
• ❌ スキップ：x86_64およびaarch64アーティファクト

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

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

​

起動オプション

Vega Studioでは、アプリの起動コマンドにオプション（パラメーター）を渡すことができます。そのためには、VS Codeでオプションを構成します。 起動オプションを構成するには：

1. VS Codeの設定を開きます。
   • Mac： [Code] > [基本設定] > [設定] に移動します。
   • Linux： [ファイル] > [ユーザー設定] > [設定] に移動します。
2. 構成オプションを選択します。
   • [ユーザー] - 現在のユーザーのすべてのプロジェクトに適用されます。
   • [ワークスペース] - ワークスペース内のすべてのプロジェクトに適用されます。
   • [プロジェクト] - 特定のプロジェクトに適用されます。
   たとえば、以下の画像では、構成する設定オプションとして [ワークスペース] が選択されています。
3. [拡張機能] > [Vega Studio] に移動します。
4. [Vega Launch Options] セクションで、使用する起動オプションを入力します。

​

モノレポのサポート

「モノリシックリポジトリ」（モノレポ）では、複数のプロジェクトやパッケージが単一のリポジトリに含まれています。v0.20以降、Vega StudioはモノレポレイアウトのパッケージをnpmとYarnワークスペースでサポートしています（Yarn v2レイアウトが推奨されますが、nohoistを除きv1もサポートしています）。 モノレポのサポートにより、次のことが可能になります。

• モノレポパッケージを開く
• VegaプロジェクトをVS Codeワークスペースにインポートする
• 複数のプロジェクトを効率的に管理する

モノレポ構造は、コード共有と再利用を可能にし、依存関係の管理を一元化し、プロジェクト設定を簡素化することで、効率的な開発が実現できます。 Vega SDKには、デフォルトでnpmパッケージマネージャーが含まれています。Yarnを使用する場合は、Yarnワークスペースの設定を参照してください。

​

モノレポのサポートをオンまたはオフにする方法

[Settings] > [Vega] > [Features: Monorepo] に移動します。

​

モノレポの動作を変更する方法

1. [Settings] > [Vega] > [Features: Monorepo Synchronization] に移動します。
2. 次のオプションから選択します。
   • [Auto] - モノレポパッケージを開いたときまたはVS Codeワークスペースに追加したときに、サブパッケージを自動的に検出してインポートします。
   • [Ask for confirmation] - サブパッケージを検出しますが、インポートする前に許可を求めます。

​

さまざまなワークフローの理解

モノレポのレイアウトパッケージを使用する場合、ワークフローは次の点で異なります。

1. モノレポのパッケージなしでワークスペースを開く - ワークフローに影響を与えることなく、バックグラウンドでパッケージレイアウトを識別します。
2. モノレポのパッケージでワークスペースを開く - レイアウトを識別し、サブパッケージを列挙し、Vegaプロジェクトを検出してワークスペースに追加します（モノレポのサポートで説明されているモノレポの同期設定に従います）。
3. モノレポのパッケージをVS Codeワークスペースに追加する - モノレポのパッケージでワークスペースを開くときと同じように機能します。
4. モノレポ全体をビルド - VS Codeのデフォルトのビルドタスクを使用します。 Vega Studioはビルドタスクの自動構成をサポートしていません。そのため、手動で構成する必要があります。VS Codeでは、次のいずれかを実行できます。
   • [Terminal] > [Run Build Task] に移動します。
   • キーボードのCmd+Shift+Bキーを押します。
   • コマンドパレットに移動し、「Tasks: Run Build Task」と入力します。
5. Vegaプロジェクトをモノレポに追加する - モノレポへのVegaプロジェクトの追加の手順を参照してください。
6. VS Codeエクスプローラービュー - Vegaプロジェクトをモノレポ内に表示し、VS Codeワークスペースに個別のエントリとして表示します。
7. Vega Studioビュー - Vegaプロジェクトを通常どおり表示します。
8. その他のワークフロー - モノレポ以外のワークスペースと同じです。

​

モノレポへのVegaプロジェクトの追加

1. モノレポのパッケージディレクトリにあるテンプレートから新しいVegaプロジェクトを作成します。
2. JSアプリパッケージの依存関係を更新します。
   // 次のような行を変更します。
   "@prefix/module-name": "file:...../prefix-module-name-0.0.1.tgz"
   // 次のように置き換えます。
   "@prefix/module-name": "*"
   
3. node_modulesパスをmetro.config.jsに追加します。
   const path = require('path');
   
   const config = {
      projectRoot: __dirname,
   watchFolders: [
      path.resolve(__dirname, '../../packages'),
      path.resolve(__dirname, '../../node_modules')
   ],
   resolver: {
      disableHierarchicalLookup: true,
   nodeModulesPaths: [
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, '../../node_modules')
      ]
      }
   };
   
4. 不要なロックファイルとパッケージアーティファクト（特にYarnを使用している場合はpackage-lock.jsonファイル）を削除します。
5. corepackを使用したYarnの場合には、package.jsonでパッケージマネージャーを指定します。
   "packageManager": "yarn@x.y.z"
   

​

モノレポに関する問題のトラブルシューティング

Vega Studioでモノレポを操作しているときに問題が発生した場合は、モノレポに関する問題の解決で解決策を参照してください。

​

関連トピック

• Vega Studioのコマンド
• VegaパフォーマンスCLI
• 💬 コミュニティ：Inspect JS traces from Vega Apps（英語のみ）

---