CordovaアプリでTwilio Pluginを利用しiPhoneから電話をかけてみる。

目的

　TwilioをPhoneGap/Apache Cordovaで使用する方法について、TwilioJP-UGの高橋さんがAndroid版について記事を書いてくれていますが、iOS版については日本語の情報が不足している状況です。
　そこで、CordovaのTwilio ClientプラグインのiOSでの使い方について、電話をかける場合を例に記事を作成しました。

準備するもの

• Twilioアカウント
• Twilioサーバからアクセス可能なWebサーバ
• Xcode(7.2.1)
• Cordova環境（5.4.0)
• iPhone実機(iOS 9.2.1)

Twilioアカウント

　Twilioのアカウントを持っていない方は、こちらのページからサインアップすると一定の利用分は無料で利用可能になります。無料で利用すると通話の最初に英語で女性のアナウンスが流れますが、その後は利用可能になります。

Twilioサーバからアクセス可能なWebサーバ

　Twilioを用いた通話のイメージは下図の様になります。通話を発生させようとする際にTwilioはあなたが用意するWebAppサーバにどのような処理したらよいのかを求めてきます。WebAppサーバは「TwiML」という制御XMLを通じて接続したい「Some Phone」への動作を決定します。
　TwiMLを利用すると保留やカンファレンストークなどを行うことが出来ますが、今回は単純な通話のTwiMLを利用することにします。

図１　Twilioと電話の関係

<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Dial callerId="Twilioの電話番号">発信先電話番号</Dial>
</Response>

またWebAppサーバには、Azason API Gateway ＋ Amazon Lambda(node.js)での構成にしました。

Xcode(7.2.1)

　CordovaコマンドでiOS版のコンテンツを作成した後に利用することになるのでダウンロードをしてインストールしておきましょう。

Cordova環境(5.4.0)

　こちらで環境構築の手順が詳細に有りますので参考にし、導入してください。
但し1点だけ、今回導入するCordovaのバージョンは5.4.0を導入するので下記のコマンドで導入を行ってください。

$ sudo npm install cordova@5.4.0 -g

iPhone実機(iOS 9.2.1)

　iPhone6のiOS 9.2.1の端末で検証をしました。

手順

1. Twilio Client iOS SDKを入手する
2. WebサーバにトークンとTwiMLを書き出す準備をする。
3. 電話コンテンツを作成する。
4. CordovaコマンドからTwilioプラグインをインストールする
5. Xcodeでライブラリをリンクしビルドを実行する
6. iPhone実機で動作させる。

Twilio Client iOS SDKを入手する

　Twilio Client iOS SDKをこのサイトからダウンロードし解凍する。解凍後のディレクトリは下図のようになっています。

解答したディレクトリは後のXcodeで利用するので、このままにしておきます。

WebサーバにトークンとTwiMLを書き出す準備をする

　今回のサーバ環境はAWS API GatewayとAWS Lambdaを用いてサーバレスアーキテクチャを採用しています。ここではこれに関しては深く触れず、Twilioクライアントが必要とする「ケイパビリティートークン」の発行方法について紹介します。

　Twilioを利用するにあたり、Twilioクライアントはケイパビリティトークンを必要とします。ここではクライアントが直接トークンを取りに行くことはせずに、サーバからの要求に応じて取得し、クライアントに返すことにします。（サンプルコード1）
　Twilioクライアントは「１」の処理で取得できあトークンを元にクライアントAPIにあるTwilio.Device.connect()メソッドを利用し接続します。（電話をかけます。）（サンプルコード2）

　AWS LambdaではNode.jsを利用する前提で、以下にケイパビリティトークンの取得サンプルを示します。

var Twilio = require('twilio');
var Config = rootRequire('config/config.json');
/**
 *  capabilityTokenの生成
 *
 * @param clientId
 * @return String
 */
exports.createCapabilitytoken = function(clientId) {
    // アカウントSID、Authトークンを設定する。
    var capability = new Twilio.Capability(Config.twilio.accountSid, Config.twilio.authToken);
    // 受話可能なトークンにする。
    capability.allowClientIncoming(clientId);
    // アプリケーションSIDを設定する。
    capability.allowClientOutgoing(Config.twilio.applicationSid);
    return capability.generate();
};

サンプルコード1

 処理が関数化されているので、適切なLambdaの処理から呼び出せるようにしてあります。
また、上記で説明したTwiMLを出力する処理は下記のサンプルコードになります。

/**
 *  発信TwiML生成
 *
 * @param from
 * @param to
 * @return TwiML
 */
exports.createCallTwiml = function(from,to) {
    var resp = new Twilio.TwimlResponse();
    resp.dial({
        callerId: from
    },function(node) {
        node.number(to);
    });
    return resp.toString();
};

サンプルコード2

電話コンテンツを作成する

電話コンテンツページを作成するために「Onsen UI」を利用しました。下記はコントローラのJavascriptコードです。

'use strict';

/**
 * 電話の画面コントローラー
 */
angular.module(cnf.appName).controller('clientController', ['$scope','$http',
function ($scope, $http) {
 
 console.log("start!!");

 var reqData = {
        userId : "0000003"
 };

    $http({
        url : cnf.apiHost + "/phone/capabilitytoken",
        data : reqData
    }).success(function(data, status) {

     Twilio.Device.setup(data.token, {
      debug : true
     });

     Twilio.Device.ready(function(device) {
      console.log("Ready");
     });
 
     Twilio.Device.error(function(error) {
      console.log("Error: " + error.message);
     });

     Twilio.Device.connect(function(conn) {
      console.log("Successfully established call");
     });

     Twilio.Device.disconnect(function(conn) {
      console.log("Call ended");
     });
 
     Twilio.Device.incoming(function(conn) {
     // accept the incoming connection and start two-way audio
      console.log("Incoming connection from " + conn.parameters.From);
      conn.accept();
     });    
    });


 $scope.call = function() {
  alert("call!")
  conn = Twilio.Device.connect({
   To : '+8150XXXXXXXX',
   From : '+8150XXXXXXXX'
  });
 };

 $scope.hangup = function() {
  Twilio.Device.disconnectAll();
 }
}]);

電話ページは下記のようになります、非常にシンプルです。

<ons-page ng-controller="clientController" id="client">
<P/>
<P/>
<P>
 <ons-button class="call" ng-click="call()">Call</ons-button>
</P>
<P>
 <ons-button class="call" ng-click="accept()">accept</ons-button>
</P>
<P>
 <ons-button class="hangup" ng-click="hangup()">Hangup</ons-button>
</P>
</ons-page>

CordovaコマンドからTwilioプラグインをインストールする

　インストールしたCordovaコマンドから新しいプロジェクトを作成する。
　作成したプロジェクトの中に入りプラグインをインストールする。

$ cordova create MyApp
$ cd MyApp
$ cordova plugin add https://github.com/jefflinwood/twilio_client_phonegap.git

Xcodeでライブラリをリンクしビルドを実行する

　Cordovaコマンドを用いてiOS用の環境を作成する。と「Xcodeでライブラリとヘッダファイルを追加してね。」とメッセージが出てきます。

$ cordova platform add ios
Adding ios project...
Running command: /Users/XXXX/.cordova/lib/npm_cache/cordova-ios/3.9.2/package/bin/create /Users/XXXX/hello/MyApp/platforms/ios io.cordova.hellocordova HelloCordova --cli
iOS project created with cordova-ios@3.9.2
Installing "com.phonegap.plugins.twilioclient" for ios

You need to download __Twilio Client for iOS__ from https://www.twilio.com/docs/client/ios. Uncompress the download - you will need to follow a few steps that plugman can not do yet:

* Add the Twilio Client static libraries (the .a files in the Libraries folder) to your Xcode project

* Add the Twilio Client headers files (the .h files in the Headers folder) to your Xcode project
        
Installing "cordova-plugin-whitelist" for ios
$

Xcodeを起動し、必要なライブラリをダウンロードしたSDKからリンクします。
Xcodeプロジェクトファイルは「MyApp/Platforms/ios/」に出来上がっています。

そのままビルドするとリンクエラーになっていることが確認できます。


プロジェクトのトップからメニューで「New Group」を選択し、「TwilioSDK」というグループを作成します。

ダウンロードし、解答したSDKディレクトリから「Headers」「Libraries」リングトーンやダイアル音が欲しい方は「Resources」を選択し、Xcodeプロジェクトの「TwilioSDK」グループ配下にドラックアンドドロップで貼り付けます。

貼り付ける際のダイアログは下図のとおりです。

貼り付けが完了すると以下のようにディレクトリがリンクされている様子がわかります。

ここで再度ビルドを実行すると成功することがわかります。

Tip

　他のCordovaプラグインと一緒にビルドをしようとすると、エラーが起こることが有ります。その際は、「Build Setting」の項目からから「Enable Bitcode」を「No」にするとビルドできるようになります。

iPhone実機で動作させる

　ビルドが成功したら実機のiPhoneをMacのUSBに繋いで、アプリケーションを転送して動作を確認します。

まとめ

　今回はApache CordovaのTwilio PluginをiPhoneで動作をさせました。

Apache Cordovaを用いるとハイブリッドアプリケーションをHTML+Javascriptで手軽に作成する事ができます。本家のサイトには日本語の情報も豊富にあるので、今後の開発の参考にしてみてはいかがでしょうか？