だって楽したいじゃんか!

大学院(機械工学科)を首席で卒業した男がこれまでの経験を生かさず殺さず発信していく

【GAS】無料!!30分で作れるLINEチャットボット


今回はLINEのMessaging APIGoogle Apps Script(GAS)を使って簡単にチャットボットを作ってみます。

チャットボットの開発はハードルが高そう。。。最近流行ってるらしいからまずはどんな仕組みで動いているかを勉強したい。試しにさくっと遊んでみたい。とは思っていても、そんなやすやすとつくれるものではないのではないか。システム開発の知識もないし、やっぱり時間もかかるのではないか。特別なサービスを月額で支払わなければ使えないのでは。技術的にも時間的にもお金的にも。ハードルが高いなぁ。。。と思っていたら、なんとありました!お金をかけずにチャットボットを作る方法が。さっそく紹介していきます。

こんな人向け

無料でサクッとチャットボットを試したい人向けです。

  • 時間をかけたくない!
  • お金もかけたくない!
  • でもチャットボットを自作したって人に自慢したい!試しに遊んでみたい!

そんな人向けです。

今回作るもの

投稿した内容をオウム返ししてくれるLINEのボットを作ります。こんな感じです。
f:id:makimakimakino:20181103233004p:plain:w300

必要なアカウントの登録

必要なことは大きく3つです。

  1. LINEのアカウントを登録
  2. LINE Developersへの登録
  3. Googleアカウントを登録

それぞれ見ていきましょう。

LINEのアカウントを登録

UIにLINEを利用するためです。今どきの人は持っている人が大半な気がしますのでさっくりと進めます。

1.携帯用アプリをインストールします。

2.LINEのアカウントを作成します。
いろんなところで紹介されているので割愛します。
⚠️このアカウントで次のLINE Developpersにサインインするので、LINEの設定からアドレスとパスワード登録を済ませておきます。
 

LINE Developersへの登録

ユーザーとのメッセージのやりとり、サーバーサイドとのリクエスト/レスポンスをやりとりします。ユーザ(LINE)とサーバー(ボットの応答処理)の架け橋になるAPI(MessagingAPI)を利用するためです。

1.https://developers.line.me/ja/にアクセスします。
f:id:makimakimakino:20181104003358p:plain
「ログイン」を押下します。

2.ログインします。
f:id:makimakimakino:20181104003542p:plain:w200
メールアドレスとパスワードを入力して「ログイン」を押下します。

⚠️ログインができるとアカウント設定画面に移動すると思います。たぶん。。。(だいぶ昔に登録していたらしく、ログインできてしまいましたので確認できませんでした。)また、ログイン後にLINEに確認通知が届きます。

3.アカウント情報を登録します。

4.プロバイダー(サービス提供者(企業・個人)の名前)を作成します。
名前を入力して、数回ぽちぽちボタンを押します。

Googleアカウントを登録

無料で使えるサーバーっぽいものを利用するためです。MessegingAPIから送られてきたリクエストをもとに、サーバーサイドで処理をして、レスポンスを返すというロジックを実装できます。詳しくは下記参照でお願いします。
support.google.com

1.アカウント登録画面にアクセスします。
Google アカウントの作成

2.必要な情報を入力してアカウント登録を完了します。

3.アカウント登録完了のメールが届くことを確認します。

チャットボットを作る

必要なことは大きく3つです。

  1. ボットの作成
  2. LINEから送信したメッセージの返答処理を実装
  3. LINEとやりとりできるように設定

ボットの作成

LINEにchannel(ボット)を追加します。

1.Messaging APIのページにアクセスします。
https://developers.line.me/ja/services/messaging-api/
f:id:makimakimakino:20181104004844p:plain
「ログイン」を押下します。

2.ログインします。
f:id:makimakimakino:20181104005019p:plain:w200
メールアドレスとパスワードを入力して「ログイン」を押下します。

3.新規のチャンネルを作成します。
f:id:makimakimakino:20181104005117p:plain:w300
先ほど作ったプロバイダーを選択します。
f:id:makimakimakino:20181104005223p:plain:w300
新規チャンネル作成を押します。
f:id:makimakimakino:20181104005344p:plain:w300
Messaging APIを選択します。

4.ボットの設定をしていきます。
f:id:makimakimakino:20181104011542p:plain:w300
アプリ名、アプリの説明、プラン、大業種、小業種、メールアドレスを設定し「入力内容を確認する」を押下します。

⚠️プランですが、Developer Trialはpush機能(ボットからの一方向メッセージ送信)が使えますが、友達に制限があります。フリーは友達に制限がありませんが、push機能が使えません。試してみるだけ、広く公開することもなければDeveloper Trialで問題ないでしょう。

f:id:makimakimakino:20181104012231p:plain:w300
情報利用に関する同意画面で同意します。

f:id:makimakimakino:20181104012418p:plain:w300
LINE@利用規約とMessaging API(Developer Trialプラン)の利用規約に同意チェックを入れて作成を押下します。

新規ボットが作成されます。
f:id:makimakimakino:20181104044413p:plain:w300

作成したボットを選択します。
f:id:makimakimakino:20181104044728p:plain:w300
アイコンをお好みで設定し、Webhook送信を利用する、Botグループトーク参加を利用するに設定(グループトークに招待できます。)し、アクセストークンを再発行します。

f:id:makimakimakino:20181104045226p:plain:w300
「再発行」を押下します。

これでボットにアクセスできるようになります。

f:id:makimakimakino:20181104045431p:plain:w300
⚠️アクセストークンはあとで使うので、控えておきましょう。

5.ボットを友達追加
スマホで上記のQRコードを読み取ります。

作成したボットがでてくるので、追加します。
f:id:makimakimakino:20181104045614p:plain:w300

友達追加後ボットからLINEメッセージが届きます。
f:id:makimakimakino:20181104002457p:plain:w300

現時点ではメッセージを送っても、返信ができないという返信が帰ってきます。
f:id:makimakimakino:20181104002416p:plain:w300
応答できるようにしましょう。

LINEから送信したメッセージの返答処理を実装

LINEのメッセージを送った時に何か返す処理を実装していきます。
Google Apps Scriptのプロジェクトを作成し、プログラムを少々書きます。

1.Google Driveにアクセスします。

Googleのページに行き、Google Driveにアクセスします。
f:id:makimakimakino:20181104045756p:plain:w300
⚠️あらかじめGoogleにログインしておいてください。右上のアイコンからログイン可能です。

2.プロジェクトを作成します。

新規作成>その他>Google Apps Scriptの新しいプロジェクトを作成します。
f:id:makimakimakino:20181104045918p:plain:w300
⚠️その他にGoogle Apps Scriptが出てこない場合は、アプリを追加を押下してアプリを検索してください。初回の起動時には追加されていないと思いますので必要に応じて追加します。詳しくは下記をご参照ください。
makimakimakino.hatenablog.com


Editorが開かれます。
f:id:makimakimakino:20181104050022p:plain:w300

3.処理の実装
このエディターのテキスト入力欄に次のコードを貼り付けます。

少し解説すると、まずユーザーがLINEでボットにメッセージを送ったときに、Messaging APIが検知してサーバー側(GAS)にメッセージ内容(JSON形式)をポストで送信します。(ポストはWebでのやり取りのルール)すると、GAS側ではdoPost(e)が呼び出されます。ここではpostされたときにdoPostで受け取ったオブジェクト(e)をJSONオブジェクトに変換し、reply関数に渡します。

reply関数では、受けとったJSON編集しボットに返すようなフォーマットに変更、postで送信します。

ボットに返す時の宛先は、urlで記載した内容。(応答するときはreply、一方向送信の場合はpushとルールが決まている。Messaging APIのリファレンス参照。)

ヘッダに、JSON形式ですよと、アクセストークン(ボット固有の識別トークン)を明示します。postDataには返信の内容を記載します。replyTokenにはメッセージを送信するユーザーIDやグループID、ルームIDを指定します。今回はそのまま返答を返すので、受けっとたメッセージに含まれているIDをトークンとして指定します。

messagesにはメッセージタイプ(textやimage、locationなどが指定できる。)を設定し、内容を指定します。今回はtextなのと受信したメッセージをそのまま返すので、textには受け取ったメッセージのオブジェクトを設定します。

あとは、optionsに送信方法(post)、先ほど作成したヘッダとJSON形式のtextを指定して、UrlFetchApp.fetchを使ってurlに内容を送信します。

するとMessaging APIがどのボットからどのユーザに送信する内容か判断して、ボットの応答メッセージをユーザーに届けます。以上が上記のソースの内容です。

LINEとやりとりできるように設定

コードを書いただけでは動作しません。なぜならネット経由で接続できるように設定をしていないからです。何をすればいいかというと、ウェブ上に公開しなければいけません。全部1人でやろうとすると常時ネットに接続できるPC(サーバー)を買ってきて、インフラ環境を整えて、セキュリティ対策等々めんどくさいことをやる必要があるのですが、今回は全部必要ありません。なぜならばgoogleが用意してくれているのです。数クリックで公開できるサービスを。それでは具体的な方法を説明します。

f:id:makimakimakino:20181104050327p:plain:w300
まず、GASエディターのメニューから公開を選択、「ウェブアプリケーションとして導入…」を押下します。

f:id:makimakimakino:20181104050605p:plain:w300
プロジェクトバージョンを新規作成
次のユーザーとしてアプリケーションを実行を自分
アプリケーションにアクセスできるユーザーを全員(匿名ユーザーも含む)
に設定して、導入を押下します。
⚠️初回作成時のみ、以下のような作業が必要です。

f:id:makimakimakino:20181104050705p:plain:w300
許可を確認を押下します。

f:id:makimakimakino:20181104050759p:plain:w300
アカウントの選択を求められたら選択します。

f:id:makimakimakino:20181104050908p:plain:w300
詳細を押します。

f:id:makimakimakino:20181104051023p:plain:w300
bot(安全ではないページ)に移動を押下します。

f:id:makimakimakino:20181104051153p:plain:w300
許可を押下します。

f:id:makimakimakino:20181104051312p:plain:w300
⚠️URLが表示されるのでコピーします。
「OK」を押下します。

アプリケーションをボットに登録

最後に、LINE Developerのチャンネルページに戻って、Webhook部分に先ほどのURLを貼り付けます。
f:id:makimakimakino:20181104051602p:plain:w300
「編集」を押下し、URLを貼り付けます。

以上で、全ての設定が完了です。

アプリの動作確認

LINEで追加したボットの友達に話しかけると
f:id:makimakimakino:20181103233004p:plain:w300
ちゃんとおうむ返ししてくれました。
⚠️メッセージ送信時に自動メッセージが送信されてしまう場合は、LINE Developersのチャンネル設定画面で自動応答メッセージを利用しないに設定します。

まとめ

今回はLINEのMessaging APIGoogle Apps Script(GAS)を使って簡単かつお金をかけずにチャットボットを作る方法を紹介しました。複雑なシステム開発の知識がなくてもすぐにLINEのチャットボットが作れると思います。あとは返答した内容に応じて、決まった応答を返したり、ほかのAPIを使ってサービスを展開したり、ログを記録したりなど、さらに改良して自分好みにカスタマイズしていくといいでしょう。

例えば、外部のAPIを利用して専用のアプリケーションを作ったり、リッチメニューを使用して簡単に入力制御したり、LINE Front-end Framework(LIFF)を使って外部サイトとLINE内で連携したり(最近UIで編集出来るようになりました。)と様々な応用方法が簡単に考えられます。

それっぽいことを自動応答してくれる。
f:id:makimakimakino:20181104054014p:plain:w300
【GAS】無料!!30分で作れるLINEチャットボット - だって楽したいじゃんか!

指定した路線の電車が遅延しているか教えてくれる。
f:id:makimakimakino:20181104054100p:plain:w300
聞いた単語をWikiで検索してくれる。
f:id:makimakimakino:20181104054042p:plain:w300

  • リッチメニュー

ノンプログラミングでメニュー作成・表示できる。
f:id:makimakimakino:20181104054335p:plain:w300
【GAS】LINE Front-end FrameworkをGASで作ったWebアプリと連携させたらうまくいかなかった話【LIFF】 - だって楽したいじゃんか!


メニューを押すとサービスが起動する。
f:id:makimakimakino:20181104054436p:plain:w300

  • LIFF

他のアプリを起動しないで、LINE内で外部サイトと連携できる。(httpsサイトのみ)
f:id:makimakimakino:20181104054500p:plain:w300f:id:makimakimakino:20181104054518p:plain:w300
【GAS】LINE Front-end FrameworkをGASで作ったWebアプリと連携させたらうまくいかなかった話【LIFF】 - だって楽したいじゃんか!

こんな感じでほぼプログラミングなしで便利なボットを作ることができます。