LINE BOTを作ってみたいという願望、そして、先日勉強したGoogle Apps Scriptも活用できる講座があったのでやってみました。
中学生でもできると銘打っているだけあって、流れにそって進めるだけでできそうです。
理解するためにかみ砕きつつやっているので時間はそれなりにかかりますが、一度やっておくとLINE BOT開発の流れがつかめると思います。
受けた講座
「初心者向け|1時間でWeb API とスクレイピングを学びながら簡単にできるLINE BOT 作り方|GASを使って作成」です。
![](https://mosomoso-history.com/wp-content/uploads/cocoon-resources/blog-card-cache/cf004711963e32a66af56f2568b95e12.jpg)
学習内容は以下のとおりで、LINE BOTの基本的な作り方を学べます。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-76-500x145.png)
作った内容は、LINEで行う出勤管理BOTを作ります。
発展形として、Webスクレイピングを使ってJRの交通費用を清算も行います。
LINE BOT作成の流れ
1.LINE Developersで開発者アカウントを取得し、その上で「プロバイダー」を作り「チャネル」を作る。
アカウントの下で開発プロジェクトを作る感じです。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-81-500x177.png)
2.LINE BOTとGoogleアカウントを紐づける
LINE BOTの応答をGoogleスプレッドシートに書き込んだりする必要があるので必要な作業です。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-82.png)
(1)LINE BOTでトークンを発行する
(2)Google Apps Scriptにトークンを貼り付ける
(3)Google Apps Scriptをデプロイし、Webhook URLを発行する
(4)LINE BOTにWebhook URLを貼り付ける
3.LINEからアクセス(友だち追加)できることを確認する
LINE BOTを作るには、LINE Developersを使う
LINE BOTを作るためには、まず LINE Developers(Webサイト)のアカウントを作って、その上で開発を行うという流れになります。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-77-500x251.png)
サイトはこんな感じ
そして、この上で「プロバイダー」というものを作ります。プロバイダーにはIDが割り当てられます。つまり、LINEのIDだと思えば良いと理解しました。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-78-500x292.png)
とりあえず適当な名前を付けて作ります
作成できるものが選べるので、今回は「Messaging API channel」を選びます。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-79-500x249.png)
アイコンなどを選びます。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-80-500x483.png)
LINE BotとGoogleアカウントを紐づけ
LINE BOTのプログラムコードは、Google Apps Script側に書きます。
そのため、LINE側でボタンを押した際に、Google Apps Script(Googleアカウント)とやり取りができなければいけませんので紐づけを行います。
LINE BOT用のスプレッドシートを作る
まずは、講師の方が作成したスプレッドシート(プログラムコード付き)をコピーして使わせてもらいます。
LINE BOTとスプレッドシートの連携のためには、Google Apps Script側のプログラムコードに、LINE Developersで発行したトークンを記載することになります。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-83-500x222.png)
その他の細かなコードの内容は講師の方が作ったものをそのまま流用します。
LINE Developers側でチャネルアクセストークンを発行
LINE Developers側でMessaging API設定の画面を開きます。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-84-500x346.png)
チャネルアクセストークンを発行します。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-85-500x217.png)
このアクセストークンをコピーして、Google Apps Script側のコードに貼り付けます。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-86-500x147.png)
Google Apps Scriptをデプロイし、Webhook URLを発行
スプレッドシート側のコードにLINE Developersのトークンを貼り付けた後は、デプロイしましょう。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-87-500x170.png)
説明文などを追記して「デプロイ」ボタンを押します。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-88-500x376.png)
アクセスの許可が求められるので許可する。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-89-500x172.png)
デプロイが完了するとURLが発行されます。これがいわゆるWebhook URLです。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-91-500x442.png)
LINE BOTのチャネルにWebhook URLを貼り付ける
LINE Official Account Managerを開いて設定します。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-92-500x297.png)
応答設定にて、応答メッセージをオフ、Webhookをオンにします。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-94-500x451.png)
続けて、Messaging API設定にて、先ほど発行したWebhook URLを貼り付けます。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-100-500x393.png)
LINE Developersのページに反映されるので、[検証]ボタンで検証を行います。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-96-500x330.png)
成功と表示されれば、LINE BOTとGoogleアカウントの連携設定は完成です。
LINEからともだち追加できることを確認する
ここまでできれば、LINEからともだち追加することができます。
LINE Developersに表示されているQRコードを読み込んで確認しましょう。
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-99-500x348.png)
アクセスしてみると・・・
![](https://mosomoso-history.com/wp-content/uploads/2021/01/image-98.png)
できました。正直、こんなに簡単にできると思っていなかったので感動です。
今回はここまで。
まとめ
1.LINE BOTの作り方、「友だち追加」までやってみました。
2.LINE Developers、Google Apps Scriptを使って実現しました。どちらも無料です。
3.Google Apps Script内のコードは理解していませんが、コードを書くことでこのようなLINE BOTが作れることまでは理解することができました。
コメント