CallConnect を支える HTML5 テクノロジー
こんにちは、本間です。
弊社で開発・運用している CallConnect では、電話をブラウザ上で実現するためにあらゆる最新技術を駆使しております。
今回はその中でもフロントエンドの HTML5 のテクノロジーについてちらっとご紹介します。CallConnect は HTML5 がなければ作ることができませんでした。そのくらい HTML5 は CallConnect の中核をなす技術です。
それでは参りましょう。
1. WebRTC
まずはパソコンで電話するための根幹である技術の WebRTC。 WebRTC とは、リアルタイムコミュニケーション用のAPI です。ブラウザで自分の声を相手にリアルタイムに届け、相手の声をリアルタイムで取得するには従来の技術では専用のプラグインを入れたりしなければなりませんでしたが、 WebRTC の登場により、純粋な HTML でリアルタイムコミュニケーションの枠組みを作ることができるようになりました。
CallConnect では 電話の通信部分の他に、ブラウザで声を録音して 自動応答ガイダンスの音声にする機能も WebRTC を用いて実現しています。
2. WebSocket
WebSocket とは、Web サーバーと Web ブラウザとの間の通信のために規定を予定している双方向通信用の技術規格のことです。従来、サーバーからブラウザに向けて任意のタイミングで情報を発信することを実現するのは困難なことでした。
WebSocket の登場により、任意のタイミングでブラウザに情報を”通知”することができるようになります。これの代表格がチャットですね。
電話はリアルタイムな要素がたくさんあります。電話の発着信、通話の保留・再開などです。CallConnect ではメンバー間で通話の保留・再開を共有する仕組みがあります。具体的に言うと、Aさんが保留ボタンを押すと、Bさんが”Aさんが保留した” ということをブラウザ上でリアルタイムに把握することができます。これにより、BさんはAさんの保留相手に替わりに電話に出ることができるようになります。
さらに、オペレーターの稼働状況をスーパーバイザーがリアルタイムで監視するためにも WebSocket が利用されています。このように、誰かの情報を逐次通知するために WebSocket は大変有用です。
3. Canvas
Canvas とは、動的な2次元ビットマップ画像の描画のためのHTML要素で、プログラミングにより動的に画像を描画できるようになります。
CallConnect では 自動応答電話の分岐先の作成に Canvas を用いております。 1と#を押したらどこへ転送するか、2と#を押したら・・ というのをよりグラフィカルで直感的に操作できます。この設定のしやすさは CallConnect はかなりのこだわりを持っています。矢印やボックスが動的にアニメーションで変化するようになっており、Canvas の機能をふんだんに利用しております。
それとは別に、CallConnect での画像のアップロードの縮小にも Canvas は用いられています。これは Canvas のちょっと変わった使い方ですね。
4. File API
File API を利用すると、ユーザーがブラウザ上にファイルをドラッグ&ドロップしたり、ファイルを選択した瞬間にそのファイル情報を取得したりすることができるようになります。
CallConnect では音声ファイルのアップロードと、顧客の画像をアップロードするのに ドラッグ&ドロップでの選択を可能にしています。
また、ブラウザ外からブラウザ内に画像をドラッグした時点で、”ここにドラッグできるよ”と枠組みを明示的に表示したり、画像のアップロードに関してこだわりを持っています。
5. CORS(Cross-Origin Resource Sharing)
今までは、 JavaScript で HTTP 通信をするのに、自分のドメインのサーバーにしかリクエストを送ることしかできませんでした(裏技的に JSONP などがありましたが、これは GET リクエストしか送れません)。
CORS をサーバーサイドで適切に設定すると、JavaScript で外部ドメインに リクエストを送ることができるようになります。
これだけ聞くと、どこか怪しいところに情報を飛ばしているのではないか、と考えるかもしれませんが、CallConnect では 画像や音声ファイルのアップロードをCallConnect のアプリケーションサーバーを介さずに直接コンテンツサーバーにアップロードする仕組みを実現しております。これにより、より早く、軽快なアプリケーションを作ることに成功しています。
6. History API
CallConnect はいつ着信が来てもいいように、また通話中でのページ遷移ができるように、ページ遷移を全て JavaScript を用いて変換しています。シングルページアプリケーションと最近では呼ばれていることが多くなりました。
よくあるWebページでは、リンクをクリックすると別ページに”飛ぶ” という感覚があると思いますが、 CallConnect ではページが”切り替わる”ような感覚です。
シングルページアプリケーションではある問題が生じます。それは”戻るボタン”が正しく動作しなくなるのです。これを History API を用いて ブラウザの戻るボタンをハックし、意図した”戻る” を実現しています。
CallConenct はページが切り替わる感覚だけども、戻るボタンがしっかりと動作している、そんなサービスに仕上がっています。
7. Web Notifications
Web Notifications はブラウザがPCに通知するための仕組みです。
CallConnect で着信があると、CallConnect のページにいなくても(見ていなくても)、PCから通知が来るようになります。その通知をクリックするだけで、CallConnect のページに戻ることができるため、着信時により簡単に電話に出られるようになります。
しかも その通知内に相手の名前や電話番号なども CallConnect では表示しています。電話に出るのにあの着信音を聞く必要も無くなります。
8. その他 HTML5
CSS3 はより柔軟な Web デザインを表現するのに利用しています。
また HTML5 から出た audio 要素で録音の再生やアップロードされたファイルの再生などを実現しています。
終わりに
CallConnect が HTML5 の恩恵をいかに受けているのか、お分りいただけたかと思います。今まで CallConnect のようなサービスが他に存在しなかったのは、このような技術的に実現困難であったという背景があります。
CallConnect の管理画面は Chrome のみの提供にしているため、率先して最先端のテクノロジーを導入しています。これにより、CallConnect を利用するユーザー様がより快適に使えるような環境を常日頃から考え、情報をキャッチし、実践しています。
それぞれのテクノロジーに関する詳細はまた別の機会があればご紹介したいと思います。
もし HTML5 を駆使した最新テクノロジーに触れてみたい方は、ぜひ CallConnect の無料トライアルにて、体感してみてください。