GoogleフォームとLINEを連動させたアプリを作ってみる(最終回・仕上げ編)

こんにちは。船井総研デジタルのいっちーです。
前回の記事では、Google Apps ScriptのスクリプトからLINEメッセージを送り、手元の端末でも受信できることを確認しました。

https://qiita.com/fsd_itchy/items/aa091f0cbe54767a5111

今回は、フォームとスクリプトを連動させて、最後の仕上げをしていきたいと思います。

もう一度、最初の構成図を見てみましょう。本稿では、赤枠で示した部分を作っていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/773491c1-46a9-a571-7acd-eb58e9bbceb3.png)

# 回答用のフォームを作る
まずは回答用のフォームを作っていきましょう。Googleフォームからフォームを新規作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/39ab41c9-b92b-fcd6-0c9d-eea9c6af8711.png)

フォームの内容は何でもいいので、とりあえず1問だけ質問を作っておきます。フォームが出来上がったら、「送信」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/cecbb6ef-b58d-3b3d-d24f-8add6166d988.png)

フォーム共有用のURLを控えておきましょう。URLを控えたら、「フォームを送信」のモーダルを閉じて下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/9ba2b58c-275c-d3bf-dc0b-3e5a3dc568a4.png)

次に、フォームの回答を収集するためのスプレッドシートを作成します。「回答」タブから「スプレッドシートにリンク」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/9096c6cb-d3fa-5ae7-ae62-0106a3b2c745.png)

「新しいスプレッドシートを作成」を選択して「作成」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/05480c66-ad10-0a81-097c-ddb7e14f6ae9.png)

スプレッドシートが開くので「拡張機能」から「Apps Script」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/e8f70016-97f3-4115-fb2e-7fd1fb10e531.png)

# メッセージ送信のスクリプトを作る

## スクリプト作成

Google Apps Scriptのエディタに、下記のコードを入力します。今回は元々作られている`myFunction`は削除して、スクリプト名もそれっぽいものを付けておきましょう。

<details><summary>LineSender.gs</summary>

```javascript
function sendLineMessage(msg) {
  var accessToken = '【前々回の記事で作成したアクセストークン】';
  var url = 'https://api.line.me/v2/bot/message/push';
  var headers = {
    Authorization: 'Bearer ' + accessToken,
    'Content-Type': 'application/json',
  };
  var payload = {
    to: '【前々回の記事で作成したユーザーID】',
    messages: [
      {
        type: 'text',
        text: msg,
      },
    ],
  };
  var options = {
    method: 'post',
    headers: headers,
    payload: JSON.stringify(payload),
  };
  var response = UrlFetchApp.fetch(url, options);
  Logger.log(response.getContentText());
}

function sendRemindMessage() {
  var msg =
    'こんにちは！フォームの入力をお願いします！\n【作成したフォームのURL】';
  sendLineMessage(msg);
}

function sendResponseMessage() {
  var msg = 'ありがとうございます。登録を確認しました！';
  sendLineMessage(msg);
}
```
</details>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/13d3c643-eb07-d6f0-ad8f-1c5bee341bae.png)

## 動作確認

スクリプトを保存したら、動作確認してみましょう。`sendRemindMessage`を選択して、「実行」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/e692b80d-c998-1f34-f9f5-e3d9ef8d7115.png)

::: note info 
実行権限を求めるようなダイアログが出た場合は、「許可する」方向に倒れるように操作してください。以降も権限を求められた場合は、同様に権限を付与していきます。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/5d2494a2-4f97-b678-4bd4-bf8a7051cd04.png)

実行ログが表示されました。`sendResponseMessage`も同様に実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/9fca3d0f-6ede-2f6d-6ca2-d73cb490f10f.png)

端末を確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/772df01c-2233-3fa2-2ff4-f97f320a32bb.png)

メッセージ着信を確認できました。返信用の関数を直接起動したので、フォームの回答をしていないのに「登録を確認しました！」と、ちょっと奇妙なことになっています。

# トリガーを作る

このアプリは、`sendRemindMessage`を定時起動し、フォームの送信時に`sendResponseMessage`を都度起動します。これを実現するため、トリガーの設定をしていきましょう。

## トリガー作成

サイドメニューから「トリガー」タブを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/18207127-d061-5be4-6113-7e0420cf9d51.png)

「トリガー作成」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/bde7d93b-a745-c44c-8f5d-16afbad12596.png)

定時起動のトリガーを作成します。`sendRemindMessage`関数に、「時間主導型」「日付ベース」「午前8時～9時」を設定し、「保存」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/f87f5828-6bb4-b629-8139-fd6afdb39a2e.png)

同様に、都度起動のトリガーを作成します。`sendResponseMessage`関数に、「スプレッドシートから」「フォーム送信時」を設定し、「保存」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/1bfc0320-fc14-a12e-96ed-6082b0204a5f.png)

これで、必要なトリガーが作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/69dc0a9a-7b20-657f-5ce7-a8e4c813bbad.png)

## 動作確認

時間起動で設定したトリガーは時間が来るまで確認できませんが、都度起動のトリガーはすぐに動作確認できます。先程受信したメッセージのフォームURLをタップしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/4d727b82-6a46-f8f6-b836-accf91150fb0.png)

フォームが開くので、必要事項を入力して「送信」をタップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/5d10859b-ae2d-abaf-8b1e-66af4e28c1cd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/9c56731f-7cf8-d823-79e4-7135b38be569.png)

フォーム送信後、数秒でLINE着信の通知が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/957b0424-32b4-4e77-1311-a124775f695b.png)

LINE本体も確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/528facaa-5414-2468-9b2f-b91deb06679b.png)

メッセージ着信が確認できました。スクリプトの実行記録も見てみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/3275caed-4119-289e-a56c-e7821d8b96d8.png)

トリガー実行したスクリプトが正常終了している記録が確認できます。

翌朝見てみると、ちゃんと定時起動のメッセージも着信していました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/85606f63-a373-47ae-121b-fe8ec4f7b88c.png)


# まとめ

これまでの手順で、トリガーからGoogle Apps Scriptを起動し、LINE Messaging APIを使ってLINEメッセージを送る仕組みを構築できました。自動的にメッセージを送る仕組みは色々と応用ができると思いますので、本記事が面白いものを作るヒントになれば幸いです。
今回の連載は、これにて終了です。最後までお読み頂き、ありがとうございました。

それではまた。