5分で完了！Twilio Flexのセットアップ

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

# はじめに

<font color='red'>2021/12/04 Flexの最新セットアップ方法を以下に作成し直しました。</font>
[Twilio Flexの始め方（セットアップ編）](https://qiita.com/mobilebiz/items/d06a29214b437339d226)

この記事は、[Twilio Advent Calendar 2018](https://qiita.com/advent-calendar/2018/twilio) 12月14日の記事です。
Twilioについては、[こちら](https://twilio.kddi-web.com/)を御覧ください。

<font color='red'>2020/4/27 セットアップ手順が変更になっていたので対応しました！</font>

# この記事でお伝えしたいこと

2018年10月、[Twilio Flex](https://jp.twilio.com/flex)がGA（正式リリース）になりましたので、Flexの概要と実際のセットアップ方法についてお伝えします。

# Twilio Flexについて

Twilioは2008年のサービスローンチから数えて、今年で10周年を迎えました。
サービス開始当初からコミュニケーションAPIを提供する企業として、現在に至るまで、多くの皆様の業務システムの裏方としてご利用いただいております。
当初はSMSとVoiceのAPIのみの提供でしたが、その後数多くの機能をリリースし、現在はコミュニケーションに関するほぼ全ての機能をAPIで提供できるようになりました。
一方で、実際にTwilioをご利用頂いている皆様は、多くの場合、APIを求めているわけではありません。例えばコンタクトセンターを運営している企業では、APIが欲しいわけではなく、お客様とのエンゲージメントをいかに最大化するかを求めています。
そこで、より利用者の方々が欲しいものを、より簡単に提供する方法を模索した結果生まれたのが、「Twilio Flex」です。

## Flexの特長

Twilio Flexは、以下の特長をもったコンタクトセンタープラットフォームです。

#### 特長1. セットアップが簡単

Twilio Flexのインストールは、わずか数クリックで完了します。時間にすると、約2分で完了します。必要最低限の設定は、インストール時に自動的にセットアップされるので、セットアップが完了すると同時に、最低限のコンタクトセンターシステムが構築されることになります。

#### 特長2. フルカスタマイズに対応

セットアップが簡単だからといって、決められたことだけができるシステムでは多くのお客様の満足を得ることはできません。企業にとってお客様とのコンタクトポイントは千差万別であり、多くの場合、それぞれの企業のポリシーやお客様との関係性、ビジネスフローにフィットしたシステムが望まれます。
Twilioはもともとすべての機能をAPIで提供しているので、Twilio Flexでは制限のないフルカスタマイズに対応しています。例えば、オペレータが普段目にするUIはもちろん、コールフロー、スキルベースのタスクルーティングなど、今までTwilioが提供してきた機能をプログラムを使ってカスタマイズすることが可能です。

#### 特長3. スケーラビリティ

Twilio Flexは、わずか1席から最大50,000席まで対応することができます。従来のコンタクトセンターでは、電話機の設置や回線の準備など、初期の工事に工数やコストがかかりますが、Twilio Flexは、インターネット回線とブラウザだけあれば簡単に設置することができます。増席だけでなく、たとえば閑散期にはシュリンクすることもできます。
もちろん費用は従量課金ですので、季節変動の激しいコンタクトセンターや、スタートアップなど、スケールを重視する企業に大変向いています。

#### 特長4. グローバルでの提供

Twilioはすでに、世界100カ国以上の電話番号を扱うことができ、架電できる国も180カ国を超えています。このようにグローバルで展開できるプラットフォーマーは他にはありません。また、特定のキャリアに依存することなく、Twilioを利用するだけで世界中で電話を使った音声通話が提供されるため、グローバルに展開する企業のコンタクトセンターでも同じシステムで運用することができます。

#### 特長5. オムニチャネル対応

お客様とのコンタクトポイントは時代とともに変化していきます。最近は音声による問い合わせだけでなく、チャットやLINEといったメッセージでの対応が求められることも少なくありません。
Twilio Flexでは現在、SMS、WebChat、LINE、Facebookメッセンジャー、Whatsappに対応しており、これらのチャネルからアクセスしてきたユーザに対しても、音声通話と同じインターフェースを使って応対ができます。

#### 特長6. プラグインによる機能拡張

Twilio Flexは、機能を拡張する際に「プラグイン」を利用することができます。例えば音声でクレジットカード決済を行うPayプラグイン、電話番号認証を行うAuthyプラグインなど、標準ではサポートされていない機能を簡単に、お客様の利用したいタイミングで導入することができます。
プラグインは自作することもできますし、マーケットプレイスを通じて入手することもできます。

## Flexのセットアップ

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

#### Twilioアカウント

トライアルアカウントで構いません。もしお持ちでない方は、以下の動画参考にアカウントを取得してください。
[アカウントの作成方法](https://youtu.be/rNiaLjnhlB4)
すでにアップグレード済みのアカウントをお持ちの方も、Twilio Flexは新しいプロジェクト（トライアルアカウントになります）としてしかインストールができませんので、予めご了承ください。

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

Twilio Flexは、インストール時にUS番号を購入してしまうため、国内でご利用頂く場合は別途050番号を購入しなくてはなりません。トライアルアカウントでは番号が一つしか買えないため、050番号の購入にはFlexをインストールしたプロジェクトをアップグレードしていただく必要がございます。

### 始めましょう

- Twilio管理コンソールにログインします。
- [Flexメニューの概要ページ](https://jp.twilio.com/console/flex/overview)に移動します。
![スクリーンショット 2020-04-27 13.07.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/5646c3bd-6783-1d98-8d2d-d627ecc48977.png)

- **Create My Flex Project**ボタンを押します。
- **プロジェクト名**に適当な名前を入力して、**確認**ボタンを押します。
![スクリーンショット 2018-12-11 18.01.06.png](https://qiita-image-store.s3.amazonaws.com/0/86046/07d54993-7f4e-356b-7123-eab6712ad2a8.png)

- **無料トライアルを開始します**ページが表示されます。
- **電話番号を検証します**の番号に、ご自分の携帯電話の番号（先頭の0は除いてください）を入力して、**確認**ボタンを押します。
![スクリーンショット 2020-04-27 13.11.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/68277204-1753-1fea-965c-17a0c56b1804.png)

- 入力した携帯電話にSMSが届きますので、そこに表示されている認証コードを入力して、最後に**Submit**ボタンを押します。
![スクリーンショット 2020-04-27 14.59.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/a886d04f-0d1b-1258-24c8-d5d6ed13e08a.png)

- その後、アンケートがいくつか表示されますので、適当に答えていくとセットアップが自動で開始します。
- Fleｘが自動的に起動して、セットアップが完了します。もしFlexの起動がエラーになった場合は、ブラウザを一度閉じて、再度ログインしてください。

![スクリーンショット 2020-04-27 15.04.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/f9936839-774f-19db-9a48-64a31987fabf.png)


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

### セットアップ後の作業

#### 最新版へのアップデート

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

- Twilio管理コンソールにログインします。
- 左側のスライドメニューに**Flex**が追加されているはずなので、そちらを選択します。
![スクリーンショット 2018-12-12 15.49.46.png](https://qiita-image-store.s3.amazonaws.com/0/86046/b9905903-3882-38b2-80b0-f99e150575ae.png)

- **Check My System**ボタンを押して、Flexを最新状態にします。
- 以下の画面が表示されれば、最新版のFlexがセットアップされていることがわかります。
![スクリーンショット 2018-12-12 15.50.53.png](https://qiita-image-store.s3.amazonaws.com/0/86046/14c69be8-950c-28da-aa7e-8b1436a4e1ca.png)

#### Studioの設定

インストール直後には、Studio内の設定ができていないところがあるので（多分バグだと思われます）、そちらを修正していきます。

- 管理コンソールのスライドメニューから**Studio**を選択します。
- すでに3つのフローが作られていることが確認できます。
<img width="1186" alt="スクリーンショット 2018-12-13 09.31.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/59be2b20-ec08-4730-b5b4-cbea37fdce9d.png">

- この中から、**Webchat Flow**を選択します。
- フローエディタが開くので、**SendMessageTo...**というウィジェットを選択すると、右側にプロパティが表示されます。
- **CHANNEL**というリストボックスから「Programmable Chat」を選択します。
<img width="678" alt="スクリーンショット 2018-12-13 09.32.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/a602820c-35d2-5c71-f176-42addb3319f0.png">

- **Save**ボタンを押します。
- 画面上部にある**Publish**ボタンを押します。これを忘れると反映されません。
- 確認ダイアログが表示されるので、**Publish**を押します。
<img width="601" alt="スクリーンショット 2018-12-13 09.35.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/595292ee-325a-d33a-6b24-e4e3b6c2bf12.png">

- Revisionの表示が緑色でハイライトすればパブリッシュ成功です。**\< Back**メニューをクリックして、フローの一覧画面に戻ります。
- 続いて、**Messaging Flow**を選択します。
- フローエディタが開くので、**SendMessageTo...**というウィジェットを選択すると、右側にプロパティが表示されます。
- **CHANNEL**というリストボックスから、今度は「SMS」を選択します。
<img width="682" alt="スクリーンショット 2018-12-13 09.49.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/8dac9e79-8e0d-d6ee-5573-3656d3890926.png">

- **Save**ボタンを押したら、先ほどと同じように忘れずにパブリッシュをしておいてください。

#### アカウントのアップグレード

ここからは、アップグレードされているアカウントでないと実行ができません。

- 管理コンソールの右上にあるオレンジ色の**UPGRADE**をクリックして、アカウントをアップグレードしてください。
<img width="443" alt="スクリーンショット 2018-12-13 10.33.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/1bc06499-9617-96a6-01ad-403832f9f7aa.png">

- アップグレードの際に、Twilio Flexの利用規約への同意が必要になりますので、そちらのチェックも忘れないようにしてください。
<img width="855" alt="スクリーンショット 2018-12-13 10.39.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/f32c665c-d518-efc4-a328-3d9a68b6a8ff.png">

アップグレードの方法については、[こちらの動画](https://youtu.be/MteO48Vudhg)も参考にしてください。

#### 050番号の購入と設定

日本で利用ができる050番号を取得して、Flexの着信ができるようにします。

- 管理コンソールの**Phone Numbers**を選択し、さらにその中の**番号を購入**を選択します。
<img width="844" alt="スクリーンショット 2018-12-13 11.07.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/78488886-4c75-b0f2-86ea-cb0fc2e69e34.png">

- **COUNTRY**に「Japan(+81)」が選択されていることを確認してから、**検索**ボタンを押します。
- 番号の一覧が表示されるので、**TYPE**が「ローカル」のもののいずれかの**購入**ボタンを押します。
- 購入の確認ダイアログが表示されるので、**この番号を購入する**ボタンを押します。
- Congratulationsダイアログが表示されたら、**番号を設定する**ボタンを押します。
- **通話着信時**のプルダウンから「Studio Flow」を選択し、さらにその右側のリストボックスから「Voice IVR」を選択します。
![Flex_着信番号の設定.png](https://qiita-image-store.s3.amazonaws.com/0/86046/ae7637d7-2efa-d381-58e8-db3b47ebdba3.png)

- **保存**ボタンを押して、設定を保存します。

購入した050番号（+8150から始まる番号）は、このあとのテストで使用しますので、メモ帳などに控えておいてください。

### 着信テスト

さて、いよいよ着信のテストをしたいと思います。マイクとスピーカーが使える状態のChromeブラウザでの利用を前提としています。

- 管理コンソールから**Flex**を選択します。
- **Launch Flex**ボタンを押して、Flex UIを起動します。
- 右上のステータスが**Idle**になっていることを確認します。もしなっていない場合は、プルダウンしてIdleに切り替えてください。
<img width="253" alt="スクリーンショット 2018-12-13 11.49.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/30186e0a-6a7f-c7b9-e34a-135de90068ae.png">

- 先程取得した050番号に電話をかけてみます。
- Flex側に着信を知らせるインジケーターが表示されるので、緑色の応答ボタンを押します。
![Flex_Incoming.png](https://qiita-image-store.s3.amazonaws.com/0/86046/bf61e281-8682-145a-1a65-f25565071037.png)

- 通話が正常にできることを確認します。

**注意**
現在の仕様では、Flex側から電話を切断しても、相手側は切断されません。相手から切断した場合は、Flex側も切断されます。

# まとめ

日本で利用するには、いくつか設定などを変えていかないといけませんが、わずか数分でコンタクトセンターがセットアップできるところが今回の記事の一番お伝えしたいところです。
セットアップの過程で電話番号の購入（US番号ですが）を始め、Studioフロー、タスクルーター、Programmable Chat、Proxy、Assetsなど、色々な設定が自動的に行われています。Twilioにある程度詳しい方であれば、どのようなものがインストールされたのかを見てみるのも面白いかと思います。