amazon-connect-streamsとは？
Amazon Connect Streams API（Streams）を使用すると、既存のWebアプリケーションをAmazon Connectと統合することができます。Streamsを使用すると、Contact Control Panel（CCP）UIコンポーネントをページに埋め込むことや、エージェントおよびコンタクト状態イベントを直接処理することで、オブジェクト指向のイベント駆動型インタフェースを通じてエージェントおよびコンタクト状態を制御できます。
単純なサンプルはネット上で見つかりますが、Reactアプリに組み込んで使用するには試行錯誤が必要でしたので、手順をまとめます。
環境
OS: macOS Mojave (10.14.5)
Node: v11.15.0 (v12だとamazon-connect-streamsのbuildでエラーが発生)
npm: v6.10.1
create-react-app: v3.0.1
事前作業
- Amazon S3にバケットを作成し、CloudFront経由で公開し、URLを承認済みオリジンに登録します。 (HTTPSでアクセスする必要があるため)
参考: AmazonConnectをシステム上に埋め込んで活用してみた (https://qiita.com/miTsuKow/items/2ec4feec6dc6bc7d6c8b)
手順
Reactプロジェクトを作成しamazon-connect-streamsをインストール
GitHubからamazon-connect-streamsをcloneしてbuildします。 (2019/7/15現在、npmで公開されていません)
ローカルでbuildしたモジュールを npm install します。
# Reactのプロジェクトを作成
$ create-react-app custom-ccp
$ cd custom-ccp
# Reactのプロジェクト配下にamazon-connect-streamsをclone
$ git clone git@github.com:aws/amazon-connect-streams.git
# .gitignoreに/amazon-connect-streamsを追加しておく
$ echo /amazon-connect-streams >> .gitignore
# amazon-connect-streamsをbuild
$ cd amazon-connect-streams
$ npm install
$ npx gulp
# buildしたファイルをamazon-connect-streams直下に移動
$ cp release/connect-streams.js ./index.js
$ cp src/index.d.ts ./
# buildしたamazon-connect-streamsをインストール
$ cd ..
$ npm install ./amazon-connect-streams
Reactアプリの実装
App.js にてbuildした amazon-connect-streams を import します。
import React, { Component } from 'react';
import 'amazon-connect-streams';
import pkg from '../package.json';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.containerDiv = React.createRef();
}
componentDidMount() {
// CCPの読み込み処理
// eslint-disable-next-line no-undef
connect.core.initCCP(this.containerDiv.current, {
ccpUrl: 'https://{YOUR_INSTANCE_NAME}.awsapps.com/connect/ccp#/',
});
}
render() {
return (
<div className="App">
<main>
<div className="ccp">
{/* ccp */}
<div
className="containerDiv"
ref={this.containerDiv}
/>
</div>
<div className="content" />
</main>
<footer>
<p className="version">version: {pkg.version}</p>
</footer>
</div>
);
}
}
export default App;
参考: App.css
あまり今回の件とは関係ありませんが、参考までに App.css の内容も記載しておきます。
.App {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
main {
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
overflow: auto;
}
.ccp {
width: 330px;
min-width: 200px;
height: calc(100vh - 40px);
}
.containerDiv {
width: 320px;
min-width: 200px;
min-height: 400px;
height: 465px;
}
.content {
flex: 1;
}
footer {
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
background-color: #ececec;
}
.version {
font-size: small;
color: #666;
padding-right: 10px;
}
npm run build して生成される内容をAmazon S3のバケットにアップロードしてHTTPSでアクセスすると、以下のような画面が表示されます。
これで Reactアプリにamazon-connect-streamsを埋め込むことができました。