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

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

  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 コードを修正してコンパイルしてから、これらの手順を繰り返します。

このビルド&テストのプロセスを繰り返すことで、アクションの変更をすばやく確認し、コードの問題を簡単に見つけてデバッグすることができます。

デバイス制御をテストする

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

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

Chrome

  1. Actions Console でスマートホーム プロジェクトを開きます。
  2. 左側のナビゲーションで、[Actions](アクション)をクリックします。
  3. [Configure local home SDK (optional)] > [Enter your testing URL for Chrome](Chrome 用のテスト URL を入力)で、ローカル フルフィルメント アプリを実行する HTML を提供する開発用サーバーの URL を指定します。
  4. [Save](保存)をクリックします。Google がコンソールの変更を反映するまでに最大 30 分ほどかかることがあります。
  5. テスト用の Google Home または Google Nest デバイスを再起動します。
  6. スマート デバイスにコマンドを発行します。たとえば、デバイスが OnOff トレイトを実装している場合は、「OK Google, ライトをつけて」と話しかけます。

Node.js

  1. Actions Console でスマートホーム プロジェクトを開きます。
  2. 左側のナビゲーションで、[Actions](アクション)をクリックします。
  3. [Configure local home SDK (optional)] > [Enter your testing URL for Node](Node 用のテスト URL を入力)で、ローカル フルフィルメント アプリを実行する JavaScript を提供する開発用サーバーの URL を指定します。
  4. [保存] をクリックします。Google がコンソールの変更を反映するまでに最大 30 分ほどかかることがあります。
  5. テスト用の Google Home または Google Nest デバイスを再起動します。
  6. スマート デバイスにコマンドを発行します。たとえば、デバイスが OnOff トレイトを実装している場合は、「OK Google, ライトをつけて」と話しかけます。

デバイスで使用されるランタイムについて詳しくは、サポートされているデバイスをご覧ください。

Chrome からデバッグする

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

  • コンソール内の開発用 URL が Google Home デバイスまたは Google Nest デバイスからアクセスできる URL に設定されている(ローカルエリア ネットワーク上かインターネット経由のどちらか)。
  • マシンが、テストしている Google Home または Google Nest デバイスと同じローカルエリア ネットワークに接続されている。
  • ネットワークがデバイス間のパケットをブロックしていない。
  • Actions Console 上と Google Home デバイスまたは Google Nest デバイス上で同じ Google アカウントを使用してログインしている。
  • クラウド フルフィルメントで SYNC レスポンスを更新している。otherDeviceIds フィールドで少なくとも 1 つの有効な値が返されます。
  • Actions 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 のターゲット検出設定。
  6. リストに DEVICE_IP_ADDRESS:9222 と入力して、[Done](完了)をクリックします。
  7. スクリプトの下にある青色の検査リンクをクリックして 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. コンソールで [Develop] > [Actions] をクリックして、JavaScript アプリをアップロードします。[Configure Local Home SDK] セクションで、[Upload JavaScript file] をクリックします。
    図 3: JavaScript アプリをアップロードする。
  3. [ファイルをアップロード] ダイアログで、前に生成したバンドル ファイルをアップロードします。ローカル フルフィルメントがサポートするすべてのランタイム環境で正常に動作するようにアクションが構成されるように、両方のバージョンのバンドル ファイル(Node、Web)をアップロードしてください。
    1. Node.js をターゲットとする JavaScript をアップロードする: dist/node ディレクトリから bundle.js ファイルをアップロードします。
    2. Chrome(ブラウザ)をターゲットとする JavaScript をアップロードする: dist/web ディレクトリから bundle.js ファイルをアップロードします。
  4. アシスタント搭載デバイスでアクションをテストし、本番環境で想定どおり動作することを確認します。詳しくは、スマートホーム アクションのテストと共有をご覧ください。
  5. アクションの動作に問題がなければ、スマートホーム アクションをリリースする手順に沿って、本番環境にデプロイするために Google に提出します。これには、セルフテストと認定申請の手順が含まれます。