Flexの技術的な話Tweetこんにちは、@24guchiaです。記事をまとめましたが、本文が長くなったため、記事を分割しました。そのため、エンジニア、(特にフロントエンドエンジニア寄りの)デザイナー以外だとあまり得るものがないと思いますので、予めご了承ください。書いてある内容は執筆時点(2019年10月21日)の結果です。~CRM連携デモローカルでの開発とAssetsを使った本番環境への適用ReactコンポーネントをUIに追加する改修案ドキュメントのコードがバグってるっぽいまとめFlexとは何か?FlexとはTwilioの各プロダクトをひとまとめのパッケージにして、UIをReactで提供し、Flexという名前をつけたプロダクトです。UIをReactう〜ん、Twilioの各プロダクトは多分だいたい分かるけど、Reactはわからない。Reactのチュートリアルをやるhttps://github.com/enyuka/react_tutorialReactのことはよく分かってなかったので、Reactチュートリアルをやりました。チュートリアル末に機能改修案が書いてあるので、それもこなしています。機能改修をどうやって実現したかがわかりやすいようにしてあります。Reactを完全に理解したので、Flexのチュートリアルに戻りましょう。エンジニア用語の「完全に理解した」「何も分からない」「チョットデキル」は「ダニング・クルーガー効果」で簡単に説明ができます。これは一種の認知バイアスで能力の低い段階では自分の能力の低さを認識できないためです(過大評価しがち)。その反面で能力が高くなると過少評価しがちです。~というわけで、Flexに戻ってきました。FlexのQuickStartをやってみます。自動対応するボットをまとめて指しています。そのようなボット全般を一旦コミュニケーションボットとしました。チュートリアルドキュメントは全編英語でお送りされますが、まあがんばって読みましょう。QuestにFlexのミッションがあり、リンクをクリックするとFlex関連のミッションをいきなりこなせるようになるのはいい取り組みですね。補足して書いてみます。新しいプロジェクトを立ち上げるとサイドメニューにFlexアイコンが表示されます。Flexというボタンを押すと、Flexが起動します。実はここからがめっちゃ大変なのを知っているとはいえ、ボタンポチポチしてるだけで、これが開くのはなかなかすてきですね。StudioとFlexの連携Studioとは、GUIベースでコミュニケーションワークフローを変更できるプロダクトです。https://twilio.kddi-web.com/function/studio/FlexとStudioの設定画面は下記URLで見れます。https://www.twilio.com/console/flex/messaging初期状態だと、下記みたいになっているはずです。名前の通り、SMSもしくはChatでメッセージが来た場合、どういう挙動をするかの設定です。TYPEにあるStudioの処理を行います。書いても分かりづらいと思いますので、スクショを交えて説明します。WebChat用のStudioは最初こんな感じになっています。何かしらのTriggerが起動すると、つながっている条件に合致した先(Transitions)のダイアログにある処理が実行されます。初期状態だと、Triggerには下記3つの条件が設定されています。APIメッセージの受信がされると、矢印でつながっているSendMessageToAgentと名前がついているダイアログの処理がされます。押すとよく見るデザインのChatが開きます。デファクトスタンダードなデザインのChatを再実装しなくていいのは便利ですね。Botがなんか言ってますが、メッセージを入れても何も起きません。Messageした後の挙動が設定されてないからです。Messageした後の挙動をStudioで設定しましょう。Flowというフローがあるはずです。それのフローを設定し、チャットボットが返信するように設定の変更をします。Messageを追加します。Bodyを適当に入れます。本番稼働をする際は名前付けは一定のルールに従って付けましょう。適当に名前をつけると、多分10個超えたあたりから後悔します。yeah.(そうだね)(チャットボットとしては最悪の返事)を入れてますが、何でもいいです。Messageを先程作ったメッセージのウィジェットに設定します。その後、Publishを行うことで、Flexのチャットボットに適用されます。適当にメッセージを送ると、Studioで設定されたメッセージが返信されます。yeah.SMSボットを設定するこれもチャットボット同様、Studioの設定を変更すればOKです。Flowというフローを変更します。変更内容はChat同様です。下記画像のように自動でSMSで返信が返ってきます。トライアルアカウントなので、SMSのメッセージにトライアルアカウントの旨が表示されています。アップグレードすることでこのメッセージは消えるようです。正式名称とのことです。https://ja.wikipedia.org/wiki/%E8%87%AA%E5%8B%95%E9%9F%B3%E5%A3%B0%E5%BF%9C%E7%AD%94%E8%A3%85%E7%BD%AE宅配便の不在票などで電話番号が書いてあり、そこに電話すると、再配達希望の方は1を、それ以外の方は2をみたいな音声が流れる例のアレです。一度は使ったことがあると思います。Flexでも簡単に設定できます。IVRという名前のStudioフローを開きましょう。IVRを作るには下記手順を踏んでください。onというウィジェットを作るSay/Playというウィジェットを作る適当に言わせたいメッセージを入れる。Flexのウィジェットを接続するこれらの手順をすべて行うと、下記画像のようになります。Publishを行い、設定を反映させます。その後、Flexが保持している電話番号に電話をしてみましょう。上記で設定したIVRが流れるはずです。1~3を押すとどうなるか、1~3以外を押すとどうなるかなど、いろいろと試してみてください。通話料金かかるので、めちゃくちゃ電話しないほうがおすすめではありますwで、このIVRって何が便利なの?押したボタンを読み上げても何にもならないですよね。押されたボタンの情報はFlexに反映されます。セールス、サポート、その他と言った割り振りをすることができます。従業員業務改善と呼ばれるものです。この受電の割り振り設定にはTwilioのTaskRouterというプロダクトが使用されています。日本国内で執筆時点(2019年10月22日)では、プロダクト環境に導入したのは多分僕だけですwTaskRouterの設定についてhttps://www.twilio.com/docs/flex/quickstart/flex-routing-skillsチュートリアルとしてはここから先に記載があります。チュートリアルを完了するにあたっても実際の挙動確認にPC2台用意する必要があるなど、なかなか手間なので流し見だけしました。(僕は業務でやってたから再度チュートリアルやる必要もない)上で書いてある通りですが、IVRでTaskをスキルベースルーティングする旨が書いてあります。~Reactチュートリアルやったのに、Reactを使わない?!と思ってましたが、このチュートリアルから使うことになります。CRM連携デモhttps://www.twilio.com/docs/flex/quickstart/getting-started-plugin上記チュートリアルドキュメントのデモではbingと連携しています。連携できませんでした。'sameorigin'.これはFlex画面右側の部分でiframeを利用して表示しているが、GoogleやYahooはiframeでの別ドメインへ埋め込みを禁止している設定のためです。禁止設定をしていない)ため、bingを利用するようです。内製CRMやSalesforce、Zohoと言ったCRMを使う場合もX-Frame-Optionsの設定について注意が必要です。いえ、このような連携ができるのは便利ですね。ローカルでの開発とAssetsを使った本番環境への適用Assetsは静的ファイルをホスティングができるTwilioのプロダクトの一つです。instanceのチュートリアルドキュメントではlocalhost:3000でbing連携を行い、その後、npmでコンパイルしたJavaScriptファイルをAssetsに置き、本番環境に適用しています。開発者はローカル環境で修正を行い、GitHubにコミット。CLIでデプロイまで行うことができますね。CLIでAssets関連を呼び出すには下記のようなコマンドを利用します。詳しく知らない方は読んでみてください。使ってみたReactコンポーネントをUIに追加するhttps://www.twilio.com/docs/flex/tutorials/adding-components-flex-ui内容としては静的なTODOリストコンポーネントをReactで作成し追加するだけなので、内容の説明は割愛。基本的にコピペでできます。用途を考えてみました。変更するというのが便利そうです。達成後のアフターフォローなどで聞くべき項目は変わります。そのため、TODOリストを変更する必要がありますが、これをコンポーネント一つで実装できます。分割により、変更に関する影響が少なくできるのはメリットになりえますね。保存するとTODOに対する完了項目を書き出すようにすれば良さそうです。人間の心情なので、定型的に作業ができるようにすることで、オペレーターの負担を軽減できると考えています。現場での対応が古いままになると言ったことは減らせられそうです。追加などを行うのは下記ドキュメントにある通りで操作可能です。https://www.twilio.com/docs/flex/components-add-replace-modifyUIとしてはモダンですし、コンタクトセンターのデファクトスタンダードを知らない人が多い中、デザインをそこまで意識しなくていいのはメリットですね。覚えることは相当多いですが、bootstrap4やUIkitと言ったブートストラップツールも覚えること多いですし、まあ許容範囲かなという所感です。pluginという項で、src/SamplePlugin.jsを置き換えるようサンプルコードが書いてありますが、そのままコピペすると動きませんでした。'./CustomTaskListComponent';ここでエラーが起きており、CustomTaskListComponentが無いエラーがでます。実際に存在しておらず、ドキュメントにも書いていないため、コメントアウトしたところ動きました。元は意味がある記述だったようです。まとめ上記をなぞるだけで、Flexのチュートリアルは完了させられます。何が便利なのかが分かると思います。改修するにも高い金額が必要でした。誰でも改修できるように進んできているのは非常に好感が持てます。覚えることがめっちゃ多いと感じると思います。実際、Flexを1から覚えるのはなかなかに大変です。業務委託といった契約形態でご協力できることもあると思いますので、DMでご相談ください。2020年1月12日こんにちは、@24guchiaです。2020年1月1日こんにちは、@24guchiaです。あけましておめでとうございます。今年もよろしくお願いします。2019年12月29日こんにちは、@24guchiaです。年の瀬ということで、今年、2019年の振り返りです。2019年12月14日こんにちは、@24guchiaです。2019の14日目です。2019年11月1日こんにちは、@24guchiaです。入社エントリーにある通り、bellFaceに入社しました。