KintoneとZoom Phoneの連携 ~Click to Call編~

はじめに

CybozuさんのKintoneでZoom Phoneをもっと便利に使うことができたら、と考えている方がいらっしゃればと思い、Kintoneの開発者向けテスト環境とZoom Phoneを連携させてみました。この記事はKintoneとZoom Phoneの連携についての3回に分けたシリーズの1回目となります。

• 今回→Click to Call : 顧客情報にある電話番号をもとに、Zoom Phoneで電話をかける方法を説明します。いくつか注意点もありますが、十分実現できる内容です。
• 着信時の顧客情報ポップアップ：Zoom Phoneに着信があった際、自動的にその番号をKintoneで検索し、該当する顧客がいればその情報をウェブ画面上で提示する方法について説明します。
• 通話後の活動履歴登録：通話終了後に顧客情報ページなどから活動履歴を手動で登録する代わりに、終了後に自動的に活動履歴を登録する方法を説明します。これは少し高度な技術と知識が必要となるかもしれません。

この記事は、基本的にZoom Phoneをインストールしているデスクトップ環境を前提に説明しています。モバイル環境では動作しない可能性があるため、あらかじめご理解ください。

Kintone のアプリについて

今回の説明では、Kintoneアプリストアにある「営業支援パック」を前提にお話しします。このアプリパックには、顧客管理アプリが含まれています。
Click to Callや着信時のポップアップには、このアプリの持つレコードの中の「TEL」フィールドや「担当者名」フィールドを活用してみたいと思います。

Click to Call

レベル0

まずClick to Callの実現をしてみたいと思います。と言いつつ、もちろんすでに顧客管理のリスト上でTELのフィールドが（上の画像のように）リンクになって見えている場合、場合によっては何もしなくて良いかもしれません。

これらの電話番号は callto: リンクになっており、デスクトップ環境に通話のためのアプリがインストールされている場合、デフォルトの通話アプリに自動的に誘導されて発信ができるため、デフォルトアプリの設定さえ変えれば通話は可能です。

VCubeさんの記事に、Windows、macOSそれぞれの設定方法が詳しくまとめてありましたので、こちらを参照いただければと思います。

レベル1

もしレベル0での設定ができない場合、例えば通常通話には別のアプリを使っているけど、Kintoneから発信する場合だけZoom Phoneを使いたいなど。ここではアプリ設定を追加します。簡単な設定追加で専用ボタンが配置できますので、やってみてください。
まず顧客管理アプリの設定を開きます。

その後、フォームタブの「スペース」をドラッグドロップでTELの近くに配置します。場所や配置はお好みで検討いただければと思いますが、電話番号のすぐ近くがいいかなと思います。
ドロップしたら、

追加したスペースにマウスオーバーし、設定を選択。ポップオーバーの画面の中で zp_call と入力し、保存してください。

その後フォームを保存をクリックし、次に設定タブに移動します。

設定タブの中で「Javascript / CSSでカスタマイズ」というリンクをクリックします。
遷移した画面の中で、PC用のJavascript / CSSファイル＞Javascriptファイルというところがありますので、その中の「アップロードして追加」というボタンをクリックします。

ここで一旦手元でファイルを作成します。
ファイル名はなんでも良いですが、拡張子は.js にしてください。Windowsなど、場合によっては拡張子が見えない状態になっている場合もありますので、注意してください。AIにまとめてもらった変更手順をここに貼り付けておきます❤️

OS	手順
Windows	1. エクスプローラーを開く 2. メニューから「表示」→「ファイル名拡張子」にチェックを入れる 3. 拡張子が表示されるようになる 4. 対象の .txt ファイルを右クリック →「名前の変更」 5. .txt を .js に書き換える 6. 「拡張子を変更すると使えなくなる可能性があります」と出たら「はい」をクリック
macOS	1. Finder で対象ファイルを探す 2. ファイルを選んで「Enter」キー（または右クリック →「名前を変更」） 3. .txt を .js に変更 4. 「拡張子を変更してもよろしいですか？」と出たら「.jsを使用」を選択 5. 拡張子が変わる

ファイルを作成したら（macOSの場合、ファイルを作成するのが先になりますが）以下を保存してください。

(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;
    
    // ボタンの作成
    const zoomButton = document.createElement('button');
    zoomButton.textContent = 'Call via Zoom Phone';

    // ボタンのデザイン調整
    zoomButton.style.backgroundColor = '#0b5cff';
    zoomButton.style.border = '1px solid #0b5cff';
    zoomButton.style.borderRadius = '5px';
    zoomButton.style.color = 'white';
    zoomButton.style.marginTop = '28px';
    zoomButton.style.marginLeft = '7px';
    zoomButton.style.padding = '3px 7px';
    zoomButton.style.cursor = 'pointer';
    
    
    // ボタンがクリックされたときの処理
    zoomButton.onclick = () => {
      const telNumber = record['TEL'].value;
      if (telNumber) {
        //const url = `https://zoom.us/call/${telNumber}`;
	      const url = `zoomphonecall://${telNumber}`;
        window.open(url); // 新しいタブでURLを開く
      } else {
        alert('電話番号が設定されていません。');
      }
    };
    
    // スペースフィールドの要素を取得してボタンを追加
    const spaceField = kintone.app.record.getSpaceElement('zp_call');
    if (spaceField) {
      console.log('[DEBUG] field already exists.');
      spaceField.appendChild(zoomButton);
    } else {
      // スペースフィールドがない場合はヘッダーメニュースペースに追加
      console.log('[DEBUG] no space found named my_space, create and append butoon');
      const headerMenuSpace = kintone.app.record.getHeaderMenuSpaceElement();
      headerMenuSpace.appendChild(zoomButton);
    }
    
    return event;
  });
})();

内容を説明します。

まずこのスクリプトは、app.record.detail.show イベントをトリガーとして機能します。これはこの顧客管理アプリがレコードの詳細画面を表示したタイミングで発火するということを意味していて、以降はその処理内容になります。

最初に const record = event.record; となっていて、画面に表示されているレコードの詳細を record オブジェクトに代入します。

その後は、ボタンの作成、ボタンのデザイン調整と続きます。このデザイン調整についてはCSSの代わりにjavascriptでボタンのスタイルをいじっているだけなので、お分かりの方は自由に編集していただければと思います！

ボタンがクリックされた時の動作として、先程の record オブジェクトの中の TEL の値、つまり record['TEL'].value を telNumber に入れ、存在する場合には zoomphonecall://${telNumber} として zoomphonecall というカスタムURLスキームをStringとして追加しています。これを window.open に引き渡してZoomアプリで通話を開始する、という流れになっています。

ちなみにコメントアウトしていますが、カスタムスキームの代わりに https://zoom.us/call/${telNumber} でも動作します。この場合、電話番号がウェブ側でバリデーションしてもらえます。こちらの方がお好みの場合は、コメントアウトを切り替えてお試しください。

さらに、最後の部分ではスペースフィールドを確認してボタンを追加しています。先程作っていただいたzp_callというスペースが存在していれば、その中にボタンを作成します。なければこの場で作りますが、場所はヘッダ部分になるので見た目があまり良くないかもしれません。

もしボタン追加されたけど、なんか上の方に表示されちゃって困る、という場合は先ほどのフォームタブで、追加したスペースに正しく zp_call という要素IDが指定されているかをご確認ください。

ここまで来たら、保存ボタンをクリックし、最後にアプリの更新を行なってください。

Happy Calling!

お疲れ様でした。ここまでの作業が終わったら顧客詳細画面を開いてみてください。
電話番号の隣に Call via Zoom Phone というボタンが見えると思います。クリックすると、Zoomが立ち上がって電話ができるようになるはずです。

ぜひお試しください。

次回

次回は「着信時の顧客情報ポップアップ」を取り上げます。ご期待ください！