はじめに
みなさん、こんにちは。KDDI ウェブコミュニケーションズで CPaaS のエバンジェリストをしている高橋です。
この記事では、Claris FileMaker と Vonage を使ってコールセンターシステムを構築するプロジェクトの、Vonage のパートについて解説をします。
FileMaker 側の記事とセットで実行する必要があります。
本記事の対象となる読者
- Claris FileMaker を利用している、もしくはこれから使おうと思っている方
- Vonage について興味をお持ちの方、もしくは利用したいと考えている方
- コールセンターシステムを安価に自社で構築してみたい方
Vonage とは
Vonage は、米国ニュージャージー州に本社を置く、CPaaS（Communication Platform as a Service）企業です。
もともとは VoIP（Voice over IP）企業としてスタートしましたが、いくつかの企業買収を行うことで、コミュニケーションサービス全般をサポートすることができる企業に発展しました。現在はスウェーデンの大手通信機器会社エリクソンの傘下に入っています。
2024年2月14日より、株式会社KDDIウェブコミュニケーションズ（以後、KWC）が Vonage の再販事業を開始することとなりました。
KWC経由でアカウントを開設する場合、Vonageで直接開設したアカウントとは一部仕様が異なります。（※提供する機能面において違いはありません）
なお、本記事ではKWC経由でのアカウントを使って説明を行います。
Claris FileMaker とは
Claris FileMaker は、Apple の子会社 Claris International が提供するローコード開発プラットフォームで、プログラミングの知識がなくても、業務に合わせたカスタムアプリを迅速に作成・展開できます。ドラッグ＆ドロップ操作や豊富なテンプレートを活用し、顧客管理、在庫管理、帳票作成など多様な業務アプリを構築可能です。Windows、macOS、iOS、iPadOS、Web など複数のプラットフォームに対応し、クラウドやオンプレミスでの運用も柔軟に選択できます。また、最新のAI機能や WebRTC 対応により、リアルタイムなコミュニケーションや高度なデータ処理も実現します。中小企業から大規模組織まで、業務効率化やDX推進の強力なツールとして活用されています。
本記事の目的
この記事では、Claris FileMaker と Vonage を組み合わせることによって、以下の機能を持ったコールセンターシステムを構築することができます。
- ログイン機能
- 顧客管理機能
- 発着信機能
- 通話履歴機能
- 管理者機能（管理者ユーザーのみ利用可）
上記の Claris FileMaker の実装方法については、前述のブログにて詳しく説明されていますのでそちらをご覧ください。
準備するもの
このプロジェクトを実装するためには、以下の準備が必要です。
- Vonage アカウント（アカウントの作成はこちら）
- GitHub アカウント（アカウントの作成はこちら）
- Vonage の電話番号（US番号でもよいですが、発信時に料金がかかりますのでご注意ください）
GitHub の準備
まずは、ご自分の GitHub 上に今回のプロジェクトをフォークします。
- GitHub にログインします。
-
ログインした状態で、以下のURLに移動します。
https://github.com/mobilebiz/claris-call-center -
Forkボタンを押します。
- Create forkボタンを押します。
VCR（Vonage Cloud Runtime）の準備
このプロジェクトは、Vonage の VCR（Vonage Cloud Runtime）上で動作させます。
VCRについては、以下の記事をご覧ください。
- Vonage ダッシュボードにログインします。
- 左側のツール/ソリューションを展開し、Cloud Runtimeを選択します。
- さらにワークスペースを選択します。
- 右上のCreate workspaceボタンを押します。
- 中央のLogin to GitHubボタンを押します。
- GitHub との連携ページが表示されるので、Authorize vcodecacheボタンを押します。
- 先ほど GitHub でフォークしたプロジェクトが表示されるので、Importボタンを押します。
- ダイアログが表示されるので、Workspace name欄には、「claris-call-center」と入力します。
- Continueボタンを押します。
以下のような画面が表示されれば、プロジェクトのインポートは成功です。
では次に、プロジェクトの設定をしていきます。
- Viewメニューから、Terminalを選択します。
- ターミナルウィンドウに
cat ../.vcr-cliと入力して、リージョンが正しいかを確認します。
cat ../.vcr-cli
graphql_endpoint = https://graphql.euw1.runtime.vonage.cloud/v1/graphql
default_region = aws.apse1
[credentials]
api_key = XXXXXXXX
api_secret = xxxxxxxxxxxxxxxxxxxxxx
表示されたdefault-regionが、aws.apse1でない場合のみ、以下の処理が必要です。
.vcr-cli の編集
- ターミナルウィンドウに以下のコマンドを入力します。
cp ../.vcr-cli ./
- EXPLORERウィンドウに
.vcr-cliがでてくるので選択して、default_regionをaws.apse1に修正します。 - 修正が完了したら、ターミナルウィンドウで以下のコマンドを入力します。
cp ./.vcr-cli ../
つぎにアプリケーションIDを調べます。
- ターミナルウィンドウで
vcr app listと入力します。
vcr app list
+--------------------------------------+--------------------+
| ID | NAME |
+--------------------------------------+--------------------+
| XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX | claris-call-center |
+--------------------------------------+--------------------+
IDフィールドに表示されているアプリケーションIDをコピーしておきます。
つぎに、アプリケーションの秘密鍵を生成します。
- ターミナルウィンドウで、以下のコマンドを入力します。
vcr app generate-keys --app-id アプリケーションID
次に環境変数を設定していきます。
- ターミナルウィンドウで以下のコマンドを入力して
vcr-sample.ymlをvcr.ymlとしてコピーします。
cp vcr-sample.yml vcr.yml
- 今コピーした
vcr.ymlを選択します。 - 環境変数を以下の様に設定していきます。
| 項目名 | 値 |
|---|---|
| application-id | アプリケーションのID |
| VONAGE_NUMBER | Vonageで購入した電話番号 |
| CLARIS_SERVER_URL | Claris FileMakerにて作成したサーバーのURL |
| USER | Claris FileMaker側に設定してあるユーザーID |
| PASS | 同じくパスワード |
Claris FileMaker 側の情報は、Claris 側のハンズオンで取得できます。
VCR のデプロイ
ではここから、VCR プロジェクトを Vonage 上にデプロイしていきます。
- ターミナルウィンドウで以下のコマンドを実行します。
vcr deploy
デプロイが完了すると、以下のようにホストURL（host address）が表示されます。このURLを Claris FileMaker 側に設定します。
✓ Package "30e9b22d-341c-4e3c-9f38-dba6e8e5bd25" built successfully
/-------
| Instance has been deployed!
| Instance id: 965b4ab7-b70d-4328-b712-8e73fd8578ec
| Instance service name: neru-XXXXXXXX-claris-call-center-dev
| Instance host address: https://neru-XXXXXXXX-claris-call-center-dev.apse1.runtime.vonage.cloud
\-------
プロジェクトの構成
ではここからは、プロジェクトの説明をしていきます。
プロジェクトは以下のような構造になっています。
.
├── README.md # プロジェクトの説明ドキュメント
├── index.js # メインのアプリケーションコード
├── vcr-sample.yml # Vonage Cloud Runtime設定のサンプル
├── package.json # プロジェクトの依存関係定義
├── package-lock.json # 依存関係の詳細なバージョン情報
├── build.sh # ビルドスクリプト
├── .gitignore # Gitの除外設定
├── .vscode/ # VSCode設定ディレクトリ
├── node_modules/ # Node.jsの依存モジュール
└── public/ # 静的ファイルディレクトリ
├── index.html # オペレーター用Webインターフェース
├── ringtone.mp3 # 着信音ファイル
├── styles.css # スタイルシート
└── tmp/ # 一時ファイルディレクトリ
本プロジェクトの機能概要
このプロジェクトでは以下の機能を提供しています
-
電話着信処理
- PSTN 経由の着信処理
- WebRTC 経由の着信処理
- オペレーターの自動振り分け
-
通話管理
- 通話の録音機能
- 音声認識（文字起こし）機能
- オペレーターのステータス管理
-
Claris FileMaker 連携
- 顧客情報の取得（フリガナ情報）
- キューイングデータの管理
- オペレーターのステータス管理
シーケンス図
Claris FileMaker サーバーとのやり取りは以下のようになっています。
- オペレーターがチェックインをすると、CTIウィンドウが開きます。
- CTIウィンドウには、Webビューが設定されており、そのリンク先が VCR 上の
public/index.htmlになります。 - このとき、URLパラメータに
userIdが含まれており、このIDを使って Vonage 上でオペレーターを識別します。 - 電話が着信すると、Claris FileMaker にキューイングを指示し、オペレーターのアサインを依頼します。
- オペレーターがアサインできた場合は、そのオペレーターのWebビューに着信中ボタンを表示します。
- オペレーターがアサインできなかった場合や、オペレーターが反応しなかった場合は、ガイダンスを流して切断します。
Vonage と Claris FileMaker の間は、基本的に Vonage から OData を使ってリクエストを投げています。
アプリケーションWebhookの設定
- Vonage のダッシュボードにログインします。
- 左側のメニューから、アプリケーションを選択します。
- 先ほど GitHub からインポートしたアプリケーションを選択します。
- 編集ボタンを押して編集モードに入ります。
- 機能 の 音声 を有効にし、以下の設定を行います。
- 地域のプルダウンから「Singapore (api-ap-3.vonage.com)」を選択します。
変更を保存ボタンを押します。
電話番号のアサイン
- 画面下部に電話番号がリストされているので、このアプリケーションで利用する電話番号をリンクボタンを押します。
以上で、Vonage 側の設定はすべて終了です。
動作確認
Claris FileMaker 側の設定が完了したら、実際に Vonage の電話番号に電話をかけて着信が成功すること、さらには録音データの格納と文字起こしデータの格納をログ画面から確認しておきましょう。
まとめ
この記事では、Claris FileMaker を使ったコールセンターシステムを構築する Vonage 側の処理を解説しました。
Vonage の VCR を使うことで、外部のクラウドサービスを使うことなく、Claris FileMaker と Vonage でコールセンターのシステムが構築できることを体感していただけたかと思います。
最後に VCR の料金についても紹介しておきます。
料金は、Standardプランが無料、Advancedプランが $75/月、Premiumプランが $250/月となっています。
それぞれで制限事項などが異なりますので、詳しくは以下の公式サイトをご覧ください。
Discussion