GoogleForm×GAS×Googleスプレッドシートで入退室通知Botを作ってみた

Googleフォームが送信されると、Lineに入退室が通知されるBotを制作しました。

## 経緯
　私は工学部2年の大学生です。課外活動の一環で、学習塾の生徒の入退室を保護者へ通知するLinebotを作ることになりました。そこで調べたところ、[こちら](https://qiita.com/guchimina/items/aa36e27875ae26876d2c)の記事を見てフォームで入退室を記録する方法を思いつき制作しました。

## 動作イメージ
<img width="320" alt="Screenshot_20211209-100042_LINE.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/766267/a76f0611-8a4a-8283-249d-3358620122a8.gif">

　最初に通知する名前をLine Botで登録します。 新規登録→登録先を選択→名前を入力→登録確認 の手順で登録します。

<img width="720" alt="Screenshot_20211209-110848_LINE (1).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/766267/70ec093b-b611-7c35-34c7-82b8bb037e95.png">

登録後、Googleフォームに登録した名前と入退室が送信されるとLineBotに通知されます。退室の場合は滞在時間も一緒に通知されます。

## 環境
- Google Apps Script（GAS）
- Google Spread Sheet
- Google Form
- Line Messaging API

## Google Apps Script（GAS）
　Googleが提供しているウェブアプリ開発やGoogleサービスを自動化するためのプログラミング言語です。Googleスプレッドシート等のGoogleのサービスを操作できる仕組みが用意されています。

## Line Messaging API
　Line Botがメッセージを送るための仕組みです。[こちら](https://developers.line.biz/ja/docs/messaging-api/overview/)に概要が記載されています。
下記の通り、Messaging APIは様々なメッセージや機能を利用することができます。
- 応答メッセージを送る
- プッシュメッセージを送る
- さまざまなタイプのメッセージを送る
- テキストメッセージ
- スタンプメッセージ
- 画像メッセージ
- 動画メッセージ
- 音声メッセージ
- 位置情報メッセージ
- イメージマップメッセージ
- テンプレートメッセージ
- Flex Message
- ユーザープロフィールを取得する

## やったこと
1. Line Developersを登録、設定
2. 情報登録用にGoogle Spread Sheetの作成
3. 入退室記録用にGoogle Formの作成
4. GASの作成
5. リッチメニューの作成
6. 動作確認

## 1.LineDevelopersを登録、設定
- Line Developersに登録します。手順は[こちら](https://developers.line.biz/ja/docs/messaging-api/getting-started/)です。
- Line Botを作成します。手順は[こちら](https://developers.line.biz/ja/docs/messaging-api/building-bot/)です。

※「Webhook URL」の部分はGASを作成する際に設定するので飛ばしていいです。
## 2.Google Spread Sheetの作成
<img width="720" alt="Screenshot_20211209-110848_LINE (1).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/766267/ec24c611-0b91-d089-1b7a-63e619898788.jpeg">

Google Driveから 新規>Googleスプレッドシート で画像のような表を作成し、シート名を「userlist」に変更します。


## 3.Google Formの作成
<img width="720" alt="Screenshot_20211209-110848_LINE (1).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/766267/5c04be31-1a9f-7274-bc3a-853101855924.jpeg">

この形式のGoogleフォームを作成し、回答先を作成したスプレッドシートに設定します。
するとスプレッドシートに新しくシートが作られるので、シート名を「form」に変更します。


## 4.GASの作成
<img width="" alt="Screenshot_20211209-110848_LINE (1).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/766267/be48d700-e7da-8381-3b77-43ab2566c55a.png">

スプレッドシートの編集画面の 拡張機能 > Apps Script からGASのファイルを作成します。ファイルの中身は[こちら](https://github.com/days5893/lineBot)です。通知される日付の形式を整えるためにdayjsというライブラリを使っているので、[こちら](https://xn--eckl3qmbc2cv902cnwa746d81h183l.com/instructor-blog/210331use-the-day-js-library-with-google-apps-script/)の記事を参考に設定します。

### コードの置き換え
自分の環境で動かしたい場合は、コード中の「**********」になっている部分を環境に合わせて置き換えます。

>doPost.gsのchannel_tokenの値をLineのアクセストークンに設定します。
> ```doPost.gs
>const channel_token = "**********"; 
>...略
> ```
>

>doPost.gsのspreadsheetの値をGoogleスプレッドシートのIDに設定します。
> ```doPost.gs
>...略
>const spreadsheet = SpreadsheetApp.openById("**********"); 
>...略
> ```


>updateForm.gsのformの値をGoogleフォームのIDに設定します。
> ```doPost.gs
>...略
>  const form = FormApp.openById('**********'); 
>...略
> ```


### トリガーの設定
<img width="" alt="Screenshot_20211209-110848_LINE (1).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/766267/a6889adb-66af-c389-26ac-a32f513318ef.png">

フォームを送信した際に実行されるトリガーを設定します。画像と同じ設定でトリガーを追加します。
### デプロイ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/766267/8077d06e-c630-307a-51e9-a8918f01e789.png)

GASの編集画面のデプロイ > 新しいデプロイ > 種類の選択 から「ウェブアプリ」を選び、 アクセスできるユーザーを「全員」にしてデプロイします。初回デプロイ時は承認が求められるので、詳細から安全ではないページにアクセスするをクリックします。

### Webhook URLの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/766267/48aa7524-ae22-b52c-ce1f-8beb5b3c79d3.png)
デプロイ完了後にウェブアプリのURLが出るので、これをコピーしてwebhookURLを設定します。手順は[こちら](https://developers.line.biz/ja/docs/messaging-api/building-bot/#setting-webhook-url)です。

## 5.リッチメニューの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/766267/60c2466d-f41b-ce89-ddc0-aebd858d0eb8.png)
Line公式アカウントの管理画面に[ログイン](https://account.line.biz/login?redirectUri=https%3A%2F%2Fdevelopers.line.biz%2Fconsole%2F%3Fstatus%3Dsuccess)し、作成したLineBotのアカウントをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/766267/0cacb7b1-ba8a-a98a-8ac2-1f639464efc7.png)
サイドバーのトークルーム管理からリッチメニューに移動し、作成をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/766267/9fa179fc-cfc3-0e1e-1037-27053770a26f.png)

コンテンツ設定でテンプレートを選択から三分割のメニューを選択し、アクションにそれぞれ以下のテキストを設定します。
- 新規登録
- 登録情報の確認
- 登録情報の削除

## 6.動作確認
<img width="480" alt="Screenshot_20211209-110848_LINE (1).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/766267/ace63a8f-5e17-7ad6-305b-2b40e9d28971.jpeg">

新規登録→登録先を選択→名前を入力→登録確認 でテストと登録してみます。

![Screenshot_20220219-150414_LINE.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/766267/d30da101-a250-d508-4e21-484850837e65.png)
登録した名前でGoogleフォームを送信して正常に通知されていれば完成です。実際に使用する際は、出入りする場所にQRコードを置いてGoogleフォームのURLを共有しておくといいと思います。QRコードは[こちら](https://qr.quel.jp/)のサイトで作成できます。

## 参考
- [Googleフォームの回答内容をLINEで通知する](https://qiita.com/guchimina/items/aa36e27875ae26876d2c)
- [GASを用いLINE Messaging APIのフォローイベントでuserIdをスプレッドシートに転記する](https://qiita.com/s_home/items/50bf4834189cf7ad1318)
- [【LINE Botの作り方】お金をかけずにLINEのMessaging APIの投稿(push)と返信(replay)を試してみる。](https://www.pnkts.net/2018/06/03/line-messaging-api/)
- [LINE BOT×GASでスプレッドシートに書き込み！友達一覧を作ろう](https://webmarketerokb.com/2021/02/23/line-botxgas%E3%81%A7%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AB%E5%8F%8B%E9%81%94%E4%B8%80%E8%A6%A7%E3%82%92%E4%BD%9C%E3%82%8D%E3%81%86/)
- [LINE BOTで「クイックリプライ」を使う](https://www.pre-practice.net/2018/08/line-bot.html)
- [Google Apps ScriptでDay.jsライブラリを使ってみた](https://xn--eckl3qmbc2cv902cnwa746d81h183l.com/instructor-blog/210331use-the-day-js-library-with-google-apps-script/)
- [LINE BOTからGoogleカレンダーに予定の追加＆一週間の予定の確認を行う](https://qiita.com/dekamintv/items/a4cb9a195f80ef4fbdfa)

作成したコードはこちらのGithubに上げています。
 https://github.com/days5893/lineBot