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

GoogleツールでLINEBotを作ってみよう～実践編～で使用したスライド資料です。
YouTubeに当日のイベントの様子もありますので、併せてご利用ください。
https://www.youtube.com/watch?v=LkiEMOQi0Y4

1. Googleツールで
 LINE ChatBotを作ってみよう
 【実践編】
 エンジニアカフェ主催 中高生・初心者向けコーディングイベント エンジニアカフェスタッフ　永石　好
2. 昨日はご参加ありがとうございました！ 今日は、昨日学んだことを中心にして、いよいよ LINEのチャットボットを作成してみます。 昨日は基本的なことでしたが、詰め込みすぎなところもありましたので省いた部分も多くあります。 今日はそれを踏まえて、まずは大事なメソッドなどから履修していきます。
3. 皆さんはどこかのお店や企業の公式 LINEと友達登録をされたことがありますか？ 公式LINEの仕組みはとても簡単で、誰でも気軽に導入することができるものとなっています。 公式LINEの運用にはLINEDevelopersを利用します。 自分のLINEアカウントで登録し、お店や企業としてのアカウント作成を行います。 公式LINEを動かすための仕組みも、 LINEDevelopersに集約しています。 「友達登録の申請があった時の処理」「最初のあいさつ文を返す」「お知らせを送信する」 「相手(ユーザー)からの問い合わせなど文章の受信があった時の自動返信」など、 便利な仕組みが全て用意されています。 ここにGASを組み込むことで、もっと便利に、もっと自由にカスタマイズすることができるようになります。 今回はその仕組みのひとつ、「自動返信」について少しだけ掘り下げ、 自動的に答えてくれる「ボット」を組み込んでみます。 仕組みの話
4. そのために、まずは準備を行います。 必要となるのは以下の通り。 ・LINE Developersの登録(公式アカウントの取得 ) ・Googleアカウントでドライブを表示 　　→必要なフォルダやファイルの作成 まずは、LINE Developersへ登録します。 「LINEDevelopers」で検索してください。
5. 「コンソールにログイン」をクリックします。
6. 画面に従って入力し、ログインしてください。
7. ログインしたトップ画面に プロバイダー一覧があります。 ここの横の「作成」をクリックして 新しくプロバイダーを作成しま す。
8. プロバイダーというのはいわゆる会社名のようなものになります。 管理者権限が付与された大元となるものですので、慎重に名付けてください。 プロバイダーは増やすことも削除もできます。プロバイダーごとにチャネルを作成します。 チャネルの種類は 「Messaging API」を選択。 プロバイダー名を入力します。
9. チャネルというのがいわゆる「公式アカウント」になります。 今回は「テストBOT」のように、分かりやすい名前を入力します。 チャネルの説明も入力します。
10. LINEDevelopersのアカウント取得、チャネル設定が出来たら、次はスプレッドシートの設定です。
11. 新しいタブでGoogleのマイドライブを開き、新規でスプレッドシートを開きます。
12. 続いてGASを開きます。 スプレッドシートに紐づいた GASなので「コンテナバインドスクリプト」になります。 この時ついでに、スプレッドシートは名前を変更しておきましょう。 LINEテスト用など、分かりやすくしておけば誤って消す事故を防ぎます。
13. 問題なく開けばOKです！ この時、無題のプロジェクトとなっているタイトルも、スプレッドシートと同じものにしておきましょう。 スクリプトはここに記述していきます。
14. 準備はこの辺にして、次は仕組みの話の続きです。 通常、ユーザー(LINEアプリ利用者)は公式LINEに友達登録(追加)したうえで、 チャットボットとのやりとりを行いますね。 ということは、まず友達登録が先になります。 開発者も一旦は自分のアカウントで友達登録し、 チャットボットが正常に動いているかを確かめます。 確かめるためのテストとして、試しにオウム返しするスクリプトを組んでみます。 ということでまずは第一段階。 ユーザー(利用者)がチャネル(公式LINE)に友達登録を申請します。 承認やIDの発行等は公式LINE側で行われます。 あいさつ返しなどの設定の他は特にすることはありません。 ユーザー QRコードから 友達登録の リクエスト 　 承認 公式LINE ここでの動きはユーザーから見た画面と同じですので、 分かりにくい部分がないかもチェックしてみましょう。
15. ユーザー 公式LINEには、予め設定したキーワードに応じて自動返信を設定できるなど、 公式LINEを運営するうえで必要な機能はほとんど揃っています。 【例】 「住所を知りたい」→(送信)→「住所」でワードを検知 →「〇〇市〇〇-〇〇」と返信 メッセージ (予め設定しておいたものを自動返信 ) 公式LINE お店の住所は どこ？ 住所 検知 〇〇市〇〇-〇〇です。 ご来店をお待ちしております！ メッセージ (リクエスト) 予め登録したワード が、今回はこの仕組みを GASで手作りします。
16. ユーザー (クライアント) メッセージ (設定した内容を返す ) 公式LINE 通常のやりとりを図解するとこのようなイメージです。 公式LINEにユーザーがメッセージを送信 (リクエスト)します。 公式LINEはそれを受け取り、設定した内容を探して、適した内容をレスポンスとして返します。 ユーザー(クライアント)がそれを受け取ります。 この時に使われる通信プロトコルを「 HTTP」と呼びます。 通信プロトコルを掘り下げると時間が足りませんので省略します。 要は、環境に左右されることなく通信を円滑に行うための規格と捉えてください。 リクエスト レスポンス
17. ユーザー (クライアント) メッセージ (受信したものと同一のもの ) 公式LINE GASを組み込んで、ユーザーからメッセージが送られてきたらそれをコピーしてそのまま返す仕組みは、 公式LINE側で、Webhookという設定ができます。 これは外部のアプリケーションなどと連携するための機能です。 この時のWebhookは、GASのトリガーを起動します。 トリガーが動き出すと、受け取ったメッセージを GASへ渡します。 GAS側では、受信したメッセージをコピーしてレスポンスとして返します。 あとは通常と同じく、ユーザーがそれを受け取る仕組みです。 リクエスト レスポンス
18. と、いうわけで、ここからスクリプトを記述していくためのアレコレを履修します。 まずは大事なメソッドから。 「doPostメソッド」が存在します。 これはHTTP POST リクエストを処理するためのメソッドです。 HTTP POSTとは、 URLで指定したプログラムに対してクライアントからデータを送信するためのものです。 今回で言えば、URLで指定するのは公式 LINEのリプライ。 そこに、送信されてきたメッセージ (テキスト)をそのまま返答用トークンとして返します。 この時、返答するための場所 (チャネルアクセストークン )の設定が必要になってきます。
19. このチャネルアクセストークンは、 LINEで発行するものですが、まずは一旦保管します。 が、コード上にアクセストークンをそのまま記述するのはリスクが高い面があるようで、 GASのスクリプトプロパティというところに 保管しておけば、 定数の呼び出しで同じ処理を行えます。 GASの画面左のツールアイコンから、 「プロジェクトの設定」を選択します。
20. 画面下の方にスクロールすると ↑の項目が出てきます。 プロパティの欄には「 LINE_TOKEN」と入力します。
21. 次はLINE Developersのタブを開きます。(閉じていたら開いてください ) 「Messaging API設定」のタブを開き、一番下のほうにある「チャネルアクセストークン」まで スクロールします。
22. チャネルアクセストークン (長期)と書かれたものがあると思いますので、 こちらの「発行」を押したあと値をコピーします。
23. コピーしたら、先ほどのタブ (GAS)に戻って、スクリプトプロパティの 「LINE_TOKEN」の横の値の欄に貼り付けて保存します。 これで、アクセストークンを見えないように定数の中に格納しました。 このアクセストークンは、外部に漏れてはいけない、特に慎重に扱うべきものですので、 公開することのないように慎重に取り扱ってください。 もし、何かの弾みで公開するようなことがあれば、速やかに「再発行」をして、 同じように設定してください。
24. 次に、今保存したプロパティを呼び出して定数に代入します。 それと、応答用トークンの URLも固定するため定数に代入しておきます。 functionの外側なので、1行目を改行して全体を下げ、 1行目から記述してください。 画面に収まるように拡大したところ、 2行目は改行されたように見えてしまっていますが、 2行目は(”LINE_TOKEN”);までです。
25. それではdoPostメソッドを定義します。 応答用トークンの代入の後なので、 5行目か6行目にあるはずです。 function myFunction { } となっていた部分を、 function doPost(e) { } と書き直してください。
26. 中身には、以下を記述します。 これはJSON.parse(e.postData.contents)という関数を呼び出し、 その情報をjsonという変数に格納しています。 JSON(ジェイソン)とは組み込みオブジェクトのひとつで、 JavaScript Object Notationの略称です。 JSONはデータを表現するための記法のひとつで、様々なプログラミング言語で使用されます。 アプリケーション間のデータのやりとりを行うために使用される文字列データを指し、 その表記方法が、JavaScriptのオブジェクトリテラルと配列リテラルの構造をベースとしていることから、 JavaScriptとの親和性が高く、Webアプリケーション間のデータ交換用フォーマットとして よく使用されています。 GASでも外部アプリケーションとのデータのやりとりの際に JSON形式を使用することが多くあります。
27. リテラルとは、文字列や数字などの値のことを指しますので、オブジェクトの値、という意味と捉えて問題ないで しょう。 簡単に言えば、ゲームのセーブデータのようなものです。 ゲーム自体は、ゲーム機の本体の電源を入れると起動し、ソフトウェアデータを読み込んで ゲームを始めますが、それは大抵「初めから」です。 途中までやった、あるいはクリアした情報はセーブデータとして保存しますね。 そして再開する時はそれを読み込みます。 その読み込む情報とは、一体何を指すのでしょうか？ レベル？マップの場所？装備？アイテムの種類や数？どこまで進めたかのストーリー部分？ 全部です。 その保存形式というのは様々ありますが、そのゲームにとって読み込みやすい、そして書き出しやすい形式という ものがあります。 ゲームは例え話ですので置いておいて、そういった「保存形式」が JSONと置き換えて考えてみて下さい。
28. 「e.postData.contents」にはLINEのMessageing APIからのリクエストに関する情報が含まれています。 そこで、必要になる情報を取り出せるようにしていきます。 replyTokenはイベントへの応答に使用するトークンで、 message.textはメッセージがテキストだった場合にその内容を取得します。 json.events[0]というのはJSONオブジェクトのイベント番号 0、つまり最初のイベントに アクセスして取得するというような意味になります。 それではそれぞれ、変数に格納していきます。
29. 次に記述する全容はこのようになりますが、長い ので、ちょっとずつ行きます。
30. まずはここから。 変数option(配列型)にはヘッダー情報をキーと値にして格納し、オプションとして設定しています。 Content-TypeはHTTPリクエストのコンテンツのタイプを指定しています。 アプリケーションがJSON形式のデータであること、文字エンコーディングが UTF-8であることが条件となっていま す。 ※UTF-8とは文字コードのひとつ。非常に互換性が高く幅広く使用されています。 　文字コードが異なると文字化けするほか、プログラムを壊してしまう可能性などがあります。 Authorizationは認証トークンの指定をしています。今回は Bearerを使用して、正当な認証であること、 不正なアクセスを防ぐ目的があります。 LINE_TOKENはさきほど格納した情報です。
31. ヘッダー情報から外に出て、次の設定。 methodはpostを指定しています。 HTTPリクエストのpayloadはボディ情報です。 JavaScriptオブジェクトをJSON形式の文字列に変換します。この JSON形式のデータがHTTPリクエストの本文 としてサーバーに送信されます。 その中身は…
32. 中身はHTTPリクエストの本文となる JSONデータです。 LINE Messaging APIへの応答メッセージを構築しています。 replyToken にはLINEからのイベントに対する返信用トークンが、 messages には送信するメッセージの情報が含まれています。 メッセージタイプがテキストであった時、 MESSAGE_TEXTに格納した内容をコピーして 返答テキストとして返す、という動きです。
33. UrlFetchApp.fetch()はメソッドです。 第一引数に指定した URLにHTTPリクエストが実行されます。 その時、第二引数で指定したパラメーターを読み込むことで細かい実行が出来ます。 実行が終わった後は return文で関数(doPost(e)と名付けたもの)を終了します。 第一引数 第二引数
34. ここまでの入力で、全文が間違っていないかを見比べてください。 ※全文は実機にて！
35. それでは、いよいよこのプログラムが正常に動くかどうかを試してみます。 LINE側でWebhookを設定するために、この GASを「デプロイ」します。 画面右上にある「デプロイ」のボタンをクリックし、 「新しいデプロイ」をクリックします。 この辺ね〜
36. 新たにポップアップされる ウィンドウでは、 「種類の選択」から 「ウェブアプリ」を選択します。
37. 説明文を入力し、 次のユーザーとして実行は 自分を選びます。 (アカウントのメールアドレス が表示されます) アクセスできるユーザーは 「全員」を選択します。 全ての選択が終わったら 「デプロイ」をクリックします。
38. ログインを求められますので選択します。
39. 初回は警告文などが表示されますが、発行元は自身なのであまり気にせずに続けてください。 ここをクリックして詳細を開きます。 (英語ページを翻訳しているページなので 表示されている言葉が全く同じとは限りません )
41. こちらの画面が出てきたら「許可する」をクリックします。
42. 拡大 デプロイが完了したら「ウェブアプリ」の URLを コピーします。
43. コピーした値は、 LINEのWebhook設定の編集を押して貼り付けます。 ONにするのを忘れずに！ また、応答メッセージは オフに設定します。 ※この下のほうにあります。
44. コピーが終わったら「保存」あるいは「更新」を押します。 次に、その横の「検証」をクリックし、「成功」が返ってくるかを見ます。 ここで成功が返ってこなければ、プログラムに欠けがあります。 成功とはHTTPコード「200」を指します。(リクエストが承認され、正常にレスポンスが返ること )
45. 「成功」が返ってきたらテストします！ スマートフォンでLINEアプリを開き、友達追加した公式 LINEとのトークルームを開き、 何かメッセージを送信してみてください。 送信したメッセージのまま、レスポンスが返ってくれば成功！！ LINEのMessageing APIとGASが繋がった瞬間です！
46. 今回は時間が足りず、一斉自動送信のスクリプトを組むには至りませんでしたが、 いかがでしたでしょうか？ 一斉自動送信についてはまたいつか、イベントの中でご紹介できたらと思います。 一応、スクリプト全文だけ資料に上げておきますので、ご自由にお使いください。 ただし、スクリプトを使うとＩＤを吸い上げて格納する動きがあります。 そのＩＤを公開することが絶対にないようご注意ください。 また、自分以外のＩＤを格納することがないようにもご注意ください。 (他の人に友達追加を勧めないでください ) スクリプトを利用して何か事故が起こったとしても、 いかなる場合においても、責任を負うことはできませんので、あらかじめご了承ください。 全て自己責任にてご利用ください。
47. もくもく作業もいいですが、オンライン上で他のエンジニアやエンジニアを目指す人と情報共有してみません か？エンジニアカフェでは、 Discordを使ってエンジニア同士の交流を深めることを目的とした「オンライン・エ ンジニアカフェ」の運営も行っています！ オンライン・エンジニアカフェは現在ユーザー数が規定数を超えたため公開サーバーとして機能しています！ Discord上で検索もできますが、こちらからもアクセス可能です！ https://discord.gg/onrainenziniakahue-online-engineer-cafe-705718844400074784
48. 本日はイベントへのご参加ありがとうございました！！ それでは、お疲れ様でした！！