kintone からクリック to コールする

MiiTel Phone Chrome Extension をインストール済みの場合、ブラウザ上の kintone で表示される電話番号をクリックすると MiiTel Phone Web を起動して発信できます。

しかし、環境によって下記のような意図しない動作をする可能性があります。

  • kintone モバイルアプリからリンクをタップした場合は、OS の制約によって正常に発信できない
  • MiiTel Phone Desktop から発信したいのに別のアプリケーションが起動する

この記事では、kintone でサポートされる JavaScript によるカスタマイズ機能を利用して、kintone からのクリック to コールを可能にする方法を紹介します。

📘

以下のMiiTel Phoneを利用しているお客様が対象です

  • MiiTel Phone Mobile
  • MiiTel Phone Desktop

完成イメージ

パソコン

スマートフォン

設定方法

kintone では、PC 用とスマートフォン用でそれぞれ JavaScript を組み込むことができます。

🚧

注意事項

以降に記載する JavaScript は最低限の実装です。動作確認は完了していますが、より使いやすくするためには CSS で装飾したり、ボタンの表示箇所を変更するなど、お客様の環境に合わせて随時変更してください。

下図のように、クリック to コールを有効化したい kintone アプリの設定から、JavaScript / CSS でカスタマイズをクリックします。

PC 用には、下記の JavaScript をアップロードします。

コード内の fieldCode の値が アプリの設定>フォームに存在するフィールドのフィールドコードと一致するようにしてください

(() => {
    'use strict';

    kintone.events.on('app.record.detail.show', (event) => {
        const fieldCode = 'phone_number'; // お客様のアプリに合わせて、フィールドコードを入れてください
        const myIndexButton = document.createElement('button');
        myIndexButton.id = 'call_on_miitel_button';
        myIndexButton.innerText = 'MiiTel Phone Desktop で発信';
        myIndexButton.onclick = () => {
            const rec = kintone.app.record.get();
            if (rec) {
                window.open('miitel://' + rec.record[fieldCode].value);
            }
        };
        kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);
    });
})();

スマートフォン用には、下記の JavaScript をアップロードします。

(() => {
    'use strict';

    kintone.events.on('mobile.app.record.detail.show', (event) => {
        const fieldCode = 'phone_number'; // お客様の環境に合わせて、フィールドコードを入れてください
        const myIndexButton = document.createElement('button');
        myIndexButton.id = 'call_on_miitel_button';
        myIndexButton.innerText = 'MiiTel Phone Mobile で発信';
        myIndexButton.onclick = () => {
            const rec = kintone.mobile.app.record.get();
            if (rec) {
                location.href = 'https://miitel.app/?noredirect=1&number=' + rec.record[fieldCode].value;
            }
        };
        kintone.mobile.app.getHeaderSpaceElement().appendChild(myIndexButton);
    });
})();

保存してアプリを更新すると、各端末でボタンが表示され、クリックすると発信できます。

なお、 PC ではブラウザでポップアップを無効化している場合は、下記の画像のボタンからポップアップを有効化してください。

スマートフォンの場合は、下記のようにクッションページに遷移するので、「Dial {電話番号} on MiiTel」をクリックしてください。

うまくいかない場合

フォーラム からご質問ください!