Microsoft社のTeamsを使って営業部屋に居る人にGoogle Homeで来訪を知らせる

[前回の記事](https://qiita.com/h-takauma/items/4ecc3421f2995b207284)で大変好評をいただきました受付システムに、プラスα機能として営業部屋に居る人に来訪者が来た事をGoogle Homeで知らせるようにしてみました。
弊社ではコミュニケーションツールとしてMicrosoft社の[Teams](https://products.office.com/ja-jp/microsoft-teams/group-chat-software)を利用しています。
受付の部屋と営業部屋が遠く離れている場合、大変便利にご利用頂けるかと思います。

![IMG_0466.JPG](https://qiita-image-store.s3.amazonaws.com/0/154355/f0607ed8-232f-930c-7300-79fa183cdd20.jpeg)

# システム概要
受付システムでSlackに投稿する部分までは前回の記事で対応しましたが、今回はSlackでは無くTeamsに投稿する部分を行います。Slackも出来ますが、投稿内容のカスタマイズが臨機応変に出来ます。
そこで、この機能を使ってGoogle Homeにしゃべって頂く入力フォームを搭載した形式で投稿したいと思います。
入力フォームから入力した内容を元に営業部屋に置いてあるGoogle Homeがしゃべるという内容です。

# 完成動画
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Microsoft社のTeamsを使って営業部屋に居る人にGoogle Homeで来訪を知らせる Qiita投稿用 <a href="https://twitter.com/hashtag/GoogleHome?src=hash&amp;ref_src=twsrc%5Etfw">#GoogleHome</a> <a href="https://twitter.com/hashtag/Teams?src=hash&amp;ref_src=twsrc%5Etfw">#Teams</a> <a href="https://twitter.com/hashtag/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%82%B9%E3%83%94%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#スマートスピーカー</a> <a href="https://t.co/mVA06PnXTp">pic.twitter.com/mVA06PnXTp</a></p>&mdash; がおまる@スマートスピーカー・HoloLens研究者 (@gaomar) <a href="https://twitter.com/gaomar/status/968710332687552512?ref_src=twsrc%5Etfw">2018年2月28日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 環境
少ないコストで導入する事ができます。

- [Microsoft社 Teams](https://products.office.com/ja-jp/microsoft-teams/group-chat-software)
- [Raspberry Pi Zero W ケースキット](http://ssci.to/3201)

# 構成図
Teamsの入力フォームから会議室の選択としゃべってもらう内容を入力して送信ボタンを押すと、ngrok経由でGoogle Homeがしゃべってくれます。
受付システム自体は現在弊社で稼働しているAmazon Echoを使っています。

![構成図.png](https://qiita-image-store.s3.amazonaws.com/0/154355/d4db029a-efb0-8fff-c417-7a78415c128c.png)

# 1. Raspberry Pi Zero wの設定
まずラズパイにnode.jsやnpm、ngrokの設定を行っておいてください。

### 1-1.各種モジュールをインストールする
各種モジュールをラズパイにインストールしていきます。

```
$ npm install express --save
$ npm install body-parser --save
$ npm install google-home-notifier --save
```

### 1-2.index.jsを編集する
Google Homeにしゃべらせるプログラムを行います。
対象のURLにpostされると内容を受け取って、Google Homeが喋りだします。

```index.js
let express = require('express');
let googlehome = require('google-home-notifier');
var ngrok = require('ngrok');
var bodyParser = require('body-parser');

let language = 'ja';
let ip = '192.168.xx.xx';    // Google HomeのIPアドレス

var app = express();
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(bodyParser.json());

const serverPort = 8091;

app.post('/google-home-notifier', function (req, res)
{
    // TeamsからPostされた文言を取得
    var text = req.body.text;

    googlehome.ip(ip, language);
    googlehome.device('Google-Home', language); 

    // Google Homeにしゃべって頂く
    googlehome.notify(text, function(notifyRes) {
      console.log(notifyRes);
    });

    res.send("ok");
});

app.listen(serverPort, function ()
{
    // ngrokのURLが分かります。起動する毎にURLが変更されるので注意！
    ngrok.connect(serverPort, function (err, url) {
        console.log(url + '/google-home-notifier');
    });
});
```

### 1-3.index.jsを起動
作成したプログラムを実行します。するとngrokから生成されたURLが発行されます。

```
$ node index.js
https://xxxxxxx.ngrok.io/google-home-notifier
```

# 2.Teamsに投稿する
上記のプログラムを実行した後に、Teamsに投稿するプログラムを作成します。
json形式でpostするとTeamsに様々な様式で投稿することが出来ます。

参考URL: https://messagecardplayground.azurewebsites.net/

### 2-1.Teamsの投稿先URLを取得する
まず、Teamsのコネクタという部分を選択して、投稿先URLを生成しましょう。

<img width="534" alt="スクリーンショット_2018-02-27_14_14_47.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/985ce437-9d3e-04fa-d6d3-b1e090f734f3.png">


<img width="804" alt="スクリーンショット_2018-02-27_14_15_14.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/31b1ce88-7fe2-de5e-4f76-dd57d0d97443.png">
追加をクリック

<img width="604" alt="スクリーンショット_2018-02-27_14_15_44.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/d5b1be3f-a936-0346-3eac-5494196fe397.png">
インストールをクリック

<img width="804" alt="スクリーンショット_2018-02-27_14_40_53.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/8beaf3e5-b541-374a-b851-401f4f9f847c.png">
構成をクリック

<img width="806" alt="スクリーンショット_2018-02-27_14_43_16.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/8fcf2b32-1c15-089c-ebb6-f8fc53febe78.png">
名前と画像をアップロードしたら作成ボタンをクリック

<img width="804" alt="スクリーンショット_2018-02-27_14_43_44.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/7f4296a6-dd87-5595-10b0-8b2a8c419333.png">

### 2-2. Teamsに投稿する
AWSとかお好きなサーバーからPOST出来る仕組みはご用意ください。
これでプルダウンメニュー付きの入力フォームが投稿されます。

※ 前回の記事で行ったGoogleスプレッドシートのスクリプトからでも同様に書き込むことが出来ますよ。

```TeamsPostForm.js
var request = require('request');

// Teamsから取得したURL
let url        = 'https://outlook.office.com/webhook/xxxxxxxxxxxxxxxxxx'

var headers = {
  'Content-Type':'application/json'
}

class TeamsPostForm {
    constructor() {
    }

    post(postMessage) {
        //オプションを定義
        let jsonData =
        {
          "@context": "http://schema.org/extensions",
          "@type": "MessageCard",
          "themeColor": "0072C6",
          "title": postMessage,
          "text": "営業チームに知らせる場合はメッセージを入力してください。",
          "potentialAction": [
            {
                "@type": "ActionCard",
                "name": "営業に知らせる",
                "inputs": [
                    {
                        "@type": "TextInput",
                        "id": "comment",
                        "title": "メッセージを入力してください",
                        "value": postMessage,
                        "isMultiline": true
                    },
                    {
                        "@type": "MultichoiceInput",
                        "id": "list",
                        "title": "会議室を選択してください",
                        "choices": [
                          { "display": "会議室 1", "value": "会議室1" },
                          { "display": "会議室 2", "value": "会議室2" },
                          { "display": "会議室 3", "value": "会議室3" }
                        ]
                    }            
                ],
                "actions": [
                    {                
                        "@type": "HttpPOST",
                        "name": "送信する",
                        /* ngrokが発行したURL */
                        "target": "https://xxxxxxxxxx.ngrok.io/google-home-notifier",
                        "body": '{"text":"{{list.value}}に{{comment.value}}"}'
                    }
                ]    
            }
        
          ]
        };
        let payload = JSON.stringify(jsonData);
        
        // request options
        let options = {
            url: url,
            method: 'POST',
            headers: headers,
            form: payload
        };

        return new Promise(function(resolve, reject) {
            request(options, function(error, response, body){
                if (!error && response.statusCode == 200) {
                    console.log(body.name);
                    resolve(true);
                
                } else {
                    console.log('error: '+ response.statusCode + body);
                    reject(error);
                }
            });
        });

    }

}
module.exports = TeamsPostForm;
```

```index.js
const Teams = require('./TeamsPostForm');

const teams = new Teams();
teams.post("株式会社アイエンターの田中様が来訪されました").then(function (ret) {
    if (ret) {
        console.log('Teams送信OK');
    }
},
function (error) {
    console.error('ERROR:', error.message);
});        
```

<img width="829" alt="スクリーンショット 2018-02-28 10.17.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/2bf81287-bdac-832d-8b7e-d1946345841e.png">
このように投稿されます。

#まとめ
簡単にTeamsから営業部屋に置いてあるGoogle Homeにしゃべらせるプログラムが出来ました。
これで内線電話を取り次ぐという手間が無くなりますね。誰も営業部屋に居ない場合はごめんなさいｗ

システム化のご検討やご相談は弊社までお問い合わせください。
https://i-enter.co.jp/contact/