【LINE BOT】Messaging APIとGASでLINE BOTを作ってみた

LINE BOTがどんな感じで作るものなのか、調べて動かしてみました。

以下の公式ページを見ると、様々な言語に対応しているみたいなのですが、
WEBサーバが必要らしく、わざわざWEBサーバを立てる必要のないGASでやってみました。
[公式](https://developers.line.biz/ja/docs/messaging-api/)
[公式のチュートリアル](https://developers.line.biz/ja/docs/messaging-api/building-sample-bot-with-heroku/#echo%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%9C%E3%83%83%E3%83%88%E3%82%92%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B)

#参考
[LINE BOTの作り方](https://first-contact.jp/blog/article/linebot/)

#完成イメージ
ぶっきらぼうに挨拶を返すBOT
<img width="375" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/d3b691e8-d8a7-c21a-0fbc-ef916292b365.png">

#事前準備
[LINE for Business](https://www.linebiz.com/)にアカウント登録してください。
※登録してから以下の手順を実施してたので、、もしかしたら不要かもしれない？

#１．LINE Developersにアカウント登録
[LINE Developers](https://developers.line.biz/ja/)にアクセスしてアカウントを登録
LINE個人アカウントが必要のようです。自分は、個人携帯のLINEアカウントで登録しました。

#２．プロバイダーの登録
アカウントを作ったら、トップページから(Messaging API)を選択
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/982fe77d-def1-994d-0dc7-b0a3fa3fd9c9.png)

---
「今すぐはじめよう」を選択
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/b38e72cb-05f3-dbb2-f62c-de9ffa11009e.png)
---
#####英語から日本語表記にしたい場合は、画面右下の言語を「日本語」にする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/7e150140-af67-bc06-28e9-7bbd1aeed545.png)
---
#####画面が切り替わったら、それぞれ入力していく。
#####「チャネルの種類」=「Message API」を選ぶのと、「新規プロバイダー作成」を選択すれば、後はてきとうに必須項目を入力していく。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/80d38fd9-b8a6-8a20-3696-f70e63fea4ad.png)

#####「チャネル名」がBOTの名前になると思ってもらえればよい。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/e58b6011-7b66-3da7-787b-c988c9258771.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/b50779d4-a029-5dc3-61b7-3e68e4fca8d5.png)
#####最後に「作成」押下。

#３．チャネルの設定
以下のように作成したプロバイダが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/229abfeb-6f48-fcd2-6ed9-ddc841ff99e6.png)

作成したプロバイダを選択すると、以下のチャネルを選択する画面が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/455c970c-7238-756b-733b-17ed0e0a591e.png)

作成した「チャネル」を選択して「Messaging API設定」タブを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/3e2bfe12-0f0e-204f-5b58-016b1cd92a77.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/5c0deda6-8549-db6d-67d7-46ed9c3b437d.png)

#####「チャネルアクセストークン（長期）」を発行して、キーをメモっておく。（赤枠の所）

#４．GAS
「Googleドライブ」→「Google Apps Script」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/10502ab6-99d9-23c9-01ce-d07621f8e7c6.png)

#####「channelToken」の変数には、先ほどメモった「チャネルアクセストークン（長期）」を設定する。

```gs:コード.gs
function doPost(e) {
  //トークンがきたか判定
  var replyToken= JSON.parse(e.postData.contents).events[0].replyToken;
  if (typeof replyToken === 'undefined') {
    return;
  }
  
  //お約束のURL
  var url = 'https://api.line.me/v2/bot/message/reply';
  
  //Messaging APIのチャネルアクセストークン（長期）
  var channelToken = 'T8GIL/pUZbVN4jZkzfvRl8A1qVdx0pVXZekJy2EKaAUwuqQaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa5FoE1musPhTcayWCCBvrp4QJ2TnjvYwVSNB4wiNB3KX7yRw/09c572mbZEnNIg9TLjXPuc8jZeBMP20XkX/YqAdB04t89/1O/w1cDnyilFU=';


  //受信オブジェクトを取得
  var input = JSON.parse(e.postData.contents).events[0].message;

  var receive = '';
  var hensin = '何言ってるかわらかない。'; //挨拶じゃない場合
  //メッセージ取得
  if(input.type == 'text') {
      receive = input.text;
  }
  
  if(input.text.match('おはよう')) {
    hensin = "おは";
  } else if(input.text.match('こんにちわ')) {
    hensin = "ちわ";
  } else if(input.text.match('こんばんわ')) {
    hensin = "ばんわ";
  }



  var messages = [{
    'type': 'text',
    'text': hensin,
  }];
  
  
  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);
}
```
---
#####「公開」→「WEBアプリケーションとして導入」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/426e8162-430d-010f-4657-220113bf026f.png)
#####「Who has access to the app」を「Anyone, exen anonymous（全員（匿名ユーザーを含む））」にすることを忘れずに。
※更新時の画面のなので、「Project version」表示されてますが、新規の時は、ありません。
　更新の時は、「Project version」を「New」にすることを忘れずに。

---
#####ここで、生成されたURL(Current web app URL)をメモります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/2a7f1ace-0721-b68f-ea69-0826b0929075.png)

#５．チャネルの設定
#####再度、「Messaging API設定」の画面を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572933/358f8612-43fb-cd64-3aaa-5730824b065c.png)
---
##### 変更箇所は以下の通り。
#####　「Webhook URL」に先ほど、メモったGASのURLを設定。
#####　「Webhookの利用」をONに設定。
#####　「応答メッセージ」をOFFに設定。
---

####あとは、作ったチャネル名のユーザに挨拶を送ると、上記の「完成イメージ」の通り動くはず。

##補足
GAS内の「e.postData.contents」の構造は、以下を参照。
[Webhookイベントオブジェクト](https://developers.line.biz/ja/reference/messaging-api/#webhook-event-objects)

メッセージのやり取りは、メモリやDBを使って「ユーザID」単位に管理する感じが一般的・・？