GoogleツールでLINEBotを作ってみよう～実践編～

Slide 1

Slide 1 text

Googleツールで  LINE ChatBotを作ってみよう  【実践編】  エンジニアカフェ主催中高生・初心者向けコーディングイベントエンジニアカフェスタッフ　永石　好

Slide 2

Slide 2 text

昨日はご参加ありがとうございました！今日は、昨日学んだことを中心にして、いよいよ LINEのチャットボットを作成してみます。昨日は基本的なことでしたが、詰め込みすぎなところもありましたので省いた部分も多くあります。今日はそれを踏まえて、まずは大事なメソッドなどから履修していきます。

Slide 3

Slide 3 text

皆さんはどこかのお店や企業の公式 LINEと友達登録をされたことがありますか？公式LINEの仕組みはとても簡単で、誰でも気軽に導入することができるものとなっています。公式LINEの運用にはLINEDevelopersを利用します。自分のLINEアカウントで登録し、お店や企業としてのアカウント作成を行います。公式LINEを動かすための仕組みも、 LINEDevelopersに集約しています。「友達登録の申請があった時の処理」「最初のあいさつ文を返す」「お知らせを送信する」「相手(ユーザー)からの問い合わせなど文章の受信があった時の自動返信」など、便利な仕組みが全て用意されています。ここにGASを組み込むことで、もっと便利に、もっと自由にカスタマイズすることができるようになります。今回はその仕組みのひとつ、「自動返信」について少しだけ掘り下げ、自動的に答えてくれる「ボット」を組み込んでみます。仕組みの話

Slide 4

Slide 4 text

そのために、まずは準備を行います。必要となるのは以下の通り。・LINE Developersの登録(公式アカウントの取得 ) ・Googleアカウントでドライブを表示　　→必要なフォルダやファイルの作成まずは、LINE Developersへ登録します。「LINEDevelopers」で検索してください。

Slide 5

Slide 5 text

「コンソールにログイン」をクリックします。

Slide 6

Slide 6 text

画面に従って入力し、ログインしてください。

Slide 7

Slide 7 text

ログインしたトップ画面にプロバイダー一覧があります。ここの横の「作成」をクリックして新しくプロバイダーを作成します。

Slide 8

Slide 8 text

プロバイダーというのはいわゆる会社名のようなものになります。管理者権限が付与された大元となるものですので、慎重に名付けてください。プロバイダーは増やすことも削除もできます。プロバイダーごとにチャネルを作成します。チャネルの種類は「Messaging API」を選択。プロバイダー名を入力します。

Slide 9

Slide 9 text

チャネルというのがいわゆる「公式アカウント」になります。今回は「テストBOT」のように、分かりやすい名前を入力します。チャネルの説明も入力します。

Slide 10

Slide 10 text

LINEDevelopersのアカウント取得、チャネル設定が出来たら、次はスプレッドシートの設定です。

Slide 11

Slide 11 text

新しいタブでGoogleのマイドライブを開き、新規でスプレッドシートを開きます。

Slide 12

Slide 12 text

続いてGASを開きます。スプレッドシートに紐づいた GASなので「コンテナバインドスクリプト」になります。この時ついでに、スプレッドシートは名前を変更しておきましょう。 LINEテスト用など、分かりやすくしておけば誤って消す事故を防ぎます。

Slide 13

Slide 13 text

問題なく開けばOKです！この時、無題のプロジェクトとなっているタイトルも、スプレッドシートと同じものにしておきましょう。スクリプトはここに記述していきます。

Slide 14

Slide 14 text

準備はこの辺にして、次は仕組みの話の続きです。通常、ユーザー(LINEアプリ利用者)は公式LINEに友達登録(追加)したうえで、チャットボットとのやりとりを行いますね。ということは、まず友達登録が先になります。開発者も一旦は自分のアカウントで友達登録し、チャットボットが正常に動いているかを確かめます。確かめるためのテストとして、試しにオウム返しするスクリプトを組んでみます。ということでまずは第一段階。ユーザー(利用者)がチャネル(公式LINE)に友達登録を申請します。承認やIDの発行等は公式LINE側で行われます。あいさつ返しなどの設定の他は特にすることはありません。ユーザー QRコードから友達登録のリクエスト　承認公式LINE ここでの動きはユーザーから見た画面と同じですので、分かりにくい部分がないかもチェックしてみましょう。

Slide 15

Slide 15 text

ユーザー公式LINEには、予め設定したキーワードに応じて自動返信を設定できるなど、公式LINEを運営するうえで必要な機能はほとんど揃っています。【例】「住所を知りたい」→(送信)→「住所」でワードを検知 →「〇〇市〇〇-〇〇」と返信メッセージ (予め設定しておいたものを自動返信 ) 公式LINE お店の住所はどこ？住所検知〇〇市〇〇-〇〇です。ご来店をお待ちしております！メッセージ (リクエスト) 予め登録したワードが、今回はこの仕組みを GASで手作りします。

Slide 16

Slide 16 text

ユーザー (クライアント) メッセージ (設定した内容を返す ) 公式LINE 通常のやりとりを図解するとこのようなイメージです。公式LINEにユーザーがメッセージを送信 (リクエスト)します。公式LINEはそれを受け取り、設定した内容を探して、適した内容をレスポンスとして返します。ユーザー(クライアント)がそれを受け取ります。この時に使われる通信プロトコルを「 HTTP」と呼びます。通信プロトコルを掘り下げると時間が足りませんので省略します。要は、環境に左右されることなく通信を円滑に行うための規格と捉えてください。リクエストレスポンス

Slide 17

Slide 17 text

ユーザー (クライアント) メッセージ (受信したものと同一のもの ) 公式LINE GASを組み込んで、ユーザーからメッセージが送られてきたらそれをコピーしてそのまま返す仕組みは、公式LINE側で、Webhookという設定ができます。これは外部のアプリケーションなどと連携するための機能です。この時のWebhookは、GASのトリガーを起動します。トリガーが動き出すと、受け取ったメッセージを GASへ渡します。 GAS側では、受信したメッセージをコピーしてレスポンスとして返します。あとは通常と同じく、ユーザーがそれを受け取る仕組みです。リクエストレスポンス

Slide 18

Slide 18 text

と、いうわけで、ここからスクリプトを記述していくためのアレコレを履修します。まずは大事なメソッドから。「doPostメソッド」が存在します。これはHTTP POST リクエストを処理するためのメソッドです。 HTTP POSTとは、 URLで指定したプログラムに対してクライアントからデータを送信するためのものです。今回で言えば、URLで指定するのは公式 LINEのリプライ。そこに、送信されてきたメッセージ (テキスト)をそのまま返答用トークンとして返します。この時、返答するための場所 (チャネルアクセストークン )の設定が必要になってきます。

Slide 19

Slide 19 text

このチャネルアクセストークンは、 LINEで発行するものですが、まずは一旦保管します。が、コード上にアクセストークンをそのまま記述するのはリスクが高い面があるようで、 GASのスクリプトプロパティというところに保管しておけば、定数の呼び出しで同じ処理を行えます。 GASの画面左のツールアイコンから、「プロジェクトの設定」を選択します。

Slide 20

Slide 20 text

画面下の方にスクロールすると ↑の項目が出てきます。プロパティの欄には「 LINE_TOKEN」と入力します。

Slide 21

Slide 21 text

次はLINE Developersのタブを開きます。(閉じていたら開いてください ) 「Messaging API設定」のタブを開き、一番下のほうにある「チャネルアクセストークン」までスクロールします。

Slide 22

Slide 22 text

チャネルアクセストークン (長期)と書かれたものがあると思いますので、こちらの「発行」を押したあと値をコピーします。

Slide 23

Slide 23 text

コピーしたら、先ほどのタブ (GAS)に戻って、スクリプトプロパティの「LINE_TOKEN」の横の値の欄に貼り付けて保存します。これで、アクセストークンを見えないように定数の中に格納しました。このアクセストークンは、外部に漏れてはいけない、特に慎重に扱うべきものですので、公開することのないように慎重に取り扱ってください。もし、何かの弾みで公開するようなことがあれば、速やかに「再発行」をして、同じように設定してください。

Slide 24

Slide 24 text

次に、今保存したプロパティを呼び出して定数に代入します。それと、応答用トークンの URLも固定するため定数に代入しておきます。 functionの外側なので、1行目を改行して全体を下げ、 1行目から記述してください。画面に収まるように拡大したところ、 2行目は改行されたように見えてしまっていますが、 2行目は(”LINE_TOKEN”);までです。

Slide 25

Slide 25 text

それではdoPostメソッドを定義します。応答用トークンの代入の後なので、 5行目か6行目にあるはずです。 function myFunction { } となっていた部分を、 function doPost(e) { } と書き直してください。

Slide 26

Slide 26 text

中身には、以下を記述します。これはJSON.parse(e.postData.contents)という関数を呼び出し、その情報をjsonという変数に格納しています。 JSON(ジェイソン)とは組み込みオブジェクトのひとつで、 JavaScript Object Notationの略称です。 JSONはデータを表現するための記法のひとつで、様々なプログラミング言語で使用されます。アプリケーション間のデータのやりとりを行うために使用される文字列データを指し、その表記方法が、JavaScriptのオブジェクトリテラルと配列リテラルの構造をベースとしていることから、 JavaScriptとの親和性が高く、Webアプリケーション間のデータ交換用フォーマットとしてよく使用されています。 GASでも外部アプリケーションとのデータのやりとりの際に JSON形式を使用することが多くあります。

Slide 27

Slide 27 text

リテラルとは、文字列や数字などの値のことを指しますので、オブジェクトの値、という意味と捉えて問題ないでしょう。簡単に言えば、ゲームのセーブデータのようなものです。ゲーム自体は、ゲーム機の本体の電源を入れると起動し、ソフトウェアデータを読み込んでゲームを始めますが、それは大抵「初めから」です。途中までやった、あるいはクリアした情報はセーブデータとして保存しますね。そして再開する時はそれを読み込みます。その読み込む情報とは、一体何を指すのでしょうか？レベル？マップの場所？装備？アイテムの種類や数？どこまで進めたかのストーリー部分？全部です。その保存形式というのは様々ありますが、そのゲームにとって読み込みやすい、そして書き出しやすい形式というものがあります。ゲームは例え話ですので置いておいて、そういった「保存形式」が JSONと置き換えて考えてみて下さい。

Slide 28

Slide 28 text

「e.postData.contents」にはLINEのMessageing APIからのリクエストに関する情報が含まれています。そこで、必要になる情報を取り出せるようにしていきます。 replyTokenはイベントへの応答に使用するトークンで、 message.textはメッセージがテキストだった場合にその内容を取得します。 json.events[0]というのはJSONオブジェクトのイベント番号 0、つまり最初のイベントにアクセスして取得するというような意味になります。それではそれぞれ、変数に格納していきます。

Slide 29

Slide 29 text

次に記述する全容はこのようになりますが、長いので、ちょっとずつ行きます。

Slide 30

Slide 30 text

まずはここから。変数option(配列型)にはヘッダー情報をキーと値にして格納し、オプションとして設定しています。 Content-TypeはHTTPリクエストのコンテンツのタイプを指定しています。アプリケーションがJSON形式のデータであること、文字エンコーディングが UTF-8であることが条件となっています。 ※UTF-8とは文字コードのひとつ。非常に互換性が高く幅広く使用されています。　文字コードが異なると文字化けするほか、プログラムを壊してしまう可能性などがあります。 Authorizationは認証トークンの指定をしています。今回は Bearerを使用して、正当な認証であること、不正なアクセスを防ぐ目的があります。 LINE_TOKENはさきほど格納した情報です。

Slide 31

Slide 31 text

ヘッダー情報から外に出て、次の設定。 methodはpostを指定しています。 HTTPリクエストのpayloadはボディ情報です。 JavaScriptオブジェクトをJSON形式の文字列に変換します。この JSON形式のデータがHTTPリクエストの本文としてサーバーに送信されます。その中身は…

Slide 32

Slide 32 text

中身はHTTPリクエストの本文となる JSONデータです。 LINE Messaging APIへの応答メッセージを構築しています。 replyToken にはLINEからのイベントに対する返信用トークンが、 messages には送信するメッセージの情報が含まれています。メッセージタイプがテキストであった時、 MESSAGE_TEXTに格納した内容をコピーして返答テキストとして返す、という動きです。

Slide 33

Slide 33 text

UrlFetchApp.fetch()はメソッドです。第一引数に指定した URLにHTTPリクエストが実行されます。その時、第二引数で指定したパラメーターを読み込むことで細かい実行が出来ます。実行が終わった後は return文で関数(doPost(e)と名付けたもの)を終了します。第一引数第二引数

Slide 34

Slide 34 text

ここまでの入力で、全文が間違っていないかを見比べてください。 ※全文は実機にて！

Slide 35

Slide 35 text

それでは、いよいよこのプログラムが正常に動くかどうかを試してみます。 LINE側でWebhookを設定するために、この GASを「デプロイ」します。画面右上にある「デプロイ」のボタンをクリックし、「新しいデプロイ」をクリックします。この辺ね〜

Slide 36

Slide 36 text

新たにポップアップされるウィンドウでは、「種類の選択」から「ウェブアプリ」を選択します。

Slide 37

Slide 37 text

説明文を入力し、次のユーザーとして実行は自分を選びます。 (アカウントのメールアドレスが表示されます) アクセスできるユーザーは「全員」を選択します。全ての選択が終わったら「デプロイ」をクリックします。

Slide 38

Slide 38 text

ログインを求められますので選択します。

Slide 39

Slide 39 text

初回は警告文などが表示されますが、発行元は自身なのであまり気にせずに続けてください。ここをクリックして詳細を開きます。 (英語ページを翻訳しているページなので表示されている言葉が全く同じとは限りません )

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

こちらの画面が出てきたら「許可する」をクリックします。

Slide 42

Slide 42 text

拡大デプロイが完了したら「ウェブアプリ」の URLをコピーします。

Slide 43

Slide 43 text

コピーした値は、 LINEのWebhook設定の編集を押して貼り付けます。 ONにするのを忘れずに！また、応答メッセージはオフに設定します。 ※この下のほうにあります。

Slide 44

Slide 44 text

コピーが終わったら「保存」あるいは「更新」を押します。次に、その横の「検証」をクリックし、「成功」が返ってくるかを見ます。ここで成功が返ってこなければ、プログラムに欠けがあります。成功とはHTTPコード「200」を指します。(リクエストが承認され、正常にレスポンスが返ること )

Slide 45

Slide 45 text

「成功」が返ってきたらテストします！スマートフォンでLINEアプリを開き、友達追加した公式 LINEとのトークルームを開き、何かメッセージを送信してみてください。送信したメッセージのまま、レスポンスが返ってくれば成功！！ LINEのMessageing APIとGASが繋がった瞬間です！

Slide 46

Slide 46 text

今回は時間が足りず、一斉自動送信のスクリプトを組むには至りませんでしたが、いかがでしたでしょうか？一斉自動送信についてはまたいつか、イベントの中でご紹介できたらと思います。一応、スクリプト全文だけ資料に上げておきますので、ご自由にお使いください。ただし、スクリプトを使うとＩＤを吸い上げて格納する動きがあります。そのＩＤを公開することが絶対にないようご注意ください。また、自分以外のＩＤを格納することがないようにもご注意ください。 (他の人に友達追加を勧めないでください ) スクリプトを利用して何か事故が起こったとしても、いかなる場合においても、責任を負うことはできませんので、あらかじめご了承ください。全て自己責任にてご利用ください。

Slide 47

Slide 47 text

もくもく作業もいいですが、オンライン上で他のエンジニアやエンジニアを目指す人と情報共有してみませんか？エンジニアカフェでは、 Discordを使ってエンジニア同士の交流を深めることを目的とした「オンライン・エンジニアカフェ」の運営も行っています！オンライン・エンジニアカフェは現在ユーザー数が規定数を超えたため公開サーバーとして機能しています！ Discord上で検索もできますが、こちらからもアクセス可能です！ https://discord.gg/onrainenziniakahue-online-engineer-cafe-705718844400074784

Slide 48

Slide 48 text

本日はイベントへのご参加ありがとうございました！！それでは、お疲れ様でした！！