はじめまして！ BALES CLOUDエンジニアのてぃが（光永）と申します。 今回、BALES CLOUDとZoom Phoneの連携をすることになりました。 調査・実装等々行いましたので、この件についてお話ししたいと思います。
前置き
そもそもなんのことを言っているのか？ とお思いでしょうから、まずは前提説明です。
Zoom Phoneとは？
皆さんご存じのZoomが提供しているプロダクトの一つにZoom Phoneがあります。
クラウド VoIP 電話サービス Zoom Phone は、あらゆる規模のビジネスに向けた、機能豊富なクラウド電話システムです。
BALES CLOUDとは？
一方、私の所属するチームではBALES CLOUDというサービスを開発しています。
インサイドセールス時代に最適な営業DXツール インサイドセールスを効率的、かつ高度に行うためのツールです。
インサイドセールスとは？
上述の通り、BALES CLOUDはインサイドセールス向けのツールです。
インサイドセールスについて、弊社記事から引用すると以下の通りです。
見込み顧客に対してメールや電話、Web会議ツールなどを活用しながら非対面で営業活動を行なう内勤型の営業体制です。 インサイドセールスは営業活動全体の効率化が目的です。
つまり、インサイドセールスでは「メールや電話、Web会議ツールなどを利用した営業活動」を「効率的」に行なうことが求められます。
こちらを補助するのがBALES CLOUDというわけですね。
また、BALES CLOUDの説明に「DXツール」ともあるとおり、インサイドセールスの行動を「データにする」こともBALES CLOUDの重要な機能です。
なにをするのか？
さて、そんなBALES CLOUDとZoom Phoneを連携するとはどういうことでしょうか。
BALES CLOUDとZoom Phoneを連携するということ
Zoom Phoneは「クラウド電話システム」であり、インサイドセールスの「電話を活用した営業活動」、いわゆる「架電業務」に活用できます。
...と、ここまでの情報を踏まえつつ、いきなりですが、BALES CLOUDのZoom Phone連携の要求は以下の通りです。
- ワンクリックで通話が開始できる
- 通話の記録が（ほぼ）自動で取れる
- 通話内容の録音・再生ができる
BALES CLOUDの提供したい「業務の効率化」という価値においては、「ワンクリックでの通話」や「自動での記録」は特に外せない機能です。
Zoom Phone連携の構成
BALES CLOUDでは、前述の要求を満たすためにZoomの以下の機能を利用することにしました。
- Zoom Phone Smart Embed
- 提供されているZoom PhoneのUIをWebアプリに組み込んで使うことができる
- Zoom Phone API
- Zoom Phoneの情報にアクセスするためのAPI
- Zoom OAuth
- Zoom APIを使うためのOAuth（2.0）
通話機能をZoom Phone Smart Embedで実現し、
録音などの情報取得をZoom Phone API×Zoom OAuthで実現する構成です。
なお、Zoom Phone Smart EmbedのUIはこんなかんじです。
なにをやったのか？
いよいよ、エンジニアの具体的な行動の話をしていきましょう。
Zoom Phone連携は以下のような流れで開発していきました。
- Zoom Phoneの調査
- Zoom Phone Smart Embedのプロトタイピング
- 各種設計
- 実装
Zoom Phoneの調査
まずは、Zoom Phone連携のための情報を収集しました。
Zoom公式には下記さまざまなドキュメントやサポートが用意されています。
- Zoom Support（英語Supportページ）
- Zoom サポート（日本語Supportページ）
- Zoom Developer Platform > Document
- Zoom Developer Platform > Document > API > Zoom Phone API
- Zoom Developer Forum
- Zoom Developer Support
これらの文書を読み込み、時には実際に手を動かして検証してみつつ、要件を実現するための情報を集めました。
ある程度はエンジニアならお馴染み「ドキュメントに書いてあるとおりやれ！」のやつなのですが、苦労した点がいくつかありましたので少し紹介してみますと...。
Zoom Phone Smart Embed公式リリースが「今年」
Zoom Phone Smart Embedについて調べていたてぃがさん（私）は、情報がやたらと少ないなあ、ということに気がつきました。
そこで更なる情報を求めてdeveloper communityの投稿などを漁っていたところ、以下のコメントを見つけました。
Thank you for your patience. We have released Zoom Phone smart embed. To know more, please visit: https://support.zoom.us/hc/en-us/articles/11630110788877
その時、このコメントの投稿日時には燦然と輝く『14d』の文字がありました。
「このコメントの投稿は14日前だよ」の意味です。
そうです、Zoom Phone Smart Embedは、公式リリースされたばかりだったのです。
しかしBALES CLOUDチームでは、臆さず、この新しい技術の採用を決断したのでした。
OAuthを使うための作業が多い
Zoom OAuthを自社サービスで利用するためには、自社用のOAuthアプリをZoom Marketplaceのアプリとしてリリースする必要があります。
それに伴って、申請等々、の作業が発生しました。
詳しくは、以下の公式ドキュメントを眺めて見てください。
なかなかの物量の作業が指示されています。
申請作業を受け持ってくれた弊チームの...調律者？（役割名迷子）井上さん（a.k.a.師匠）には頭が下がる思いです。
（感謝の意を込めて師匠さんの記事を貼っておきます。よければこちらもご覧ください。→BALES CLOUD TEAMのMTG非同期化への取り組み）
つくっていく
情報をあらかた集めたので、今度は、設計や仕様について考えて作っていくフェーズです。
ここで、「ユーザーの使い勝手に大きく関わるUIについては、見えるものを元に検討したい！」と弊チームPO兼PdMから依頼がありました。
（BALES CLOUDの売りはUIの良さです。（隙自慢））
そこで、UIを担うZoom Phone Smart Embedの実装については、プロトタイピングで行なっていくこととしました。
OAuthやAPIの実装はすこしわきに置いておき、ここではこの件についてお話ししたいと思います。
Zoom Phone Smart Embedの開発の流れ
Zoom Phone Smart Embedについては、大きく以下のような流れで開発を進めました。
- なにはともあれ動くものをつくる
- 既存のUIと似せてみる
- デザイン・UIを調整してみる
- 機能の構成決定！ 設計へ
- 設計ができた！ 反映する
- 完成まで駆け抜ける
プロトタイピングは、1〜3のステップで行いました。
プロトタイピングで行ったことは以下のような感じです。
- 「検証したい内容を確認するためのもの」を作る
- 1をPdMと確認する
- PdMやチームと一緒に次のステップ（検証したい内容）を決める
最初からステップがすべて決まっているのではなく、ステップ1からはじめて、順々に次にやることを意思決定していく形です。
各ステップでの具体的な作業内容についても、簡単にご説明します。
1. なにはともあれ動くものをつくる
Zoom Phone Smart EmbedがBALES CLOUD上で表示され、通話ができるところまでを作ってみることにしました。
とりあえずBALES CLOUDにZoom Phone Smart Embedを埋め込んで、動く様子を観察してみます。
また、Zoom Phone Smart Embedでは発着信・通話開始・終話などなど、リアルタイムに色々なイベントが取れるようなので、それらもとりあえず捕捉して様子を見てみます。
BALES CLOUDのフロントエンドはVue.js/JavaScript/TypeScriptですので、ここの実装は完全にZoom Phone Smart Embedの「ドキュメントの通り」です。
2. 既存のUIと似せてみる
BALES CLOUDには、すでに連携しているCTIサービスがあります。
今度はそのUIに挙動を似せてみることにしました。
Vueでcomponentを作りこみ、既存機能に埋め込んでいきます。
3. デザイン・UIを調整してみる
動かしているといくつか気になる箇所を発見。
ちょちょいと調整します。
4. 機能の構成決定！ 設計へ
これまでに収集した情報と、プロトタイプを参照しつつ、チームで話し合ってZoomで利用する機能などの構成を決定しました。
構成については前述の通りです。
構成も決まったので、PdMが具体的な設計を開始します。
とはいえ、プロトタイプによってある程度は機能のイメージができています。
なので、ゼロからの設計ではなく、懸念点などを洗い出すためにさらに詳細な要件を具体的に書き出してもらう形です。
5. 設計ができた！ 反映する
Zoom Phone Smart Embedを利用した機能の最初のステップについて、PdMの設計がおわりました。
出来上がった要件に合わせて、足りない機能の実装や違っている挙動の実装変更を行なっていきます。
6. 完成まで駆け抜ける
あとは設計が進むたびに「ものをつくる」と「確認」を何度か繰り返し...できあがりです！
プロトタイピングのなにがよかったのか？
ここからはプロトタイピングをやってみた感想です。
これは、「めっちゃアジャイルしている！」の一言に尽きると思います。
...と言ってしまうと流石に不親切なので（笑）もう少し細かくしゃべってみます。
まず、動くものをとにかく作って提供できたという点がよかったです。
これによってどんどんものができてくるスピード感と、ワクワク感が得られました。
目に見える形ですぐに価値提供ができることで、「Zoom Phone連携、すぐできちゃうんじゃない!?」というポジティブなモチベーションが持続しました。
小さく作業を切って順番に進めていくことで、作業を進めるたびに着実に完成系に近づいていく、というところもよかったです。
また、常に目に見えるものがあることで開発者・PdMともに確認がしやすく、意思決定がスムーズに素早く行えて快適でした。
合わせて、認識違いによる手戻りが発生しづらいという利点もあります。
特に「3. デザイン・UIを調整してみる」のステップでは、「現状このように不都合があります」という確認、「このように修正できます」という提案をブラウザ上で実際の画面を操作しながら行えて意思疎通がスムーズでした。
つまり、「アジャイルしている！」...言い換えると、「スピード感のある価値提供ができている！」ということになるでしょうか。
以下のような、アジャイルを考えるときに3万回見る図の体現でもあったと思います。
まとめ
Zoom Phone連携の話はここまでです。
- 新しい技術を積極的に採用できた
- アジャイルでものづくりを進められた
ことにより、
BALES CLOUDはスピード感を持って開発をしている！
という事実をあらためて実感できた案件でした。
また、もしBALES CLOUD、またはZoom Phoneの連携機能に興味を持って頂けましたら、こちらの公式ページより資料請求・お問い合わせいただけます！
それでは〜〜〜！
プレスリリース
本記事で紹介されているBALES CLOUDとZoom Phoneとの連携はこちらでも紹介されています！
