2. LINE BotのJavaScriptプログラムを簡単に理解して、自分なりに改造する

Updated
2021/8/8 8:05
Author
Jumpei IkegamiJumpei Ikegami
前回のチュートリアルでは、愚痴を言うと共感してくれるLINE Botを作りました。
そのときGASに登録したBot用のプログラムは、ただ中身もわからずコピペしただけでした。これでは、自分でBotの中身を改造しようと思っても、どこを変えればいいかわかりません。そこで今回は、前回使ったJavaScriptプログラムの内容を解説し、処理の流れを理解した上で、簡単な改造をしてみましょう。

前提知識

前回のチュートリアルをやっていない場合は、こちらからお願いします。
1. 愚痴を言うと共感してくれるLINE BotをGoogle Apps Scriptでつくる2021/6/20 5:192021/8/8 7:58
 
また、下記のチュートリアルはJavaScriptの基礎を理解するのにおすすめです。
ブックマークレットと簡単なJavaScriptで業務を効率化する2021/5/9 3:562021/6/20 8:09

作るもの

前回のチュートリアルで作成した「愚痴を言うと共感してくれるLINE Bot」を改造します。
「愚痴を言うと共感してくれるLINE Bot」も、全ての愚痴に共感を示してくれる優しいBotでした。しかし、何度かやりとりを続けていると、語尾に「んですね」を付けて鸚鵡返しをしているだけであることがバレてしまいます。
そこで、いくつかの条件分岐を追加し、より状況に適した返答ができるように修正してみましょう。
notion image

体験すること

このチュートリアルによって、以下を体験します。
  • LINE Botの仕組みを理解する
  • JavaScriptで作成したLINE Botを改造する
  • チャットボットについて考える

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

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

LINE Botの仕組みを理解する

前回のチュートリアルで作成した「愚痴を言うと共感してくれるLINE Bot」を改造します。しかし、中身も理解せず闇雲にプログラムを修正してしまっては、Botを壊してしまうかもしれません。
そこで、改めてLINE Botが実現される仕組みと、「共感Bot」のプログラムの中身について説明します。
まず、エンドユーザーがBotに対してメッセージを入力してから返信を見るまでの間の流れを簡単に理解しましょう。GAS上のプログラムがLINE Botとして機能するまでの処理の流れは、次の図の通りです。
notion image
ここでは、APIという言葉を理解する必要があります。APIは、Application Programming Interfaceの略です。直訳すると、「アプリケーションをプログラミングするための口」です。APIという言葉は、非常に様々な文脈で使われます。ここでは、「あるサービスが公開しているURLで、そこに外部から適切なHTTPリクエストを送るとそのサービスを操作できるようなもの」と理解しておきましょう。なお、そのようなWebの仕組みを使って実装されたAPIのことを、Web APIと呼ぶことがあります。この定義に沿って説明すると、LINEのMessaging APIとは「LINEが公開しているURLで、そこに外部からHTTPリクエストを送るとLINEにメッセージ送信させることができるようなもの」です。図でも、GAS上のBotサーバーがdoPost関数を実行する中で、LINEのMessaging APIを実行していることがわかります。
なお、「HTTP」とはインターネット上でプログラム同士が通信するための最も有名な言葉の1つです。英語しか話せない人間と日本語しか話せない人間で言葉が通じないように、プログラムも他のプログラムと通信するときのルールを決めておかないと、会話が成立しません。予め「HTTP」という標準的なルールを使ってやりとりしようと決めておくことで、異なるプログラム同士をスムーズに連携させることができるわけです。
改めて図を見てみると、要はLINE Botとは「LINEのサーバーからWebhook(HTTPリクエスト)を受け取るとそのお返しにLINEのサーバーが公開しているMessage APIにHTTPリクエストを送るようなサーバー」のことであることがわかります。このように、多くのサービス間連携は、それぞれのサーバーが公開しているAPIに対して相互にHTTPリクエストを送り合うことで実現されます。

共感Botのプログラムを理解する

次に、GAS上のBotサーバーとして登録した共感Botのプログラムを見てみましょう。
JavaScript
このプログラムの最初の2行は、LINEとの連携で必要なトークンとLINE連携用のLINE側URLを変数に格納しています。
重要なのは、その後に定義されているdoPost()関数です。doPost()関数は、大きく3つの部分に分かれています。
  • LINEから送られてきたWebhookから重要なデータを取り出す部分
  • 返信内容を生成する部分
  • LINE Messaging APIにHTTPリクエストを送る部分
doPost()関数の最初の部分は、LINEからWebhook(HTTPリクエスト)で送られてきたデータを解釈している部分です。ここでは重要なデータだけを取り出して、変数として名前を付けています。
JavaScript
LINEから送られてくるデータは、JSONと呼ばれる形式で送られてきます。これをJavaScriptで扱えるように、JSON.parse()という関数に渡しています。
特に重要なデータは、返信に使うトークン(LINEのMessage APIを実行するのに必要な許可証のようなもの)と、ユーザーからのメッセージ内容です。それぞれ、変数replyTokenと変数userMessageにデータを格納しています。
2つ目は、Botの返信内容を決める部分です。
JavaScript
返信内容として、「ユーザーからのメッセージに "んですね" を付けた文字列」を生成していることがわかります。どんなに愚痴を言ってもあんなに共感を示してくれたBotは、こんなに単純なロジックで実装されていたわけですね。生成した返信内容は、変数botMessageに格納されています。
最後は、LINE Messaging APIに対して「ユーザーにこういう返信をしてね」と伝えるための部分です。
JavaScript
返信に必要なトークンが格納された変数replyToken、および返信文言が格納された変数botMessageを含めて、LINE Messaging APIに対応するURLに送信しています。この部分は、LINEの仕様に依存する部分で特に難しいので、特に理解する必要はありません。コピペで大丈夫です。

Botに条件分岐を追加する

以上で、共感Botの中身のプログラムがなんとなく理解できました。特にdoPost()関数の中でも返信内容を決めている2つ目の部分を改造することで、Botからの返信を自由に変えられそうです。この部分を少し改造してみましょう。
GASのエディタを開いて、変数botMessageの内容を生成する部分を次のように書き換えてみます。
  • 変更前
JavaScript
  • 変更後
JavaScript
修正内容を見てみると、if-else文による条件分岐が追加されています。
JavaScript
条件文には、 文字列.indexOf(検索文字列) が使われています。indexOf は、文字列に検索文字列が含まれている場合、その場所を数字で教えてくれます。見つからなかった場合は、-1を返します。
JavaScirptプログラムでは、 ! は否定を意味します。===は「一致している」と言う意味なので、 !== はその否定である「一致していない」と言う意味になります。
つまり、 if (userMessage.indexOf("疲れ") !== -1) というのは、「userMessageに "疲れ" という文字が入っていた場合」という条件分岐になります。少し難しいですが、雰囲気だけ理解してください。
さて、プログラムを修正しただけでは、実際のBotには反映されません。面倒ですが、修正をする度に以下の操作をする必要があります。
  • プログラムを修正する
  • [公開 > ウェブアプリケーションとして導入]をクリック
  • [プロジェクトバージョン]をNewにする
  • [更新]をクリック
  • 再びLINE Botに話しかけて、修正が反映されているかを確認
プログラムの間違いを修正した場合も、同じ手順でプログラムを更新する必要があります。
更新が終わったら、LINEアプリでBotに対して話しかけてみましょう。「最近疲れちゃった」と送信してコーヒーブレイクを勧められたら、更新成功です。

Botにもっと条件分岐を追加する

ここまでは、言われた通りにLINE Botを作成しただけでした。せっかくなので、自分で考えたシナリオ分岐を追加してみましょう。10個分岐を足すだけでも、人間味を帯びてくるんじゃないでしょうか?
プログラムが修正できたら、GAS側で毎回アプリケーションの更新をするのを忘れないでください。

チャットBotについて考える

実際にチャットBotを作ってみると、単純なルールベースでのBotでも人間味を帯びてくるんじゃないでしょうか?10個ほど分岐を足すだけでも、面白いBotができたりします。チャットUIを通すと、Botに対峙している人間がBotから返ってくるメッセージの裏にある感情などの余白を、ついつい想像力で補完してしまいます。ここにUIの力を感じることができます。
世の中に溢れるチャットBotも、AIを謳っていながら単純なルールに基づいて実装されていたりします。もちろん、最新の自然言語処理や機械学習の英知を結集して作られたチャットBotもたくさん存在します。ここで考えたいのは、果たして高度な技術を使っているチャットボットが偉くて、そうじゃないチャットボットは価値が無いのか、という問いです。
チューリング・テストと呼ばれる、ある機械が「人間的」かどうかを判定するためのテストがあります。詳細はWikipediaを読んで欲しいですが、人間は先入観や情況などによって単純で機械的な反応をするだけのBotに対しても、「これは人間だ!」とまで信じ込んでしまうことがあります。重要なのは、そのBotがどのような技術で作られているかということと、Botに対峙している人間がどう感じるかということには、状況によってはそこまで強い相関関係があるわけじゃないということです。
これはビジネスシーンにおけるチャットボットについても同様です。もちろん、チャットボットを支える技術に意味が無いと言っているわけではありません。そのチャットボットの目的や提供したいCXに応じて、適した実装方法をその都度考えることが重要です。真の意味での汎用AIがまだ開発されていない以上、「AIチャットボット」というバズワードにただ飛びついても、本当に解決したい課題は解決できないかもしれません。「目的を持ってエンジニアリングに向き合う」というのは、この「非エンジニアのためのエンジニアリング」というサービスが大事にしているValueの1つです。エンジニアリングを正しく理解して、「どんなチャットボットが必要か」について自分の力で考えていきましょう。