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の関数とは別に関数を作っていきます。
以下がコードです。(『//』はコメントアウトすることのできるコード。)

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

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

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


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

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

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

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

スクリーンショット 2020-07-15 16.44.55.png

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

スクリーンショット 2020-07-15 16.52.19.png

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

image.png

最後に

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

スクリーンショット 2020-07-15 16.56.36.png

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

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

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

鳩LAB[鳩ラボ]
『鳩LAB』は『ものづくりの楽しさを世の中に広めること』を目的に掲げ、電子工作やバイクのレースなどを通じてものづくりの楽しさを広める活動を行っています!小学生がプログラミングが必須になるなど、今後来るであろうIT時代おいてものづくりに触れる機会というのを増やしたいと思っています!モータースポーツ・電子工作・ドロー...

コメント