この記事はデベロッパー アドボケート、Charles Maxson による Google Developers Blog の記事 "Add dialogs and slash commands to your Google Workspace Chat bots" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

独自のカスタム Google Chat ボットの開発は、ユーザーやチームが直接、または Chat で共同作業するコンテキストの中で、ソリューションやサービスと連携できる優れた方法です。具体的には、Chat ボットをグループの会話で使ってワークフローを効率化したり、ディスカッションの流れの中で操作をサポートしたり、リアルタイムに情報や通知を提供したりできます。Chat ボットはダイレクト メッセージでも利用できます。これは、ワークフローや個人の生産性を最適化する新たな方法で、プロジェクトのタスクを管理する、活動時間を報告するなどの用途があります。ボットのユースケースは多岐にわたるため、時間とともに増え続けている Chat ユーザーに対して一貫してアプローチでき、ユーザーが作業やチャットをしている場所で直接活用できます。

カスタム Chat ボットの具体的なユースケースが決まった後、非常に重要なことは、ボット自身をどう設計するかです。直感的で使いやすいボットは利用される可能性が高く、忠実なフォロワーの増加にもつながります。スムーズでないもの、親しみにくいもの、わかりにくく使い方が複雑なものは、たとえバックエンドが優れていたとしても、「ユーザーを惹きつける」ツールになる可能性は低くなります。エンゲージメントが高く、なくてはならない Google Chat ボットの作成を支援するため、Chat ボット フレームワークに 2 つの機能を追加しました。これにより、これまで以上に高度なボット体験を構築できるようになります。

Google Chat ボットにスラッシュ コマンドを（再）導入する

Chat ボットのユーザビリティを強化するために活用できる最初の新機能が、スラッシュ コマンドです。数か月前にリリースされたスラッシュ コマンドを使用すれば、ボットの主な機能を見つけて実行するための視覚的なガイドをユーザーに提供し、ユーザーが Chat ボットとやり取りする方法を簡素化できます。スラッシュ コマンドの導入前に作成されたボットでは、ユーザーはボットが提供する機能を学習してから、ボットを呼び出してコマンドを正しく入力し、実行する必要がありました。しかしスラッシュ コマンドの登場により、ユーザーは Chat ボットをすばやく最大限に活用できるようになりました。

ユーザーがメッセージ行に “/” と入力するだけで、そのルームやダイレクト メッセージでボットによって提供されているすべての機能が一覧表示され、目的の機能を選択して実行できます。スラッシュ コマンドは、スタンドアロンで呼び出したり（例 : /help）、パラメータとしてテキストを追加したりできます（例 : /new_task review project doc）。このパラメータは、機能が呼び出されたときに処理できます。ボット コマンドをさらに見つけやすくするため、ユーザーが / 以降を入力すると、スラッシュ コマンドのリストがそれに一致するもので絞り込まれます（例 : "/h" と入力すると、H で始まるすべてのコマンドを表示）。ルームにたくさんのボットが追加され、スラッシュ コマンドを利用できるボットが増えると、この機能は便利になります。さらに、スラッシュ コマンドの UI には各コマンドの説明（最大 50 文字）が直接表示されるため、学習しなくても簡単に推測できます。

デベロッパーとして、スラッシュ コマンドは簡単に実装でき、優れたボット体験を提供するうえで欠かせないものだと言えるでしょう。実際、すでに Google Chat ボットを構築してデプロイしているなら、ボットのアップデート リリースでスラッシュ コマンドを含めるように変更する作業は、十分すぎるほど価値があります。

Chat ボットにスラッシュ コマンドを追加するには、Hangouts Chat API 設定ページ（例 : https://console.cloud.google.com/apis/api/chat.googleapis.com/hangouts-chat?project=<?yourprojectname?>）でコマンドを登録する必要があります。スラッシュ コマンドのセクションがあり、そこでユーザーに表示する名前と説明、そして重要なコマンド ID の一意の識別子（1-1000 の整数）を設定できます。この識別子は、後ほどコードでイベントを処理する際に必要になります。

ユーザーがスラッシュ コマンドを使ってボットを呼び出すと、ボットに送信されるメッセージに slashCommand フィールドが追加され、ボットがスラッシュ コマンドによって呼び出されたことがわかります。なお、ユーザーが / コマンドを使わずに @ メンションによって名前で直接ボットを呼び出せる点は変わりません。これは違いを見分けるうえで役立ちます。メッセージには、呼び出されたコマンドに対応する commandId も含まれます。これはボットの設定ページで指定した内容に基づいているため、ユーザーが実行をリクエストしたコマンドはそこから識別できます。さらに、メッセージにはイベントに関するアノテーションも含まれます。ユーザーが引数を指定した場合は、コマンド テキスト自体を解析した結果である argumentText も含まれます。

{
  ...
  "message": {
    "slashCommand": {
      "commandId": 4
    },
    "annotations": [
      {
        "length": 6,
        "slashCommand": {
          "type": "INVOKE",
          "commandId": 4,
          "bot": {
            "type": "BOT",
            "displayName": "Slashbot"
          },
          "commandName": "/debug"
        },
        "type": "SLASH_COMMAND"
      }
    ],
    ...
    "argumentText": " show code",
    "text": "/debug show code",
    ...
}

次に示す簡単な例では、ユーザーがスラッシュ コマンドを起動したかどうかを判断し、そうであればコマンド ID からリクエストされたコマンドを判別して実行しています。

function onMessage(event) {

  if (event.message.slashCommand) {

    switch (event.message.slashCommand.commandId) {
      case 1: // Command Id 1
        return { 'text': 'You called commandId 1' }

      case 2: // Command Id 2
        return { 'text': 'You called commandId 2' }

      case 3: // Help
        return { 'text': 'You asked for help'  }

    }
  }
}

Google Chat ボットにダイアログを導入する

2 つ目の Google Chat ボットの新機能は、ダイアログです。これは Chat ボット フレームワークに導入されたまったく新しい機能で、信頼できる構造化された方法で入力やパラメータを取得するユーザー インターフェースの開発を可能にします。これにより、ユーザーがボットのコマンドを入力するプロセスを簡素化、効率化できるので、ボットのユーザビリティが大きく前進します。ダイアログを使うと、ユーザーは視覚的に入力を促されます。これは、自然言語の入力でボットのコマンドをラップし、ボットが解読できる正しい構文が入力されることを期待する方法とは異なります。

デベロッパーは、ユーザーに指定してもらう必要があるコマンドの入力に対して、正確に動作するように目的を絞り込んだ UI を設計できます。引数を解析してユーザーの意図を論理的に推測する必要はありません。つまり、ダイアログは Chat ボットが対処できるソリューションのパターンとユースケースの種類を大きく拡張します。そのため、ユーザーにもデベロッパーにも、真に高度で実りある体験を実現できます。

内部的には、Chat ボットのダイアログは前述のスラッシュ コマンドと既存の Google Workspace アドオンの Card フレームワークを組み合わせて利用し、ダイアログの作成と処理をしています。この機能を使うには、ダイアログを起動するスラッシュ コマンドを作成し、次に示すように、スラッシュ コマンド設定プロセスで [Slash command triggers a dialog] の設定を true に指定します。

[Slash Command to trigger a dialog] を設定すると、それが呼び出されたときに onMessage イベントが送信される点は変わりませんが、そこにダイアログのリクエストを表す新しい詳細情報が追加されます。このイベントを処理するには、先ほどの例の非ダイアログのスラッシュ コマンドと commandId を使い、switch でユーザーがリクエストしたコマンドを判別します。

ダイアログに実際に描画する要素を設計する際は、Google Workspace アドオンの Card ベース フレームワークを使います。新世代の Google Workspace アドオンを構築したことがある方なら、この部分はおなじみであるはずです。ウィジェットを作成し、ヘッダーやセクションを追加し、イベントなどを作成します。実は、Chat ボットでアドオン UI を再利用したり共有したりすることもできます。ただし現在は、ボットで利用できるのは軽量な一部の要素である点に注意してください。Cards を使うことで、ボット用に一貫性のある最新のユーザー インターフェースを構築でき、タグや CSS の管理など、低レベルの詳細に悩む必要はなくなります。Cards の詳細はこちらをご覧ください。アドオンや Chat ボットでさらに簡単に Cards ベースのインターフェースを作成できるように、GWAO Card Builder ツールも導入しました。これを使うと、ドラッグアンドドロップのビジュアル デザイナーで開発作業を加速できます。

Cards のウィジェットができたら、呼び出されたときにそれをダイアログとして表示するために、次に示すスタブのように、action_response で DIALOG タイプを指定する必要があります。

{
  "action_response": {
  "type": "DIALOG",
  "dialog_action": {
    "dialog": {
      "body": {
        "sections": [
          {
           "widgets": [
             {
               "textInput": {
                 "label": "Email",
                 "type": "SINGLE_LINE",
                 "name": "fieldEmail",
                 "hintText": "Add others using a comma separator",
...

これで動作するダイアログができるので、あとはダイアログを表示した後のユーザー イベントを処理するだけです。ここでも、アドオンで Cards を扱う際のイベント処理と同じ方法を使います。ボットは、DialogEventType が SUBMIT_DIALOG に設定された CARD_CLICKED タイプのイベントを受け取ります。actionMethodName 値から、ユーザーがリクエストを処理するためにクリックした要素がわかります。下の例では、'assign' です。レスポンスには、ダイアログから返されたユーザー指定の入力である詳細情報 formInputs が含まれているので、それをソリューションのニーズに応じて処理します。

{ dialogEventType: 'SUBMIT_DIALOG',
  type: 'CARD_CLICKED',
  action: { actionMethodName: 'assign' },
  ...
  common: 
   { hostApp: 'CHAT',
     formInputs: 
      { 'whotochoose-dropdown': [Object],
        whotochoose: [Object],
        email: [Object] },
     invokedFunction: 'assign' },
  isDialogEvent: true }

ボットがタスクの処理を終えると、2 つの方法のどちらかでユーザーに応答できます。1 つ目の方法は、単純な確認応答（OK）のレスポンスです。これにより、アクションが正常に処理されてダイアログが閉じられたことを伝えます。

{
    "action_response": {
      "type": "DIALOG",
      "dialog_action": {
        "action_status": "OK",
...

もう 1 つの方法は、別のダイアログによる応答です。新しいダイアログや変更したダイアログでフォローアップできるので、複雑な入力シナリオや条件付きの入力シナリオに便利です。これは、ActionResponse で最初にダイアログ カードを使ってダイアログを呼び出したときと同じように実現します。

{
  "action_response": {
  "type": "DIALOG",
  "dialog_action": {
    "dialog": {
...

次のステップ

Google Workspace Chat ボットの構築を始めたい方や、スラッシュ コマンドやダイアログを既存の Chat ボットに追加したい方は、以下のリソースをご覧ください。

• Google Chat API
• Card ベースのインターフェース
• インタラクティブ カードの作成
• GWAO Card Builder
• スラッシュ コマンドの開発
• ボットでのダイアログの使用
• デベロッパー ニュースレターに登録

Reviewed by Eiji Kitamura - Developer Relations Team

この記事は G Suite デベロッパー アドボケート、Wesley Chun（@wescpy）による Google Developers Blog の記事 "Hangouts Chat alerts & notifications... with asynchronous messages" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

ほとんどのチャットボットは、ユーザーのリクエストに同期的に応答しますが、アラートや通知など、ユーザーの明示的なリクエストに基づかないアクションを行う場合もあります。本日の DevByte 動画では、G Suite のチーム コラボレーションおよびコミュニケーション ツールである Hangouts Chat で、 非同期的に ルームやダイレクト メッセージ（DM）にメッセージを送信する方法を紹介します。

チャット ルームのボットを考えるとき、何が思い浮かぶでしょうか？ユーザーは、直前の四半期のヨーロッパでの販売数や、近隣の天気、次の映画上映時間を知りたいのかもしれません。何らかのリクエストに対応するボットがあるとすれば、ユーザーが行うのは、そのボットにダイレクト メッセージ（DM）を送るか、チャットルーム内でボットに @ メンションすることです。すると、ボットは（Hangouts Chat サービスからボットに送られた）リクエストに対応し、必要な処理を行った上で、その「スペース」（ルームまたは DM を表す汎用的な用語）でユーザーに応答します。

Hangouts Chat ボット フレームワークに関する以前の DevByte 動画では、ボットやフレームワークとは何かということに加え、Python と JavaScript の両方でこのタイプのボットを作る方法について説明しました。しかし、こういったボットはユーザーのリクエストに同期的に応答します。長時間にわたって実行されるバックグラウンド ジョブが完了したとき、遅れていたバスや列車がまもなく到着するとき、あるいはサーバーのうち 1 台がダウンしたときにユーザーが通知を受けたいような場合には、この方法は十分ではありません。このようなアラートは、ボットから送ることもできますが、モニタリング プログラムから送ることもできます。G Suite Dev Show の最新エピソードでは、この機能を両方のタイプのアプリケーションに組み込む方法について学習します。

動画を見ると、アラートや通知はいつでも着信する可能性がある「アウトオブバンド」メッセージであることがわかります。Hangouts Chat ボット フレームワークは、まとめて「スペース」と呼ばれるルームや DM に対して非同期メッセージを送るいくつかの方法を提供しています。最初の方法では HTTP ベースの REST API を、もう 1 つの方法では「着信 Webhook」と呼ばれるものを使います。

REST API は、ボットがスペースにメッセージを送るために使います。ボットは決して人間のユーザーではないので、Google サービス アカウントが必要になります。デベロッパー コンソールで Hangouts Chat ボット用のサービス アカウントを作成すると、API との通信に必要な認証情報をダウンロードできるようになります。次に示すのは、API を使ってスペースに対して非同期的にメッセージを送信する簡単な Python のサンプル スニペットです。

from apiclient import discovery
from httplib2 import Http
from oauth2client.service_account import ServiceAccountCredentials

SCOPES = 'https://www.googleapis.com/auth/chat.bot'
creds = ServiceAccountCredentials.from_json_keyfile_name(
        'svc_acct.json', SCOPES)
CHAT = discovery.build('chat', 'v1', http=creds.authorize(Http()))

room = 'spaces/<ROOM-or-DM>'
message = {'text': 'Hello world!'}
CHAT.spaces().messages().create(parent=room, body=message).execute()

API とサービス アカウントの代わりに使うことができるのが、着信 Webhook という考え方です。Webhook を使うと、完全なボット（モニタリング アプリ）を設定しなくても、任意のルームや DM に対してすばやく簡単にメッセージを送ることができます。さらに、Webhook は、会社の CRM（顧客管理システム）に新規顧客が追加された場合や、前述のさまざまなタイミングで実行されるカスタム ワークフローに組み込むこともできます。次に示すのは、着信 Webhook を使って非同期的にスペースと通信する Python スニペットです。

import requests
import json

URL = 'https://chat.googleapis.com/...&thread_key=T12345'
message = {'text': 'Hello world!'}
requests.post(URL, data = json.dumps(message))

着信 Webhook は単なる HTTP POST エンドポイントなので、コマンドラインから curl を使って Hangouts Chat スペースにメッセージを送ることもできます。

curl \
    -X POST \
    -H 'Content-Type: application/json' \
    'https://chat.googleapis.com/...&thread_key=T12345' \
    -d '{"text": "Hello!"}'

試してみたい方は、Hangouts Chat デベロッパー ドキュメント、特に上記の説明でリンク先となっているページをご覧ください。この動画で説明している Hangouts Chat サービスに非同期的にメッセージを送信する方法が、皆さんのボット開発スキルの向上に役立つことを願っています。


Reviewed by Eiji Kitamura - Developer Relations Team

この記事は G Suite デベロッパー アドボケート、Wesley Chun（@wescpy）による Google Developers Blog の記事 "Developing bots for Hangouts Chat" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

先日、Hangouts Chat を一般公開しました。この次世代のメッセージング プラットフォームは、チーム内でコミュニケーションを取って連携する新たな場を G Suite のユーザーに提供します。また、アーカイブと検索、より緊密な G Suite の統合、個別のスレッド化されたチャットルームを作成する機能を備えています。デベロッパー向けの新しい重要な機能として、ボット フレームワークおよび API が組み込まれています。ボットの使用により、一般的なタスクの自動化、情報の照会、その他の負荷のかかる作業の実行など、私たちの仕事の方法を大きく変えることができます。

Hangouts Chat では、書式なしテキストによる応答に加えて、 カードと呼ばれる高機能なユーザー インターフェース（UI）を使ったボット応答を表示することもできます。 この応答では、ヘッダー情報、構造化データ、イメージ、リンク、ボタンなどがレンダリングされます。さらに、ユーザーはこれらのコンポーネントを操作して、表示されている情報をアップデートすることもできます。G Suite Dev Show のこの最新のエピソードをご覧いただくと、アップデート可能なインタラクティブなカードを備えたボットを作成する方法を学習できます。

この動画で説明しているように、メッセージを受け取った際のボットの最も重要な動作は、イベントタイプを判別して、適切なアクションを実行することです。たとえばボットは、一般的に専門用語で「スペース」と呼ばれるチャットルームやダイレクト メッセージ（DM）で目的の「ペーパーワーク」が追加または削除されたときに、その「ペーパーワーク」を実行します。

最もよくあるシナリオは、ユーザーが送信した通常のメッセージを受信することです。この場合、ほとんどのボットは、リクエストの処理に関して「自分の仕事」を実行します。最後のイベントタイプは、ユーザーがインタラクティブなカードをクリックすると発生します。ボットは、標準的なメッセージを受信した場合と同じように、カード自体のアップデートなど、必要なアクションを実行します。これらの 4 つのイベントタイプをまとめた次の擬似コードは、イベントタイプに応じてボットが実行する可能性が高いアクションを表しています。

function processEvent(req, rsp) {
  var event = req.body; // event type received
  var message;          // JSON response message

  if (event.type == 'REMOVED_FROM_SPACE') {
      // no response as bot removed from room
      return;

  } else if (event.type == 'ADDED_TO_SPACE') {
    // bot added to room; send welcome message
    message = {text: 'Thanks for adding me!'};

  } else if (event.type == 'MESSAGE') {
    // message received during normal operation
    message = responseForMsg(event.message.text);

  } else if (event.type == 'CARD_CLICKED') {
    // user-click on card UI
    var action = event.action;
    message = responseForClick(
        action.actionMethodName, action.parameters);
  }

  rsp.send(message);
};

このボットの疑似コードおよび動画で紹介したボットは 同期的に応答します。時間がかかる操作またはアウトオブバンド通知を発行する操作を実行するボットは、メッセージを スペース に 非同期的に 送信できます。これらの操作には、ジョブ完了通知などのメッセージ、サーバーがダウンした場合のアラート、新しいリードが CRM（顧客管理）システムに追加された際の営業チームに対する ping などが含まれます。

Hangouts Chat では、JavaScript、Python、Google Apps Script、Google App Engine など、多くの言語とプラットフォームがサポートされます。Apps Script 上で実行されている JavaScript を使用することは、組織内でボットをオンラインで実行する最も簡単で速い方法の 1 つですが、ボットを Node.js に簡単に移植して、さまざまなホスティング オプションに使用することもできます。同様に、App Engine を使用すると、拡張性が向上し、Python 以外の追加言語（Java、PHP、Go など）をサポートできます。また、ボットを Flask に移植して、その他のホスティング オプションに使用できます。1 つの重要なポイントはプラットフォームの柔軟性です。つまり、デベロッパーはあらゆる言語、スタック、クラウドを使用して、ボットの実装を作成およびホストすることができます。ボットは、Hangouts Chat サービスから HTTP POST リクエストを受け取るだけで機能します。

先月の Google I/O 2018 で、Hangouts Chat チームリーダーと私は、長時間にわたり、より高いレベルのボット フレームワークの概要について発表を行いました。フレームワークに関するこの包括的なツアーでは、サンプル ボットの多数のライブデモに加えて、さまざまな言語とプラットフォームを紹介しています。次の 40 分ほどのセッションをご覧ください。

使い始めるにあたって、ボット フレームワークの導入に関する投稿をご覧ください。こちらの投稿では、動画で紹介されている投票ボットの Python App Engine バージョンについて詳しく説明しています。Hangouts Chat 用のボットの開発に関する詳細は、コンセプト ガイドとボットを作成する「方法」をご覧ください。ご自分の組織、顧客、そして世界を対象にボットをビルドできます。デベロッパーの皆さんがビルドするすばらしいボットを見るのを楽しみしています。



Reviewed by Eiji Kitamura - Developer Relations Team