Tips

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)

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

  • 電話番号は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は、世界一00ヵ国と接続されていて、それぞれの国に直接電話をかけることができます。
そのため、発信・着信の電話番号は、全世界で利用可能な「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. Runtimeの Functions を選択します。
  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の管理コンソールで、スライドメニューから Runtime の Functions を選択します。
  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で動作を確認しています。