LINE Bot - GASプロジェクトをGitHubで管理

# 前書き
この記事は連作で、ラン記録をシェアし、メンバーの走行記録を集計する活動を、LINE Botで自動化しようとしている取り組みです。

Cloud Vision APIでテキスト検出できることから、目で読んで手で打つという手間を省けないかと取り組み始めました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3381/fd34ff60-85e2-2d38-841d-9ced6f041fde.png)
現在は作ったBotを加えたLINEグループにて、メンバーが上げてくれるラン画像で見つかる考慮漏れなどを修正するなど、日々小さく改善を繰り返しております。

[前回の記事](https://qiita.com/quwaji/items/b3356ea833b3d739e942)は8月でしたのでしばらく間が開きました。安定して運用できており、クリティカルな課題は以下の２点です。

１） １〜2週間で、GASのデプロイが権限の再承認を要求される状態になってWebhookがエラーになる。
２）　LINEのUserIDに対して名前を設定する仕組みがなく、メンバーが増えた際に管理人が手で設定している。

そろそろ修正が戻せなくなったりするのも怖くなってきました。いよいよGitHubにリポジトリを作成し、Google Apps Script GitHub アシスタントを導入して変更をPush、更新差分が確認できるようにしました。

本記事では、上記の２）について取り組んだ小さな変更を事例に、Google Apps Script GitHub アシスタントを使った変更管理をまとめたいと思います。

# 今回のプチ更新 - 新規ユーザの名前を設定
前回の記事までで、記録と修正取り消し、集計ができるようになりました。おともだちになっていないユーザの名前が取れないことや、そもそも記録表には氏名で表記したいことから、LINEのUserIDと記録用の氏名をUser ListとしてSpreadsheetで管理しています。

そして、このリストにないユーザが画像をアップし「ナイスラン！」を返す時には、User ListにLINE UserIDを追記（[→こちらの記事参照](https://qiita.com/quwaji/items/a9ee4ea4375d84323ccb#%E8%AA%B0%E3%81%AE%E8%A8%98%E9%8C%B2%E3%81%8B%E3%82%8F%E3%81%8B%E3%82%8B%E3%82%88%E3%81%86line%E3%81%AEuserid%E3%81%8B%E3%82%89%E5%90%8D%E5%89%8D%E3%82%92%E8%BF%BD%E5%8A%A0)）するようにしています。ただ、追加時は「unknown」さんになっていて、管理者さんがSpreadsheetに追記された行の氏名を手でunknownから修正していました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3381/2e552511-d933-653a-451a-6bc9f9a438fd.png)
## ナイスラン！に名前も追加
たまに、「xxはyyyが走りました」と書かれる方がいるのと、グループに参加したばかりで名前が設定できていない方がおり、設定のきっかけにできそうなので、名前を入れるようにすることにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3381/1870c654-6569-0793-d693-7deff0831887.png)
入れた後のフキダシのレイアウトはこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3381/237788d5-61aa-5e22-c839-8c1f8839e790.png)
またここでタイムと距離が検出されていても、名前がunknownだった場合にはクイックリプライを出すようにしました。
名前だけ未設定の場合は別のクイックリプライが良さそうですが別issueにすることとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3381/ce24fb39-2304-6420-8525-249b1524e3a5.png)
「修正」を選択したときの流れは以前のままで、テキスト入力欄に挿入された記録の氏名を書き換えて送信すると、記録が修正されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3381/6d6600a8-8aca-1680-5d91-4d3acdff1280.png)
このとき、User Listに追加された unknownを入力された氏名で置き換えるように修正しました。

仕事では、１つの修正に１つのissueというルールで行っていますが、二つやっちゃいました。。
差分はこんな感じです。

https://github.com/run-dreams/linebot-gas/pull/2/files

このように、どう修正したか記録が残せるのは安心ですし協力者が増えた時にも必須の管理ですね。というわけで、これを実現しているGitHubとの連携について。

# Google Apps Script GitHub アシスタントの導入

以下の記事を参考にしました。ほぼその通りに進めていき、導入できました。

https://tonari-it.com/gas-github-assistant-introduction/

Chromeのアドインで、インストールして Apps Script Editorを開くとツールバー部分にリポジトリ操作のコントロールが追加されています。GitHubアカウントを設定すると、リポジトリに接続できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3381/886be3f4-cb1e-fd2f-2ebc-1522db6b61bc.png)

# リポジトリから更新を反映
SpreadsheetのApps Scriptを開き、リポジトリとブランチを指定します。

「↓」ボタンで指定のブランチをpullします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3381/4db7a2ff-4513-ec84-f141-1381a7d19e05.png)
pullにより反映される差分が表示され、Pullを選択すると更新されます。

これにより、以下の３種類の環境を更新します。
- 開発テスト環境
- 運用環境
- プロジェクト公開用テンプレート

まず開発テスト環境で修正、デプロイしてテストを行います。Webhookを更新してテストするLINE公式アカウントは、運用しているものとは別のものを用意します。

修正がFixしたら、ブランチを作成してプッシュ「↑」します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3381/d27308f3-b613-4563-0ad1-9daa75e48db7.png)
ブランチの作成は、ブランチのプルダウンにある「Create new branch」から行えます。GitHub上で作っておくこともでき、リストから選択することができます。

GitHub上で、開発ブランチからmainブランチへのプルリクエストを作成し、マージします。このプルリクエストが、更新の差分を見ることのできる記録となります。
この操作は　Apps Script Editorに組み込まれた GitHub アシスタントではできない操作になります。

## 運用環境の更新
開発テスト環境で確認した修正をmainブランチにマージしたら、今度は運用環境用の Spreadsheetを開いて Apps Script Editorからmainブランチをpullし、デプロイを行います。
デプロイが成功したら、新しく発行されたWebhookアドレスで、line Developper Consoleから LINE Messeaging APIの設定を更新します。

## プロジェクト公開用テンプレートの更新
プロジェクト公開用テンプレートとは、SpreadsheetのコピーからLINEBotをセットアップできるように用意した空のSpreadsheetです。Apps Scriptがそこそこ最新になるよう、ときどきリポジトリのmainブランチから更新を反映します。

※もうまもなく、公開予定！

# PropertiesServiceでセキュリティキーの設定を外出し
GitHubリポジトリとSpreadsheetのテンプレートで公開するために、これまでコードに直書きしていたセキュリティキーを外出しにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3381/9fe8fcfa-98b9-2e94-8eee-cda024445787.png)

## コードの修正
プロジェクト内のコードでグローバル変数をスクリプトプロパティから設定します。
```js:code.gs
var CHANNEL_ACCESS_TOKEN = PropertiesService.getScriptProperties().getProperty("CHANNEL_ACCESS_TOKEN");
var GOOGLE_API_KEY = PropertiesService.getScriptProperties().getProperty("GOOGLE_API_KEY");
```
## スクリプトプロパティの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3381/c480fd10-ee73-18d8-841d-901937fd79b8.png)

プロジェクトの設定を下にスクロールすると、GCPプロジェクトの設定とスクリプトプロパティの項目があります。「スクリプトプロパティを編集」を選択すると、追加・削除・保存ができます。
こちらに、LINEのチャンネルアクセストークンと、Cloud Vision APIを使うためのGoogle API Keyを定義、設定します。

# TODO

今朝もWebhookが403エラーになっていました。今回は3日で発生。この問題をなんとかせねば。