Thursday, 2 December, 2021 UTC


Summary

Qiita Advent Calendar - Twilioを使ってコンタクトセンター(コールセンター)を作ってみよう!の3日目を担当します。
Twilio Flexは音声通話(電話)、SMS、Webチャットなど複数のチャネルからの問い合わせをブラウザから対応できるクラウドコンタクトセンターソリューションです。特別な電話回線や設備を導入する必要はありません。
スキル・属性ベースのルーティングや自動音声応答(IVR)などをノーコードで設定できる強力なソリューションですが、ユーザーインターフェース(UI)のデフォルト言語が英語であるため、非英語圏のユーザーにとっては使い勝手が良くありませんでした。Flexが提供するプラグインモデルを利用し、UIの文字列を日本語などに変更するプラグインを自前で作成されている方もいるでしょう。
今回、Twilioでコンサルティングやトレーニングを提供しているプロフェッショナルサービスチームが日本語を含んだ複数言語に切り替えることができるプラグインを開発し、GitHubで公開しました。Twilio Japanのチームメンバーも日本語文字列のレビュー・修正で貢献しています。
GitHub - twilio-professional-services / plugin-flex-localization
この記事ではplugin-flex-localizationプラグインをFlexに適用する方法について解説します。
このFlexプラグインは製品サポートの対象となるものではないため、利用については自己責任となります。質問や不具合報告、機能提案についてはGitHubからissueを直接提出してください。
前提条件
  • Node.js & npm
  • Twilioアカウント(アカウントの作成方法)
  • Twilio Flexプロジェクト(Twilio Flexハンズオン:Flexプロジェクトの作成)
  • Twilio CLI(Twilio CLIハンズオン:Twilio CLIをインストール)
  • 任意のコードエディタ
上記の前提条件を満たしていない場合はそれぞれのセットアップを行ってください。
FlexプロジェクトのAccount SidとAuth TokenをTwilio CLIに登録
Twilio CLIで利用するAccount SIDAuth TokenはTwilio Flexプロジェクトに紐づくものを使用します。前提条件で作成したTwilio Flexプロジェクトのコンソールを開きます。左上のプロジェクト名がFlex用に作成したプロジェクトであることを確認し、Account SidAuth Tokenをそれぞれ控えてください。
次にアカウント情報をCLIに登録します。以前にCLIをインストールしている場合でも、Felxプロジェクト用の認証情報を使用する必要があるため、こちらのステップを実行してください。
twilio login 
Account Sidを入力するように求められます。
You can find your Account SID and Auth Token at https://www.twilio.com/console » Your Auth Token will be used once to create an API Key for future CLI access to your Twilio Account or Subaccount, and then forgotten. ? The Account SID for your Twilio Account or Subaccount: //ここにAccount Sidを入力 
続けて、Auth Tokenの入力を求められます。画面上には入力文字が表示されません。注意してください。
? Your Twilio Auth Token for your Twilio Account or Subaccount: [hidden] //ここにAuth Tokenを入力 
最後にプロファイル名の入力を求められます。わかりやすい名前を設定します。
? Shorthand identifier for your profile: //任意のプロファイル名を入力 
入力された情報をもとにAPIキーが作成され、そのAPIキーの情報とプロファイルの保存場所が表示されます。この情報を控える必要はありません。
Created API Key SKxxxxxxxxxxxxxxxxx and stored the secret in your keychain. See: https://www.twilio.com/console/runtime/api-keys/SKxxxxxxxxxxxxxxx twilio-cli configuration saved to "/Users/xxxxxxx/.twilio-cli/config.json" Saved xxxxxxx. 
リポジトリをクローンし依存関係パッケージを追加
このプラグインはTwilio Serverless Function上で動作します。デプロイ作業が必要となるため、ターミナル、またはコマンドプロンプトを開きリポジトリをクローンします。
git clone https://github.com/twilio-professional-services/plugin-flex-localization.git 
クローンしたフォルダに移動し依存関係パッケージをインストールします。
cd plugin-flex-localization npm install 
Flex Plugin extensionとServeless Plugin extensionをインストール
このプラグインをインストールするためにはFlex Plugins CLIとServerless Toolkitをインストールしておく必要があります。まだインストールしていない場合は次のコマンドでインストールします。
Flex Plugins CLI:
twilio plugins:install @twilio-labs/plugin-flex 
Serverless Toolkit:
twilio plugins:install @twilio-labs/plugin-serverless 
Twilio Functionsのデプロイ
次にdefaultフォルダに移動し、このフォルダのコードをTwilio Functionsにデプロイします。
cd default twilio serverless:deploy --override-existing-project 
デプロイが開始され、しばらく待つとURLがコンソールに出力されます。
ここで出力されたFunctionsのURLを控えておきます。URLは下記のような値となります。環境によって異なるので出力された値を確認してください。
https://{あなたのドメイン}.twil.io 
Flexローカリゼーションプラグインのデプロイ
defaultフォルダからプロジェクトのルートフォルダに戻ります。
cd .. 
このルートフォルダに配置されている.env.sampleのファイル名を.envに変更します。
このファイルのACCOUNT_SID=AUTH_TOKEN=、それぞれの行を削除し、FLEX_APP_FUNCTIONS_BASE=に先ほど控えたFunctionsのURLを記述します。
最後にFlex Plugins CLIを用いてプラグインをデプロイします。
twilio flex:plugins:deploy --changelog "デプロイコメント" 
デプロイが完了していればNext Steps:というラベルとともにプラグインを有効化するためのコマンドを含むメッセージが表示されます。
出力されたメッセージの以下の部分をコピーし、実行します。プラグインのバージョン番号(@0.0.x)やリリースID(xxxxxxxxxxxxx)は環境により異なりますので、必ずターミナルに出力されたコマンドをコピーしてください。
twilio flex:plugins:release \ --plugin [email protected] \ --name "Autogenerated Release xxxxxxxxxxxxx" \ --description "The description of this Flex Plugin Configuration." 
コンソールに有効化された旨が出力されます。
Flexでプラグインを有効化しテスト
Flex - Adminコンソールを開き、画面右上に言語選択ドロップダウンリストが表示されていることを確認し、Japaneseを選択します。
スクリーンショットのようにAdminコンソール左側のメニューを展開した際に日本語のラベルが表示されていればプラグインが正しく動作しています。
Adminコンソール右側にはテスト用の電話番号が記載されています。こちらに電話をかけ、UIが日本語化されていることも確認しましょう。
トライアルアカウントを利用している場合は以下のような、その旨を通知するメッセージが流れます。このメッセージはスキップできません。
You have a trial account. You can remove this message at anytime by upgrading to full account. Press any to execute your code.
メッセージを最後まで聞いたあとに数字キーを押すと、Flexに着信が通知されます。こちらに応答しUIが日本語化されていることを確認してください。
まとめ
今回紹介したローカリゼーションプラグインを導入すると表示言語を日本語やフランス語、ドイツ語などで表示できます。ぜひご活用ください。
Qiita Advent Calendar4日目は @mobilebizさんです。