LINEのチャットbotをグループに参加させて特定キーワードのみ反応させる

# 初めに
弊社では朝会でGood&Newsという取り組みを実施しています。
発表者は参加者候補の名前を箸に書いて、王様ゲーム風に抽選して決めていました。
アナログですので、少し確率にも隔たりが出てきますし、毎朝担当者も抽選するのが面倒です。
業務改善の一環で暇なときに自動化してくれないかと話が来たのでこの度着手し始めました。

まだ完成していないので、区切りの良いところで記事にしていきたいと思います。

20分ほどでbotが作れてしまうので、是非とも皆様もやってみてください！

この記事では、
・LINE botのアカウントの作成～グループ参加
・GASとLINE botを紐づけ投稿させる
内容が含まれます。

## 参考
https://developers.line.biz/ja/docs/messaging-api/overview/
https://www.ultra-noob.com/blog/2020-06-03-%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%81%A7%E3%82%82%E5%8B%95%E4%BD%9C%E3%81%99%E3%82%8BLINE%20BOT%E3%82%92%E4%BD%9C%E3%82%8B%EF%BC%81/

## アーキテクチャ
・LINE MessageAPI
・Google SpreadSheet(次回から使用します)
社員の名簿管理に使用します
・Google Apps Script
LINEのbotを作成するにはサーバが必要で、自前サーバだと独自ドメインをSSL証明書付きで発行する必要があり、面倒なので最初から全て揃っているGASを採用します。

## 手順
LINE Developers と LINE Official Account Managerを行き来することになるので、どこのサイトを弄るか明記しておきます。

### LINE botアカウント作成
1.[LINE Developers](https://developers.line.biz/ja/)にログインします。
■LINE Developers
私は自分の個人LINEアカウントで入りました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/e510a560-0fff-e3be-33e6-6f70a99c1cbe.png)

2.Providerを作成します。
■LINE Developers
私はテストで作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/8fa89fb4-e61a-a308-6ec6-10f88caf4434.png)

3.Create a Messaging API channelを押します。
■LINE Developers
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/26ab93b9-b781-4592-379c-ec26229e7767.png)

4.必要な項目を入力してchannelを作成します。
■LINE Developers
Channel iconは適当な画像をアップしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/d5dc0106-8b18-868c-d7d7-5e545c5d367b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/713239a2-4011-8d40-6659-df46b4e83803.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/1f7cbcba-9af6-a1ac-3f3c-db8292c77d0a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/70a2cdda-2d3d-5fdb-0265-faa8f59df68f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/a360f8a4-ad0d-8ee3-f13f-cd0ca2b42f7a.png)

作成に成功すると、botのhome画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/a227f715-c23e-3ca7-bf3c-973e07c90cdb.png)

5.Message APIのChannel access tokenを生成します。
■LINE Developers
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/fd3843a1-6932-4179-cc00-eab78c367a2a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/d978a15a-80df-b10f-2890-ada9e522f8b5.png)

6.botがグループに参加できるように設定を行います。
■LINE Official Account Manager
Allow bot to join group chatsのedit のリンクを押すと、[LINE Official Account Manager](https://manager.line.biz/)が別タブで開くので設定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/c46ea43e-16d9-d00d-f16f-e7235051647b.png)

このようにLINE Official Account ManagerのHome画面が開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/bff65c37-76a8-c23a-b4e9-f19ea3e3e0b6.png)
少し下にスクロールするとチャットへの参加のラジオボタンがあるので、
グループ・複数人チャットへの参加を許可するを選択して、変更してください。
この設定をしないとグループにbotを招待しても参加してくれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/594f4109-3cb3-d2f4-0fdb-e5de45740e8d.png)

7.応答設定を変更をします。
■LINE Official Account Manager
特定のキーワードを送信した際にのみ反応し、全てGASでハンドリングを行うために、設定を変更します。
・あいさつメッセージ→オフ
・応答メッセージ→オフ
・Webhook→オン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/568bc859-4865-0dc7-76dd-2b0c46a1b014.png)

8.GoogleDriveにGASを作成します。
[GoogleDrive](https://drive.google.com/)を開き、
新規 > その他 > Google Apps Scriptを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/159cf9cc-3a01-8651-ffcc-3f96bd47c4b5.png)

好きなプロジェクト名を付けて、以下のサンプルコードを貼り付けます。

```
const TOKEN = 'LINE Developersで発行したアクセストークンを入れる';

const doPost = (e) => {
  const replyToken = JSON.parse(e.postData.contents).events[0].replyToken;
  // 投稿したメッセージが入ってくる
  const userMessage = JSON.parse(e.postData.contents).events[0].message.text;
  const url = 'https://api.line.me/v2/bot/message/reply';

  if (userMessage == '朝会抽選') {
    const response =
      UrlFetchApp.fetch(url, {
        'headers': {
          'Content-Type': 'application/json; charset=UTF-8',
          'Authorization': 'Bearer ' + TOKEN,
        },
        'method': 'post',
        'payload': JSON.stringify({
          'replyToken': replyToken,
          'messages': [{
            'type': 'text',
            'text': 'hoge',
          }],
        }),
      });
    return response.getResponseCode();
  }
};
```

```
const TOKEN = 'LINE Developersで発行したアクセストークンを入れる';
```
には、LINE Developers側で発行したChannel access tokenが入ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/d978a15a-80df-b10f-2890-ada9e522f8b5.png)

9.作成したGASを公開します。
GASのスクリプトエディタの公開 > ウェブアプリケーションとして導入を押すと、以下のモーダルが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/d398cdca-b4ec-47ff-d3b0-060a419712e4.png)
デフォルトでは、Who has access to the app:が「Only myself」になっているので、「Anyone, even anonymous」に変更し、「Deploy」をを押します。
「Anyone, even anonymous」に変更することで、LINE botがGASにアクセスできるようになります。
ちなみにコードを修正した際は、毎回Project versionを「NEW」にしてください。反映されません。

恐らく以下のように認証を求められるので許可しておきます。
自作のアプリなので大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/0eb691cf-f15b-136a-d41f-11382bafcba6.png)

認証し、デプロイが完了すると、以下のモーダルが表示されます。
Current web app URLの内容をコピーしておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/5dc8b89d-b110-7ec3-1ffd-b0e157e094f6.png)

10.コピーしたURLを設定します。
■LINE Official Account Manager
LINE Official Account Managerを開き、
Messaging APIの「Webhook URL」にコピーしたURLを貼り付け保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/e79cc3b8-6e0d-5872-9148-97dfac673870.png)

11.Webhook URLをVerifyします。
■LINE Developers

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/bf5745d7-c7ad-b75d-251b-6a041f2018c9.png)

成功すれば以下のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/9dde6d1e-eb29-5e15-732d-b86497ed3200.png)

ここまでで「朝会抽選」と入力すれば「hoge」と自動投稿するbotが出来上がります！

## 友達追加～グループ参加まで
■LINE Developers
Messaging APIのQRコードを読み取るか、IDを入力すると公式アカウントとして友達に追加できます。
※遊び用で作ったbotなので、サンプルとして友達に追加頂いても大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/a700b385-a591-80be-5d4d-88a0cb790dd6.png)

こんな具合に「こんにちは」には反応しませんが、「朝会抽選」には「hoge」と返してくるようになりました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/48084677-7901-3ab5-863e-28db1428ae2e.png)

グループでも同じ挙動をします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/25594967-b6e4-4e63-f6b4-81e0e7439c85.png)

## 最後に
LINE DevelopersとLINE Official Account Managerを行き来しなくてはならないのが非常に面倒ですが、覚えてしまえば簡単ですね！
APIサーバを無料で簡単に作成できてしまうGASも非常に優秀です・・・

次回からGoogle Spreadsheetから名簿のリストを取得していい感じに抽選するようにパワーアップさせていきたいと思います！