Twilioを使用して本当に5分でLineBotは作成できるのか?

以前のエントリーを書いている中で…

【参考】 uepon.hatenadiary.com

ハッカソンでも有名なTwilioの高橋さんから「TwilioならLINEbotがすぐ作れますよ」というコメントをもらったので、本当にそんなに簡単なのかを調べてみることにしました。

ググってみると…

www.youtube.com

という動画がありました。

「5分だと…」

前回までのエントリーが何だったのかを考えさせられてしまうパワーワード。Twilioは少しはかじってはいましたが、本格的に使ってはいなかったのですが、このタイミングで使用してみようと思います!そして本当に5分でできるのかも検証です! (ちなみに自分はboundio時代からユーザですw)

準備

5分というのは、TwilioとLINEの双方に詳しくないとそのぐらいの時間では難しいかなと思いますゆっくり準備などをしていきます。 基本は動画を見てもらえればいいかなと思いますので、その他は軽めで…

必要なものは

  • LINE Developerアカウント
  • Twilioのアカウント
  • ブラウザ(Chromeなど)

なのでこれらは事前に準備します。

LINE側の準備

まずはLINE側の設定を行います。基本は以前のエントリを参考にしてもらえればいいかなと思います。

【参考】 uepon.hatenadiary.com

以下のアドレスにアクセスを行い、画面右上の【ログイン】ボタンをクリックをします。

LINE Developers

f:id:ueponx:20180728140930p:plain

ユーザー名とパスワードを入力して【ログイン】ボタンをクリックします。

f:id:ueponx:20180726230905p:plain

ログインするとこれまでに作成したプロバイダー一覧が表示されるので、プロバイダーの選択または、新規で作成することになります。今回は事前に作成されていたプロバイダを使用することにします。リストから使用するプロバイダー名のもの(今回はMashup名古屋を例としています)をクリックします。

f:id:ueponx:20180728141336p:plain

すると、プロバイダーで作成されたChannelの一覧が表示されます。今回は新しいbotを作成するので新規のChannelを作成することにします。画面内の【新規チャンネル作成】にマウスオーバーするとボタン部分がグリーンに変わるので

f:id:ueponx:20180728141724p:plain

【新規チャンネル作成】ボタンをクリックします。

f:id:ueponx:20180728142049p:plain

するとダイアログが開き、

  • LINEログイン
  • Messaging API
  • Clovaスキル

からの選択になるので、Messaging APIをクリックします。

f:id:ueponx:20180728142255p:plain

新規チャンネルの作成画面に遷移するので

f:id:ueponx:20180728143804p:plain

まずは

を設定します。

自分はこんなふうに設定してみました。

  • アプリアイコン画像(いらすとやのオウムの画像)
  • アプリ名(TwilioParrot)
  • アプリ説明(オウム返し)

f:id:ueponx:20180728144640p:plain

続いては、画面をスクロールさせて

  • プラン(Developer Trial・フリー)
  • 大業種・小業種
  • メールアドレス

を設定します。気にしなければいけないのはプランで【Developer Trial】を選択します。

f:id:ueponx:20180728145857p:plain

すべての設定が完了したら画面下部にある【入力内容を確認する】ボタンをクリックします。

f:id:ueponx:20180728150206p:plain

情報利用に関する同意のダイアログが表示されるので【同意する】ボタンをクリックします。

f:id:ueponx:20180728150234p:plain

ダイアログが閉じると入力情報の確認画面になるので画面下部にある利用規約の同意チェックボックスの2つにチェックを入れて【作成】ボタンを押します。

f:id:ueponx:20180728150456p:plain

するとアプリが作成されます。

f:id:ueponx:20180728150617p:plain

今回作成したチャンネルを更に選択します。

f:id:ueponx:20180728150642p:plain

選択したチャンネルの基本設定画面に遷移します。

f:id:ueponx:20180728150734p:plain

この画面で表示されるChannel IDは以降で使用するのでメモなどをしておきます。

f:id:ueponx:20180728151214p:plain

続いて、アクセストークンの再発行を行います。

f:id:ueponx:20180728151318p:plain

【再発行】ボタンをクリックすると古いアクセストークンの失効時間の確認ダイアログが表示されます。 今回は新規作成したチャンネルですので0時間で問題ありません、そのまま【再発行】のボタンをクリックします。

f:id:ueponx:20180728151424p:plain

無事に新しいアクセストークンが発行されました。こちらも以降の処理で必要になるパラメータなのでメモをしておきます。

f:id:ueponx:20180728151505p:plain

更に画面を下にスクロールすると自動応答メッセージの設定があります。これらも【編集】ボタンをクリックして

f:id:ueponx:20180728151543p:plain

【利用しない】にラジオボタンを設定して、【更新】ボタンをクリックします。

f:id:ueponx:20180728151627p:plain

以下のようになっていればOKです。

f:id:ueponx:20180728151643p:plain

最後にWebhook送信の設定を変更します。【編集】ボタンをクリックして

f:id:ueponx:20180728151824p:plain

Botを作成する上では必須ともいえる設定なので忘れずに有効化してください。 ラジオボタンを【利用する】に合わせたら、【更新】ボタンをクリックします。

f:id:ueponx:20180728151846p:plain

設定の表示が以下のようになっていればOKです。

f:id:ueponx:20180728151903p:plain

一旦、これでLINE側の設定は終わりました。

Twilioの準備

続いては、Twilio側の設定になります。Twilio側で使用するのはChannelsとStudioになりますが、まずはChannels側の設定を行っていきます。 以下のリンクからTwilioへログインしていきます。

twilio.kddi-web.com

以下のような画面が表示されるのでアカウントを持っている人は画面右上にある【ログイン】ボタンをクリックします。アカウントが無い方は【サインアップ】ボタンをクリックして、まずはユーザーアカウントを作成してください。以下ではユーザーアカウントはあるものとして【ログイン】ボタンをクリックして処理を行っています。

f:id:ueponx:20180728152049p:plain

【ログイン】の画面に遷移しますので、メールアドレスを入力して【次】ボタンをクリックします。

f:id:ueponx:20180728152218p:plain

続いてはパスワードを入力して、【私はロボットではありません】というreCAPTCHAにチェックをいれて【ログイン】ボタンをクリックします。

f:id:ueponx:20180728152336p:plain

ログインが無事できたら、ダッシュボードの画面に進みます。初期状態がダッシュボード画面でないこともあるようなので、以下のようなダッシュボード画面に遷移をお願いします。

f:id:ueponx:20180728152601p:plain

今回設定するのはChannelsなので画面の左側にある【・・・】ボタン(マウスオーバーするとALL Products&Servicesが表示されます)をクリックして

f:id:ueponx:20180728152653p:plain

その中から【MARKETPLACE】の分類にある【Channels】をクリックします。

f:id:ueponx:20180728152730p:plain

すると画面がChannelsカタログの画面に遷移します。その中からLINEを選択してインストールを行います。【LINE】のアイコンをクリックします。

f:id:ueponx:20180728153129p:plain

LINEの設定になるので【インストール】ボタンをクリックしてインストールを行います。

f:id:ueponx:20180728153201p:plain

途中でサービス使用条件の同意ダイアログが表示されるのでチェックボックスにチェックをいれて(チェックをいれると【同意してインストール】ボタンがアクティブになります)

f:id:ueponx:20180728153246p:plain

【同意してインストール】ボタンをクリックします。これでインストール処理が行われます。画面が以下の様に遷移します。

f:id:ueponx:20180728153415p:plain

この画面で行う設定は

  • Programmable SMS Inbound
  • CHANNEL ID
  • CHANNEL ACCESS TOKEN

の3つのパラメータになります。画面の中程に集まっているのでここを設定していきます。

f:id:ueponx:20180728153738p:plain

Programmable SMS Inbound】のチェックボックスにチェックを入れ、LINEの設定側を行うときにメモをしたChannel IDを【CHANNEL ID】のテキストボックスへ、 LINEの設定画面で新たに発行したAccess Tokenを【CHANNEL ACCESS TOKEN】のテキストボックスへ入力します。

f:id:ueponx:20180728153909p:plain

設定が終わったら画面下にある【保存】ボタンをクリックします。

f:id:ueponx:20180728154103p:plain

【保存】ボタンをクリックすると設定内の【受信チャンネルURL】の文字列が長くなります。(保存の処理により生成されたことがわかります)

f:id:ueponx:20180728154223p:plain

この受信チャンネルURLの値をメモして、再びLINEのチャンネル設定の画面に戻ります。

再びLINEへ

LINEのChannel設定の画面に戻ったら、メッセージ送受信設定の分類にあるWebhook URLの値をTwilio Channelsでメモを行った【受信チャンネルURL】に変更します。

f:id:ueponx:20180728154339p:plain

【編集】ボタンをクリックして、テキストボックスを表示させます。

f:id:ueponx:20180728154411p:plain

Twilio Channelsでメモを行った【受信チャンネルURL】をテキストボックスに入力します。テキストボックスに入れる値はメモしたURLから先頭のhttp://を除いたものにするのを注意してください。

f:id:ueponx:20180728154526p:plain

設定したら【更新】ボタンをクリックします。更新が終わると【接続確認】が表示されるようになるので、クリックして接続テストを行います。

f:id:ueponx:20180728154608p:plain

設定値のしたに「成功しました」と表示されればOKです。

f:id:ueponx:20180728154648p:plain

これでLINE側の設定は完了しました。

再びTwilioへ

再び今度はTwilioの設定を行います。今回はStudio側(バックエンド側)の設定となります。 ダッシュボード画面の左側の【・・・】ボタン(All Products&Service)を開いて

f:id:ueponx:20180728154745p:plain

ENGAGEMENTS CLOUDの分類にあるStudioをクリックします。

f:id:ueponx:20180728154832p:plain

画面がStudio Dashboardに遷移するので【Create a flow】のボタンをクリックします。(この画面にならなくても違う形でボタンは表示されると思います。)

f:id:ueponx:20180728154929p:plain

作成するFlowの名前をつけるダイアログが表示されるので名前をテキストに入力します。今回はTwilioParrotという名前にしてみました。

f:id:ueponx:20180728155025p:plain

次に表示されるのは作り方になりますが、【Start from scratch】がデフォルトで選択されていましたので、このまま【NEXT】ボタンをクリックします。

f:id:ueponx:20180728155130p:plain

Flowが作られるとCanvasが表示されます。これを編集していくことになります。

f:id:ueponx:20180728155415p:plain

まずは、Canvasの右側にある【WIDGET LIBRARY】から【Send Message】をCanvasにドロップします。

f:id:ueponx:20180728155509p:plain

【ドロップ中】 f:id:ueponx:20180728155534p:plain

ドロップすると新たにBOXが表示されます。名前の表示が促されると思いますので適当に名前をつけてください。

f:id:ueponx:20180728155556p:plain

【Trigger】BOXの【Incoming Message】のコネクタと今作成した【send_message】BOXのコネクタをマウスで接続します。以下の様に矢印ができていればOKです。

f:id:ueponx:20180728155704p:plain

次に、【send_message】BOXをクリックします。すると、【SEND MESSAGE】の設定表示が行われるので、【Config】タブの【MESSAGE BODY】に

{{trigger.message.Body}}

と入力を行います。(入力補完されるので途中まで入力すると選択肢が表示されます) 入力が終わったら【Save】ボタンをクリックします。

f:id:ueponx:20180728160019p:plain

最後に【Trigger】BOXを選択して【FLOW CONFIGURATION】を表示させます。設定の中の【WEBHOOK URL】をメモしておきます。 これで、Twilio Studioとなります。

再度、Twilio Channelsの設定へ

先程メモしておいた【WEBHOOK URL】をCHANNELSのLINEの設定に埋め込みます。Configurationの分類にある【CALLBACK URL】のテキストボックスにメモをしておいた 【WEBHOOK URL】を入力して、【保存】ボタンをクリックすれば処理完了です。

f:id:ueponx:20180728160519p:plain

これで設定は完了です。(注)実は終わっていませんでした。残りは後述します。

テスト

あとはLINEのアプリからのテストになりますので、今回作成したBOTに友だち申請を行い、書き込みを行っていきます。LINEのチャンネル側設定画面にQRコードがあるのでそれを使うと便利です。

f:id:ueponx:20180728162137p:plain

友だち申請がされると以下のような画面になります。

f:id:ueponx:20180729115653p:plain

そこで会話をしてみると…帰ってこない…(´;ω;`)ブワッ

f:id:ueponx:20180729115955p:plain

設定漏れがないか確認してみました。

するとTwilio Studio側の設定で一つ漏れがありました。 画面上部に【Publish】ボタンが!!公開状態になっているのかなと思っていたのですが、逆にボタンを押さないと公開状態にならないということでした。 またこのボタン、一度押すと非アクティブになるので、初回のテスト時では必ず押しておく必要がありそうでした。

f:id:ueponx:20180728170430p:plain

【Publish】ボタンを押すと、確認ボタンがでますのでもう一度ダイアログ上で【Publish】ボタンを押します。

f:id:ueponx:20180728170512p:plain

処理が完了すると【Publish】ボタンが【Published】となり非アクティブ化されます。

f:id:ueponx:20180728170547p:plain

では、再度テストを行ってみます。(これ以外の設定は触らなくてもテスト出来ます。)

f:id:ueponx:20180729120626p:plain

ようやく動いてくれました。

終わりに

無事におわりました。時間からすると初めてだと5分では完成できないにしろ、流れがわかってしまえば2回目からは5分程度で作成できますね。 ほぼにノンコーディングでやれるのはいい感じです!

/* -----codeの行番号----- */