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

2023年5月1日を持ちまして、株式会社KDDIウェブコミュニケーションズのTwilioリセール事業が終了したため、本記事に記載されている内容は正確ではないことを予めご了承ください。

はじめに

本記事は、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を控えておきます。
  

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

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

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

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

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

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

• 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の行ができていれば成功です。
  

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

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

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

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

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

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

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

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

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

オペレータ画面に着信通知が届くので、緑色の応答ボタンを押すと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をお試しください。