1. 愚痴を言うと共感してくれるLINE BotをGoogle Apps Scriptでつくる

Updated
2021/8/8 7:58
Author
Jumpei IkegamiJumpei Ikegami
この一連のチュートリアルでは、LINE上で動く簡単なBotをJavaScriptで作ってみます。Botとは自動でタスクをこなしてくれるプログラム全般をいいます。特にLINE Botと言うと、LINEのメッセージに自動応答してくれるチャットBotを指します。
なお、LINE BotなどのチャットBotプログラムは、複数人で使うことができるサービスです。あるプログラムをサービスとして提供するには、サーバーを立てる必要があります。サーバーを立てる方法はたくさんありますが、複雑な設定が求められるケースが多く難易度が高いです。そこで、「Google Apps Script」を簡易的なサーバーとして利用してみます。大量のアクセスが発生するようなサービスを運用するには心細いですが、個人や仲間内で使うだけであれば問題ありません。

前提知識

Google Apps ScriptやJavaScriptに慣れる意味で、先に次のチュートリアルからやることをおすすめします。
 
Googleスプレッドシートに自分だけの独自機能を追加する2021/5/9 3:592022/1/30 3:58

作るもの

最も簡単なLINE Botの例として、愚痴を言うとそれに共感してくれるBotを作ってみましょう。辛いとき、それを一人で抱え込んでしまうのはよくないことです。「疲れた」とか「休みたい」と言うと、「疲れたんですね」とか「休みたいんですね」など共感を示してくれる。そんな、人に優しいBotを生み出します。(Botに愚痴を言う自分をメタ的に見ると、さらに落ち込みそうですが。。。)
こうしたBotがすぐに仕事で使えるかは怪しいですが、LINE BotなどのチャットBotの仕組みを理解することはいずれ役に立つはずです。また、いつも使っているLINEのUIで自分が作ったBotが動くのはとても感動的です。

体験すること

このチュートリアルによって、以下を体験します。
  • LINEのBot用アカウントをLINE Developerコンソールで作成する
  • Google Apps ScriptでLINE Bot用プログラムを登録する
  • Google Apps Scriptでプログラムを全世界に公開する
  • 作成したLINE Botと会話してみる

チュートリアルスタート!

ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。

LINE Developerコンソールでチャネルを作成する

まずLINE Botを実際に動かしてみましょう。その上で、どんな仕組みでそれが動いているかを説明します。
LINE Botは、LINE上の1つの擬人化されたアカウントとして登録されます。つまり、LINEの管理画面を開いて、自分が作ったプログラムをLINE側に「登録してください」とお願いする必要があります。(趣味で使うくらいならお金はかからないので安心してください。)
まず、LINE Developerコンソールにログインします。個人のLINEアカウントでログインできます。アカウントを別にしたい場合は、新規に作成してもいいと思います。
ここからLINEの管理画面を操作して「チャネル」を作ります。チャネルとはLINEと今回開発するBotをつなぐためのパイプみたいなものです。チャネルの設定によって、Google Apps Script(以下、GAS)上のプログラムをLINE Botとして動かすことができるようになります。(メンテナンスがめんどくさいのでLINEの管理画面のスクリーンショットは貼りませんでした。もし画面を見ながら設定したい場合は、「LINE Bot Google Apps Script」とかでググるとたくさん記事が出てきます。)
LINE Developerコンソールに入ったら、[Providers]から[Create]をクリックし、Providerを作成します。Providerとは、LINE Botなどを提供する提供者としての設定です。Botの提供元としてLINEの管理画面に表示されます。企業として作るなら企業単位で作りますが、今回は個人で作るものなので、名前には自分のハンドルネームなどを入力しましょう。
作成したProviderの画面で、[Channels]タブが開かれていることを確認します。ここで、チャネルの種類を選びます。今回は[Create a Messaging API channel]を選択します。なお、[LINE Login channel]を使うと、自社サイト上にLINEでログインするボタンを表示し、サイト側のアカウントとLINEアカウントを紐付けることができます。また、[Clova Skill channel]ではスマートスピーカーであるLINE Clova向けのBotを作ることができます。
チャネル作成時の設定は、次のように入力します。
  • [Channel icon optional] : 自分が喋らせたいキャラクターや人の画像をアップロード
  • [Channel name] : 自分が喋らせたいキャラクターや人の名前を入力
  • [Channel description] : 適当に "あなたに共感するBotです" とでも入力
  • [Category] : 適当に "個人" と入力
  • [Sub Category] : 適当に "個人(その他)" と入力
  • [Email address] : 自分のメールアドレスを入力
  • [Privacy policy URL] : 未入力でOK
  • [Terms of use URL] : 未入力でOK
規約に同意し、[Create]をクリックします。
チャネルができたら、チャネル設定画面で[Messaging API]タブを開きます。下の方にある[LINE Official Account features]から、次のように設定変更します。[Edit]をクリックすると、LINE Official Account Managerという別の画面に飛ぶので、実際の設定変更はこちらで行います。
  • [あいさつメッセージ(Greeting messages)] : オフ(Disabled)
  • [応答メッセージ(Auto-reply messages)] : オフ(Disabled)
  • [Webhook] : オン
あいさつや応答のメッセージ機能がオンになっていると、BotではなくLINE側の自動メッセージ返信が動いてしまいます。OFFにして、今回つくるBotに全てのメッセージ返信を委ねます。GASとの連携にはWebhookと呼ばれる仕組みを使うので、Webhookもオンにしておきます。
最後に、LINE Developerコンソールのチャネル設定からMessaging APIタブに戻り、下の方の[Channel access token]という項目を見つけます。[issue]というボタンを押すと、アクセストークンが表示されます。これを、クリップボードにコピーしておいてください。なお、一般的に連携用に払い出されるアクセストークンは、流出するとサービスが乗っ取られてしまう危険性があるものです。今回は個人利用なのでそこまで問題はないと思いますが、取り扱いには十分に注意してください。

GASにBot用のプログラムを登録する

LINE側の管理画面には後で戻ってくるとして、GASでLINE Botサーバー用のプログラムを作成します。
まず、Googleドライブを開きます。ログインしていない場合はGoogleアカウントでログインしてください。企業アカウントの場合、G Suiteの権限設定によって以降の作業ができない可能性があります。個人アカウントでのログインをおすすめします。
左上の[新規]ボタンから、[その他 > Google Apps Script]を選択します。これで、Google Drive上にGASの環境が1つ追加されます。
GAS画面上のコードエディタに、次のソースコードをコピペします。そのとき、1行目の "Botのアクセストークンを入力してください" と書かれた部分の引用符の中身に、先ほどコピーしたアクセストークンを貼り付けます。
JavaScript
[ファイル > 保存]から、プログラムを保存します。名前には "共感LINE Bot" とでも入力します。
GASに記述したJavaScriptプログラムは、公開設定をすることで、LINEなどの外部サービスからでも実行できるようになります。まさに、外部にサービスを提供する「サーバー」としてのプログラムになるわけです。さっそくプログラムを公開してみましょう。[公開 > ウェブアプリケーションとして導入]をクリックします。設定は次の通りです。
  • [Project version] : "New"
  • [Execute the app as] : "Me"
  • [Who has access to the app] : "Anyone, even anonymus"
設定ができたら[Deploy]をクリックします。[このアプリは確認されていません]という怖い表示が出るかもしれません。そうしたら、下の[詳細]から[共感LINE Bot(安全ではないページ)に移動]をクリックします。これは、悪意のあるユーザーに共有されたプログラムに情報を渡さないための警告です。今回は自分で作ったアプリケーションなので問題ありません。そのまま、外部サービスへの接続を許可します。
[Current web app URL]が表示されるので、URLをクリップボードにコピーします。この内容は、[公開 > ウェブアプリケーションとして導入]からいつでも確認できます。
このURLに対してHTTPのPOSTと呼ばれる方法で通信すると、登録したdoPost()関数が実行されます。これで、世界中にあなたの書いたプログラムが公開されたことになります。おめでとうございます!

LINEのチャネルにWebhookの設定をする

長かった設定作業も、後少しです。
再びLINE Developerコンソールに戻り、Webhookの設定をします。Webhookとは、ある出来事が起きたときに、登録したURLにHTTPリクエストを送るような仕組みの総称です。LINE側でWebhookを登録しておくと、Botアカウントがユーザーからメッセージを受け取ったときに、登録したURL(今回はGASのプログラム)に対してそのメッセージの内容を教えてくれます。
LINE Developerコンソールのチャネル設定画面で[Messaging API]タブを開きます。真ん中の方にある[Webhook settings > Webhook URL]に、先ほどGASでコピーしたweb app URLを入力します。[Verify]というボタンを押すと、そのURLに実際にHTTPリクエストを送ってテストしてくれます。Successと表示されたら、GASで問題なくプログラムが公開できています。[Use Webhook]がOFFになっている場合は、忘れすにONにしておきましょう。
これで、LINEでBotアカウントがメッセージを受け取ったときに、GASに登録したdoPost()関数を自動で実行させることができます。

BotアカウントをLINEの友達に追加して話しかける

全ての準備が整ったので、実際にLINEアプリから作ったLINE Botに話しかけてみましょう。
LINE Developerコンソールの[Messaging API]タブには、QRコードが表示されています。このQRコードには、Botアカウントを友達追加するためのURLが埋め込まれています。お手持ちのスマートフォンでLINEアプリを立ち上げて、QRコードリーダーで読み込んでみてください。LINEの管理画面で設定したChannel nameとChannel iconが表示され、友達として追加ができます。
さっそく友達追加し、Botアカウントとのトーク画面を開きます。「疲れた」とメッセージを送信します。うまくいけば、Botが自動で返事をしてくれます。

もしうまく動かない場合

うまく返事がされていない場合は、GASとLINEの設定を見直してみましょう。バグがあるときこそ、理解を深めるチャンスです。最もよくある原因は、GASのプログラムの修正が反映されていないことです。問題の切り分けのために、次の手順を試してみましょう。
  • GASでBotプログラムを開く
  • [ファイル > 保存]から保存する
  • [公開 > ウェブアプリケーションとして導入]をクリック
  • [Project version]を "New" にして[更新]する
  • [Current web app URL]をコピー
  • LINE Developerコンソールの[Webhook settings > Webhook URL]を新しいURLで更新する
  • [Verify]を押して、Successが返ってくることを確認する
  • LINEアプリからBotにメッセージを送ってみる
これで解消しない場合は、Botプログラム自体にバグがある可能性があります。お近くのエンジニアに相談してみましょう。
以上で、LINE Botをまず動かしてみるところまでを体験できました。今後のチュートリアルでは、今回のLINE Botプログラムの中身を少しだけ理解し、自分好みに改造してみます。
 

次のチュートリアル

2. LINE BotのJavaScriptプログラムを簡単に理解して、自分なりに改造する2021/6/20 5:212021/8/8 8:05