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

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

  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 のクラウド間統合の [設定と構成] ページで、[ローカル フルフィルメント] までスクロールして、設定をオンにします。
  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. 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 を使用します。デバッグの前に、環境が正しく設定されていることを確認してください。

  • コンソール内の開発用 URL が Google Home デバイスまたは Google Nest デバイスからアクセスできる URL に設定されている（ローカルエリア ネットワーク上かインターネット経由のどちらか）。
  • マシンが、テストしている Google Home または Google Nest デバイスと同じローカルエリア ネットワークに接続されている。
  • ネットワークがデバイス間のパケットをブロックしていない。
  • Google Home Developer Console と Google Home デバイスまたは Google Nest デバイスで同じ Google アカウントを使用してログインしている。
  • クラウド フルフィルメントで SYNC レスポンスが更新されている。 otherDeviceIds フィールドで少なくとも 1 つの有効な値が返されます。
  • Google Home Developer Console で正しいスキャン設定情報が入力されている。

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