LoginSignup
3
1

More than 1 year has passed since last update.

Twilioを使ってコンタクトセンター（コールセンター）を作ってみよう！【PR】TwilioAdvent Calendar 2021Day 4
@mobilebiz(高橋 克己)

Twilio Flexの始め方（セットアップ編）

Last updated at Posted at 2021-12-04

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

はじめに

みなさん、こんにちは。
KDDIウェブコミュニケーションズの Twilio事業部エバンジェリストの高橋です。

Twilio Flex Advent Calendar 2021 4日目の記事となります。
前回は、Twilio Flexの全体を俯瞰して解説をしましたが、今回からは実際にTwilio Flexに触っていただきながら、理解を深めていきたいと思います。
今回はTwilio Flexのセットアップについて解説します。
2021年12月現在の内容となりますので、実際のオペレーションとは異なる可能性があります。

Flexのセットアップ

Twilio Flexをセットアップするためには、以下の準備が必要です。

Twilioアカウント

もしお持ちでない方は、以下のサイトからアカウントを取得してください。
Twilioアカウントの作成
すでにアップグレード済みのアカウントをお持ちの方も、Twilio Flexは新しいプロジェクト（トライアルアカウントになります）としてしかインストールができませんので、予めご了承ください。

アップグレード用のクレジットカード

Twilio Flexで利用するTwilioアカウントをアップグレードすることにより、以下のメリットがあります。

  • セットアップ時に自動的に購入されるUS番号以外の番号を購入することができます。
  • 着信時のトライアルガイダンスを削除することができます。
  • Flexの5,000時間分の無料枠が利用できるようになります。

この記事の最後にアップグレード方法を説明しています。

取引時確認、および国内電話番号購入の準備

日本国内でTwilioを利用するためには、本人確認・法人確認の手続きが必要になります。
詳しくは以下の記事を参照ください。
Twilio アカウントの作成に必要な準備（取引時確認の準備）
日本の電話番号を購入するための準備

なお、今回のセットアップでは上記の資料は必要ありませんが、この後必要になってきますので予め準備しておくとよいでしょう。

始めましょう

  • Twilio管理コンソールにログインします。

  • Flexメニューの概要ページに移動します。
    スクリーンショット 2021-12-01 9.35.52.png

  • Create My Flex Projectボタンを押します。
    スクリーンショット 2021-12-01 9.42.40.png

  • アカウント名に適当な名前を入力して、Verifyボタンを押します。

  • アンケートページが開きます。
    スクリーンショット 2021-12-01 9.47.12.png

  • **Which Twilio product are you here to use?**のプルダウンリストから「Flex」を選択します。

  • **What do you plan to build with Twilio?**のプルダウンリストから「Contact Center」を選択します。

  • **How do you want to build with Twilio?**は、「With no code at all」を選択します。

  • **What is your goal today?**のプルダウンリストから「Build something myself」を選択します。

  • Get Started with Twilioボタンを押します。

  • 以下のような画面に遷移して、自動的にFlexのインストールが始まります。
    スクリーンショット 2021-12-01 13.26.12.png

👋 【参考】
もし以下のようなメッセージが表示された場合は、次の手順を実施してください。
スクリーンショット 2021-12-01 13.21.26.png

  • Back to Consoleボタンを押してください。

  • 無料トライアルの開始画面が表示されます。
    スクリーンショット 2021-12-01 13.46.58.png

  • SMSが受信できる電話番号を入力します。
    無料トライアルを開始します (1).png

  • SMSで検証コードが送られてくるので、それを入力します。

  • Submitボタンを押します。

  • 先程のアンケート画面が再度表示されますので、先程と同じように入力してGet Started with Twilioボタンを押します。

この時点で、Flexプロジェクトは作成されているはずですので、一旦ブラウザを一度閉じて、再度ログインしなおしてください。

スクリーンショット 2021-12-01 13.52.43.png

以上で、基本的なセットアップは終了です。

セットアップ後の作業

最新版へのアップデート

インストール直後は最新版になっているはずですが、それ以外にもデータの整合性の確認などを行うために、システムチェックアップを行っておきましょう。

  • 左側のスライドメニューにFlexが追加されているはずなので、そちらを選択します。

スクリーンショット 2021-12-01 14.04.17.png

  • 左側のメニューからSystem Checkupを選択します。
  • 以下の画面が表示されれば、最新版のFlexがセットアップされています。
    スクリーンショット 2021-12-01 14.05.39.png

セットアップ直後の各種設定の確認

ではさっそく、セットアップ直後の状態を確認していきましょう。

Phone Numbers

まずは電話番号を管理するPhone Numbersを確認したいと思います。

  • 左側のスライドメニューからPhone Numbersを選択します。
    スクリーンショット 2021-12-02 5.33.58.png

すでにUS番号が１つ購入されていることがわかります（この番号は最後に着信テストをする際に使いますので、どこかに控えておいてください）。
さらに、この番号の右側をみると、Voiceの設定にStudio Workflowの「Voice IVR」が設定されていることもわかります。これによって、前回の記事でもご紹介したように、この番号に着信がくるとTwilio Studioの「Voice IVR」という名前がついたフローにつながるようになっています。

Twilio Studio

つぎに、IVRを実装するTwilio Studioの状態を確認しましょう。

  • 左側のスライドメニューからStudioを選択します。
    スクリーンショット 2021-12-02 6.29.20.png

すでに３つのフローができているのがわかります。
「Webchat Flow」は、チャットを受けたときのフロー、「Messaging Flow」は、SMSを受けたときのフロー、そして「Voice IVR」が、先程の電話番号に紐付いた音声着信用のフローです。

では、「Voice IVR」をクリックして詳細を確認しましょう。

スクリーンショット 2021-12-02 6.56.55.png

中身は非常にシンプルで、Incoming CallからSendCallToAgentに線がつながっています。
これは、音声着信が来た場合に、TaskRouterに接続することを意味しています。SendCallToAgentの設定画面内では、WORKFLOWに「Assign to Anyone」が選択されています。これによって、TaskRouterのAssign to Anyoneという名前のワークフローにコールが渡されることになります。

TaskRouter

では次に、TaskRouterの設定を見ていきましょう。

  • 左側のスライドメニューからTaskRouterを選択します。
  • さらに、Workspacesサブメニューを選択します。
    スクリーンショット 2021-12-02 7.01.40.png

すでに、「Flex Task Assignment」というワークスペースができていることがわかります。ワークスペースというのは、TaskRouterの中の一番大きな作業領域で、この中にタスクキューやワークフローやワーカーなどを定義していくことになります。
では、「Flex Task Assignment」をクリックして中身を確認していきましょう。

  • サブメニューのWorkersを選択します。
    スクリーンショット 2021-12-02 7.16.39.png

実はこの時点では、ワーカーと呼ばれるオペレーターは一人も登録されていません。最初にTwilio Flexを起動したときに、自分自身が最初のワーカーとして自動的に登録されるようになっています。
では、早速Twilio Flexを起動してみましょう。

  • 左側のスライドメニューからFlexを選択します。
    スクリーンショット 2021-12-02 7.17.40.png

  • Launch Flexボタンを押します。

  • 別ウィンドウが開いて、しばらくすると以下のような画面が表示されます。
    スクリーンショット 2021-12-02 7.18.05.png

右上を確認すると、自分自身の名前が表示され、状態がAvailableになっていることがわかります。
これで自分自身がワーカーとして登録されました。

  • 右上の自分自身のアイコン付近をクリックして、プルダウンメニューから「Offline」を選択します。
    スクリーンショット 2021-12-02 7.24.18.png

状態をオフラインにすることで、Flexの課金が止まります。
初回の記事にも書きましたが、FlexではワーカーがAvailableになっている累計時間でカウントされるので、利用していないときは適宜オフラインにしておくようにしましょう。
なお、この時点でFlexの起動ウィンドウは閉じてしまってもかまいません。

では、先程中断しておいたTaskRouterの設定確認に戻りましょう。

  • 左側のスライドメニューからTaskRouterを選択します。
  • Workspacesメニューから、「Flex Task Assignment」を選択します。
  • Workersメニューを選択します。
    スクリーンショット 2021-12-02 7.30.25.png

先程は登録されていなかったワーカーに、自分自身が登録されていることを確認します。ちなみに名前は、ログインID（メールアドレス）の@より前の部分が自動的に選択されるようになっています。
では、登録された自分自身の情報を見てみましょう。

  • 自分の名前をクリックします。
    スクリーンショット 2021-12-02 7.33.31.png

ATTRIBUTES欄にかかれている部分が、自分自身のスキル属性を表しています。
ここで確認しておく必要があるのが、contact_uriとrolesの値です。
contact_uriは、実際に着信があった場合にどのように通知するかを指定します。ここでは、「client:自分の名前」と指定がされています。また、rolesには、「admin」が指定されています。これは自分自身が管理者であることを意味します。
自分以外のワーカーを登録する方法は別記事にします。

この画面の下の方に、Task Channelsの指定も見えます。これは、このワーカーがどのチャネルに対応が可能なのかと、対応チャネルの同時応答数が数字で指定されています。初期設定では、Voiceは同時に１、Chatは同時に10応答までできるようになっています。

では次に、Task Queuesの設定をみてみましょう。

  • Task Queuesメニューを選択します。
  • すでに「Everyone」というキューができているはずなので、こちらをクリックします。
    スクリーンショット 2021-12-02 7.44.55.png

このキューの画面では、Matching Workersに自分自身が表示されていることを確認します。これは、QUEUE EXPRESSIONに「1==1」と指定がされているため、すべてのワーカーをマッチさせているからです。「1==1」という指定方法はTaskRouterではよく使われる条件式で、trueを意味します。

では次に、Workflowsを見てみましょう。

  • Workflowsメニューを選択します。
    スクリーンショット 2021-12-02 7.54.54.png

先程、Studioの中で指定していた「Assign to Anyone」という名前のワークフローができています。

  • 「Assign to Anyone」を選択します。
    スクリーンショット 2021-12-02 7.56.45.png

初期状態のワークフローにはフィルターが設定されていないため、DEFAULT TASK QUEUEに指定されている「Everyone」というTaskQueueにコールが引き渡されるようになっています。

これで一連の流れに関する設定がすべて確認できました。
前回の記事でも紹介したフローを再掲しておきます。

Untitled.png

着信のテスト

それでは、この状態でまずは一度着信のテストをしてみたいと思います。

Flexの起動

  • 左側のスライドメニューからFlexを選択します。
  • Launch Flexボタンを押します。
    スクリーンショット 2021-12-02 8.06.56.png

先ほどとはちょっと違う画面が別ウィンドウで起動します。これは管理者専用の画面です。

  • 左側に並んでいるアイコンの上から２つ目を選択します。
    スクリーンショット 2021-12-02 8.08.04.png

これがワーカーが普段応対に利用する画面です。初期セットアップにより、ワーカーに対して４つのタスクが割り当てられています。

  • ALL TASKSにある、１〜４のボックスを一つずつクリックしていきます。

  • それぞれ画面が変わりますので、それぞれの画面の右上に表示されているCOMPLETEボタンを押していってください。
    スクリーンショット 2021-12-02 8.11.05.png

  • すべてのタスクを処理すると、以下のような画面になります。
    スクリーンショット 2021-12-02 8.13.07.png

  • 自分のアイコンの下にあるステータスが「Available」出ない場合は、「Available」に切り替えます。

では早速電話をかけてみましょう。先程Phone Numbersの説明で控えておいた、自動的に購入されていたUS番号に発信します。US番号への発信になるため、先頭に「＋１」をつけることと、通話料が少し高くなる点に注意してください。
実際に発信をすると最初に、「Twilioをご利用いただきありがとうございます。アップグレードいただくとこのメッセージは削除されます。いずれかのダイヤルキーを押してください。」とメッセージが流れるので、何か数字キーを入力してください。

電話機側は、一瞬呼び出し音がなった後音楽が流れてきます。これは、コールがTaskRouterに渡り、キューに入ったことを意味します。
Flex側は、以下のようにワーカーの呼び出し状態になります。
スクリーンショット 2021-12-02 8.21.18.png

この状態でタスクは予約中（Reservation）になります。
緑色のアイコンを押すと応答でき、以下のような応対中画面に遷移します。

スクリーンショット 2021-12-02 8.21.42.png

この状態で、ワーカー側のブラウザと発信した電話機で通話が確立しています。画面には発信してきた電話番号が表示されています。
通話を切断するには、赤い通話終了アイコンを押すか、HANG UPボタンを押します。通話が終了すると以下のような画面になります。

スクリーンショット 2021-12-02 8.21.58.png

これは後処理（Wrap up）画面と呼ばれ、通常この時間をつかってワーカーは今の通話に関するレポートを記載したりします。この時点では、新しい着信は受けられません。
後処理が終了したら、COMPLETEボタンを押します。

スクリーンショット 2021-12-02 8.29.50.png

以上で、着信のテストは完了です。
ワーカーのステータスを「Offline」にしておくのを忘れないようにしましょう。
このように、セットアップした状態でも簡単な着信のテストはできることが確認できました。これ以外にも、チャットの応対やSMSの応対もできるのですが、今回は割愛します。

プロジェクトのアップグレード

冒頭のところで説明しましたが、Flexプロジェクトをアップグレードすると色々とメリットがあります。とくに5,000時間分の無料枠はとても重要になりますので、ぜひ以下の手順でアップグレードをしてみてください。

  • Twilio管理コンソールを開きます。
    スクリーンショット 2021-12-02 8.41.41.png

  • 画面上部にあるUpgrade Projectボタンを押します。
    スクリーンショット 2021-12-02 8.43.54.png

  • Countryには、「Japan」を入力します（JPと入れると検索されます）

  • Address 1以降に、ご自分の住所をいれます（法人の場合は会社の住所）。なお、日本語でもOKです。

  • Address 1 例：1-1-1

  • Address 2 例：〇〇ビル10F

  • City 例：千代田区大手町

  • Prefecture 例：東京都

  • Postal code 例：111-1111

  • Continueボタンを押します。
    スクリーンショット 2021-12-02 8.51.13.png

  • Tax Informationでは、「No, I cannot provide a tax number」を選択します。

  • Continueボタンを押します。
    スクリーンショット 2021-12-02 8.53.33.png

  • Amountに「2000」と入力します。初期のポイント購入額で、2,000円以上を指定する必要があります。

  • Flex fair usage policyのチェックボックスをチェックします。これはFlexを利用するときの利用規約になります。この利用規約の中には、無料枠が適用される条件などが含まれますので、一度確認しておくとよいでしょう。

  • Continueボタンを押します。
    スクリーンショット 2021-12-02 8.59.35.png

決済情報の入力画面に遷移します。現在利用できる決済方法は、クレジットカードかPayPalのいずれかです。
なお、クレジットカードについてはVISAかMasterCardのみの対応となりますので、それ以外のブランドを使いたい場合は、PayPalをご利用ください。

  • カード情報、もしくはPayPal情報を登録します。
  • Confirm ¥2,000 paymentボタンを押します。
  • 以下の画面が表示されるまでしばらく待ちます。
    スクリーンショット 2021-12-02 9.04.36.png

以上でアップグレードが完了しましたので、5,000時間の無料枠が適用されました。
残りの無料枠を確認するには、以下の手順を行います。

  • 左側のスライドメニューからFlexを選択します。
  • Pricingメニューを選択します。
    スクリーンショット 2021-12-02 9.06.09.png

現在のプラン（Starter Pricing）が選択されていることと、現在の残り時間（赤枠部分）が確認できます。なお、以前の記事でも触れましたが、無料枠には以下の項目は含まれません。

  • 電話番号月額利用料（US番号も含む）
  • 電話発着信料
  • SMS受発信料

無料枠に含まれるプロダクトについては、Flexの利用規約に記載があります。

まとめ

今回の記事では、Twilio Flexのセットアップ方法と、セットアップによってどのような設定がされているのか、さらに初期状態での着信テストを確認しました。
次回以降の記事では、それぞれの部品をさらに詳細に開設することで、具体的なカスタマイズのイメージを持ってもらえるようにしたいと思います。

★次の記事
Twilio Flexの始め方（国内番号購入編）

Twilio（トゥイリオ）とは

https://cloudapi.kddi-web.com
Twilio は音声通話、メッセージング（SMS /チャット）、ビデオなどの 様々なコミュニケーション手段をアプリケーションやビジネスへ容易に組み込むことのできるクラウド API サービスです。初期費用不要な従量課金制で、各種開発言語に対応しているため、多くのハッカソンイベントやスタートアップなどにも、ご利用いただいております。

自己紹介 　
高橋克己（Katsumi Takahashi） 自称「赤い芸人」
グローバル・インターネット・ジャパン株式会社　代表取締役
株式会社KDDIウェブコミュニケーションズ　Twilio事業部エバンジェリスト

2001年より大手通信事業者の法人サービスの教育に携わり、企業における電話のしくみや重要性を研究。2016年よりTwilio事業部にジョインし、Twilioを使ったスマートコミュニケーションの普及活動を精力的に行っている。
2015 Hall of Doers
2019 Twilio Champions
3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1