Google Chat アプリをデバッグする

Google Chat 用アプリのデベロッパーは、変更をテストしたり、複雑な問題のトラブルシューティングを行ったりするために、コードのデバッグが必要になることがあります。Chat 用アプリのデバッグは、アプリのアーキテクチャ、アプリの機能、アプリのデプロイ方法、ユーザーの好みに応じて、さまざまな方法で行うことができます。

このページでは、ローカル開発環境のテストに使用できる統合型イングレステスト プラットフォームである ngrok を使用して、HTTP Chat 用アプリをデバッグする方法について説明します。このガイドでは、ローカル環境でコードの変更をテストし、リモート環境で問題をトラブルシューティングします。

注: Google Apps Script で Chat 用アプリを構築している場合は、代わりに次のコードを使用します。

• デプロイをテストする
• デバッガとブレークポイントを使用する

ローカル開発環境からデバッグする

このセクションでは、ローカル環境で実行される Chat 用アプリを操作します。

図 1. ローカル開発環境でデバッグします。

ワークショップ

Node.js

Python

Java

前提条件

Node.js

• ローカル環境にインストールされている node と npm の最新バージョン。

• ローカル環境にインストールされている最新バージョンの nodemon。自動再読み込みに使用されます。

  npm install -g nodemon

• メッセージング用に構成された HTTP Chat 用アプリ。クイックスタート ガイドの前提条件、環境を設定する、Google Chat にアプリを公開するの各セクションをご覧ください。唯一の違いは、[アプリ名] を Debug App に設定し、[HTTP エンドポイント URL] を http://example.com などの任意の値に設定する必要があることです。

• デバッグ可能なローカル環境に設定された IDE。このガイドでは、説明のために Visual Studio Code IDE とそのデフォルトのデバッグ機能を使用します。

• ローカル環境に Git がインストールされている。

• ngrok アカウント。

Python

• ローカル環境にpython3の最新バージョンがインストールされている。
• ローカル環境にインストールされている pip と virtualenv の最新バージョン。これらは、それぞれ Python パッケージと仮想環境の管理に使用されます。
• メッセージング用に構成された HTTP Chat 用アプリ。クイックスタート ガイドの前提条件、環境を設定する、Google Chat にアプリを公開するの各セクションをご覧ください。唯一の違いは、[アプリ名] を Debug App に設定し、[HTTP エンドポイント URL] を http://example.com などの任意の値に設定する必要があることです。
• デバッグ可能なローカル環境に設定された IDE。このガイドでは、説明のために Visual Studio Code IDE とそのデフォルトのデバッグ機能を使用します。
• ローカル環境に Git がインストールされている。
• ngrok アカウント。
• ローカル環境に gcloud の最新バージョンがインストールされ、初期化されている。

Java

• ローカル環境にJava SE 11's JDKがインストールされている場合、その最新の安定版。
• ローカル環境にApache Mavenの最新バージョンがインストールされていること。Java プロジェクトの管理に使用されます。
• メッセージング用に構成された HTTP Chat 用アプリ。クイックスタート ガイドの前提条件、環境を設定する、Google Chat にアプリを公開するの各セクションをご覧ください。唯一の違いは、[アプリ名] を Debug App に設定し、[HTTP エンドポイント URL] を http://example.com などの任意の値に設定する必要があることです。
• デバッグ可能なローカル環境に設定された IDE。このガイドでは、説明のために Visual Studio Code IDE とそのデフォルトのデバッグ機能を使用します。
• ローカル環境に Git がインストールされている。
• ngrok アカウント。
• ローカル環境に gcloud の最新バージョンがインストールされ、初期化されている。

localhost サービスを一般公開する

Chat 用アプリがアクセスできるように、ローカル環境をインターネットに接続する必要があります。ngrok アプリケーションは、パブリック URL に送信された HTTP リクエストをローカル環境にリダイレクトするために使用されます。

1. ローカル環境のブラウザで ngrok アカウントにログインします。
2. アプリケーションをインストールし、ローカル環境で authtoken を設定します。
3. ngrok アカウントに静的ドメインを作成します。このガイドの手順では、NGROK_STATIC_DOMAIN として参照されます。

Chat 用アプリを構成する

すべての HTTP リクエストを静的ドメインに送信するように Chat 用アプリを構成します。

1. Google Cloud コンソールで、Google Chat API ページを開きます。

   Google Chat API ページに移動

2. [構成] タブをクリックします。

3. [インタラクティブ機能] > [接続設定] に移動し、テキスト フィールド [HTTP エンドポイント URL] の値を次のように設定します。

   https://NGROK_STATIC_DOMAIN
   

   NGROK_STATIC_DOMAIN は、ngrok アカウントの静的ドメインに置き換えます。

4. [保存] をクリックします。

図 2. Chat 用アプリは、すべての HTTP リクエストを静的ドメインに送信します。ngrok パブリック サービスは、Chat 用アプリとローカルで実行されるアプリケーション コードの間のブリッジとして機能します。

Chat アプリをテストする

Chat 用アプリをローカルでデプロイ、構成、テスト、デバッグ、自動再読み込みできます。

注: Chat 用アプリは、Python と Java の例では Cloud Functions Framework を使用して実行され、Node.js の例では Express Framework を使用して実行されます。

Node.js

1. GitHub からローカル環境に googleworkspace/google-chat-samples リポジトリのクローンを作成します。このリポジトリには、実行するアプリケーションのコードが含まれています。

   git clone https://github.com/googleworkspace/google-chat-samples.git

2. ローカル環境にインストールされている Visual Studio Code IDE で、次の操作を行います。

   1. 新しいウィンドウで、google-chat-samples/node/basic-app フォルダを開きます。

   2. package.json ファイルに 2 つのスクリプトを追加して、自動再読み込みデバッグ用にアプリケーションを構成します。

      {
          ...
          "scripts": {
              ...
              "debug": "node --inspect index.js",
              "debug-watch": "nodemon --watch ./ --exec npm run debug"
          }
          ...
      }
      

   3. ルート ディレクトリからアプリケーションをインストールします。

      npm install

   4. ルート ディレクトリに .vscode/launch.json ファイルを作成して、スクリプト debug-watch をトリガーする Debug Watch という名前の起動を作成して構成します。

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      

   5. index.js ファイルで HTTP リクエスト処理を一時停止するブレークポイントを追加し、前に追加した Debug Watch 構成で実行とデバッグを開始します。アプリケーションが起動し、ポート 9000 で HTTP リクエストをリッスンします。

      

      図 3. アプリケーションが実行され、ポート 9000 で HTTP リクエストをリッスンしています。

3. ローカル環境で ngrok アプリケーションを起動します。

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   NGROK_STATIC_DOMAIN は、ngrok アカウントの静的ドメインに置き換えます。すべてのリクエストがローカル環境とアプリケーションで使用されるポートにリダイレクトされるようになりました。

   

   図 4. ngrok サーバーが実行され、リダイレクトされているターミナル。

4. ngrok アプリケーションによって localhost でウェブ インターフェースも起動されます。ブラウザで開いて、すべてのアクティビティをモニタリングできます。

   

   図 5. ngrok アプリケーションでホストされているウェブ インターフェースに HTTP リクエストが表示されていない。

5. Chat 用アプリにダイレクト メッセージを送信してテストします。

   • Google Chat を開きます。

     Google Chat にアクセスする

   • [新しいチャット] をクリックします。

   • ダイアログで、Chat 用アプリの名前を入力します。

   • 検索結果で Chat 用アプリを見つけて、[追加] > [Chat] をクリックします。

   • ダイレクト メッセージのスペースに「Hello」と入力して、enter を押します。Chat 用アプリがアクティブにデバッグされているため、返信されません。

6. ローカル環境の Visual Studio Code で、設定したブレークポイントで実行が一時停止していることを確認できます。

   

   図 6. 実行は、設定されたブレークポイントで一時停止します。

7. Google Chat がタイムアウトする前に Visual Studio Code のデバッガから実行を再開すると、Chat 用アプリは Your message : Hello を返します。

8. ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースから、HTTP リクエストとレスポンスのログを確認できます。

   

   図 7. ngrok アプリケーションによってホストされるウェブ インターフェースからの HTTP リクエスト。

9. アプリケーションの動作を変更するには、Your message を index.json のインライン 35 の Here was your message に置き換えます。ファイルを保存すると、nodemon は更新されたソースコードでアプリケーションを自動的に再読み込みし、Visual Studio Code はデバッグモードのままになります。

   

   図 8. アプリケーションが実行され、コード変更が読み込まれた状態でポート 9000 で HTTP リクエストをリッスンしています。

10. 今回は、スペースに 2 つ目のメッセージ Hello を送信する代わりに、ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースに記録された最後の HTTP リクエストを選択して、Replay をクリックします。前回と同様に、Chat 用アプリはアクティブにデバッグされているため、返信しません。

11. Visual Studio Code のデバッガから実行を再開すると、ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースから、アプリケーションが更新されたバージョンのメッセージ Here was your message : Hello を含むレスポンスを生成していることを確認できます。

Python

1. アプリケーションのデフォルト認証情報として使用する新しいユーザー認証情報を取得します。

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   PROJECT_ID は、アプリの Cloud プロジェクトのプロジェクト ID に置き換えます。

2. GitHub からローカル環境に googleworkspace/google-chat-samples リポジトリのクローンを作成します。これにはアプリケーション コードが含まれています。

   git clone https://github.com/googleworkspace/google-chat-samples.git

3. ローカル環境にインストールされている Visual Studio Code IDE で、次の操作を行います。

   1. 新しいウィンドウで、google-chat-samples/python/avatar-app フォルダを開きます。

   2. Python env の新しい仮想環境を作成して有効にします。

      virtualenv env
      source env/bin/activate

   3. 仮想環境で pip を使用して、すべてのプロジェクトの依存関係をインストールします。

      pip install -r requirements.txt

   4. ルート ディレクトリに .vscode/launch.json ファイルを作成し、仮想環境 env のデバッグモードでポート 9000 のモジュール functions-framework からアプリケーションをトリガーする Debug Watch という名前の起動を構成します。

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "python",
              "request": "launch",
              "name": "Debug Watch",
              "python": "${workspaceFolder}/env/bin/python3",
              "module": "functions_framework",
              "args": [
                  "--target", "avatar_app",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. main.py ファイルで HTTP リクエスト処理を一時停止するブレークポイントを追加し、前に追加した Debug Watch 構成で実行とデバッグを開始します。アプリケーションが起動し、ポート 9000 で HTTP リクエストをリッスンします。

      

      図 3. アプリケーションが実行され、ポート 9000 で HTTP リクエストをリッスンしています。

4. ローカル環境で ngrok アプリケーションを起動します。

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   NGROK_STATIC_DOMAIN は、ngrok アカウントの静的ドメインに置き換えます。すべてのリクエストがローカル環境とアプリケーションで使用されるポートにリダイレクトされるようになりました。

   

   図 4. ngrok サーバーが実行され、リダイレクトされているターミナル。

5. ngrok アプリケーションによって localhost でウェブ インターフェースも起動されます。ブラウザで開いて、すべてのアクティビティをモニタリングできます。

   

   図 5. ngrok アプリケーションでホストされているウェブ インターフェースに HTTP リクエストが表示されていない。

6. Chat 用アプリにダイレクト メッセージを送信してテストします。

   • Google Chat を開きます。

     Google Chat にアクセスする

   • [新しいチャット] をクリックします。

   • ダイアログで、Chat 用アプリの名前を入力します。

   • 検索結果で Chat 用アプリを見つけて、[追加] > [Chat] をクリックします。

   • ダイレクト メッセージのスペースに「Hey!」と入力して、enter を押します。Chat 用アプリがアクティブにデバッグされているため、返信されません。

7. ローカル環境の Visual Studio Code で、設定したブレークポイントで実行が一時停止していることを確認できます。

   

   図 6. 実行は、設定されたブレークポイントで一時停止します。

8. Visual Studio Code のデバッガから実行を再開すると、Google Chat がタイムアウトする前に、Chat 用アプリがメッセージに名前とアバター画像を含めて返信します。

9. ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースから、HTTP リクエストとレスポンスのログを確認できます。

   

   図 7. ngrok アプリケーションによってホストされるウェブ インターフェースからの HTTP リクエスト。

10. アプリケーションの動作を変更するには、Hello を main.py ファイルの Hey インライン 51 に置き換えます。ファイルを保存すると、Visual Studio Code は更新されたソースコードでアプリケーションを自動的に再読み込みし、デバッグモードのままになります。

    

    図 8. アプリケーションが実行され、コード変更が読み込まれた状態でポート 9000 で HTTP リクエストをリッスンしています。

11. 今回は、スペースに 2 つ目のメッセージ Hey! を送信する代わりに、ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースに記録された最後の HTTP リクエストを選択して、Replay をクリックします。前回と同様に、Chat 用アプリはデバッグ中であるため、返信しません。

12. Visual Studio Code のデバッガから実行を再開すると、ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースから、アプリケーションがメッセージの更新バージョンでレスポンスを生成していることを確認できます。

Java

1. アプリケーションのデフォルト認証情報として使用する新しいユーザー認証情報を取得します。

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   PROJECT_ID は、アプリの Cloud プロジェクトのプロジェクト ID に置き換えます。

2. ローカル環境で GitHub から googleworkspace/google-chat-samples リポジトリのクローンを作成します。このリポジトリにはアプリケーション コードが含まれています。

   git clone https://github.com/googleworkspace/google-chat-samples.git

3. ローカル環境にインストールされている Visual Studio Code IDE で、次の操作を行います。

   1. 新しいウィンドウで、google-chat-samples/java/avatar-app フォルダを開きます。

   2. pom.xml ファイルに Cloud Functions Framework ビルドプラグイン function-maven-plugin を追加して、アプリケーション App をローカルでポート 9000 で実行するように Maven プロジェクトを構成します。

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>App</functionTarget>
              <port>9000</port>
          </configuration>
      </plugin>
      ...
      

   3. これで、デバッグモードでローカルに起動できるようになりました。

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000

   4. ルート ディレクトリに .vscode/launch.json ファイルを作成し、ポート 8000 で以前に起動したアプリケーションにアタッチする Remote Debug Watch という名前の起動を構成します。

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      

   5. App.java ファイルで HTTP リクエスト処理を一時停止するブレークポイントを追加し、前に追加した Remote Debug Watch 構成でアタッチとデバッグを開始します。アプリケーションが起動し、ポート 9000 で HTTP リクエストをリッスンします。

      

      図 3. アプリケーションが実行され、ポート 9000 で HTTP リクエストをリッスンしています。

4. ローカル環境で ngrok アプリケーションを起動します。

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   NGROK_STATIC_DOMAIN は、ngrok アカウントの静的ドメインに置き換えます。すべてのリクエストがローカル環境とアプリケーションで使用されるポートにリダイレクトされるようになりました。

   

   図 4. ngrok サーバーが実行され、リダイレクトされているターミナル。

5. ngrok アプリケーションによって localhost でウェブ インターフェースも起動されます。ブラウザで開いて、すべてのアクティビティをモニタリングできます。

   

   図 5. ngrok アプリケーションでホストされているウェブ インターフェースに HTTP リクエストが表示されていない。

6. Chat 用アプリにダイレクト メッセージを送信してテストします。

   • Google Chat を開きます。

     Google Chat にアクセスする

   • [新しいチャット] をクリックします。

   • ダイアログで、Chat 用アプリの名前を入力します。

   • 検索結果で Chat 用アプリを見つけて、[追加] > [Chat] をクリックします。

   • ダイレクト メッセージのスペースに「Hey!」と入力して、enter を押します。Chat 用アプリがアクティブにデバッグされているため、返信されません。

7. ローカル環境の Visual Studio Code で、設定したブレークポイントで実行が一時停止していることを確認できます。

   

   図 6. 実行は、設定されたブレークポイントで一時停止します。

8. Visual Studio Code のデバッガから実行を再開すると、Google Chat がタイムアウトする前に、Chat 用アプリがメッセージに名前とアバター画像を含めて返信します。

9. ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースから、HTTP リクエストとレスポンスのログを確認できます。

   

   図 7. ngrok アプリケーションによってホストされるウェブ インターフェースからの HTTP リクエスト。

10. アプリの動作を変更するには、App.java ファイルのインライン 55 で Hello を Hey に置き換え、mvnDebug プロセスを再起動し、Remote Debug Watch を再起動してデバッグを再アタッチして再開します。

11. 今回は、スペースに 2 つ目のメッセージ Hey! を送信する代わりに、ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースに記録された最後の HTTP リクエストを選択して、Replay をクリックします。前回と同様に、Chat 用アプリはアクティブにデバッグされているため、返信しません。

12. Visual Studio Code のデバッガから実行を再開すると、ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースから、アプリケーションがメッセージの更新バージョンでレスポンスを生成していることを確認できます。

リモート環境からデバッグする

このセクションでは、リモート環境で実行される Chat 用アプリを操作します。

図 9. リモート環境からデバッグします。

前提条件

• Chat 用アプリとのダイレクト メッセージ スペース。クイック スタートガイドのChat 用アプリをテストするセクションに沿って、Chat 用アプリを検索して開始できます。
• リモート環境で実行されているアプリケーション。特定のポートでデバッガが有効になっています。このガイドの手順では、REMOTE_DEBUG_PORT と表記されています。
• ローカル環境からリモート環境に ssh できます。
• デバッグ可能なローカル環境に設定された IDE。このガイドでは、説明のために Visual Studio Code IDE とそのデフォルトのデバッグ機能を使用します。

ローカル環境とリモート環境を接続する

デバッグ クライアント接続を開始するローカル環境で、SSH トンネルを設定します。

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

次のように置き換えます。

• LOCAL_DEBUG_PORT: ローカル環境のデバッグポート。
• REMOTE_USERNAME: リモート環境のユーザー名。
• REMOTE_ADDRESS: リモート環境のアドレス。
• REMOTE_DEBUG_PORT: リモート環境のデバッグポート。

ローカル環境のデバッグポートが、リモート環境のデバッグポートにリンクされました。

デバッグを開始する

ローカル環境にインストールされている Visual Studio Code IDE で、次の操作を行います。

1. 新しいウィンドウで、アプリのソースコードを開きます。

2. ルート ディレクトリに .vscode/launch.json ファイルを作成し、ローカル環境のデバッグポートに接続する Debug Remote という名前の起動を構成します。

   Node.js

   {
       "version": "0.2.0",
       "configurations": [{
           "type": "node",
           "request": "attach",
           "name": "Debug Remote",
           "address": "127.0.0.1",
           "port": LOCAL_DEBUG_PORT
       }]
   }
   

   Python

   {
       "version": "0.2.0",
       "configurations": [{
           "type": "python",
           "request": "attach",
           "name": "Debug Remote",
           "connect": {
               "host": "127.0.0.1",
               "port": LOCAL_DEBUG_PORT
           }
       }]
   }
   

   Java

   {
       "version": "0.2.0",
       "configurations": [{
           "type": "java",
           "request": "attach",
           "name": "Debug Remote",
           "hostName": "127.0.0.1",
           "port": LOCAL_DEBUG_PORT
       }]
   }
   

   LOCAL_DEBUG_PORT は、ローカル環境のデバッグポートに置き換えます。

3. アプリのソースコードに、HTTP リクエストの処理を一時停止するブレークポイントを追加し、前に追加した Debug Remote 構成で実行とデバッグを開始します。

Chat 用アプリとのダイレクト メッセージ スペースで、テストする内容を入力して enter を押します。Chat 用アプリは、Visual Studio Code IDE でアクティブにデバッグされているため、返信しません。

関連トピック

• 有効にする方法と、エラーログのクエリ方法を確認する。
• 「アプリが応答していません」、「Google Chat API の使用は Google Workspace ユーザーに限られます」、「ユーザーをスペースから除外できます」などの Google Chat アプリのエラーを解決する方法をご覧ください。
• カード メッセージ、ダイアログ、リンクのプレビューが想定どおりにレンダリングされない、または機能しないなどのカードエラーを解決する方法をご覧ください。