🀄️

Clarisコールセンタープロジェクト（Vonage編）

高橋克己（□い芸人）

2025/06/13に公開

FileMaker

Vonage

tech

はじめに

みなさん、こんにちは。KDDI ウェブコミュニケーションズで CPaaS のエバンジェリストをしている高橋です。
この記事では、Claris FileMaker と Vonage を使ってコールセンターシステムを構築するプロジェクトの、Vonage のパートについて解説をします。

FileMaker 側の記事とセットで実行する必要があります。

本記事の対象となる読者

Claris FileMaker を利用している、もしくはこれから使おうと思っている方
Vonage について興味をお持ちの方、もしくは利用したいと考えている方
コールセンターシステムを安価に自社で構築してみたい方

Vonage とは

Vonage_logo

Vonage は、米国ニュージャージー州に本社を置く、CPaaS（Communication Platform as a Service）企業です。
もともとは VoIP（Voice over IP）企業としてスタートしましたが、いくつかの企業買収を行うことで、コミュニケーションサービス全般をサポートすることができる企業に発展しました。現在はスウェーデンの大手通信機器会社エリクソンの傘下に入っています。

2024年2月14日より、株式会社KDDIウェブコミュニケーションズ（以後、KWC）が Vonage の再販事業を開始することとなりました。
KWC経由でアカウントを開設する場合、Vonageで直接開設したアカウントとは一部仕様が異なります。（※提供する機能面において違いはありません）

なお、本記事ではKWC経由でのアカウントを使って説明を行います。

Claris FileMaker とは

Claris_logo

Claris FileMaker は、Apple の子会社 Claris International が提供するローコード開発プラットフォームで、プログラミングの知識がなくても、業務に合わせたカスタムアプリを迅速に作成・展開できます。ドラッグ＆ドロップ操作や豊富なテンプレートを活用し、顧客管理、在庫管理、帳票作成など多様な業務アプリを構築可能です。Windows、macOS、iOS、iPadOS、Web など複数のプラットフォームに対応し、クラウドやオンプレミスでの運用も柔軟に選択できます。また、最新のAI機能や WebRTC 対応により、リアルタイムなコミュニケーションや高度なデータ処理も実現します。中小企業から大規模組織まで、業務効率化やDX推進の強力なツールとして活用されています。

本記事の目的

この記事では、Claris FileMaker と Vonage を組み合わせることによって、以下の機能を持ったコールセンターシステムを構築することができます。

ログイン機能
顧客管理機能
発着信機能
通話履歴機能
管理者機能（管理者ユーザーのみ利用可）

上記の Claris FileMaker の実装方法については、前述のブログにて詳しく説明されていますのでそちらをご覧ください。

準備するもの

このプロジェクトを実装するためには、以下の準備が必要です。

Vonage アカウント（アカウントの作成はこちら）
Vonage の電話番号（US番号でもよいですが、発信時に料金がかかりますのでご注意ください）
Vonage Cloud Runtime CLI のセットアップ（こちらを参考にしてください）
Node.js 環境（ローカルでの動作確認や依存モジュールのインストールに利用します）
Git コマンドが使えるローカル環境

プロジェクトのクローン

まずは、GitHub に公開されているプロジェクトをローカル PC にクローンします。

任意の作業ディレクトリに移動し、以下のコマンドを実行します。

git clone https://github.com/mobilebiz/claris-call-center.git
cd claris-call-center

クローンが完了したら、依存モジュールをインストールしておきます。

npm install

VCR（Vonage Cloud Runtime）の準備

このプロジェクトは、Vonage の VCR（Vonage Cloud Runtime）上で動作させます。

VCRについては、以下の記事をご覧ください。

VCR CLI の環境設定

まずは、VCR CLI で使う環境を、このアプリケーションを管理する Vonage アカウントに合わせます。
お使いの Vonage アカウントの API Key と API Secret を準備しておいてください。

vcr configure
? Enter your Vonage api key: ご自分の API Key を設定します。
? Enter your Vonage api secret: 同じく、ご自分の API Secret を設定します。
? Select your Vonage region: Asia Pacific (Singapore) を選択します。
✓ New configuration file written to ~/.vcr-cli

アプリケーションの新規作成

次に、このプロジェクト用の Vonage アプリケーションを新規に作成します。

vcr app create --name claris-call-center --voice
Are you sure you want to create an application? [y/n]: y
✓ Application created
ℹ id: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
ℹ name: claris-call-center

表示された id がアプリケーション ID です。このあと vcr.yml に設定しますのでコピーしておきます。

続いて、作成したアプリケーションの秘密鍵を生成します。

vcr app generate-keys --app-id アプリケーションID

vcr.yml の設定

次に、アプリケーション 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

もし以下のメッセージでデプロイに失敗する場合は、vcr.ymlのapplication-idが正しいか、vcr configureで設定したリージョンがAsia Pacific (Singapore)になっているか、アプリケーション鍵の生成をしているかを確認してください。

────────────────────────────────────────────────────────
X Error Encountered: failed to deploy instance

ℹ Details:
  - HTTP Status : 404
  - Error Code  : 2001
  - Message     : credential not found
  - Trace ID    : 4b606303-58e7-4457-b6e3-7b21848d635d

Please refer to the documentation or contact support for further assistance.
────────────────────────────────────────────────────────

デプロイが完了すると、以下のようにホスト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 サーバーとのやり取りは以下のようになっています。

Sequence

オペレーターがチェックインをすると、CTIウィンドウが開きます。
CTIウィンドウには、Webビューが設定されており、そのリンク先が VCR 上の public/index.html になります。
このとき、URLパラメータにuserIdが含まれており、このIDを使って Vonage 上でオペレーターを識別します。
電話が着信すると、Claris FileMaker にキューイングを指示し、オペレーターのアサインを依頼します。
オペレーターがアサインできた場合は、そのオペレーターのWebビューに着信中ボタンを表示します。
オペレーターがアサインできなかった場合や、オペレーターが反応しなかった場合は、ガイダンスを流して切断します。

Vonage と Claris FileMaker の間は、基本的に Vonage から OData を使ってリクエストを投げています。

アプリケーションWebhookの設定

Vonage のダッシュボードにログインします。
左側のメニューから、アプリケーションを選択します。
先ほど作成したアプリケーションを選択します。

SelectApplication

編集ボタンを押して編集モードに入ります。

EditApplication

機能の音声を有効にし、以下の設定を行います。

設定項目	メソッド	値
回答URL	POST	https://callback-router.apse1.runtime.vonage.cloud/?provider=vonage-voice&action=vapi-answer-callback&apiApplicationId=[アプリケーションID]&apiAccountId=[VonageアカウントのAPIキー]
イベントURL	POST	https://callback-router.apse1.runtime.vonage.cloud/?provider=vonage-voice&action=vapi-event-callback&apiApplicationId=[アプリケーションID]&apiAccountId=[VonageアカウントのAPIキー]
フォールバックURL	POST	https://callback-router.apse1.runtime.vonage.cloud/?provider=vonage-voice&action=vapi-answer-callback&apiApplicationId=[アプリケーションID]&apiAccountId=[VonageアカウントのAPIキー]

地域のプルダウンから「Singapore (api-ap-3.vonage.com)」を選択します。

変更を保存ボタンを押します。

電話番号のアサイン

画面下部に電話番号がリストされているので、このアプリケーションで利用する電話番号をリンクボタンを押します。

SetupApplication

以上で、Vonage 側の設定はすべて終了です。

動作確認

Claris FileMaker 側の設定が完了したら、実際に Vonage の電話番号に電話をかけて着信が成功すること、さらには録音データの格納と文字起こしデータの格納をログ画面から確認しておきましょう。

Test01
Test02

まとめ

この記事では、Claris FileMaker を使ったコールセンターシステムを構築する Vonage 側の処理を解説しました。
Vonage の VCR を使うことで、外部のクラウドサービスを使うことなく、Claris FileMaker と Vonage でコールセンターのシステムが構築できることを体感していただけたかと思います。

最後に VCR の料金についても紹介しておきます。

料金は、Standardプランが無料、Advancedプランが $75/月、Premiumプランが $250/月となっています。
それぞれで制限事項などが異なりますので、詳しくは以下の公式サイトをご覧ください。

KWCPLUSPublication

株式会社KDDIウェブコミュニケーションズ Tech Blog