LINE Botを作った話【GAS×LINEMessagingAPI】

今回、LINE Botを開発したので報告します！経緯としましては、大学のバスがあと何分で来るのか知りたかったため、開発しました！！！

開発環境
開発手順・開発
最後に

開発環境

GAS(Google Apps Script)
LINE Messaging API

開発手順・開発

開発手順

1.そもそもGASとは？
2.背景
3.基本機能
4.製作工程
5.実際に作ってみる
6.最後に

そもそもGASとは？

まず、この記事を読んでいる人の中にはGASとはなんのことなのか。まだわからない人がいるのではないかなと思います。そのような人にこそ、この記事を読んでいただき実際に作品を作ることの楽しさを経験して欲しいと思っています！

GASとは、Google Apps Scriptの頭文字を取ったもので、Googleが提供しているプログラミング言語です。少し難しく感じるかもしれませんが触れてみるとすごく簡単なのでぜひ触ってみることをお勧めします。

簡単に説明をしますと、GmailやGoogleドライブ、GoogleマップなどのGoogleが提供しているさまざまなサービスを連携して活用することができるものです。

詳しくは、私がこの開発をするにあたって大変お世話になったこちらの記事を参考にすることをお勧めします！
GASでできることや、GASとはなにかというのが詳しく書いていますのでとても参考になります。

背景

大学で毎日のように使っている通学バス。大学に行くとき、電車を降りるときにバスの時刻をチェック！大学から帰るとき、あと何分でバスが来るのか時刻表をチェック！
もーーーーうめんどくさいーーーーーーーーーーー！！！！！
超絶めんどくさがり屋な私だからこそ開発しようと思ったのかもしれません笑
ということで作ってこー！！！

基本機能

1.LINEBotを開くとリッチメニューが起動し、6パターンの行先を選択することができる。
2.選択すると、その行先を示した文字がワンタップで送信される。
3.送信された行先に対して、残り何分でバスが来るのかをBot側が返信してくれる。

製作工程

1.GoogleSpreadSheetに使うバス時刻を記入する
2.LINE Developersの登録
3.ひとまず、LINEBotを作成してみる。なにに対しても反応するBotを作ってみる！
4.バスが来る時刻と現在の時刻との差を返す関数を作る！
5.LINEで返信できるようにする
6.最後にリッチーメニューの導入！

実際に作ってみる

5-1.GoogleSpreadSheetに使うバス時刻を記入する

一番左のA列が時間を示している。時刻に対して行ごとに時刻が早い順番に時刻表を作成していく。

5-2.LINE Developersの登録

こちらからLINE Developersを開いてください。
開きましたら、自身のLINEアカウントでログインを行います。
ログインできたら次のステップです！
※次のステップでかなり使うことになります。

5-3.ひとまず、LINEBotを作成してみる。なにに対しても反応するBotを作ってみる！

こちらは私が参考にさせて頂いた記事がすごくわかりやすいのでそちらを参考に製作してみてください！記事はこちら
記事内ではスプレッドシートを新たに作成していますが、先ほど作った時刻表のスプレッドシートを使います。注意としてはアクセストークンを間違えないことと、コードを書いたらWebアプリとして導入して、表示されたURLをLINE DevelopersのWebhookにしっかりと結びつけることです。

んごBotは作れたでしょうか？笑　んごBotで遊びすぎないように！笑
完成したら次のステップです！
なんとなくわかったと思いますが、このBotの返信を残り時刻にすればOKなんです！
よし！関数を作るぞ！

5-4.バスが来る時刻と現在の時刻との差を返す関数を作る！

まず最初にやることは、時刻表と時刻の取得です！
んごBotの関数とは別に関数を作っていきます。
以下がコードです。(『//』はコメントアウトすることのできるコード。)

function myFunction1() {
  var today = new Date(); //Dateのデータを取得
  var hour = today.getHours(); //今の時刻を取得
  var minutes = today.getMinutes(); //今何分かを取得
  var dayofweek = today.getDay(); //曜日を取得(平日と休日でダイヤルが違うため。)

  const ss = SpreadsheetApp.getActiveSpreadsheet(); //シートの情報を取得
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('高坂から大学'); //使用するシートのデータを取得
　
　if(dayofweek != 6){　//土曜日かどうかの条件分岐
    var hour_data = sheet.getRange('A8:A19').getValues(); //バスデータ取得(時間)
    var minutes_data = sheet.getRange('B8:N19').getValues(); //バスデータ取得(分)

  }else{
    var hour_data = sheet.getRange('A22:A32').getValues(); //バスデータ取得(時間)
    var minutes_data = sheet.getRange('B22:F32').getValues(); //バスデータ取得(分)  
  }
}

function myFunction1() {

var today = new Date(); //Dateのデータを取得

var hour = today.getHours(); //今の時刻を取得

var minutes = today.getMinutes(); //今何分かを取得

var dayofweek = today.getDay(); //曜日を取得(平日と休日でダイヤルが違うため。)

const ss = SpreadsheetApp.getActiveSpreadsheet(); //シートの情報を取得

const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('高坂から大学'); //使用するシートのデータを取得

　if(dayofweek != 6){　//土曜日かどうかの条件分岐

var hour_data = sheet.getRange('A8:A19').getValues(); //バスデータ取得(時間)

var minutes_data = sheet.getRange('B8:N19').getValues(); //バスデータ取得(分)

}else{

var hour_data = sheet.getRange('A22:A32').getValues(); //バスデータ取得(時間)

var minutes_data = sheet.getRange('B22:F32').getValues(); //バスデータ取得(分)

}

※dayofweekが土曜日である6の時は休日ダイヤルを、それ以外の時は平日ダイヤルの範囲を選択しています。

これで情報が読み込めたので、ここから関数を作っていきます！(myFunction1()の中に追加していきます。)

let time_table = {}; //配列の変数を定義
  var i = 0;

  for(key of hour_data){ //[時間][分]となる、dataの2次元配列を作る。
    time_table[key] = minutes_data[i].filter(v =&gt; !!v); //すべての時刻と分を配列に変換する(filterでデータがあるところまでを変換している。)
    i++;
  }

  var length = time_table[hour].length; //時間ごとに何個データがあるかを計算

//以下は場合分けして、残り何分で来るのかを計算する関数。
  for(let j = 0; j &lt; length; j++){
    if(minutes &lt;= time_table[hour][j]){
      var time = time_table[hour][j] - minutes;
      var time ="あと" + time + "分です！";
      break;
    }
    else if(minutes &gt; time_table[hour][j] &amp;&amp; minutes &lt; time_table[hour][j+1]){
      var time = time_table[hour][j+1] - minutes;
      var time ="あと" + time + "分です！";
      break;
    }
    else if(minutes === time_table[hour][0]){
      var time = "今到着しています。次の到着は" + (time_table[hour][j+2] - minutes) + "分です！";
      console.log(time);
      break;
    }
    else if(minutes &gt; time_table[hour][j] &amp;&amp; minutes === time_table[hour][j+1] &amp;&amp; minutes &lt; time_table[hour][length-1]){
      var time = "今到着しています。次の到着は" + (time_table[hour][j+2] - minutes) + "分です！";
      console.log(time);
      break;
    }
    else if(minutes === time_table[hour][length-1]){
      var time = "今到着しています。次の到着は" + (60 - minutes + time_table[hour+1][0]) + "分です！";
      console.log(time);
      break;
    }
    else if(minutes &gt; time_table[hour][length-1] &amp;&amp; time_table[hour][j] === time_table[hour][length-1]){
      var time = 60 - minutes + time_table[hour+1][0];
      var time ="あと" + time + "分です！";
    }
      }
    return time;

let time_table = {}; //配列の変数を定義

var i = 0;

for(key of hour_data){ //[時間][分]となる、dataの2次元配列を作る。

time_table[key] = minutes_data[i].filter(v => !!v); //すべての時刻と分を配列に変換する(filterでデータがあるところまでを変換している。)

i++;

}

var length = time_table[hour].length; //時間ごとに何個データがあるかを計算

//以下は場合分けして、残り何分で来るのかを計算する関数。

for(let j = 0; j < length; j++){

if(minutes <= time_table[hour][j]){

var time = time_table[hour][j] - minutes;

var time ="あと" + time + "分です！";

break;

}

else if(minutes > time_table[hour][j] && minutes < time_table[hour][j+1]){

var time = time_table[hour][j+1] - minutes;

var time ="あと" + time + "分です！";

break;

}

else if(minutes === time_table[hour][0]){

var time = "今到着しています。次の到着は" + (time_table[hour][j+2] - minutes) + "分です！";

console.log(time);

break;

}

else if(minutes > time_table[hour][j] && minutes === time_table[hour][j+1] && minutes < time_table[hour][length-1]){

var time = "今到着しています。次の到着は" + (time_table[hour][j+2] - minutes) + "分です！";

console.log(time);

break;

}

else if(minutes === time_table[hour][length-1]){

var time = "今到着しています。次の到着は" + (60 - minutes + time_table[hour+1][0]) + "分です！";

console.log(time);

break;

}

else if(minutes > time_table[hour][length-1] && time_table[hour][j] === time_table[hour][length-1]){

var time = 60 - minutes + time_table[hour+1][0];

var time ="あと" + time + "分です！";

}

return time;

これで残り何分なのかを出す関数が完成しました！！！
時刻がない時は反応しないなど、まだところどころうまくいっていないので修正していこうと思っています！
あとは、この関数と時刻表のスプレッドシートを複数パターン分用意してあげて、メインのLINE返信用の関数で条件分岐して適切な結果を返すようにすればOKです。

5-5.LINEで返信できるようにする

具体的には、以下の手順です。
送られてきたものを認識→条件に沿って関数を選択→返信が実行される
コードは以下の通りです！

//CHANNEL_ACCESS_TOKENを設定
//LINE developerで登録をした、自分のCHANNEL_ACCESS_TOKENを入れて下さい
var CHANNEL_ACCESS_TOKEN = '自分のCHANNEL_ACCESS_TOKEN'; 
var line_endpoint = 'https://api.line.me/v2/bot/message/reply';

//ポストで送られてくるので、ポストデータ取得
//JSONをパースする
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 = [myFunction1()];

  } else if ('大学→高坂' == user_message) {
    reply_messages = [myFunction2()];

  } else if ('北坂戸→大学' == user_message) {
    reply_messages = [myFunction3()];

  }else if ('大学→北坂戸' == user_message) {
    reply_messages = [myFunction4()];

  }else if ('熊谷→大学' == user_message) {
    reply_messages = [myFunction5()];

  }else if ('大学→熊谷' == user_message) {
    reply_messages = [myFunction6()];
  }

  // メッセージを返信
  var messages = reply_messages.map(function (v) {
    return {'type': 'text', 'text': v};    
  });    
  UrlFetchApp.fetch(line_endpoint, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': reply_token,
      'messages': messages,
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}

//CHANNEL_ACCESS_TOKENを設定

//LINE developerで登録をした、自分のCHANNEL_ACCESS_TOKENを入れて下さい

var CHANNEL_ACCESS_TOKEN = '自分のCHANNEL_ACCESS_TOKEN';

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

//ポストで送られてくるので、ポストデータ取得

//JSONをパースする

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 = [myFunction1()];

} else if ('大学→高坂' == user_message) {

reply_messages = [myFunction2()];

} else if ('北坂戸→大学' == user_message) {

reply_messages = [myFunction3()];

}else if ('大学→北坂戸' == user_message) {

reply_messages = [myFunction4()];

}else if ('熊谷→大学' == user_message) {

reply_messages = [myFunction5()];

}else if ('大学→熊谷' == user_message) {

reply_messages = [myFunction6()];

}

// メッセージを返信

var messages = reply_messages.map(function (v) {

return {'type': 'text', 'text': v};

});

UrlFetchApp.fetch(line_endpoint, {

'headers': {

'Content-Type': 'application/json; charset=UTF-8',

'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,

'method': 'post',

'payload': JSON.stringify({

'replyToken': reply_token,

'messages': messages,

}),

});

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

}

5-6.最後にリッチーメニューの導入！

こちらからLINE Official Account Managerにアクセスしログインします。
作ったBotを選択して、左のサイドバーからリッチーメニューを選択します。

作成をクリックし作成していきます！
表示期間なども決めることが可能です。今回は今年度までの期間にしています。
コンテンツ設定で、好きなリッチーメニューを作ります。GUIで作成可能なので超簡単です！

保存を押せば完成です～！
リッチーメニューつけると公式感が出ていいです～～～！

最後に

最後までお読みいただきありがとうございます。
もしこのアカウントを使ってみたいという方がいらっしゃいましたら下記から登録可能ですので、実際に使ってみてください！
ID:@612vvufs

LINEBot製作はJavaScriptを勉強したい！という方にとても向いてます！
ぜひ挑戦してみてください！

各種SNSでの共有＆フォローしてくださると喜びます！
ぜひ共有＆フォローをよろしくお願いします！
Twitter→https://twitter.com/HatoLAB81
Facebook→https://www.facebook.com/profile.php?id=100041991366105

また、鳩LABではYoutubeでさまざまな動画を配信しております。ぜひご覧ください！