筋トレ報告したら褒めてくれるLINEbotを作る（Google Apps Script + LINE Messaging API ）

# はじめに
プログラミングの勉強も兼ねて、Google Apps Scriptを使ってLINEbotを作成したので復習&備忘録として手順をまとめました。
簡単なメッセージ配信や、特定のキーワードに対するメッセージ応答を行うbotは[LINE for Business](https://www.linebiz.com/jp/)で作成可能なので、複雑な応答処理が必要でない場合はそちらも利用すると良いと思います！


## 作るもの
「筋トレしたよ」とメッセージを送ると「えらい！」と褒めてくれるLINEbotをつくります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/fe2cd856-91b1-410b-0771-8a0c941ff309.gif" width=40%>

## 使うもの
- **Google Apps Script（GAS）**
→ Googleが提供するJavaScriptベースのプログラミング言語です。
　Googleアカウントがあればどなたでも無料で使用できます。
　今回は応答メッセージを編集・送信する処理を記述するために使用します。<br/>

- **LINE Messaging API**
→ LINEが提供するメッセージ送受信のAPIです。

# チャネル作成
まずはbotとなるアカウント（チャネル）を下記の手順で作成します。

- LINE Developersにログイン
- プロバイダー新規作成
- チャネル新規作成

### LINE Developersにログイン

**[LINE Developers](https://developers.line.biz/ja/)にアクセスし、「ログイン」をクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 11.12.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/f48c806e-1aa1-e721-5ebe-b463686f1de7.png">


**「LINEアカウントでログイン」をクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 11.24.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/4fd4f1d0-08bb-1f0c-610c-d4f2f003f0ae.png">

### プロバイダー新規作成

**ご自身のLINEアカウントでログイン後、プロバイダー一覧画面が表示されるので「作成」をクリック。**
（私はすでに1件作成済みなので、1件表示されています。）
<img width="1440" alt="スクリーンショット 2020-04-11 11.24.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/5ed602a7-9f55-df63-deda-feaffde3ac38.png">

**プロバイダー名を入力してプロバイダーを作成します。**
<img width="1440" alt="スクリーンショット 2020-04-11 11.44.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/c5a18d09-3656-fd97-9bb4-60e503b32aad.png">

### チャネル新規作成

**プロバイダー作成後、下記メニュー画面が表示されるので、「Messaging API」をクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 11.55.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/a349bb05-2d22-cad4-bede-97db02c0ecfa.png">

**チャネル新規作成画面が表示されるため、必須項目を入力し、チャネルを新規作成します。**
チャネルの種類、プロバイダーはそのままで大丈夫です。
<img width="1440" alt="スクリーンショット 2020-04-11 12.00.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/5c3303cc-5a7e-b21a-706a-ab5ce7d6c2d8.png">


アイコン、チャネル名はLINEのトーク画面などで表示されます。
<img width="1440" alt="スクリーンショット 2020-04-11 12.07.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/2bb1b87b-11ed-61fe-beb0-5d9b67a2f1de.png">


今回は個人利用なので、業種は「個人」-「個人（その他）」にしました。
<img width="1440" alt="スクリーンショット 2020-04-11 12.10.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/a6cc01ff-164b-2ad4-acd8-762a72bd4429.png">


**最後に規約同意にチェックを入れて、「作成」をクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 12.14.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/52ea2747-71b7-1d8f-a429-93b90530fdfa.png">

こちらも「同意する」をクリックします。
<img width="1440" alt="スクリーンショット 2020-04-11 12.19.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/fc6a235c-0592-d334-8c62-604df7adfb02.png">

**以上でチャネル作成完了です！（作成完了後、下記画面に自動で移動します。）**
<img width="1440" alt="スクリーンショット 2020-04-11 12.21.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/5637c298-34ac-7022-ad97-d5163eb90c87.png">

## MessagingAPI設定変更、トークンの発行
次にデフォルトで設定されているチャネルの設定を変更します。
また、GASの応答メッセージ送信処理に必要なAPIのトークンを発行します。

**作成したチャネルの設定画面内の「Messaging API設定」をクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 12.49.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/f7deeaab-3ce4-1e27-3720-bc0d917d05ed.png">

**Messaging API設定画面へ移動後、画面下部の「LINE公式アカウント機能」の設定を確認します。
デフォルトでは下記のように設定されていたため、それぞれ変更します。**
<img width="1440" alt="スクリーンショット 2020-04-11 12.52.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/9ee60a72-8e4e-2a53-8660-c001d7e990d3.png">

### LINEグループでも使用できるようにする

**「グループ・複数人チャットへの参加を許可する」の「編集」をクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 12.58.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/3f5fc826-0ed0-a005-64d8-815d29fb76b5.png">

**アカウント設定画面が表示されます。**
<img width="1440" alt="スクリーンショット 2020-04-11 13.03.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/1461378e-83c7-12a3-fc1b-6cc3b7ec2969.png">

**アカウント設定画面内の「チャット」の欄で、「グループ・複数人チャットへの参加を許可する」を選択状態にします。**
（変更は自動で保存されます。）
<img width="1440" alt="スクリーンショット 2020-04-11 13.01.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/afedc590-429e-33a6-c49d-ca0e0795a66e.png">

**Messaging API設定画面を更新し、設定が反映されていることを確認します。**
<img width="1440" alt="スクリーンショット 2020-04-11 13.09.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/051d4ff4-559b-bd12-fb97-50f87cf4a400.png">

### 応答メッセージ、あいさつメッセージの設定を変更する
**あいさつメッセージ**は作成したbotを友だち追加した際に、自動的に配信されるメッセージです。
**応答メッセージ**は簡単なメッセージ配信や、特定のキーワードに対する応答メッセージです。
あいさつメッセージや応答メッセージはLINE Official Account Managerで設定することができます。
必要に応じて設定してください。（設定方法については省略します。）
今回はGASで設定した応答メッセージのみ使用したいため、どちらも無効にしておきます。

**応答メッセージの「編集」、もしくはあいさつメッセージの「編集」をクリック**
<img width="1440" alt="スクリーンショット 2020-04-11 14.26.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/c1459f37-d30a-2aaa-8e13-72648cc90f2e.png">

**応答設定画面に移動するので、下記のように設定します。**

- あいさつメッセージ：オフ
- 応答メッセージ：オフ
- Webhock：オン（GASとの連携を許可）
<img width="1440" alt="スクリーンショット 2020-04-11 14.52.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/0aa18be2-fbfa-e4e3-287a-b9aba10601c9.png">


**Messaging API設定画面を更新し、設定が反映されていることを確認します。**
<img width="1440" alt="スクリーンショット 2020-04-11 14.57.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/258b487b-97e5-8631-ecc6-b6e15a975776.png">

### APIトークンの発行
GASでAPIを使用できるように、チャネルに紐づくトークンを発行します。

**Messaging API設定画面下部のチャネルアクセストークンの「発行」をクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 15.02.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/7a87cebc-89c2-04f0-234b-738a0e74ff17.png">

**トークンが発行されたことを確認します。**
<img width="1440" alt="スクリーンショット 2020-04-11 15.04.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/0108659a-cc0b-767e-3e75-2f992bf71df6.png">

# GASで応答処理を実装する
実際にGASを使って、メッセージ応答の処理を実装していきます。

### プロジェクトの新規作成
**ご自身のGoogleドライブを開いて、新規ボタンをクリックし、「その他」-「Google Apps Script」をクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 15.14.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/13648292-ad2e-0a3f-242f-7f62b8609cf8.png">

**新規プロジェクトが作成されました。**
<img width="1440" alt="スクリーンショット 2020-04-11 15.39.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/acff39f2-5c20-51d6-a1bd-d6d9109189e4.png">

### メッセージ応答処理の実装
**既存のコードを削除し、下記のコードを貼り付けます。**

- チャネルアクセストークンを忘れずに設定してください。
- チャネルアクセストークンは[APIトークンの発行](#apiトークンの発行)で発行したトークンを設定します。
- 応答用のメッセージは仮のものを設定しています。独自のものを設定していただいて構いません。
- 記事を書いている途中でソースコードを一部修正したため、以降の画面キャプチャ内のソースコードと差異がありますが、修正する必要はありません。

botに対して、もしくはbotが参加しているグループにメッセージが送信されたら、「メッセージ送信テスト」というメッセージを送信する処理が記述されています。

```コード.js
function doPost(e) {
  
  // 返信用トークン
  var replyToken= JSON.parse(e.postData.contents).events[0].replyToken;
  if (typeof replyToken === 'undefined') {
    return;
  }

  // 応答メッセージ用のAPI URL
  var url = 'https://api.line.me/v2/bot/message/reply';
  
  // チャネルアクセストークン
  var channelToken = '<ここにチャネルアクセストークンを貼り付ける>';
 
  // 送られてきたメッセージ
  var input = JSON.parse(e.postData.contents).events[0].message;
 
  // 応答メッセージ
  var messages = [];
  if(input.type == 'text') {
    messages = [{
      'type': 'text',
      'text': 'メッセージ送信テスト'
    }];
  }
  
  // 応答処理
  UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + channelToken,
     },
     'method': 'post',
     'payload': JSON.stringify({
       'replyToken': replyToken,
       'messages': messages,
     }),
  });
  
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}
```
### プログラムの公開
**画面上部の「公開」-「ウェブアプリケーションとして導入」をクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 15.58.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/0bc61d32-5ec6-0b53-7aef-92cc2a803ed9.png">

**プロジェクトの名前を設定し、「OK」をクリック。**
今回は「テストプロジェクト」としました。
<img width="1440" alt="スクリーンショット 2020-04-11 16.06.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/1d2c4c14-ea00-387a-c170-7ed7699fae19.png">

**「Who has access to the app」のセレクトボックスを「Anyone,even anonymous」に設定し、「Deploy」をクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 16.12.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/70743846-4c9a-ba1d-eb18-32ac3c1fba6d.png">

**下記のダイアログが表示されるので、「許可を承認」をクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 16.17.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/f47a2873-1c49-7629-3ed4-f0a2ee62ef9f.png">

**Googleアカウント選択画面が表示されるので、ご自身のGoogleアカウントをクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 16.21.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/fd5254f8-ef10-b1ea-d2ec-8f5726037b94.png">

**下記画面が表示されるため、詳細を表示し、下部のリンクをクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 16.26.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/f7250d02-c427-6aef-f331-3642485d56bd.png">

**下記画面が表示されるので、「許可」をクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 16.29.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/e80efdfc-60ff-6ea5-62f5-4547f01cb702.png">

**プログラムの公開が完了しました！赤枠内のURLをコピーしておきます。**
<img width="1440" alt="スクリーンショット 2020-04-11 16.34.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/ca6968f5-51a4-1c7b-c220-adc4991973c6.png">

# 連携先プログラムの設定
作成したbotがGASプログラムを利用できるように設定します。

**LINE Developersから作成したチャネルのMessaging API設定画面を開き、Webhook欄の「編集」をクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 16.42.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/686c0900-c73a-355e-9a3b-0f925fe44e59.png">

**[プログラムの公開](#プログラムの公開)で取得したURLを設定し、「更新」をクリック。**
<img width="1440" alt="スクリーンショット 2020-04-11 16.45.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/c4d77d6b-072c-4e6f-dc37-cc180139f667.png">

**「検証」をクリックし、疎通確認を行います。**
<img width="1440" alt="スクリーンショット 2020-04-11 16.47.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/35112b89-c2fa-5ee9-6a60-958927343dfa.png">

**下記のようにダイアログが表示し、疎通が成功することを確認します。**
<img width="1440" alt="スクリーンショット 2020-04-11 16.52.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/de7099dd-05f5-517a-77fe-cb0ba585dee1.png">

**最後にWebhookの利用を有効にします。
これでGASプログラムを介したメッセージ送信が行えるようになりました！**
<img width="1440" alt="スクリーンショット 2020-04-11 17.02.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/f40a7e33-169a-b54f-2976-d9db6298ae5b.png">


# メッセージを送信してみる
### botを友だち追加する
**チャネルのMessaging API設定画面を開き、ID、もしくはQRコードを確認し、スマホのLINEで友だち追加する。**
<img width="1440" alt="スクリーンショット 2020-04-11 17.14.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/f37a7417-f4b9-95ba-2104-1236fe60efe9.png">

### メッセージ送信
ほめるくんとのトークで適当なメッセージを送信すると、GASで設定したメッセージが返ってきます！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/ddf4164b-759e-f174-b3ed-6d1e49a46ff1.gif" width=40%>

# ソースコード修正（褒めてもらう）
「筋トレしたよ」というキーワードを含むメッセージを投稿したら、褒めてもらえるようにします。

### 修正内容
**GASのソースコードを下記のように修正します。**

```コード.js（修正前）
if(input.type == 'text') {
  messages = [{
    'type': 'text',
    'text': 'メッセージ送信テスト'
  }];
}
```
↓　↓　↓　↓　↓　↓

```コード.js（修正後）
if(input.type == 'text') {
  if(input.text.match('筋トレしたよ')){
    messages = [{
      'type': 'text',
      'text': 'えらい！'
    }];
  }
}
```
### 修正の反映
修正できたら[プログラムの公開](#プログラムの公開)と同様に、GASエディタ画面上部の「公開」-「ウェブアプリケーションとして導入」をクリックし、下記の画面でProject versionを「New」に設定し、「更新」をクリック。
（テキストボックス内にはそのversionの説明を記入します。（任意））
**※今後、修正した際は必ずProject versionを「New」に設定します。「New」に設定しないと修正が反映されませんので、ご注意ください。**
<img width="449" alt="スクリーンショット 2020-04-12 10.16.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/9841bdb6-86c2-640e-ede1-b71426fe8317.png">

### 筋トレ報告してみる
ほめるくんとのトークで「筋トレしたよ」とメッセージを送ると、褒めてくれます！！
「筋トレしたよ」を含まない場合は、褒めてくれません。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/a8584121-34d8-442d-3ffa-bb0c329a8ba9.gif" width=40%>

# グループLINEで使う（完成！）
筋トレ報告用のグループを作成し、ほめるくんをグループメンバーに設定します。
すると、1対1のトークと同様に筋トレ報告すると褒めてもらえます。
**※botを友だち追加したユーザーのみ、botとのやりとりが可能になります。**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579280/fe2cd856-91b1-410b-0771-8a0c941ff309.gif" width=40%>


**以上で完成です！！！**

# まとめ
今回はbotアカウントの作成、GASを使用したメッセージ応答処理、プログラム修正について備忘録としてまとめてみました。
メッセージにスタンプや絵文字を含める方法についても後日記事にしたいと思います。

### 参考文献
[LINE BOTの作り方 -アカウントの作成とQ&Aの登録方法-](https://first-contact.jp/linebot)