Flex PluginsのReactサンプルを読み込む（Flex UI 2.x 編）

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

はじめに

みなさん、こんにちは。
KDDIウェブコミュニケーションズの Twilioエバンジェリストの高橋です。

ちょうど一年前、以下のような記事を書きました。

自分で書いておいてなんですが、正直相当分かりづらいですね。
むしろ、この記事を読んでなるほどーと思った方は、そもそも React も Redux もある程度ご存知ではないかと思います。

そんなTwilio Flexですが、Flex UI というプラグインが担当する部分のバージョンが 2.0 （まだベータですが）にバージョンアップし、React17 に対応するとともに、React Hooks にも対応しました。
そのため、プラグインの React サンプルもより洗練された形になりましたので、今回はこの 2.0 を使って改めて Flex プラグインについて見ていきたいと思います。

ハンズオン

前回同様、まずは手を動かしながら学習を始めましょう。

Flexプラグイン CLIの準備

以下の記事を参考に、Flexプラグイン CLIをインストールしてください。

記事の中ではプラグインを実際に作成するところも書かれていますが、今回はこのあと作成するので、作成はしなくていいです。

プラグインの作成

Flex UI 2.0 になって、プラグインの作成コマンドが変更になっています。

% twilio flex:plugins:create --help
Creates a new Twilio Flex Plugin project

USAGE
  $ twilio flex:plugins:create NAME

ARGUMENTS
  NAME  Creates a new Twilio Flex Plugin project

        Arguments:
        name	Name of your plugin.

OPTIONS
OPTIONAL FLAGS
  -a, --accountSid=accountSid  The Account SID for your Flex Project
  -h, --help=help
  -i, --install                Auto-install dependencies
  -r, --runtimeUrl             The URL to your Twilio Flex Runtime
  -s, --typescript             Create a TypeScript project
  -t, --template=template      A GitHub URL that contains your template
  -v, --version=version
  -y, --yarn                   Use yarn as your dependency manager
  --flexui1                    Creates a plugin compatible with Flex UI major version 1.0
  --flexui2                    Creates a plugin compatible with Flex UI major version 2.0

DESCRIPTION
  Arguments:
  name	Name of your plugin. This command needs to be invoked inside a plugin directory.

MORE INFO

特に重要なのが、--flexui2パラメーターです。これを指定しないと従来の 1.x で作成されてしまいます。また、--yarnオプションも素敵です。従来はnpmを使っていましたが、現在はより詳細にライブラリの管理ができるyarnを使うのがいいでしょう。
--typescriptもかなり魅力的なのですが、React だけでも大変なのに、さらに Typescript も学習する必要があるので、今回は使わないでいきます。

では、早速プラグインを作りましょう。
以下のコマンドを実行してください。

% twilio flex:plugins:create plugin-cli-test-v2 --yarn --install --flexui2

今回は--installオプションも追加しておきます。このオプションにより、ライブラリのインストールまで自動的に行われます。

プラグインの作成でエラーが出る場合は、Node.jsのバージョンが低いケースが考えられます。その場合は、16.x以上の環境で再度実行してみてください。

出来上がったプロジェクトディレクトリに移動します。

% cd plugin-cli-test-v2

ファイルの構成

出来上がったプラグインは以下のようになっています。

.
├── README.md
├── jest.config.js
├── node_modules [1144 entries exceeds filelimit, not opening dir]
├── package.json
├── public
│   ├── appConfig.example.js
│   └── appConfig.js
├── src
│   ├── CliTestV2Plugin.js
│   ├── components
│   │   ├── CustomTaskList
│   │   │   └── CustomTaskList.jsx
│   │   └── __tests__
│   │       └── CustomTaskList.spec.jsx
│   └── index.js
├── webpack.config.js
├── webpack.dev.js
└── yarn.lock

今回学習する必要があるファイルは、以下の2つです。

• src/CliTestV2Plugin.js
• src/components/CustomTaskList/CustomTaskList.jsx

v1 に比べると、めちゃくちゃシンプルになりましたね。

package.jsonの変更

プラグインをセットアップしたら、まず最初にpackage.jsonを更新します。この作業は必須ではないのですが、このあとの作業で便利になるので、ぜひやっておきましょう。

scriptsの内容を以下のように書き直してください（デフォルトは、postinstallしか記述がない）。

package.json（抜粋）

  // 中略
  "scripts": {
    "postinstall": "flex-plugin pre-script-check",
    "start": "twilio flex:plugins:start",
    "build": "twilio flex:plugins:build",
    "deploy": "twilio flex:plugins:deploy --changelog='Deploy at '+`date +%Y%m%d_%H%M%S`"
  },
  // 中略

src/CliTestPlugin.js

プラグインの開始ポイントとなるのがこのファイルです。

具体的には、19行目のinit(flex, manager)関数が開始時に呼ばれることになりますので、ここから順を追って見ていきます。

v1 ではここに、React-Redux の記述があって、それがソースコードを難解にしていましたが、v2 では Redux の記述がありません（だからといって、Redux がなくなったわけではなく、サンプルプログラムでは不要になったので削除されているだけです）。

ソースコードの解説の前に、Twilio Flex の UI コンポーネントについてみていきましょう。

コンポーネントは通常親子関係をもっており、例えば上の図でいうと、２のMainContainerの中に、3、4、5、16、17のコンポーネントがあります。さらに、16の中には、6と９のコンポーネントがあり、6には更に７と８のコンポーネントが入っています。
Reactでは、各コンポーネントに処理を分割して管理するため、そのコンポーネントで表示するデータなどの状態もコンポーネント単位で管理されます。そのため、親コンポーネントが子コンポーネントを作成するときにデータを渡したり、データの代わりに関数を渡すことで、子コンポーネントから親コンポーネントにデータを渡す仕組みになっています。
このような仕様により、コンポーネントにはそのコンポーネント内の処理だけでなく、他のコンポーネントとのデータのやりとりも実装しなくてはいけません。この作業を軽減することができるのが、React-Redux なのですが、この記事では敢えて React-Redux には触れないようにします。

ではまず、ソースコードの21行目を見てみます。
ここでは、flex.AgentDesktopView.Panel1.Content.add(...)をしていることがわかります。これは先程のコンポーネント全体図をみるとわかるように、16番のAgentDesktopView.Panel1コンポーネント内に新しいコンテンツを追加することを意味します。
以下の図のように左側の上の方に灰色のバーが表示されているのが、今回のプラグインで生成したコンポーネントです。表示する際にsortOrder: -1オプションを指定しているので、このバーは一番上に表示されます。

では次に、add関数の中に指定されている<CustomTaskListContainer .../>について見ていきましょう。
このコンポーネントは、ソースコードの4行目でインポートされている./components/CustomTaskList/CustomTaskListです。

src/components/CustomTaskList/CustomTaskList.jsx

このファイルは、先程のバーの中身を表示するものです。

ちなみに、v1のときに比べてバーの表示が洗練されているのは、v2では@twilio-pasteというデザインテンプレートを活用しているからです。

8行目では、このコンポーネント内のステートを管理するためのReact.useState()を使っています。具体的には、バーを表示するのか非表示にするのかをステートを使って管理しています。
useStateについては、こちらの記事を参照してください。
今回の例では、単純にこのコンポーネントの内部だけで表示と非表示を切り替えればよいので、上記のように非常にシンプルになっています。

メッセージの表示には、Alertタグが使われていますが、こちらも前述の@twilio/pasteに用意されているコンポーネントです。Xボタンが押された時の動作として、dismiss関数を定義（13行目）しており、その中で先程のステートを変更しています。
useStateを使うことによって、ステートが変更されたことをリアルタイムで検知することができ、即座にバーが消えます。

まとめ

v1に比べるとサンプルプログラムがめちゃくちゃ簡単になっていますね。プラグインを学習するのはちょうどいいかもしれません。

---

Twilio（トゥイリオ）とは

https://cloudapi.kddi-web.com
Twilio は音声通話、メッセージング（SMS /チャット）、ビデオなどの 様々なコミュニケーション手段をアプリケーションやビジネスへ容易に組み込むことのできるクラウド API サービスです。初期費用不要な従量課金制で、各種開発言語に対応しているため、多くのハッカソンイベントやスタートアップなどにも、ご利用いただいております。

自己紹介
	高橋克己（Katsumi Takahashi） 自称「赤い芸人」 グローバル・インターネット・ジャパン株式会社　代表取締役 株式会社KDDIウェブコミュニケーションズ　Twilio事業部エバンジェリスト 2001年より大手通信事業者の法人サービスの教育に携わり、企業における電話のしくみや重要性を研究。2016年よりTwilio事業部にジョインし、Twilioを使ったスマートコミュニケーションの普及活動を精力的に行っている。 2015 Hall of Doers 2019 Twilio Champions