Vue+LIFF(LINE Front-end Framework)+GASでフォームを使ったBOTを作ってみた（その３：GAS編） #JavaScript

LIFFを使用したアプリケーションを何か作ってみたかったので、勤怠連絡のBOTを作ってみました。
ちょっと長くなりそうなので、全3回でまとめます。

githubはこちら

GASの設定

参考

GASの設定は以下の記事が参考になります。

設定手順

以下の手順でGASを設定します。

Googleアカウントにログイン
Googleドライブを開く
マイドライブをクリック
その他→アプリを追加→Google Apps Script
コードを記述→保存
公開→ウェブアプリケーションとして導入
アプリケーションにアクセスできるユーザーを全員（匿名ユーザーを含む）に変更
公開をクリックし、出てきた現在のウェブアプリケーションの URLをコピーする
LINE Developersの対象BOTのWebhook URLに先ほどコピーしたGASのURLを張り付ける

以上でGASを利用したWebhookの設定が完了です。

コード

スクリプトは、以下になります。

//LINE Developersで取得したアクセストークンを入れる
var CHANNEL_ACCESS_TOKEN = '<LINE BOT アクセストークン>';
// 送信先のグループID
var GROUP_ID = '<グループへ参加させて set を送ると送られる>';
// グループIDを取得するためのキーワード
var SETTING_MESSAGE = 'set';

var line_reply = 'https://api.line.me/v2/bot/message/reply';
var line_push = 'https://api.line.me/v2/bot/message/push';

//ポストで送られてくるので、送られてきたJSONをパース
function doPost(e) {
  var webhook = JSON.parse(e.postData.contents).events[0];

  //返信するためのトークン取得
  var reply_token = webhook.replyToken;
  if (typeof reply_token === 'undefined') {
    return;
  }

  //送られたメッセージ内容を取得
  var message = webhook.message.text;
  var gid = webhook.source.groupId;

  // ユーザーの会話（グループIDが存在しない）
  if (typeof gid === 'undefined') {
    // 確認用メッセージの返信
    UrlFetchApp.fetch(line_reply, {
      headers: {
        'Content-Type': 'application/json; charset=UTF-8',
        Authorization: 'Bearer ' + CHANNEL_ACCESS_TOKEN
      },
      method: 'post',
      payload: JSON.stringify({
        replyToken: reply_token,
        messages: [
          {
            type: 'text',
            text:
              'ご利用ありがとうございます。以下のメッセージをグループへ送信しました。'
          },
          {
            type: 'text',
            text: message
          }
        ]
      })
    });
    // グループへメッセージをpush
    UrlFetchApp.fetch(line_push, {
      headers: {
        'Content-Type': 'application/json; charset=UTF-8',
        Authorization: 'Bearer ' + CHANNEL_ACCESS_TOKEN
      },
      method: 'post',
      payload: JSON.stringify({
        to: GROUP_ID,
        messages: [
          {
            type: 'text',
            text: message
          }
        ]
      })
    });
  // グループIDを取得する
  } else if (message == SETTING_MESSAGE) {
    // キーワードが等しい場合にグループID返信する
    UrlFetchApp.fetch(line_reply, {
      headers: {
        'Content-Type': 'application/json; charset=UTF-8',
        Authorization: 'Bearer ' + CHANNEL_ACCESS_TOKEN
      },
      method: 'post',
      payload: JSON.stringify({
        replyToken: reply_token,
        messages: [
          {
            type: 'text',
            text: 'グループIDは以下の通りです。'
          },
          {
            type: 'text',
            text: gid
          }
        ]
      })
    });
  }

  return ContentService.createTextOutput(
    JSON.stringify({ content: 'post ok' })
  ).setMimeType(ContentService.MimeType.JSON);
}

解説

メッセージにgroupIdが含まれるかで条件を分岐させています。

対ユーザーには送信メッセージのリピート（確認メッセージ）
対グループにユーザーから送信されたメッセージを送信

また、groupIdを取得するためには、

BOTをグループに参加させる
setを発言する
BOTがgroupIdを発信します

以上で取得できます。

取得したgroupIdはGAS上のコードのGROUP_IDの箇所へ入れてください。
入れると、指定したグループへ発信できます。

まとめ

groupIdの取得やグループへの発信、対個人への発信などがやや面倒だと感じました。

また、グループに参加したときのイベントjoinを利用すればよかったのですが、うまくイベントを発生させることができず、setというキーワードを今回は利用しています。

そのほかにも、GASを利用すれば、

メールの送信
スプレッドシートへのログの記載

などなど、色々と派生させることができると思いますので、色々カスタマイズできると思います。