SuperApp:ミニアプリのプレビューとデバッグ

Visual Studio Code、または Android あるいは iOS シミュレーターで WindVane 用の Visual Studio Code 拡張機能を使用して、ミニアプリをプレビューおよびデバッグできます。

• WindVane JavaScript API をデバッグする必要がない場合は、Visual Studio Code を使用します。

• WindVane JavaScript API をデバッグする必要がある場合は、Android あるいは iOS シミュレーターで WindVane 用の Visual Studio Code 拡張機能を使用します。

このトピックでは、ミニアプリのプレビューとデバッグの方法について説明します。

Visual Studio Code でミニアプリをプレビューおよびデバッグする

1. Visual Studio Code で、[ミニアプリのプレビュー] をクリックします。Visual Studio Code の上部に表示されるドロップダウンリストから、npm start コマンドを実行するかどうかを指定します。

   • [はい（ミニアプリをプレビューできます）]：ミニアプリが実行されています。ミニアプリの URL を入力して、ミニアプリをプレビューできます。このオプションを選択すると、Visual Studio Code の上部にテキストボックスが表示されます。ミニアプリの URL を入力します。プレビューウィンドウが表示されます。

   • [いいえ（ミニアプリを最初に起動する必要があります。「npm start」または start コマンドが呼び出されます）]：ミニアプリは開始されていません。npm start コマンドを実行してミニアプリを起動する必要があります。このオプションを選択すると、WindVane 用 Visual Studio Code 拡張機能は、オンプレミスデバイスの CLI で npm start コマンドを実行してミニアプリを起動します。ミニアプリが起動した後、WindVane 用 Visual Studio Code 拡張機能の上部にテキストボックスが表示されます。npm start ログに表示されている URL を入力して、プレビューウィンドウを開くことができます。

     

2. Visual Studio Code の上部に表示されるテキストボックスにミニアプリの URL を入力します。

   説明

   npm パッケージは、ミニアプリの開発、起動、および管理に使用されます。npm start コマンドを実行して、ミニアプリを起動できます。npm start コマンドを実行してミニアプリを起動できない場合は、WindVane 用 Visual Studio Code 拡張機能の設定で EMAS:Start Command パラメーターを変更して、ミニアプリの起動コマンドを指定できます。ミニアプリを起動すると、ミニアプリが起動されるオンプレミスサーバーが Node.js に作成されます。オンプレミスサーバーでミニアプリをプレビューできます。ミニアプリをプレビューするには、ミニアプリが実行されているオンプレミスサーバーの URL を指定する必要があります。この URL はミニアプリのプレビュー URL であり、http://localhost:<ポート番号> または http://<オンプレミスデバイスの IP アドレス>:<ポート番号> 形式です。

   たとえば、WindVane 用 Visual Studio Code 拡張機能を使用してミニアプリの scaffolding プロジェクトを初期化した後、デフォルトのポート 3000 が使用されます。WindVane 用 Visual Studio Code 拡張機能に http://<オンプレミスデバイスの IP アドレス>:3000 と入力して、ミニアプリをプレビューできます。ポート 3000 が使用中の場合、npm start コマンドを実行すると、CLI はポート番号を変更するように通知します。ポート番号を 3001 に変更した場合、http://<オンプレミスデバイスの IP アドレス>:3001 と入力してミニアプリをプレビューできます。

   

   ミニアプリのプレビュー URL を入力すると、次の図に示すように、WindVane 用 Visual Studio Code 拡張機能にプレビューウィンドウが表示されます。

3. Developer: Toggle Developer Tools コマンドを実行してデバッグコンソールに移動し、Visual Studio Code でミニアプリをデバッグします。

   

Android シミュレーター

1. Android エミュレータでミニアプリをプレビューする をクリックして、Android シミュレーターを起動します。

   

2. シミュレーターが起動した後、Visual Studio Code の上部にテキストボックスが表示されます。ミニアプリのプレビュー URL を入力します。

   説明

   シミュレーターでミニアプリをプレビューするには、ミニアプリが実行中で、ミニアプリの URL が使用可能である必要があります。ミニアプリの URL を取得できない場合は、ミニアプリが実行状態ではない可能性があります。[ミニアプリのプレビュー] をクリックし、表示されるメッセージで [いいえ（ミニアプリを最初に起動する必要があります。「npm Start」または Start コマンドが呼び出されます）] オプションを選択して、ミニアプリを起動できます。また、オンプレミスデバイスの CLI で npm start コマンドを実行して、ミニアプリを起動することもできます。

   ミニアプリが起動すると、ミニアプリのプレビュー URL が生成されます。URL は、http://localhost:<ポート番号> または http://<オンプレミスデバイスの IP アドレス>:<ポート番号> 形式です。たとえば、WindVane 用 Visual Studio Code 拡張機能によって提供されるテンプレートを使用して scaffolding プロジェクトを初期化すると、http://<オンプレミスデバイスの IP アドレス>:3000 というプレビュー URL が生成されます。

3. URL を入力すると、シミュレーターは scaffolding を起動し、ミニアプリの URL をロードします。

   Chrome を開き、アドレスバーに chrome://inspect/#devices と入力します。表示されるページにシミュレーター情報が表示されます。scaffolding が起動されると、ミニアプリをデバッグできる WebView オブジェクトが Chrome に表示されます。

   

4. DevTools のシミュレーター情報の下にある inspect をクリックし、WebView オブジェクトでミニアプリをデバッグします。

   

iOS シミュレーター

1. Safari を開き、Safari > [環境設定] > [詳細] を選択し、[メニューバーに"開発"メニューを表示] を選択して Safari 開発者機能を有効にします。

   

2. [iOS エミュレータでミニアプリをプレビュー] をクリックして、iOS シミュレータを起動します。オンプレミス デバイスで複数のシミュレータが使用可能な場合は、ドロップダウン リストが表示されます。WindVane 用 Visual Studio Code 拡張機能でシミュレータを起動するには、シミュレータを指定する必要があります。

3. シミュレーターが起動した後、Visual Studio Code の上部にテキストボックスが表示されます。ミニアプリのプレビュー URL を入力します。

   説明

   シミュレーターでミニアプリをプレビューするには、ミニアプリが実行中で、ミニアプリの URL が使用可能である必要があります。ミニアプリの URL を取得できない場合は、ミニアプリが実行状態ではない可能性があります。[ミニアプリのプレビュー] をクリックし、表示されるメッセージで [いいえ（ミニアプリを最初に起動する必要があります。「npm Start」または Start コマンドが呼び出されます）] オプションを選択して、ミニアプリを起動できます。また、オンプレミスデバイスの CLI で npm start コマンドを実行して、ミニアプリを起動することもできます。

   ミニアプリが起動すると、ミニアプリのプレビュー URL が生成されます。URL は、http://localhost:<ポート番号> または http://<オンプレミスデバイスの IP アドレス>:<ポート番号> 形式です。たとえば、WindVane 用 Visual Studio Code 拡張機能によって提供されるテンプレートを使用して scaffolding プロジェクトを初期化すると、http://<オンプレミスデバイスの IP アドレス>:3000 というプレビュー URL が生成されます。

   

4. Safari で、[開発] > [シミュレーター] を選択します。検査できるすべての WebView オブジェクトが表示されます。

   

5. 検査する WebView オブジェクトをクリックし、Web インスペクタでミニアプリをデバッグします。