【GAS】相席ラウンジの混雑情報を、LINE Botに聞くと教えてくれる相席コンシェルジュを作ってみた

これまでの経緯

Google Apps Script上で、相席居酒屋の在席情報を一時間おきに取得し、そのデータをスプレッドシート上に保存していました。そしてそれらの値をリアルタイムでWebサイトに更新する方法を、いままで挑戦していました。

• 相席居酒屋の空席状況をリアルタイムでスプレッドシートに更新し、グラフ化することで男しかいない糞相席屋を撲滅する試み
• 【GAS】IMPORTXML関数で取得した値を、1時間おきに定期実行で行を追加する
• Google Apps ScriptでWebアプリを作る

これをLINE BOT化して、どんなユーザーでもつかいやすいようにしてみました。

創ったもの

相席コンシェルジュという、LINE Botを作成しました。

Oriental Lounge Eveという相席居酒屋の、混雑状況を分析できるLine Botを作りました。QRコードから登録できます。なう→現在の混雑状況、ぶんせき→時系列データの分析ページ、あくせす→公式ページのリンクを出します。渋谷、新宿、町田店に対応しています。 pic.twitter.com/oZjd9grO5U

— Dai Kawai@RubyPython (@never_be_a_pm) February 23, 2018

Oriental Lounge Eveという相席居酒屋の、混雑状況を分析できるLine Botを作りました。QRコードから登録できます。なう→現在の混雑状況、ぶんせき→時系列データの分析ページ、あくせす→公式ページのリンクを出します。渋谷、新宿、町田店に対応しています。

以下のQRコードから友達追加することができます。

やりたいこと

実装したい機能としてはLineから特定のメッセージを送信すると、その内容をGoogle Apps Scriptで受信、その値を読み込み特定のアクションをLine上で行うように指示。

• 「なう」　→　現在の空席状況と、住所データ、電話番号をLINE Botが教えてくれる
• 「ぶんせき」　→　現在・過去の空席状況と、お店の包括的な情報が載っているページのURLを出してくれる
• 「あくせす」　→　公式ホームページのURLを送信する

みたいな感じにしたいと思います。

アーキテクチャ

前回までの記事では、Google Apps Script上でここまでやりました。

• www.oriental-lounge.com に、各店舗の混雑状況データが存在
• それをGoogle SpreadsheetでIMPORTXML関数を実行し、データをスクレイピング
• Google Spreadsheet上で、それらのデータを1時間おきに取るように、Google Apps Scriptでプログラミング
• Google Spreadsheetで、現在の混雑データと、時系列データをグラフ化し、HTMLに変換
• 混雑データ・時系列データをWebアプリ上でディプロイ

今回はさらに

• LINEからのメッセージを、Google Apps Scriptで受信
• Google Apps Scriptで受信したメッセージを加工し、その内容を再度LINEに送信

という処理を行えるようにします。

このアプリケーションのソースコード

さきに全体像が見えたほうがよいと思うので、ソースコードを公開します。

// プロパティ取得
var PROPERTIES = PropertiesService.getScriptProperties();//ファイル > プロジェクトのプロパティから設定した環境変数的なもの

//スプレッドシート情報
var SP_ID = PROPERTIES.getProperty('SP_ID') //プロパティに設定した、スプレッドシートのID

// LINE情報
var LINE_ACCESS_TOKEN = PROPERTIES.getProperty('LINE_ACCESS_TOKEN');
var line_endpoint = 'https://api.line.me/v2/bot/message/reply'; 
var WEB_HOCK_URL = PROPERTIES.getProperty("WEB_HOCK_URL") //Google Apps Scriptで作成したアプリのURL

function doGet() {
  return HtmlService.createTemplateFromFile("相席アナライザー").evaluate();
}


//LINEからWebhock URLあてに、HTTP POSTリクエストが送られてきたときに実行される関数
function doPost(e) {
  var json = JSON.parse(e.postData.contents);

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

  //送られたLINEメッセージを取得
  var user_message = json.events[0].message.text;  

  //返信する内容を作成
  var reply_messages;
  if ('なう' == user_message) { //「なう」と送信されたら、現在の混雑状況の画像を返す
    reply_messages = ["https://docs.google.com/spreadsheets/d/e/2PACX-1vR5UzfrOLwJ5he4CA1r8VBaFWN2QWro01ok2GP3D2p24EsVtMj6Pm1lGQb9Yjv_BQNnzjpBiQcYXb59/pubchart?oid=442255862&format=image"];//グラフ画像を返信
  } else if ('ぶんせき' == user_message) {   //分析ページのURLを返します。
    reply_messages = ["https://script.google.com/macros/s/AKfycbx0bke55aKe1TD4UqAyR2FfdJWMJ4-R12fTYCwJiEpeChU2Kvfc/exec"];
  } else if ('あくせす' == user_message) {    //ホームページのURLを返します
    reply_messages = ["www.oriental-lounge.com"];
  }else {
    //説明を返す
    reply_messages = ['「なう」で現在の空席状況、「ぶんせき」で分析ページのURL、「あくせす」で詳細情報をお送りします。'];
  }

  // メッセージを返信
  var messages;
  if ('なう' == user_message) { //「なう」の時だけ画像を返す
    messages = reply_messages.map(function (v) {
      return {
        'type': 'image', 
        'originalContentUrl': v, 
        "previewImageUrl":v}; 
      } 
    );
  } else { 
    messages = reply_messages.map(function (v) {
    return {'type': 'text', 'text': v}; 
    });    
  }

  //HTTP POSTリクエストをLINE BOTに送信
  UrlFetchApp.fetch(line_endpoint, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + LINE_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': reply_token,
      'messages': messages,
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}

//スプレッドシートを取得
var File = SpreadsheetApp.openById(SP_ID);
var baseSheet = File.getSheets()[0]; 

function MainFrame() {

  //TODO: スプレッドシートの決まった箇所に決まった値を挿入
  setManFemaleNumList(1,getMenFemaleArray(17,4,1,2)); //D17 2行分取得
  setManFemaleNumList(2,getMenFemaleArray(18,4,1,2));  
  setManFemaleNumList(3,getMenFemaleArray(19,4,1,2));  
}

//TODO:スプレッドシートに、相席ラウンジ　銀座店の現在の男女の数をリスト形式で返す
function setManFemaleNumList(sheetNum, manFemaleArray){
  var Sheet = File.getSheets()[sheetNum];
  Sheet.appendRow(manFemaleArray);
}


//TODO:指定範囲のセルから、男女の数をリスト形式に取得する

function getMenFemaleArray(row,col,rowNum,colNum){
  var array = baseSheet.getRange(row,col,rowNum,colNum).getValues()[0];
  var date = new Date();
  array.unshift(date)
  return array;
}

LINE BOTのアカウントの開設

まず、BOTを作る前に、アカウント等を作成する必要があります。ほかにアカウントの作成方法について述べている記事はたくさんあるので、あえてこの記事では解説しません。
こちらに詳しいセットアップマニュアルがあるので、これを参考にアカウントを開設してください。

LINE BOTの作り方を世界一わかりやすく解説（１）【アカウント準備編】 - Qiita

はじめに Messaging API (通称 LINE BOT) は Line が提供するサービスです。 こちらの Messaging API を使用して、ユーザーと自動的にやりとりができるLINE BOTを作成することがゴールです。 PushとReplyのAPIによる連携機能が提供されており、Pushの方は有料で使用できるようになっています。 料金体系は色々あるのですが、まず Developer Trial を使用されることをお勧めします。 De...

LINE Messaging APIとGoogle Apps Scriptで何ができるの？

さて、LINEからGoogle Apps Scirptを連携させてみようと思います。

これらの仕組みを実現するためには、Line Messaging APIと、Google Apps Scriptを利用してみたいと思います。

Line Messaging APIと、Google Apps Scriptを連携させることで、以下のようなことができるようになります。

1. LINE上でユーザーがメッセージをBotに返信
2. それがトリガーに(Webhock)、指定されたGoogle Apps ScriptのWebアプリにPOSTリクエストを送信
3. Google Apps ScriptでそのPOSTリクエストからメッセージを受信し、データをもとに返すメッセージ・画像などを決定
4. LINE Botにメッセージを返す

LINE公式のAPIドキュメントでは、以下の図のように解説しております。

LINE上でBOT作成に必要な設定を行う

LineでBotを作成し、そのBotにメッセージを送ります。
まず、Botを作るためには、アカウントの登録が必要です。


アカウントの取得はLINEのビジネス向けポータルサイト「LINE BUSINESS CENTER」 から、利用登録を行います。


ビジネスアカウントの登録とMessaging APIの利用登録が終わったら「LINE BUSINESS CENTER」アカウントリストから「LINE@MANAGER」を選び、Messaging APIの設定を行います。

アカウント設定 > bot設定 でまずは「APIを利用する」を選択します。

Google Apps Scriptで作成したWebアプリのURLを、Webhook URLに登録します。
そのWebhook URLと、Channel Access Tokenをメモしておきます。


注意点としては、Webhook URLはSSLで通信できないとダメなようです。

LINEからのメッセージ送信がトリガーに(Webhock)、指定されたGoogle Apps ScriptのWebアプリにPOSTリクエストを送信

LINEからメッセージの送信が送られると、指定したWebhock URLあてにPOSTリクエストが送られます。POSTリクエストの中身は、messageオブジェクトが入っています。
LINE API公式ドキュメントによると以下のようになっています。

プロパティ	タイプ	説明
type	String	message
replyToken	String	イベントへの応答に使用するトークン
message	Object	メッセージの内容を含むオブジェクト。メッセージには以下のタイプがあります。 テキスト 画像 動画 音声 ファイル 位置情報 スタンプ

今回作成したアプリで使うのは、テキストメッセージ・画像データのみなので、テキストメッセージの中身だけ見てみましょう。送信元から送られたテキストを含むmessageオブジェクトの中身は、以下のようになっています。

プロパティ	タイプ	説明
id	String	メッセージID
type	String	text
text	String	メッセージのテキスト

Google Apps ScriptでそのPOSTリクエストからメッセージを受信し、データをもとに返すメッセージ・画像などを決定

LINEからWebhock URLをGoogle Apps Scriptに設定し、メッセージを送信すると、Google Apps ScriptにPOSTリクエストで通信が行われます。Google Apps Script上では、そのPOSTリクエストの中から、メッセージを取り出し、処理を行います。


今回の場合だと、「なう」で画像データ、「ぶんせき」、「あくせす」でURLを返します。POSTリクエストが送られると起動する関数doPost関数以下の内容が処理されます。

function doPost(e) {
  var json = JSON.parse(e.postData.contents);

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

  //送られたLINEメッセージを取得
  var user_message = json.events[0].message.text;  

  //返信する内容を作成
  var reply_messages;
  if ('なう' == user_message) { //「なう」と送信されたら、現在の混雑状況の画像を返す
    reply_messages = ["https://docs.google.com/spreadsheets/d/e/2PACX-1vR5UzfrOLwJ5he4CA1r8VBaFWN2QWro01ok2GP3D2p24EsVtMj6Pm1lGQb9Yjv_BQNnzjpBiQcYXb59/pubchart?oid=442255862&format=image"];//グラフ画像を返信
  } else if ('ぶんせき' == user_message) {   //分析ページのURLを返します。
    reply_messages = ["https://script.google.com/macros/s/AKfycbx0bke55aKe1TD4UqAyR2FfdJWMJ4-R12fTYCwJiEpeChU2Kvfc/exec"];
  } else if ('あくせす' == user_message) {    //ホームページのURLを返します
    reply_messages = ["www.oriental-lounge.com"];
  }else {
    //説明を返す
    reply_messages = ['「なう」で現在の空席状況、「ぶんせき」で分析ページのURL、「あくせす」で詳細情報をお送りします。'];
  }

Google Apps Scriptから、LINE Messaging APIのエンドポイントにデータを送信

さて、POSTリクエストで取得した値から、返すメッセージや画像のURLを設定しました。今度は、これをBOTに返してあげる必要があります。

LINEの返信のAPIエンドポイントは

var line_endpoint = 'https://api.line.me/v2/bot/message/reply'; 

にあります。このエンドポイント向けに、POSTリクエストを送信します。
HTTPの通信のヘッダーには、Content-TypeとAuthorizationの値を、以下のように指定してあげます。channel access tokenは、さきほどメモしておいたあれです。

リクエストヘッダー	説明
Content-Type	application/json
Authorization	Bearer {channel access token}

リクエストボディには、

function doPost(e) {
  var json = JSON.parse(e.postData.contents);

  //返信するためのトークン取得
  var reply_token= json.events[0].replyToken;

で取得したreplyTokenと、メッセージオブジェクトを返してあげます。

プロパティ	タイプ	必須	説明
replyToken	String	必須	Webhookで受信する応答トークン
messages	メッセージオブジェクトの配列	必須	送信するメッセージ 最大件数：5

messsageオブジェクトの詳細についてみていきます。
現在の空席情報が分かる画像と、過去の在席情報が分かる分析ページを返すので、textオブジェクトとimageオブジェクトを返します。

textオブジェクト

プロパティ	タイプ	必須	説明
type	String	必須	text
text	String	必須	メッセージのテキスト。以下の絵文字を含めることができます。 Unicodeで定義された絵文字 LINEが独自に定義した絵文字。LINE独自の絵文字のUnicodeコードポイント表を参照してください。 最大文字数：2000

imageオブジェクト

プロパティ	タイプ	必須	説明
type	String	必須	image
originalContentUrl	String	必須	画像のURL（最大文字数：1000） HTTPS JPEG 最大画像サイズ：1024×1024 最大ファイルサイズ：1MB
previewImageUrl	String	必須	プレビュー画像のURL（最大文字数：1000） HTTPS JPEG 最大画像サイズ：240×240 最大ファイルサイズ：1MB

これらの処理を行っているのが、下記のコードです。

//HTTP POSTリクエストをLINE BOTに送信
  UrlFetchApp.fetch(line_endpoint, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + LINE_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': reply_token,
      'messages': messages,
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);

その他参考

他人からなるべく見えないようにしたい値(Access Token)は、ファイル > プロジェクトのプロパティに設定しています。（Herokuの環境変数的なあれ）

var PROPERTIES = PropertiesService.getScriptProperties();//ファイル > プロジェクトのプロパティから設定した環境変数的なもの

 PropertiesService.getScriptProperties() でプロパティオブジェクトを呼び出し

//スプレッドシート情報
var SP_ID = PROPERTIES.getProperty('SP_ID') //プロパティに設定した、スプレッドシートのID

// LINE情報
var LINE_ACCESS_TOKEN = PROPERTIES.getProperty('LINE_ACCESS_TOKEN');

getProperty('SP_ID')　のようにすることで、指定した値を呼び出すことができるようになっています。


取得しているスプレッドシートのURL
https://docs.google.com/spreadsheets/d/1zfy9Np2E7sB4tj570YaTap5o8VM_wC7IoCaRCU19CLw/edit#gid=738727068