アプリをテストしてデバッグする

前述の手順を使用してローカル フルフィルメント アプリをビルドしてから、次の手順を使用して独自のホスティング環境でスマートホーム統合をテストすることをおすすめします。

  1. 独自のホスティング環境で、ローカル フルフィルメント アプリを実行する HTML ページを用意します。次のスニペットは、ローカル フルフィルメント アプリを実行する静的 HTML ファイルの例です。

    <html>
  <head>
    <!-- Local Home SDK -->
    <script src="//www.gstatic.com/eureka/smarthome/smarthome_sdk.js"></script>
    <!-- Local app under development -->
    <script src="local_execution.js"></script>
  </head>

</html>

  2. デバイス制御をテストします。

  3. Chrome からデバッグします。ブレークポイントとログを使用して統合のトラブルシューティングを行います。

  4. TypeScript コードを修正してコンパイルしてから、これらの手順を繰り返します。

このビルド＆テストのプロセスを繰り返すことで、アクションの変更をすばやく確認し、コードの問題をデバッグできます。

テストデバイス制御

Google Home Developer Console で、ウェブアプリの URL を指定する必要があります。この URL で、ローカル フルフィルメント中に Google Home または Google Nest デバイスに読み込まれる HTML を提供します。

ローカル フルフィルメントを使用してデバイス制御をテストする手順は次のとおりです。

Chrome

  1. Google Home Developer Console のクラウド間統合の [Setup and configuration]（セットアップと構成）ページで、[Local fulfillment]（ローカル フルフィルメント）までスクロールして、設定をオンにします。Google Home Developer Console
  2. [Testing URLs] > [Testing URL for Chrome]（Chrome 用のテスト URL）で、ローカル フルフィルメント アプリを実行する HTML を提供する開発用サーバーの URL を指定します。
  3. [保存] をクリックします。Google がコンソールの変更を反映するまでに最大 30 分ほどかかることがあります。
  4. テスト用の Google Home または Google Nest デバイスを再起動します。
  5. スマート デバイスにコマンドを発行します。たとえば、デバイスが OnOff トレイトを実装している場合は、「OK Google, ライトをつけて」と話しかけます。

Node.js

  1. [Setup and configuration] ページで、[Local fulfillment] までスクロールして、設定をオンにします。Google Home Developer Console
  2. [Testing URLs] > [Testing URL for Node]（Node 用のテスト URL）で、ローカル フルフィルメント アプリを実行する JavaScript を提供する開発用サーバーの URL を指定します。
  3. [保存] をクリックします。Google がコンソールの変更を反映するまでに最大 30 分ほどかかることがあります。
  4. テスト用の Google Home または Google Nest デバイスを再起動します。
  5. スマート デバイスにコマンドを発行します。たとえば、デバイスが OnOff トレイトを実装している場合は、「OK Google, ライトをつけて」と話しかけます。

デバイスでどのランタイムが使用されているかを確認するには、サポートされている デバイスをご覧ください。

を使用して、デバイスを通常の稼働状態にリセットする必要があります。

Chrome からデバッグする

ローカル フルフィルメント アプリをデバッグするには Chrome DevTools を使用します。 デバッグの前に、環境が正しく設定されていることを確認してください。

ローカル フルフィルメント アプリを Chrome DevTools デバッガに接続する手順は次のとおりです。

Chrome

  1. ローカル開発マシンに Google Chrome ブラウザをインストールして起動します。
  2. Chrome ブラウザのアドレス欄に、「chrome://inspect#devices」と入力して Chrome インスペクタを起動します。ページにデバイスのリストが表示され、テスト対象の Google Home デバイスまたは Google Nest デバイスの名前の下に HTML ファイルが表示されます。
  3. HTML の下にある青色の検査リンクをクリックして Chrome DevTools を起動します。Console タブに切り替えます。 ローカルホーム プラットフォームが、アプリのバージョンと Local Home SDK バージョンをコンソールログに出力します。ログが表示された場合は、アプリが正常に読み込まれて接続できる状態になっています。ログが表示されない場合は、Google Home または Google Nest デバイスを再起動してください。
    4. 図 1: chrome://inspect のローカル フルフィルメント アプリ。

Node.js

  1. ローカル開発マシンに Google Chrome ブラウザをインストールして起動します。
  2. テストデバイスのローカル IP アドレスを確認します。
  3. Chrome ブラウザのアドレス欄に、「chrome://inspect#devices」と入力して Chrome インスペクタを起動します。
  4. [Configure...]（設定）を選択して [Target discovery settings]（ターゲット検出の設定）を開きます。
    5. 図 2: chrome://inspect でのターゲット検出の設定。
  5. リストに DEVICE_IP_ADDRESS:9222 と入力して、 [Done]（完了）をクリックします。
  6. スクリプトの下にある青色の検査リンクをクリックして Chrome DevTools を起動します。 Console タブに切り替えます。 ローカルホーム プラットフォームが、アプリのバージョンと Local Home SDK バージョンをコンソールログに出力します。ログが表示された場合は、アプリが正常に読み込まれて接続できる状態になっています。ログが表示されない場合は、Google Home または Google Nest デバイスを再起動してください。

デバイスでどのランタイムが使用されているかを確認するには、サポートされている デバイスをご覧ください。

デバッグのヒント

デバッグ中は次の点に注意してください。

  • テスト アカウントに、同じローカル ネットワーク上の複数の Google Home デバイスまたは Google Nest デバイスをリンクさせないようにしてください。ローカル フルフィルメント コマンドのターゲットを、どの Google Home デバイスまたは Google Nest デバイスにするかを制御することはできません。
  • Chrome DevTools でページを更新し、ローカル フルフィルメント アプリ コンテナを再読み込みして、開発用 URL からの最新のコードを確認します。これによってローカルホーム プラットフォームがリセットされることはありません。なお、リセットは、ローカル フルフィルメント アプリでプラットフォーム インテント（IDENTIFY など）を再トリガーするために必要になることがあります。ローカルホーム プラットフォームをリセットするには、Google Home デバイスまたは Google Nest デバイスを再起動します。
  • JavaScript アプリがエラーなしで読み込まれていることを確認します。これを行うには、DevTools ページのコンソール セクションを確認してください。問題がある場合は、「Uncaught TypeError: Cannot read property 'open' of null.」などのメッセージが表示されます。
  • IDENTIFY レスポンスからの verificationId は、SYNC レスポンスからの otherDeviceIds のいずれかと一致する必要があります。
  • EXECUTE ハンドラの場合は、HTTP、TCP、UDP のコマンドがデバイスで受信され、正常に動作することを確認します。
  • ハンドラから Promise が返されることを確認します。
  • メモリ内でグローバルな状態を維持しないようにします。詳しくは、アプリケーションのライフサイクルをご覧ください。
  • ローカル フルフィルメント アプリによってスローされたエラーは、プロジェクト エラーログに表示されます。

本番環境の準備と本番環境へのリリース

スマートホーム アクションをリリースする準備が整ったら、次の手順を行います。

  1. ターミナルを開きます。プロジェクト ディレクトリで、npm run build コマンドを実行します。 このコマンドは、dist ディレクトリに、アプリ用の次の JavaScript バンドルを生成します。 
    project-directory/
└── dist
 ├── web
 │    └── bundle.js
 └── node
      └── bundle.js
  2. [Setup and configuration] ページの Google Home Developer Consoleで、 [Local fulfillment] までスクロールして、設定をオンにします。
  3. [Upload JavaScript]（JavaScript をアップロード）ボタンを使用して、以前に生成したバンドル ファイルをアップロードします。
    図 3: JavaScript アプリをアップロードします。
    必ずバンドル ファイルの両方のバージョン（ノード、ウェブ）をアップロードして、 ローカル フルフィルメントがサポートするすべてのランタイム環境で 正しく動作するようにアクションを構成します。
    1. [Upload your JavaScript targeting Node.js]: bundle.js ファイルdist/node ディレクトリからアップロードします。
    2. [Upload your JavaScript targeting Chrome (browser)]（Chrome（ブラウザ）をターゲットとする JavaScript をアップロード）: bundle.js ファイルを dist/web ディレクトリからアップロードします。
  4. アシスタント搭載デバイスでアクションをテストし、本番環境で想定どおり動作することを確認します。詳細については、スマートホーム アクションのテストと共有をご覧ください。
  5. アクションの動作に問題がなければ、スマートホーム アクションをリリースする手順に沿って、本番環境にデプロイするために Google に提出します。これには、セルフテストと認定申請の手順が含まれます。
前へ
ローカル フルフィルメント アプリを実装する