Google Hangoutsで出退勤記録をつけるBotを作ってみた

初投稿です。
Hangouts Chatで日頃チーム内のやりとりを行なっていますが、スプレッドシートに出退勤記録を自動で作成するHangtous Botを作ってみました。
スプレッドシートとの連携部分で苦戦したので、自身のメモの意味も込め投稿します。


#使用するもの
・Hangouts Chat
・スプレッドシート（Google Apps Script）
・Google Cloud Platform （Hangouts Chat API）
※G SuiteとGCPは同一アカウントで行なっています。


#手順
１. スプレッドシートを作成し、メニューから「ツール」ー「スクリプトエディタ」を選択します。
<img width="806" alt="スクリーンショット 2019-04-08 21.37.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/203854/46d21ce3-6be9-df0d-8954-4289a2865d49.png">

２. AppsScriptが起動するので、メニューの「表示」ー「マニフェスト ファイルを表示」を選択します。プロジェクト名が求められるので任意のプロジェクト名を入力して進みます。
<img width="471" alt="スクリーンショット 2019-04-08 21.40.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/203854/ecf3ad50-d684-71c1-12f0-f9dc7cca1b13.png">

３. マニフェスト ファイル（appsscript.json)が表示されるので、以下にコードを変更します。
変更したらファイルを保存するのをお忘れなく。

```json:appsscript.json
{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER"
  "chat": {
}
```

４. コード.gsに戻り、実際の処理を記載していきます。
以下に参考のコードを貼り付けます。
「開始」が含まれるワードを入力した場合は勤務開始を、「終了」が含まれるワードを入力した場合は勤務終了をそれぞれユーザ名と日付、時刻と一緒に記録する内容です。
日付変数やその他、もっと簡易化できるところあるかと思いますがそちらは本職の方にお任せします。。。笑
こちらもファイルの保存をお忘れなく。

```JavaScript:コード.gs
// 空白セルを取得するFunction
function get_array(sheet, col) {
  var last_row = sheet.getLastRow();
  var range = sheet.getRange(col + "1:" + col + last_row)
  var values = range.getValues();
  var array = [];
  for(var i = 0; i < values.length; i++){
    array.push(values[i][0]);
  }
  return array;
}

// メッセージを受け取るFunction
function onMessage(event) {
  var sheet = SpreadsheetApp.getActiveSheet(); 
  var said = event.message.text;
  var msg = "";
  var startResult = said.indexOf("開始");
  var endResult = said.indexOf("終了");
  var now = new Date();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  var hour = now.getHours()
  var minute = now.getMinutes()

  if (startResult !== -1) {
    var columnBVals = sheet.getRange('B:B').getValues();
    var LastRow = columnBVals.filter(String).length + 1;
    sheet.getRange(LastRow,2).setValue(event.user.displayName);
    sheet.getRange(LastRow,3).setValue(month + "月" + day + "日");
    sheet.getRange(LastRow,4).setValue(hour + "時" + minute + "分");
    msg = "勤務開始を記録します。";
  } else if (endResult !== -1) {
    var col = "B";
    var array = get_array(sheet, col);
    var row = array.lastIndexOf(event.user.displayName) + 1;
    sheet.getRange(row,5).setValue(hour + "時" + minute + "分");    
    msg = "勤務終了を記録します。お疲れ様でした。";
  } else {
    msg = "おっしゃっている意味がわかりません。。。";
  } 
  return { "text": msg };
}
```

５. 次にGCPと連携してBot化します。メニューの「公開」ー「マニフェストから配置...」を選択します。
<img width="548" alt="スクリーンショット 2019-04-08 22.05.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/203854/a485e010-5027-4a80-b6fa-7994217e0e1c.png">

６. Deploymentsが表示されるので「Create」から任意のDeployment nameを入力して「Save」を選択します。
<img width="731" alt="スクリーンショット 2019-04-08 22.07.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/203854/327dbd4e-f209-48eb-eac9-a11fbc740a8b.png">

７. 新しいVersionが作成されるのでGet IDを選択します。Deployment ID：を利用しますのでメモします。
<img width="559" alt="スクリーンショット 2019-04-08 22.08.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/203854/afb44dd8-d164-7229-db4b-eb43a4802b03.png">

８. ここからGCPの設定に移ります。検索ボタンからHangouts Chat APIを検索します。
<img width="1376" alt="スクリーンショット 2019-04-08 22.15.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/203854/c363f154-a929-f04f-c6e9-c8f4a334ac2a.png">

９. Hangouts Chat APIを有効にし、「設定」を選択します。ボット名、アバターのURL、説明に任意の値を入力し、「接続設定」を「Apps Script project」にし、「デプロイID」に先ほど7.でメモしたDeployment IDを入力し、保存します。
<img width="809" alt="スクリーンショット 2019-04-08 22.17.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/203854/69da9325-0fa3-c27e-50e8-7cdbed6a30fb.png">

これで準備は完了です。動作を確認しましょう。


#動作確認
ハングアウトの「ユーザー、チャットルーム、botを検索」に作成したBotが表示されるようになっています。
実際に業務開始のメッセージを送ると以下通り返信があります。
<img width="718" alt="スクリーンショット 2019-04-08 22.30.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/203854/18801b6a-334c-c169-ae90-2f4280409b50.png">

最初に作成したスプレッドシートにも勤務開始が記録されているはずです。
<img width="630" alt="スクリーンショット 2019-04-08 22.33.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/203854/44b0fce2-8490-5306-12c0-618ee7f89472.png">

勤務終了のメッセージを送信すれば終了時間が記録されるので試してみてください。


#感想
Hangouts Botでスプレッドシートに出退勤記録をつけてみました。
一度やり方がわかってしまえばとても簡単にBotを作成することができました。

リファレンス等参考にしながら進めましたが、Botからスプレッドシートへの書き込みを一連に説明しているものは見つからなかったので自分で書いてみました。
スプレッドシートとの連携を簡単に行うためにスクリプトエディタでやろうと思ったものの、マニフェストファイルを新規作成しないといけないと勘違いし、appsscript.json.htmlなど意味不明なファイルを大量に作成したりしましたが、なんとか動くものが作れました。。。
わかりづらいところあればコメントください。

今後はPush通知やリッチレスポンス、集計の自動化（DataStudioとか）をやっていきつつ、チームコミュニケーションの向上に少しでも貢献できたら・・・と思っています。


#参考
https://developers.google.com/hangouts/chat/concepts/
https://developers.google.com/sheets/guides/concepts?hl=ja