読者です 読者をやめる 読者になる 読者になる

TAMALOG

プログラミングがあれば遠いところへ行けます。プログラムと人の共生を記録します。

コードを書かずにHerokuボタンひとつでデプロイ!LINEチャットボットを試す全手順を公開

GitHubとHerokuを使ってLINE Messaging APIがどういうものか試せるようにしました。

この記事で何ができるようになるの?

  • コードを書かずに、LINE上で動く超簡単なチャットボットが作れます
  • LINEチャットボットの簡単な始め方がわかります

この記事の目的

僕は確信しています。チャットボットは新しいパートナーだと。ウェブサービスの新規登録ボタンを見つけることができなくても、「登録したい」とチャットボットに言えばサービスを受けられる世の中が来ると。でも、そんなチャットボットは、ツールではなく、パートナーになっていくんだと。いなかったら寂しいやつだと。そう僕は思っています。

僕はぜひともみんなに、チャットボットに触ってほしい。だからこの記事を書いています。

もう一つの目的

この記事は、サポーターズのイベントで話した内容をまとめたものです。当日は急な繰り上げでコンピュータを持参できなかった方が何人かいました。その人たちを始めとする参加者のみんなにまとまった資料を提供するという目的もあります。

主催者いわく、4月にも開催予定とのことですので興味のある方はよろしくお願いします。

supporterz-seminar.connpass.com

チャットボットを始めるための準備

それでは、始めていきましょう。今回、チャットボットを始めるために必要なことはシンプルです。

どれもお金は不要です。

Herokuのアカウントを作る

さあ、Herokuのアカウントを作りましょう。Herokuをアカウントがあれば、無料でウェブアプリケーションを公開する基盤が手に入ります。レンタルサーバーやVPSを借りる必要はありません。

Sign up for free から始められます。

f:id:tamanobi:20170307195648p:plain

f:id:tamanobi:20170307200407p:plain

f:id:tamanobi:20170307200410p:plain

Herokuの準備は完了です

HerokuはRubyやPHPを始めとするいくつかのプログラミング言語に対応しています。公式に対応していなくてもBuildpackを自分で用意すれば、Herokuで利用することができます。

以下の画面が出れば、Herokuの準備は完了です。次はLINEの準備をしていきましょう。

f:id:tamanobi:20170307200616p:plain

LINE Business Centerに登録しよう

LINE上で動くチャットボットを作るために、LINE Business Centerで登録しましょう。まずは、すでに持っているLINEアカウントでログインをしてみます。ログインするときは、メールアドレスを求められます。メールアドレスはLINEアプリの設定をみれば、思い出せます。

f:id:tamanobi:20170307201808p:plain

f:id:tamanobi:20170307202107p:plain

Messaging APIの利用をDeveloper Trialで始めてみよう

最近店舗で利用される機会が増えているビジネス向けのアカウント: LINE@が提供されています。LINE@は、友達追加時に「友達に追加してくれてありがとー!」のような自動応答を設定できます。

定型文じゃ味気ない、これをもっとユーザのメッセージに応じて柔軟にしたい!と思うのは必然です。

ユーザからのメッセージを取得するためには、自分の用意したサーバー(Heroku)のエンドポイント(http://example.net/callback)を登録する必要があります。Messaging APIのDeveloper Trial*1に申し込んで設定していきましょう。

business.line.me

Messaging APIの申し込み手順

Developer Trialを始めると、事業主を選択するように促されます。事業主を登録していなくても選択をクリックすれば、事業主を追加するボタンから登録することができます。

f:id:tamanobi:20170307204345p:plain

f:id:tamanobi:20170307204846p:plain

以下の画面までたどり着けば、完璧です。LINE Business Centerに登録できました。ここから再び、Messaging APIのアイコンをクリックして進めていきましょう。

f:id:tamanobi:20170307205043p:plain

Developer Trialをクリックすれば、アカウント名の設定を求められます。アカウント名は後から変更できるので気楽に決めましょう。ただし、LINEの友達となったユーザにはアカウント名が公開されますので、公開するときは早めに変更してください。

f:id:tamanobi:20170307220322p:plain

さあ、申込みが終わりました。チャットボットを試すために、LINE@MANAGERの設定を変更しましょう。

f:id:tamanobi:20170307220632p:plain

LINE@MANAGERの設定をしてユーザからのメッセージを送信するようにしよう

今回は、Messaging APIを利用してチャットボットを試してみるのが目的です。警告文を読んで、APIの利用を開始しましょう。

f:id:tamanobi:20170307221151p:plain

f:id:tamanobi:20170307221213p:plain

以下の画面のように設定を変更していきます。Webhook送信Botのグループトーク参加は「利用する」を選択、自動応答メッセージ 友だち追加時あいさつは「利用しない」を選択して保存するようにします。

Webhook送信を利用することで、自分が用意したサーバー(Heroku)にユーザの送信したメッセージを受信できるようになります。次は、LINEのトークンを確認していきます。

f:id:tamanobi:20170307221822p:plain

Messaging APIの利用に必要なLINEのトークンを確認しよう※メモを忘れずに。

Webhook送信などの設定した画面のステータス欄にLINE Developersで設定する というリンクからトークンを確認する画面へ移動できます。 f:id:tamanobi:20170307222514p:plain

画面が移動すると少し雰囲気が変わります。ページのShowISSUEというボタンをクリックして表示された文字列をメモとして残しておきましょう

f:id:tamanobi:20170307222839p:plain

メモするべきトークンは3つ

トークンを3つメモしておきましょう。Herokuを使ってチャットボットをウェブアプリケーションとして動かすときに必要になります。

  • Channel Secret
  • Channel Access Token
  • UserID

Channel Secret

f:id:tamanobi:20170307230249p:plain

Channel Access Token

f:id:tamanobi:20170307230050p:plain

UserID

これは、あなた自身のLINEアカウントIDです。これを使えば、あなた自身にメッセージを送ることができます(Push Message)。

f:id:tamanobi:20170307230119p:plain

これらのトークンは大切なものですから、メモを誤って公開しないようにしてください。では、GitHubへ移動してHerokuへデプロイしていきます。

GitHubからボタン一発デプロイ

LINEチャットボットを簡単に試せるように、GitHub上にHerokuボタンを設置しました。以下のリポジトリからボタンを押してみましょう。のちほどプログラムに変更を加える人は、自分のリポジトリにフォークしてからやる良いでしょう。

github.com

f:id:tamanobi:20170307232624p:plain

アプリ名やトークンを入力してデプロイ

ボタンを押すと、デプロイするアプリについて情報入力を求められます。アプリ名はアプリのURLとなります。たとえば、your-chatbotlineとすればあなたのアプリケーションのURLは、 https://your-chatbotline.herokuapp.com となります。

アプリ名を入力したら、先程メモしたChannel Secret、Channel Access Token、UserIDの3つを入力してデプロイします。デプロイ後、https://your-chatbotline.herokuapp.comにアクセスしてhelloという文字列が見れた成功です!

f:id:tamanobi:20170319005936p:plain

最後にLINE Developersにウェブアプリを教える

さきほどデプロイしたウェブアプリには、LINE Serverからのメッセージを受け付ける先(callback)が用意されています。そのコールバック先を、LINE Developersを開いて登録しましょう!登録する場所は以下の画像を参考にしてください。

登録するURLは、https://your-chatbotline.herokuapp.com/callback ですのでお間違えなく。

f:id:tamanobi:20170517151600p:plain

入力したら、verifyというボタンを押して通信ができているか確認して終了です!次から、ついにウェブアプリが動き出します!

Push Messageを試してみよう

あなた自身のLINEに対して、Messageを送ってみます。/test/pushというエンドポイントにブラウザでアクセスすることで、「push message」というMessageを送ることができます。例: https://your-chatbotline.herokuapp.com/test/push

オウム返しを試してみよう

LINEアカウントに対して、メッセージを送るとあなたが送ったメッセージと同じメッセージが返ってきます。

f:id:tamanobi:20170319012349p:plain

改造するならリポジトリをフォークすれば

以上で、LINEチャットボットの簡単な試し方の手順説明は終わりです。プログラムの中身を知りたかったり、改造したい場合は以下のリポジトリにコードがあるので参考にしてください。

github.com

*1:Developer Trialであれば友達人数の最大が50人に制限されますが、無料でPush Messageを試すことができます。