2023年5月1日を持ちまして、株式会社KDDIウェブコミュニケーションズのTwilioリセール事業が終了したため、本記事に記載されている内容は正確ではないことを予めご了承ください。
はじめに
みなさん、こんにちは。
KDDIウェブコミュニケーションズのTwilioエバンジェリストの高橋です。
本記事では、オペレーターが着信時に、タスクのより詳細な情報を確認することができるように、タスクの情報（Info）タブの内容をカスタマイズする方法について説明します。
シナリオ
今回のカスタマイズにおける完成イメージは以下のようになります。
着信時に、タスクリストの該当タスクをクリックすると、タスクの詳細パネルが表示されます。その中の情報（Info）タブに任意の情報を表示させるというシナリオです。
Flex UIコンポーネント
今回情報を表示させたいのは、TaskInfoPanelになります。
リファレンスはこちらです。
このコンポーネントには、Contextメンバーが存在しますので、以下のようなコードを使って、パネルの内容を独自コンテンツに書き換えることができます。
flex.TaskInfoPanel.Content.replace(
<TaskInfo defaultProps={defaultProps} key='task-info-component' />,
);
このコードを、プラグインのinit()の中に記載します。
なお、実際の書き換えコンテンツとなるTaskInfoは後ほどReactコンポーネントとして作成する必要があります。
ハンズオン
では早速プラグインを実装していきましょう。
プラグインのダウンロード
% git clone https://github.com/mobilebiz/plugin-task-info.git
% cd plugin-task-info
コンテンツの修正
情報（Info）パネルのコンテンツは、src/components/TaskInfo/TaskInfo.jsxに記載していきます。
import React from 'react';
const TaskInfo = (props) => {
const { task, defaultProps } = props;
if (!task || !defaultProps) return null;
// Change second line.
defaultProps.secondLine = 'Can you change this line.';
// console.log(`🐞 task`);
// console.dir(task);
return (
<div>
<h1>TASK CONTEXT</h1>
<p>Can you write some message at this area.</p>
<p>And links can also be placed as follows.</p>
<a href='https://www.google.com/' target='_blank'>
Google
</a>
<hr />
<p>dateCreated: {task.dateCreated.toTimeString()}</p>
<p>name: {task.attributes.name}</p>
</div>
);
};
export default TaskInfo;
defaultProps.secondLineに値を入れると、タスクアイテムリストの二行目に独自のコンテンツを上書きすることができます。また、サンプルにはないですが、通常task.attributes.fromが表示される一行目は、defaultProps.firstLineで変更ができます。
情報（Info）パネルのコンテンツは、returnの中で指定していきます。
現在は、以下のHTMLが設定されています。
<div>
<h1>TASK CONTEXT</h1>
<p>Can you write some message at this area.</p>
<p>And links can also be placed as follows.</p>
<a href='https://www.google.com/' target='_blank'>
Google
</a>
<hr />
<p>dateCreated: {task.dateCreated.toTimeString()}</p>
<p>name: {task.attributes.name}</p>
</div>
TaskInfoコンポーネントの引数に、taskオブジェクトが入っているので、そちらを使うことで上記のように、タスクが生成された日時や、アトリビュートの値などを表示させることができます。
あとは応用次第ですね。
まとめ
今回は非常にサクッとした解説になっていますが、タスクの情報パネルは意外と色々な情報を書き込むことができますので、使い方次第ではCRM連携の代わりにもなるかと思います。
Twilio（トゥイリオ）とは
https://cloudapi.kddi-web.com
Twilioは音声通話、メッセージング（SMS/チャット）、ビデオなどの 様々なコミュニケーション手段をアプリケーションやビジネスへ容易に組み込むことのできるクラウドAPIサービスです。初期費用不要な従量課金制で、各種開発言語に対応しているため、多くのハッカソンイベントやスタートアップなどにも、ご利用いただいております。
| 自己紹介 | |
|---|---|
 |
高橋克己（Katsumi Takahashi） 自称「赤い芸人」 グローバル・インターネット・ジャパン株式会社 代表取締役 株式会社KDDIウェブコミュニケーションズ Twilio事業部エバンジェリスト 2001年より大手通信事業者の法人サービスの教育に携わり、企業における電話のしくみや重要性を研究。2016年よりTwilio事業部にジョインし、Twilioを使ったスマートコミュニケーションの普及活動を精力的に行っている。 2019 Twilio Champions |