Twilio Flexを再度学習したまとめ

このエントリーをはてなブックマークに追加

こんにちは、@24guchiaです。

題名の通り、Twilio Flexについて再度学習したので、
学びなどのまとめです。

なんで再度学習をしたか？

Twilio Flexを実務でできる人が少ない(観測範囲内)からです。
今、多分こんな感じです。

Twilio Flexでコンタクトセンター立ち上げたい会社 >>> Twilioできる人 >>>>>>> Twilio Flexできる人（いるのか？）

僕はTwilioチョットデキルと思うのですが、
Flexは本当によくわかってないので、
市場価値を上げるために学習をしました。
1ヶ月ニートしてるのも、Flexの勉強するためと言っても過言ではない。

Flexについて改めて

以前、こんな記事を書きました。

Twilio Flexは何がすばらしいのか

書いている内容のサマリーとしては下記です。

  • CPaaSという概念の提唱がよい
  • コンタクトセンターのUIのパッケージング
  • Twilioのビジョンを体現したプロダクト

改めて読み直しても、今と変わらず、
だいたい言いたいことはこの記事に書いてある通りです。
ただ、これはコンセプトに関してしか書いてない。

コンセプトの理解はリリースから1年以上経ったため、
おそらく導入検討している人は理解していると思うので、
改めて書き直すことはないです。

Flexチュートリアルをやってみた

技術的な話をまとめましたが、
長くなったので別記事に分けました。
エンジニア、特にフロントエンド寄りのデザイナーに
読んでいただきたい内容になっています。

Twilio Flexの技術的な話

技術者以外の方でもとりあえず概要だけでも・・・
と言った方向けに概要をまとめました。

  • Flexとは何か？
  • Flexチュートリアルをやる
    • SMS・チャットのボット設定
    • IVRの設定
    • 受電ルーティング(ACD)
  • Reactを使って、Flexの機能改修について
    • CRMの連携
    • ローカル開発と本番環境へのデプロイ
    • ReactコンポーネントとFlexの連携

Flexチュートリアルやったけど、Flexの話が少なすぎない？

お気づきになりましたか。

最初にも書きましたが、
FlexはいままでのTwilioのプロダクトをパッケージにして、
UIをReactでかっこよくしているフレームワークでしかありません。

そのため、かんたんにコンタクトセンターを立ち上げることはできますが、
その後の運用で何をどうするかや、
各プロダクトの使い方は学ぶ必要があります。

Flexで利用されているTwilioプロダクト

各プロダクトって具体的になんですか？っていう方向けに、
一旦Flexで利用されているTwilioプロダクトを
分かる範囲で箇条書きしました。

  • Flex(React)
  • Redux
  • Voice
  • Conference
  • SMS
  • Chat
  • Sync
  • TaskRouter
  • Studio
  • Assets

これら技術に立脚したプロダクトがFlexです。

FlexのフロントエンドはReactなので、
Reactについても知っておく必要があるでしょう。
さらにTwilioはWebRTCを利用しているので、
WebRTCでのデバッグや各ブラウザでの挙動確認が必要で、
コンタクトセンターを効率的に運用するノウハウも必要です。
これらを一人で押さえるのは無理なので、
ぜひチームで取り組んでください。

Flexが立ち上がって、それっぽく動いたからと言って、
やった！これで勝つる！！
って言ってすぐ導入しないでくださいね。

Flexがない状態で、
上記Twilioプロダクトを使い倒してコンタクトセンターを立ち上げた身としては、
これでもかなり楽になったと断言できます。

Flex導入のメリット

モダンなコンタクトセンターのデザインがすでに作られている

Flexのデモ画像をご覧ください。

これは初期設定のまま、インストールしたFlexです。
かなりモダンだと感じられると思います。

コンタクトセンターについて知らないチームが
これと同レベルのデザインを作るとなった場合、
そもそもコンタクトセンターにはどんな機能があるかを調べ、
デザインしていく必要があります。
そのようなフェーズを経ずに、
一般的なコンタクトセンターの機能をまるごと包括し、
デザインが済んでいるのはメリットです。

モダンなコンタクトセンターの機能を知ることができる

Flexは覚えることは多いですが、
コンタクトセンターの機能がまとまっているので、
何を知り、仕様をどう落とし込むべきかを
考えるいい材料になります。

1からコンタクトセンターについて学ぶ必要がないのは、
本当に楽だと思います。
Flex自体がコンタクトセンターに関するベースの
知識になるので、Flex自体を導入するしないに関わらず、
Twilio自体の導入前に一度、触ってみることをおすすめします。

優秀な人材がすぐにコンタクトセンターを使えるようになる

これはFlexがデファクトスタンダードになったときの話ですが、
Flexが津々浦々の企業で導入されるとします。
そうなった際に、Flexのコンタクトセンターで成績を上げた
優秀な人材が入社してきた際、
教育にかかる期間が大幅に短縮されます。
電話やチャットの機能はすべての企業のFlexでほぼ同機能になるため、
改めて教育し直す必要がなくなり、
その企業独自のビジネスドメインについてだけ、
教育すれば良くなるので、キャッチアップがすばやくなります。

Flex課題に感じるところ

チュートリアルやっただけですが、
僕が課題として感じた点をまとめました。

Twilioアカウントがあっても、別プロジェクト扱い

別プロジェクトだと、すでにアカウント開設して持っている電話番号や
Twilioポイントが新規作成するFlexプロジェクトで使えない点が困りそう。
特に既存のTwilioプロジェクト持っている会社が、
Flexに乗り換えようと思っても、移行がしづらいのでは？
相談すると、この辺は対応してくれるのかな？

SMSの入力欄で日本語入力ができない → できた

2019年10月22日 18:10 追記
日本語入力のバグらしきものは修正予定、
プラグインで対応も可能です。

こんにちはと入力しようとすると、
下記画像のようになりました。
入力途中で勝手に確定してしまうため、日本での導入は難しそうですね。

ｋおｎｎｎいｔいｈあ

ちなみにコピペしたら、送ることはできました。
そのため、これはFlexのUIのバグでしょうね。

 

Chromeの開発者ツールで見たところ、
入力イベント（KeydownかKeyupあたりか？）に
何かしらのイベントがバインディングされており、
キー入力するたびにtextareaにvalueを設定するような挙動をしているため、
入力中に入力値が確定されるようです。
なぜこのような挙動なのか・・・

追記：このバグは修正予定・現時点の暫定対応可能

この記事上げたら赤い人から即レスが来ました。
https://www.facebook.com/eiichi.nishiguchi/posts/2319676841477040?comment_id=2319721564805901

次回アップデートで改修予定なので、
一旦、この件はなしで導入検討して良さそうです。
また、暫定対応で下記コードを書き、
ローカル環境で試したところ、無事日本語入力ができました。

flex.MessageInput.defaultProps.useLocalState = true;

さらに追記：useLocalStateは何者か？

直ったけど、このプロパティをtrueにする影響は
何なんだろうと思って確認したところ、
ドキュメントURLを教えてもらいました。
https://media.twiliocdn.com/flex/firstlook-docs/MessageInput.html#.MessageInputProps__anchor

どうやって検索すればここにたどり着くんだろう・・・

https://www.twilio.com/docs/flex/flex-webchat-basic-configuration#messageinput

と思ったら、いつものドキュメントでも同じ内容の記載を見つけました。
ただ、このプロパティが日本語入力の不具合を直すとは
なかなか発想いたらなさそうだなあ。

ひとまず、例のuseLocalStateが何者かは記載ありました。
trueにすることで、Redux stateに置く代わりに、
ローカルコンポーネントに入力値を保持すると言ったところでしょうか。
Defaultが記載ありませんが、挙動的にfalseがデフォルトのようです。

ReduxはReactがUIの状態を管理するための、フレームワークです。
詳しくは僕も知らないのですが、
これでFlexを実装するためにはReact Reduxの知識も
必要になりそうですね。敷居が高い・・・

SetInputTextアクションで入力値を使いたい場合、
falseにするのがよいとのことです。
SetInputTextアクションが何者かは、
また別の見慣れた下記ドキュメントに記載あります。
https://www.twilio.com/docs/flex/actions-framework#chat

読み込んでみましたが、
SetInputTextアクションは何をするためのアクションなのか
いまいちわからずです。
入力中に入力値をイベントかなんかで取得するんだろうか。

とりあえず、trueにしても影響は大きくなさそうなので、
一旦、trueにしてしまってよさそうです。

Studioダイアログの整列機能がほしい

画像をご覧ください。

矢印がきれいな一直線にならないのがめっちゃ気になるｗ
整列機能がほしいですね。

Studioの操作がTwilio内でしかできない

Flexの記事かと思いきや、ほとんどStudioの話で終始していました。
Flexにおいて、Studioは重要な位置にあります。

そんなStudioのいいところはGUIで
誰でも(特に非エンジニアを指す)簡単に操作ができることだと思っていますが、
Studioを編集するために、Twilio管理画面にログインする必要があります。
しかし、Twilio管理画面は
電話番号を買うのはもちろん、保有している電話番号をリリースしたり、
Studioのフローを消したりなど、
かなりクリティカルな操作が可能です。
悪意を持って操作する人はいないと信じたいですが、
うっかり電話番号をリリースしちゃいました！や、
うっかりFlexで使ってるStudioのフローを壊しちゃいました！
みたいなことは起こり得ないとはいえません。

そのため、結局はTwilioとコンタクトセンターのリテラシーが
高くないとStudioの操作を一任するということは難しく、
エンジニアの負荷を軽減するにはまだまだ発展途上という認識です。
Studioだけ操作可能な権限設定を可能にしたり、
差分をGitHubのようにレビュー後、
Publishできるような仕組みがあるなどすれば、
もう少し安心できますね。

まとめ

Flexについて一通り学びました。
現時点ですぐに普及するかはなんとも言えませんが、
完成度高くまとまっていると感じています。

導入検討にあたり、Flexの癖や何かしら問題など起きると思うので、
それらとどう付き合っていくか、
どこまでリスクを取って、どこまでFlexの将来性を信じるか、
複合的な視点で検討を行いましょう。

このエントリーをはてなブックマークに追加