GASでLINE BOT作る

GASでLINE BOT作る

LINE BOTを作る機会があったのでまとめようと思います

Photo by Shirota Yuri / Unsplash

作るもの

LINE BOTチャンネル内のメニューボタンをタップしたら返事返ってくるやつ

LINE developersに登録する

まずはLINE developersに登録します。登録するアカウントは「LINEアカウント」か「ビジネスアカウント」のどちらかを選択できます
[LINEアカウントでログイン]と[ビジネスアカウントでログイン]の違い

2つは簡単に言うと、
・LINEアカウント → いつも使ってるやつ
・ビジネスアカウント → メールアドレスで新しくアカウント発行できる
という違いがあります

プロバイダーを作成する

ログインをしたらプロバイダー一覧ページが表示されるので、好きな名前で作成します

作成するとコンソールが開きます。

プロバイダーを作成すると、その中に複数のLINE BOTチャネルを作成することができます
GitHubのOrganizationとリポジトリみたいなイメージです
プロバイダーを作成したら「Messaging API」を選択

その後チャンネルの情報を入力していきます。
チャンネル名/チャンネル説明/大業種/小業種/メールアドレス
が必須入力項目のようですので、入力・作成します。

チャネルアクセストークンを取得する

チャンネルを作成後、Messaging API設定ページへ行き、チャンネルアクセストークンを発行します

GASを用意する

// LINE developersのメッセージ送受信設定に記載のアクセストークン
const ACCESS_TOKEN = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

function doPost(e) {
  // WebHookで受信した応答用Token
  const replyToken = JSON.parse(e.postData.contents).events[0].replyToken;
  // ユーザーのメッセージを取得
  const userMessage = JSON.parse(e.postData.contents).events[0].message.text;  
  
  const ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('sheet');
  const wait_count = ss.getRange('A2').getValue();
  
  if (userMessage === '待ち台数を教えて') {
    PostMessage('現在の待ち台数は'+wait_count+'台です', replyToken);
  }
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}

function PostMessage(message, replyToken) {
  // 応答メッセージ用のAPI URL
  const url = 'https://api.line.me/v2/bot/message/reply';

    UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': replyToken,
      'messages': [{
        'type': 'text',
        'text': message,
      }],
    }),
    });
}

※今回は問いかけると今何台待ってるかを返してくれるニッチなbotを作成しています
このようなスプレッドシートとGASを用意し、GASのコードを「ウェブアプリケーションとして導入」し公開します。
GASエディタ>公開>ウェブアプリケーションとして導入
「Who has access to the app:」の項目は「Anyone,even anonymous」を選択します。
URLが取得できるので、こちらをLINE developersのコンソールに登録します

LINE BOTのWebhookURLを登録する

コンソールに戻り、再びMessaging API設定の画面を開きます。

Webhook URLという項目があるので、先程のGASで取得したURLを入力して保存します。

同じ画面に友だち追加できるQRコードがあるので、友だち追加し、「待ち台数を教えて」と送ってみます

無事に動くことが確認できました!
ですがいちいち同じ文字をbotに送るのは大変なので、メニューを作成します

ボタンを作成する

次に、LINE official account ManagerにLINE developersとおなじアカウントでログインします。
作成したチャンネルが一覧に表示されますので、選択します。

ホーム>リッチメニュー のページへ行き、「作成」をクリックします。

タイトル、表示期間を入力します
そして、メニューの見た目となる「コンテンツを設定」を行います
「テンプレートを選択」をクリックすると、メニューを何個に分割するかを選択できます。今回は小の分割されていないやつを選択しようと思います。

次に「画像を作成」をクリックし、メニューの見た目を作っていきます

北海道出身なので、北海道らしい画像にしました。お好みで文字なども入れられます。

アクションのタイプを「テキスト」テキストの内容を「待ち台数を教えて」と設定します
設定後、「保存」をクリックします

そうすると、LINE BOTに先程作成したメニューが表示されるようになり、いつでもかんたんに待ち台数を聞けるようになりました!

まとめ

やっぱりGASは無料だし最高だな、と思いました
今回はテキストを受けてテキストを返すbotですが、スタンプ、音声、位置情報など多様な返事をすることもできるようです
LINE BOT メッセージタイプ
みなさんも待ち台数を返すbotはもちろん、いろんなbotを考えて作ってみてくださいね!