Twilioを使ってkintoneから直接電話をかけてみよう

著者名:株式会社 KDDI ウェブコミュニケーションズ Twilio エバンジェリスト高橋克己

目次

はじめに

みなさん、こんにちは。
KDDIWeb コミュニケーションズの Twilio エバンジェリスト高橋です。

ところでみなさん、Twilio ってご存じでしょうか?
Twilio (External link) は、コミュニケーション API を提供するサンフランシスコ生まれのサービスで、プログラムから電話をかけたり、SMS を送信したりできます。
また、ブラウザーを使って電話の受発信もできます。
ご存じのとおり、kintone はブラウザーで動作するため、Twilio を使うことで電話回線や電話機を一切使用せずに、kintone だけで電話の発着信ができます。

本記事では、kintone アプリの詳細画面上に電話をかけるためのボタンを設置し、ボタンを押すと、Twilio 経由でそのレコードの電話番号欄の番号に電話をかけるというものです。

準備するもの

  • パソコン(Chrome ブラウザー、マイク、スピーカー) *1
  • インターネット環境( Networkテストページ (External link) でテストをして、エラーが出ないことを確認してください)
  • JavaScript ファイルを編集するためのエディタ
  • kintone のアカウント
  • Twilio アカウント(トライアルアカウントでも可)

*1 Chrome ブラウザー、マイク、スピーカーがないと動作しません。 ^

Twilioアカウントの準備

Twilio のアップグレード済みアカウントをすでにお持ちの方は、そのアカウントをそのままご利用いただけます。
アカウントを持っていない方は、 Twilioサインアップページ (External link) よりサインアップをしてください。
サインアップが完了すると、トライアルアカウントとして 500 円分のポイントが使えます。

トライアルアカウントには、以下の制限があります。

  • 電話番号は 1 つしか購入できません。
  • 発信が可能なのはサインアップに認証した電話番号宛のみとなります。
  • 着信時にトライアルアカウントのガイダンスが流れます。

継続して利用したい場合は、クレジットカードを登録してポイントを追加し、アカウントをアップグレードしてください。
アップグレードされると、上記制限はなくなります。

作業手順

本記事の作業手順は以下のとおりです。

  1. kintone 側でアプリストアから「顧客リスト」アプリを作成する。
  2. 詳細画面に発信用ボタンを実装する。
  3. Twilio 側で電話番号を購入する。
  4. 発信用アプリケーション(Twilio アプリ)を作成する。
  5. ケイパビリティトークンを生成するしくみを作る。
  6. 環境変数を設定する。
  7. kintone 側の JavaScript をコーディングする。
  8. kintone アプリに JavaScript/CSS を実装する。
  9. テストする。

アプリストアから「顧客リスト」アプリを作成する

今回は、kintone にあらかじめ用意されている「顧客リスト」をカスタマイズしていきますので、ご自分の kintone の環境に新しいアプリとして「顧客リスト」アプリを追加してください(サンプルデータも一緒にインストールします)。

詳細画面に発信用ボタンを実装する

今回は、顧客リストアプリの詳細画面に電話発信ボタンを追加して、開いているレコードの電話番号に発信します。
そのため、詳細画面にボタン配置用のスペースフィールドを追加します。
フィールド名(要素 ID)は「connectButtonSpace」とします。

スペースフィールドが作成できたら、アプリの変更を保存しておきましょう。

Twilio側で電話番号を購入する

Twilio 経由で電話を架ける場合、発信者番号は Twilio 上で購入した番号になります。
ではさっそく、Twilio の電話番号を購入してみましょう。

Twilioの管理コンソールにログインする

ブラウザーで Twilio の ログイン画面 (External link) を表示し、ご自分の ID とパスワードでログインをします。

電話番号を購入する

すでに 050 番号をお持ちの方は、そちらをご利用いただくことができますので、このセクションは飛ばしていただいて大丈夫です。

  1. 管理コンソールの左側にある ボタンアイコン を押すと、スライドメニューが表示されます。

  2. スライドメニューの一覧から、電話番号 もしくは Phone Numbers を選択します。

  3. 電話番号メニューの中の Buy a Number を選択します。
  4. 国のプルダウンから「Japan(+81)」を選択し、検索ボタンを押します。

  5. 一覧表示されたリストの中から、TYPE がローカルになっている(108 円)の番号をひとつ選び、購入ボタンを押します。
  6. この番号を購入しますか?というダイアログが出たら、この番号を購入するを押します。
  7. Congratulation のダイアログが表示されたら、購入完了です。
  8. 閉じるボタンを押します。
  9. Phone Numbers の中の Manage Numbers を選択し、今購入した電話番号が表示されることを確認します。
    購入した電話番号はのちほど使いますので、メモ帳などに控えておきます。
tips
補足

電話番号の表記方法について
Twilio は、世界 100 ヵ国と接続されていて、それぞれの国に直接電話をかけることができます。
そのため、発信・着信の電話番号は、全世界で利用可能な「E.164 形式」と呼ばれる表記方法を使います。
E.164 形式とは、先頭が+から始まる国番号と電話番号の組み合わせです。
たとえば、日本は国番号が+81 となっており、その後の電話番号を続けて記述します。
電話番号の先頭の 0 は削除します。「09012345678」は、E.164 形式で「+819012345678」となります。

発信用アプリケーション(Twilioアプリ)を作成する

今回は、kintone の JavaScript 実行環境上で、Twilio の VoIP クライアントを動作させるため、Twilio の VoIP クライアントのしくみを先に説明します。
ただし、ちょっと難しいので、この時点で完全に理解していただく必要はありません。

  1. Twilio 側に、発信用 Twilio アプリを作成しておきます。
  2. ブラウザーから Twilio に対して REST API を使ってトークン(ユーザーが Twilio の機能を利用することを許可するための有効期限付きの認証情報)の生成をします。
    その際に、発信用 Twilio アプリの情報を渡すことで、トークンにアプリがひも付きます。
  3. ブラウザー側は生成されたトークンを使って、Device クラスのセットアップを行います。
  4. セットアップされた Device クラスに対して Connect メソッドを利用することで発信が可能になります。
    Connect メソッドを呼ぶ際に、発信先の電話番号を渡すことができます。
  5. 同様に、Device クラスに対して Disconnect メソッドを利用すると、通話中のコールを切断できます。
<参考>Twilioアプリとは

Twilio では、Twilio を操作する言語として TwiML(トゥイムルと呼びます)が用意されており、たとえば今回のようにブラウザーからの発信依頼を外線に転送するためには、以下のような TwiML の Dial 動詞を利用します。

ここで重要なことは、kintone から電話をかけるといいながら、内部的には kintone から Twilio に発信し、
Twilio が着信したコールを実際の相手方に転送しているということです。

1
2
3
4
5
<Response>
  <Dial callerId="+8150XXXXXXXX">
    <Number>+8190XXXXXXXX</Number>
  </Dial>
</Response>

この例では、ブラウザーから発信が 090XXXXXXXX に転送されます。その際の発信者番号として、
050XXXXXXXX が利用されます。
Twilio は内部的に E.164 形式で電話番号を記述することに注意してください。

Twilio Functionsを使って、動的にTwiMLを生成する

ここでは、kintone から受け取った相手先の電話番号を使って、動的に TwiML を作成する Function を作っていきます。

  1. Twilio の管理コンソールで、スライドメニューから。Runtimeを選択します。
  2. Your Runtime Domainのところに表示されている「xxxx-xxxxxx-xxxx.twil.io」をメモ帳にコピーしておきます(これがあなたの Runtime ドメインになります)
  3. RuntimeFunctions を選択します。
  4. さらに管理を選択し、Create a new Function もしくは、赤い+アイコンを押して、新しい Function を作成します。
  5. テンプレートを選択するダイアログが表示されるので、Blankを選択した後、Createボタンを押します。

  6. FUNCTION NAME欄に「CallPhone」と入力します。
  7. PATH欄に「/call-phone」と入力します。
  8. CODE欄にあらかじめ書かれているコードをすべて削除し、以下のコードを貼り付けます。
  9. Saveボタンを押して、設定を保存します。
  10. Path欄の右側にあるコピーアイコンをクリックして、URL をコピーしメモ帳などに記録します。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
exports.handler = function(context, event, callback) {
  const twiml = new Twilio.twiml.VoiceResponse();
  const toNumber = event.To || '';
  if (toNumber) {
    twiml
      .dial({
        callerId: context.FROM_NUMBER,
      })
      .number({}, toNumber);
  } else {
    twiml.say({
      language: 'ja-JP',
      voice: 'alice',
    }, '相手先番号が正しくありません');
  }
  callback(null, twiml);
};

このコードでは、Toというパラメーターで相手先の電話番号を受け取っています。
また、発信元の電話番号として、context.FROM_NUMBERを指定していますが、これはこのあと設定する環境変数を参照しています。
この Function が正常に実行されると、先に示したような TwiML が動的に生成されます。

Twilioアプリを作成する

次に、今作成した Function を Twilio アプリにします。

  1. 管理コンソールのスライドメニューから、Phone Numbers の中の ツール > TwiML Apps を選択します。
  2. 新しい TwiML App を作成するボタンを押すか、赤い+アイコンを押します。
  3. わかりやすい名前に「CallPhone」と入力します。
  4. REQUEST URLに、さきほどメモしておいた Function の URL を入力します。

  5. 保存ボタンを押します。
  6. 作成した TwiML APP を選択します。
  7. プロパティの中の SID(AP から始まる文字列)をメモ帳にコピーします。
    ケイパビリティトークンを生成する際に利用します。

ケイパビリティトークンを生成するしくみを作る

ケイパビリティトークンは、kintone からのリクエストを受けて、Twilio 側の API で生成する文字列です。
トークンには有効期限があり、生成時に指定をしない場合は 1 時間となります(最大 24 時間のトークンを生成することが可能)。
トークンを利用することで、発信と着信のいずれか、もしくは両方をブラウザー(今回の場合は kintone)に許可できます。

今回は kintone からの発信のみですので、発信用のトークンを作成する必要があります。 トークンの生成に必要な情報は以下のとおりです。

  • Twilio の AccountSID と AuthToken(管理コンソールから確認できます)
  • 発信用 Twilio アプリの SID(さきほどメモ帳に保存していただいています)
  • Identity(クライアントを識別するための文字列で、今回は kintone のログインユーザ ID を利用する予定です)
Twilio Functionsを使って、ケイパビリティトークンを生成する
  1. Twilio の管理コンソールで、スライドメニューから RuntimeFunctions を選択します。
  2. 管理を選択し、Create a new Functionもしくは、赤い+アイコンを押して、新しい Function を作成します。
  3. テンプレートを選択するダイアログが表示されるので、Blankを選択した後、Createボタンを押します。

  4. FUNCTION NAME欄に「token」と入力します。
  5. PATH欄に「/token」と入力します。
  6. ACCESS CONTROLのチェックボックスもオフにします。

  7. CODE欄にあらかじめ書かれているコードをすべて削除し、以下のコードを貼り付けます。
  8. Saveボタンを押して、設定を保存します。しばらくするとデプロイが完了します。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
exports.handler = function(context, event, callback) {
  const identity = event.identity || '';
  if (identity === '') callback(new Error('Identity not set.'));
  const response = new Twilio.Response();
  response.appendHeader('Access-Control-Allow-Origin', 'https://' + context.KINTONE_APP_URI);

  const ClientCapability = Twilio.jwt.ClientCapability;
  const capability = new ClientCapability({
    accountSid: context.ACCOUNT_SID,
    authToken: context.AUTH_TOKEN,
  });

  capability.addScope(new ClientCapability.OutgoingClientScope({
    applicationSid: context.TWIMLAPPS_SID,
    clientName: identity,
  }));

  response.appendHeader('Content-Type', 'application/json');
  response.setBody({
    identity: identity,
    token: capability.toJwt(),
  });

  callback(null, response);
};

この例では、呼び出し時にidentityというパラメーターを受け取り、そこに kintone のログイン ID が入っていると仮定しています。
また、5 行目は CORS(Cross Origin Resource Sharing)の指定になります。
この Function 自体、kintone 内の JavaScript から呼び出されるため、通常は、ブラウザーのクロスサイト・スクリプティング防止機能が効いてしまい、kintone からのアクセスが失敗してしまいます。
そこで、CORS を指定して、呼び出し元の kintone アプリの URL を指定することでこの問題を回避しています。

環境変数を設定する

この時点で 2 つの Function が完成しています。
それぞれの Function は、環境変数によって値を取得するようになっているため、皆さんの環境に応じて環境変数を設定する必要があります。

  1. Twilioの管理コンソールで、スライドメニューからRuntimeを選択します。

  2. Functions を選択し、さらに 設定 を選びます。

  3. Enable ACCOUNT_SID and AUTH_TOKENのチェックを入れます。

  4. Environmental Variablesの中の赤い+アイコンを 3 回押して、枠を 3 行作ります。

  5. すでに以下の環境変数が設定されている場合は、VALUE値だけを確認してください。

  6. 以下の内容を記載します。

    KEY VALUE
    FROM_NUMBER 購入した050番号をE.164形式(+8150XXXXXXXX)で指定します
    KINTONE_APP_URI kintoneのURLに含まれるドメイン文字列(xxxxx.cybozu.com)を指定します
    TWIMLAPPS_SID さきほどメモ帳に控えておいたTwilioアプリのSID(APから始まる文字列)を指定します
  7. Dependencies の設定内にある、「Twilio」の VERSION を「3.30.1」に変更します。

  8. Saveボタンを押して、設定を保存します。

kintone側のJavaScriptをコーディングする

さて、ここからは kintone 側の設定になります。
kintone アプリから電話をかけるためには、Twilio の JavaScript SDK を使って、プログラムを作成していく必要があります。

お使いのエディタで、client.js という名前のファイルを作成し、まずは以下のひな型を作成します。

1
2
3
4
(() => {
  'use strict';

})();

kintone で JavaScript を利用する場合は、スコープ汚染を防ぐために上記のように即時関数を利用します。
また、エラーチェックを行うために厳格モード(use strict)も指定しておきましょう。

レコード詳細画面を開いた時のコーディング

今回は、顧客アプリの詳細画面を開いたとき、その顧客に電話をかけたいです。
そのため、詳細画面をひらいたときに動作するコードを記述する必要があります。
kintone では、詳細画面を開いた時に app.record.detail.show イベントが発行するので、これを補足するようにします。

1
2
3
4
5
6
7
8
(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', e => {
    const customerNumber = e.record['TEL'].value || '';
  });

})();

この例では、eという変数を参照することで、各種情報にアクセスできます。
たとえば、担当者名(フィールドコードが「担当者名」)にアクセスする際は、e.record['担当者名'].value と指定できます。

電話発信の手順

Twilio の JavaScript SDK では、以下の方法で電話を発信します。

  1. ケイパビリティトークンを取得します。
  2. 取得したトークンを使って、Device クラスを初期化します。
  3. 発信したいタイミングで、Device クラスの connect()メソッドを呼び出します(このときに発信先の電話番号を指定できます)
  4. こちらから切断したい場合は、Device クラスの disconnect()メソッドを呼び出します。
トークンの取得

ケイパビリティトークンを取得するために、さきほど作成しておいた Function を fetch で呼び出してみましょう。
以下のようなコードになります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// 省略
const customerNumber = e.record['TEL'].value || '';
const twilioDomain = 'xxxxxxxx.twil.io';
const loginUser = kintone.getLoginUser().id;

fetch(`https://${twilioDomain}/token?identity=${loginUser}`)
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log('### Client token got.');
    console.log(data);
  })
  .catch(err => {
    console.log('*** Error *** Could not get a token from server.');
    console.log(err);
  });
// 省略

twilioDomain は、ご自分の Twilio 環境(Runtime ドメイン)に併せて変更してください。
kintone.getLoginUser() を使うと、現在 kintone にログインしているユーザ情報が取得できます。
今回はその中の id フィールド(自動採番される数値)を取得して、これをトークンの識別子として利用します。

トークンの呼び出しが成功すれば、最終的にdataオブジェクトに JSON 形式で値が戻ります。

トークンを使ってDeviceクラスを初期化する

Device クラスの初期化は以下のようなコードになります。
記述が必要なのは、トークンデータ(data)を受け取った後になります。

1
2
3
4
5
6
7
8
// 省略
console.log(data);

Twilio.Device.setup(data.token, {
  region: 'jp1',
  closeProtection: 'ページを閉じると通話が切断されます。'
});
// 省略

Device クラスの初期化にはトークンが必要です。
setup() メソッドでは、リージョン指定(日本は jp1)と、ブラウザーを閉じたときの警告メッセージなどが指定できます。
setup() メソッドの詳細については、 ドキュメントページ (External link) を確認してください。

Device クラスを使うと、以下のような各種イベントを取得できます。

  • ready: Device クラスの初期化が成功して利用可能になった場合、発行します。
  • error: 何らかのエラーが発生したときに発行します。
  • connect: 呼び出し(connect() メソッドの呼び出し)が完了し、相手と接続したときに発行します。
  • disconnect: 相手との通話が切断したときに発行します。
  • offline: ケイパビリティトークンが切断されるなど、Device クラスが無効となった場合に発行します。

これらのイベントは以下のように記述できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 省略
Twilio.Device.setup(data.token, {
  region: 'jp1',
  closeProtection: 'ページを閉じると通話が切断されます。'
});

Twilio.Device.on('ready', device => {
  console.log('### Device ready.');
});

Twilio.Device.on('error', error => {
  console.log(`*** Error *** ${error.message}`);
});

Twilio.Device.on('connect', conn => {
  console.log('### Device connected.');
});

Twilio.Device.on('disconnect', conn => {
  console.log('### Device disconnected.');
});

Twilio.Device.on('offline', device => {
  console.log('### Device offline.');
  fetch(`https://${twilioDomain}/token?identity=${loginUser}`)
    .then(response => {
      return response.json();
    })
    .then(data => {
      console.log('### Client token got.');
      console.log(data);
    })
    .catch(err => {
      console.log('*** Error *** Could not get a token from server.');
      console.log(err);
    });
});

// 省略

この例では、offline イベントが発生したときに、再度トークンを取得して Device クラスの初期化をしています。
このようにしておくことで、トークンの有効期限(初期値は 1 時間)が切れてしまって発信できなくなることを防いでいます。

発信ボタンを作成する

電話をかける準備は整いましたので、次に kintone アプリ上に発信ボタンを設置してみましょう。

今回はあらかじめ画面上に作成しておいたスペースフィールド(フィールドコード「connectButtonSpace」)にボタンを配置していきます。
コードを書く場所は詳細画面を表示した直後あたりがよいでしょう。

また、ボタンの表示には 2018 年 5 月に公開された、「kintone UI Component」を利用します。
これにより、kintone ライクな UI が簡単に実装できます。
「kintone UI Component」の詳しい説明については、 ドキュメントページ を確認してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// 省略
kintone.events.on('app.record.detail.show', e => {

  const customerNumber = e.record['TEL'].value || '';

  const button = newkintoneUIComponent.Button({
    text: '発信',
    type: 'normal'
  });

  kintone.app.record.getSpaceElement('connectButtonSpace').appendChild(button.render());
  button.hide();
  button.on('click', () => {
    buttonAction(customerNumber, button);
  });
// 省略
});

まずは UI Component の button を生成します。ボタンには「発信」という文字を表示するようにしています。
できあがったボタンを用意したスペースにエレメントを追加することで、ボタンがアプリ上で表示されます。
ただし、ケイパビリティトークンを取得するまでボタンが押されないように、この時点ではボタンを非表示にしておきます。

1
2
3
4
5
6
// 省略
Twilio.Device.on('ready', device => {
  console.log('### Device ready.');
  button.show();
});
// 省略

トークンの取得が成功し、Device の準備が整った時点で、上記のようにボタンを表示します。

ボタンが押されたときの動作を設定する

ボタンが押されたときの動作は、buttonAction という関数にして、コードの先頭部分に定義しておきます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
(() => {
  'use strict';
  const buttonAction = (customerNumber, button) => {
    if (button.render().innerText === '発信') {
      // 発信
      const params = {
        To: `+81${customerNumber.slice(1)}` // 電話番号をE.164に変換
      };
      console.log(`### Calling to ${params.To}...`);
      Twilio.Device.connect(params);
    } else {
      // 切断
      console.log(`### Disconnecting...`);
      Twilio.Device.disconnectAll();
    }
  };
// 省略
});

発信ボタンは、通話中には切断ボタンとしても使いたいので、ボタンが押された時に、ボタンの表示を判定して「発信」と表示されているときは発信、それ以外では切断するようにしています。
発信するときは、Device クラスの connect() メソッドを利用しますが、そのときにToパラメーターを指定することで、Twilio アプリにパラメーターが引き渡されます。

通話中になったときの処理

発信ボタンを押すことで、Twilio 経由で相手方の電話に発信が行われます。
発信が正常に行われ相手の応答があると、Device クラスの connect イベントを発行します。
今回は、このイベントが発行したとき、ボタンのキャプションを「切断」に変更したいと思います。
connect イベント内に記載するコードは次のようになります。

1
2
3
4
5
6
7
// 省略
Twilio.Device.on('connect', conn => {
  console.log('### Device connected.');
  button.setText('切断');
  button.setType('submit');
});
// 省略
切断完了時の処理

同じく、通話が終了したときにボタンのキャプションを「発信」に戻したいと思います。
こちらは、diconnect イベント内に以下のコードを記載します。

1
2
3
4
5
6
7
// 省略
Twilio.Device.on('disconnect', conn => {
  console.log('### Device disconnected.');
  button.setText('発信');
  button.setType('normal');
});
// 省略

以上で最低限のコーディングは終了です。 client.jsという名前をつけて保存しておきましょう。

完成したコードは以下となります(一部ご自分の環境に合わせて修正が必要です)。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
(() => {
  'use strict';

  const buttonAction = (customerNumber, button) => {
    if (button.render().innerText === '発信') {
      // 発信
      const params = {
        To: `+81${customerNumber.slice(1)}` // 電話番号をE.164に変換
      };
      console.log(`### Calling to ${params.To}...`);
      Twilio.Device.connect(params);
    } else {
      // 切断
      console.log(`### Disconnecting...`);
      Twilio.Device.disconnectAll();
    }
  };

  kintone.events.on('app.record.detail.show', e => {

    const customerNumber = e.record['TEL'].value || '';
    const twilioDomain = 'xxxxx-xxxxx-xxxx.twil.io'; // <-ご自分の環境に合わせてください
    const loginUser = kintone.getLoginUser().id;

    const button = new kintoneUIComponent.Button({
      text: '発信',
      type: 'normal'
    });
    kintone.app.record.getSpaceElement('connectButtonSpace').appendChild(button.render());
    button.hide();
    button.on('click', () => {
      buttonAction(customerNumber, button);
    });

    fetch(`https://${twilioDomain}/token?identity=${loginUser}`)
      .then(response => {
        return response.json();
      })
      .then(data => {
        console.log('### Client token got.');
        console.log(data);

        Twilio.Device.setup(data.token, {
          region: 'jp1',
          closeProtection: 'ページを閉じると通話が切断されます。'
        });

        Twilio.Device.on('ready', device => {
          console.log('### Device ready.');
          button.show();
        });

        Twilio.Device.on('error', error => {
          console.log(`*** Error *** ${error.message}`);
        });

        Twilio.Device.on('connect', conn => {
          console.log('### Device connected.');
          button.setText('切断');
          button.setType('submit');
        });

        Twilio.Device.on('disconnect', conn => {
          console.log('### Device disconnected.');
          button.setText('発信');
          button.setType('normal');
        });

        Twilio.Device.on('offline', device => {
          console.log('### Device offline.');
          fetch(`https://${twilioDomain}/token?identity=${loginUser}`)
            .then(response => {
              return response.json();
            })
            .then(token => {
              console.log('### Client token got.');
              console.log(token);
            })
            .catch(err => {
              console.log('*** Error *** Could not get a token from server.');
              console.log(err);
            });
        });
      })
      .catch(err => {
        console.log('*** Error *** Could not get a token from server.');
        console.log(err);
      });
  });

})();

kintoneアプリにJavaScript/CSSを実装する

kintone アプリに今作成した JavaScript ファイルや、各種 SDK などを実装していきましょう。

  1. 顧客アプリの設定画面を開きます。
  2. 設定タブを開いて、その中の JavaScript / CSS でカスタマイズ を選択します。

  3. kintone UI Component の GitHubページ (External link) から kintone-kintone-ui-component-0.9.5.tgz をダウンロードして展開します。 kintone-ui-component.min.js と kintone-ui-component.min.css という 2 つのファイルを使用します。
  4. PC用のCSSファイルに、以下の順番で CSS を読み込むようにします。
  5. PC用のJavaScriptファイルに、以下の順番でスクリプトを読み込むようにします。
    順番 URL 説明
    1 https://media.twiliocdn.com/sdk/js/client/v1.7/twilio.min.js TwilioのJavaScript SDK
    2 kintone-ui-component.min.js ダウンロードしたUI ComponentのJavaScriptファイル
    3 client.js さきほど作成したJavaScriptファイルをアップロードします
  6. PC用のCSSファイルに、以下の CSS を読み込むようにします。
    順番 URL 説明
    1 kintone-ui-component.min.css ダウンロードしたUI ComponentのCSSファイル
  7. 画面上部の 保存 ボタンを押してから、アプリを更新 ボタンを押します。

以上でセッティングすべて完了です。

テストする

  1. 顧客アプリを開いて、サンプルデータのいずれかの詳細画面に移動します。
  2. TEL 欄に、ご自分の電話番号を上書きします(090XXXXXXXX のようにハイフンはなしで指定してください)
    なお、トライアルアカウントでテストをする場合は、サインアップ時に認証した番号にしか発信できません。
  3. レコードを保存したら、「発信」ボタンを押して電話がかかってくることを確認します。

デバッグ方法

kintone の JavaScript でなんからのエラーが出ている場合は、Chrome のコンソールログが役に立ちます。
コンソールログは以下の手順で表示できます。

  1. Chrome ブラウザーの右上の、縦に・が 3 つ並んだボタンを押します。
  2. その他のツールの中にある、デベロッパーツールを選択します。

  3. Consoleタブを開くとログが表示されます。

  4. client.js の中で、console.log() で記載したコメントは、この画面上に表示されます。

料金について

最後に、kintone から電話をかけたときの料金(税込み)について説明します。

まず、kintone から Twilio に発信をするところで 0.25 円/分が必要です。
その後、Twilio から外線に発信するところで、固定電話(03 番号など)への発信が 5.4 円/分、携帯電話への発信が 16.2 円/分必要です。
そのため、たとえば kintone から携帯電話に発信すると、16.45 円/分がかかります。
これに加えて、050 番号の利用料として、108 円/月が必要となります。

詳しくは、 Twilioの料金ページ (External link) を確認してください。

まとめ

kintone は JavaScript が実行できるため、今回のように Twilio の JavaScript SDK を使うことで、kintone が電話機になって電話がかけられます。
kintone と Twilio はとても相性がよいので、ぜひいろいろとチャレンジしてみてください。

information

この Tips は、2019 年 4 月版 kintone で動作を確認しています。