Line
twilio
TwilioDay 15

Twilio FlexでLINE Channelを連携させる方法


はじめに

本記事は、2018年10月に正式リリースとなったTwilio Flex上で、LINEのメッセージを扱う方法について書かれています。

Twilio Flex

執筆時点でのTwilio Flexのバージョンは、1.2.0となります。

なお、Twilio Flexのインストールについては、Twilio Advent Calendar 2018の12月14日の記事を御覧ください。


Twilio Flexとは

Twilio Flexは、オムニチャネル対応のコンタクトセンタープラットフォームです。

インターネット回線とブラウザがあれば、5分で構築ができる手軽さと、限界のないカスタマイズを兼ね備えたクラウドベースのコンタクトセンターソリューションとなります。

Twilio Flexの動画はこちら

Twilio Flexは、音声による受付だけでなく、SMSやチャットなどのメッセージに対しても応答が可能です。現在対応しているメッセージは以下の5つです。


  • SMS

  • Webチャット

  • LINE

  • Facebookメッセンジャー

  • WhatsApp

本記事では、この中のLINEとの連携についてご紹介します。


準備

この記事の内容を実行するためには、以下の準備が必要です。


Twilioアカウント

すでにアカウントをお持ちの方は、そちらをお使いください。お持ちでない方は、こちらの動画を参考にアカウントを取得してください。


Twilio Flex

Flexをインストールするためには、こちらの記事を御覧ください。


LINEチャネルとTwilioのLINEチャネル

今回の連携では、Twilio ChannelsのLINEチャネルを利用しますので、以下の記事を参考にLINEチャネルの作成を行っておいてください。

なお、今回はStudioは利用しませんので、「Studioを使ってLINE Botを作成する」以降の部分は不要です。

LINE連携 ハンズオン

こちらには動画もございます。


連携

FlexでLINEの連携をする手順は以下の通りです。


  1. LINEチャネルのSIDを調べる

  2. Programmable ChatのSIDを調べる。

  3. Twilio StudioのフローSIDを調べる。

  4. Twilio Account SIDとAuth Tokenを調べる。

  5. REST APIでIncoming Message Handlersを登録する。

  6. LINEチャネルのWebhook先をFlexに変更する。

では始めましょう。


  • Twilioの管理コンソールにログインし、Channelsメニューを選択します。

  • インストール済みのLINEを選択します。

  • Configurationセクションに記載されているLINE CHANNEL IDを控えておきます。

    LINE_lineId.png


  • 続けて、管理コンソールのProgrammable Chatメニューを開きます。


  • すでに「Flex Chat Service」という名前のチャットサービスがインストールされているはずなので、そのSID(ISから始まる文字列)を控えておきます。

    ChatID.png


  • 続けて、管理コンソールのStudioメニューを開きます。


  • すでに3つのフローができているはずですので、そのうち「Messaging Flow」の右側に書かれているSID(FWから始まる文字列)を控えておきます。

    Studio_FlowSid.png


  • 続けて、管理コンソールのダッシュボードを開きます。


  • Project Infoセクションの右側に表示されているアカウントSID(ACから始まる文字列)とAUTHTOKEN(Viewリンクを押すと表示されます)を控えておきます。

    AccountSid_AuthToken.png


  • Curlなどを利用して、以下のREST APIを準備します。


  • 4行目のxxxxの部分をlineのチャネルSIDに置き換えてください。


  • 6行目のFWxxの部分をStudioのフローSIDに置き換えてください。


  • 7行目のISxxの部分をチャットサービスのSIDに置き換えてください。


  • 8行目のACxxの部分をアカウントSID、:の後ろをAuthTokenに置き換えてください。


  • すべて書き換えが終わったら、実行します。


重要

複数実行してしまうと、以後連携が失敗してしまいますので、実行は一度だけにしてください。

curl -X POST 'https://preview.twilio.com/Flex/FlexFlows' \

--data-urlencode 'ChannelType=line' \
--data-urlencode 'Enabled=true' \
--data-urlencode 'ContactIdentity=line:xxxx' \
--data-urlencode 'FriendlyName=Flex Line FlexFlow' \
--data-urlencode 'StudioFlowSid=FWxx' \
--data-urlencode 'ChatServiceSid=ISxx' \
-u ACxx:yourAuthToken

正しく登録できたかを確認します。


  • 管理コンソールからFlexメニューを選択します。

  • さらに、メッセージの送受信を選択します。

  • ここにlineの行ができていれば成功です。
    IncomingMessageHandlers.png

では最後に、LINE ChannelのWebhook先をFlexにしていきます。


  • 管理コンソールから、Phone Numbersメニューを選択します。

  • Flexのセットアップ時に購入されたアメリカ番号(+1から始まる番号)の、Messagingに書かれているURLをコピーします。このとき、文字列がとても長いので、右側がかけてしまわないよう、画面をズームアウトするなどして文字列をすべてコピーしてください。

    PhoneNumbersConfigure.png


  • 続いて、管理コンソールからChannelsメニューを選択します。


  • インストール済みのLINEを選択します。


  • ConfigurationセクションのCALLBACK URLに、今コピーしたURLを貼り付けます。

    LINE_Callback_URL (1).png


  • 保存ボタンを押します。


以上でセットアップは完了です。

オペレータをIdle状態にしておき、LINEからメッセージを送ってみます。

スクリーンショット 2018-12-14 10.29.32.png

オペレータ画面に着信通知が届くので、緑色の応答ボタンを押すとLINEとチャットができるようになります。


トラブルシューティング

今回のLINE連携をTwilioのシステム観点で解説すると、以下のようなフローになっています。


  1. LINEアプリでメッセージを送信。

  2. LINE側がメッセージ到着時にTwilioに対してWebhookを発行。

  3. Webhookを受け取ったTwilio ChannelsがSMSとしてメッセージを受信し、Channels上に設定したWebhook(今回はProxyサービスを利用)を発行。

  4. Proxy経由でFlex Messaging Handlerが呼ばれて、Programmable Chat上でTwilio Studioを呼び出す。

  5. StdioのMessaging Flowを使って、Task Routerにメッセージを送信。

  6. Task Routerがオペレータをアサインして、UIに通知。

  7. UIで応答することでメッセージがオペレータに表示される。

よって、もしメッセージがうまく届かない場合は、これらの流れを理解しながらデバッグしていくと良いです。

Twilio側で確認が可能なログは以下の通りです。


Programmable SMSのログ

LINE ChannelsにLINEからメッセージが届くと、その内容はSMSのログとして残ります。

もしSMSのログが残っていない場合は、そもそもLINE側の設定がおかしい(Webhook設定関連)か、Twilio ChannelsのLINE連携がうまくいっていない可能性があります。


Proxy Serviceのログ

Flexのセットアップ時に、「Flex Proxy Service」というサービスが自動的にセットアップされています。ここでSessionを確認することができます。

Proxyが正常に動作している場合は、個別のメッセージに対してセッションが生成されているので、ここにログが書かれていることでProxyまでは正常に届いていることがわかります。


Programmable Chatのログ

Flexのセットアップ時に、「Flex Chat Service」というサービスが自動的にセットアップされています。ここで、Channlesを確認することができます。

Programmable Chatが正常に動作している場合は、LINEのユーザID(line:Uxxxxxxx)の名前が付いたチャネルが生成されます。


Twilio Studioのログ

Flexのセットアップ時に、「Messaging Flow」というフローが自動的にセットアップされています。このフローのログを確認することで、フローが正常に動作しているかを確認することができます。ちなみに、このMessaging Flowは、メッセージをTaskRouterに渡しているだけです。


TaskRouterのログ

Flexのセットアップ時に、「Flex Task Assignment」というワークスペースが自動的にセットアップされています。ここで、Tasksを確認することができます。

TaskRouterが正常に動作している場合は、LINEからのメッセージを処理するタスクが生成されています。

このように、いくつかのログを確認して、どの部分で問題が起きているかを調べながらトライブルシューティングをしていくことになります。


まとめ

Twilio Flexを使うと、音声によるコンタクトセンターだけでなく、LINEやWebChat、Facebookなどのメッセージングサービスのコンタクトセンターも、同じUI上で対応することができます。

今回はChannelのLINEカタログを使いましたが、Channelsを使うことでLINEのAPIは一切書かかずに、LINEユーザとのやり取りができています。このように、Twilioを使うことで、極力無駄なコーディングをせずに、メッセージの内容にフォーカスしてシステムを拡張していくことができます。

ぜひTwilio Flexをお試しください。