Twilio Flex で後処理中のタスクを強制的に終了させるプラグイン

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

# はじめに

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

この記事は、[Twilio Advent Calendar 2022](https://qiita.com/advent-calendar/2022/twilio)の2日目の記事となります。

Twilio Flex を運用していると、オペレーターが後処理を完了しないで退席してしまうことがたまにあります。残念ながら、Flex の画面上や管理コンソールから当人以外がタスクを完了させることができません。
そこで、Flex のチームビュー（スーパーバイザー画面）で、当該タスクを強制的に完了させるプラグインをご紹介します。

## 実行イメージ

![screen-shot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/f4692038-5bc9-9131-1c84-3ccc20371a91.png)

チームビューから、完了させたいタスクを選択し、infoパネルに表示される「タスクを完了する」ボタンを押すことで、このタスクが完了します。ボタンは後処理中のときのみ表示されるようになっています。

## Flex UI のバージョン

本プラグインは、Flex UI 2.0 beta-3 で作成してあります。

## プラグインのダウンロード

以下の GitHub からダウンロードが可能です。

https://github.com/mobilebiz/plugin-task-complete-via-teamview

適宜、`git clone`などでローカルにダウンロードしてください。

## ファイル構成

このプロジェクトは以下のようなファイル構成になっています。

```bash
.
├── README.md
├── build
│   ├── plugin-task-complete-via-teamview.js
│   ├── plugin-task-complete-via-teamview.js.LICENSE.txt
│   └── plugin-task-complete-via-teamview.js.map
├── img
│   └── screen-shot.png
├── jest.config.js
├── node_modules
├── package.hoshino.json
├── package.json
├── public
│   ├── appConfig.example.js
│   └── appConfig.js
├── src
│   ├── TaskCompleteViaTeamviewPlugin.js
│   ├── components
│   │   ├── MonitorTaskInfo
│   │   │   └── MonitorTaskInfo.jsx
│   │   └── __tests__
│   ├── i18n
│   │   ├── EN.js
│   │   └── JP.js
│   └── index.js
├── task-complete
│   ├── assets
│   ├── functions
│   │   └── task-complete.js
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.hoshino.json
│   ├── package.json
│   └── readmes
│       └── blank.md
├── webpack.config.js
├── webpack.dev.js
└── yarn.lock
```

task-complete フォルダには、Twilio Serverless の環境があり、Twilio Functions を使って、タスクを完了させるコードが実装されています。 
Flex Plugin は、`src`フォルダの中に格納されています。

## 準備

serverless 環境とプラグイン環境でそれぞれ準備が必要です。

### serverless 環境

```bash
cd task-complete
npm run deploy
```
デプロイが完了すると、Functionsのドメイン（task-complete-XXXX-dev.twil.io）が生成されます。

### プラグイン環境

`.env.sample`をコピーします。

```bash
cd ..
cp .env.sample .env
```

コピーした`.env`ファイルを編集して、以下の変数を指定してください。

| Key                              | value                                                                |
| :------------------------------- | :------------------------------------------------------------------- |
| FLEX_APP_FUNCTION_DOMAIN | 先程生成されたFunctionsドメイン（task-complete-XXXX-dev.twil.io） |

プラグイン環境をデプロイします。

```bash
npm install
npm run deploy
```

プラグインについては、デプロイをした後でリリース作業も必要です。デプロイの最後に表示されたコマンドを実行するか、Flex 画面上からプラグインのリリース作業を行ってください。

# まとめ

本来であれば、一日の終りなどでタスクを自動的に完了させたいなどのニーズもあるかと思いますが、たとえばメール応対などでは、日をまたいでの対応などもあるかと思いますので、今回は手動でタスクを完了させるようにしました。

---
### Twilio（トゥイリオ）とは

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

Twilioに関するご相談などがございましたら、ぜひ相談会をご利用ください。
[Twilio相談会](https://cloudapi.kddi-web.com/contact/consultation?hsLang=ja-jp)

自己紹介|　
:--|:--
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/b51a8b88-abd5-ce5e-195a-de3564ba2ae6.png" height='200' width='150'/>|高橋克己（Katsumi Takahashi） 自称「<font color='red'>赤い芸人</font>」<br />グローバル・インターネット・ジャパン株式会社　代表取締役<br />株式会社KDDIウェブコミュニケーションズ　Twilio事業部エバンジェリスト<br /><br />2001年より大手通信事業者の法人サービスの教育に携わり、企業における電話のしくみや重要性を研究。2016年よりTwilio事業部にジョインし、Twilioを使ったスマートコミュニケーションの普及活動を精力的に行っている。<br />2015 Hall of Doers<br />2019 Twilio Champions