Cloud Funtionsを使用してHangouts Chat Bot作ってみる

# はじめに

Hangoutで動くBotを作って利用していましたが、
使用していたBOTライブラリが動作しなくなったので
ひとまずHangoutsChatBotはどう作るかを試してみました。

[ハングアウトBotを作ってみる](https://qiita.com/Shota_Fukuda/items/bd36c543ac6fbefb685e)
[G Suite 組織内ユーザーの予定を名前から取得してみる](https://qiita.com/Shota_Fukuda/items/5c280cece174c58ac044)

## Hangouts Chat Botって？

[Google Hangouts Chat Botについて](https://qiita.com/kento_gm/items/c3d475364dd45938e46d)とか
[Chat Bot Concepts](https://developers.google.com/hangouts/chat/concepts/bots)を参照してください。

## どうやって作る？

Hangouts Chat Botって？の部分のリンクにもありますが、
いくつか作る方法があります。

- Google Apps Script Bot - GASを使用して作成。
- Google Cloud Functions bot - Cloud FunctionsにBotの処理を作成。Node.jsおよびPythonで作成出来る。
- Incoming webhook - webhookを使用してBotを作成する。サンプルはPythonだけど何でもいい気がする。
- REST API - デベロッパーページにサンプルは無いけどREST APIを使用してBotを作成出来る。主要な言語のクライアントライブラリは用意されている。

今回はGoogle Cloud Functionsを使用したBotを作成します。
※Hangouts Chatリリース後にGASとかwebhookを使用したBotの作り方は見かけたけど、Cloud Functionsを使ったのはあまり見かけなかったので。

# 前提条件

## アカウント

Googleアカウント。
[Google Cloud Console](https://console.cloud.google.com/)で請求先が設定されていること。

# 作成手順

## チュートリアルを元にCloud Functions Botを作成

その1ではHangouts Chat Botのデベロッパーページの[チュートリアル](https://developers.google.com/hangouts/chat/quickstart/gcf-bot)を元にCloud Functions Botを作成します。

### 1. Cloud Functionsの作成

- [Google Cloud Console](https://console.cloud.google.com/)を開き、新しいプロジェクトを作成します。
- APIライブラリからCloud Functions APIを有効にします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/f9d03f31-7dc0-1ce3-682c-3b7732c20ce8.png)

- コンソールのナビゲーションメニューからCloud Functionsのページに遷移
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/4f741059-62c7-75ef-4730-4ff4ab40c297.png)

- Cloud Functionsのページから関数を作成をクリックし、関数を新規作成する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/55554103-118e-7c85-881a-669533987881.png)

- 各種設定は以下の通り
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/ac3e26b6-64a1-3b64-5871-21f8dc84cd89.png)


- ソースファイル以下のものをコピペします。

```javascript
/**
 * Google Cloud Function that responds to messages sent from a
 * Hangouts Chat room.
 *
 * @param {Object} req Request sent from Hangouts Chat room
 * @param {Object} res Response to send back
 */
exports.helloHangoutsChat = function helloHangoutsChat (req, res) {

  var sender = req.body.message.sender.displayName;
  var image = req.body.message.sender.avatarUrl;

  var data = createMessage(sender, image);

  res.send(data);
};

/**
 * Creates a card with two widgets.
 * @param displayName the sender's display name
 * @param imageURL the URL for the sender's avatar
 */
function createMessage(displayName, imageURL){
  var HEADER = {
    "title": "Hello " + displayName + "!"
  };

  var SENDER_IMAGE_WIDGET = {
    "imageUrl": imageURL
  };

  return {
    "cards": [{
      "header": HEADER,
      "sections": [{
         "widgets": [{
           "textParagraph": {
             "text": "Your avatar picture:"
           }
         }, {
           "image": SENDER_IMAGE_WIDGET
         }]
      }]
    }]
  };
}
```

- 上記設定を行った後、作成ボタンをクリックし作成します。※ビルドに30秒～1分位掛かったりします。

### 2. Hangouts Chat Botの公開設定

Hangouts Chat Botの公開設定を行っていきます。

- APIライブラリからHangouts Chat APIを有効にします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/6425ce11-5e8c-ab4f-22b1-d67065893aaa.png)

- Hangouts Chat APIの設定は以下の通り、接続設定のBotURLはCloud FunctionsのURLを設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/482ce74a-210b-d09e-3e91-d7ac75fd6dd7.png)

- 上記設定を行った後、変更を保存ボタンをクリックし保存します。

### 3. 作ったBotを動かす

- [Hangouts Chat](https://chat.google.com/)を開きます。
- 検索窓からbotにメッセージを送信を選択。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/436481ab-8c0c-f005-12a4-3762c2ade509.png)

- botを検索から作成したBotの名前を入力すると候補に出てくるので、メッセージをクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/dacac8c9-6437-3113-0b30-6a70c906d7c3.png)

- Botとダイレクトメッセージでチャットする画面に遷移します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/67c82ed9-21e0-fd75-6ce0-95dccf05722e.png)

- Botに話かけると挨拶とアカウントのアイコン画像が表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/fd8e0a47-8983-c324-2818-9a9493dd899d.png)

- これでサンプルの作成・動作確認が終了です。

# 気づいたこととか

- Bot作成自体は簡単に出来る。
- Bot自体は1つのプロジェクトにつき1つしか作ることが出来ない。(Hangouts Chat APIが複数対応していないので)
- Botの名前に日本語設定しても反映されなかった…。