ローカリゼーションプラグインを利用しTwilio Flexのユーザーインターフェースを日本語にする方法

読む所要時間: 9 分

December 03, 2021

執筆者

Daizen Ikehara

Twilion

レビュー担当者

Stephenie Minami Nakajima

Twilion

ローカリゼーションプラグインを利用しTwilio Flexのユーザーインターフェースを日本語にする方法

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 SIDとAuth TokenはTwilio Flexプロジェクトに紐づくものを使用します。前提条件で作成したTwilio Flexプロジェクトのコンソールを開きます。左上のプロジェクト名がFlex用に作成したプロジェクトであることを確認し、Account Sid、Auth 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 plugin-flex-localization@0.0.1 \ 
  --name "Autogenerated Release xxxxxxxxxxxxx" \ 
  --description "The description of this Flex Plugin Configuration."

コンソールに有効化された旨が出力されます。