【TwilioJP-UG 東京 イベントレポート】Twilio BasicPhoneをAndroidで動かそう！

2015年8月27日（木）、TwilioJP-UG 東京の第2回目のイベント【初心者向け•TwilioJP-UG 東京 第1回】Twilio BasicPhoneをAndroidで動かそうが開催されましたので、本ブログにてハンズオンイベントで行ったサンプルコードや内容をまとめたいと思います。

今回のブログでは、初心者向けでもあったため、Twilio Clientのアプリケーション設定などが含まれています。少し長いですが、是非試してみてください。

※ Twilio Clientの詳細は、下記のTwilio Clientリファレンスをご覧ください。
https://jp.twilio.com/docs/client

※ TwilioJP-UG イベントは、下記のDoorkeeperコミュニティから確認できます。
https://twiliojp-ug.doorkeeper.jp/

TwilioJP-UG ハッシュタグ： #twiliojpug

講師のご紹介

今回の講師は、株式会社 リーディング・エッジ の末広さん。

末広さんは、TwilioJP-UG 東京のメンバーで普段組み込み系の開発を行いながら、Androidコミュニティやjankinsプラグインメンテナーとして大活躍中です。

【執筆した技術書籍】

・Android Hacks

・Effactive Android

・Jankins入門

・組み込みAndroid入門

【SNS】

git：https://github.com/bols-blue

twitter：@bols_blue

発表資料

ハンズオン

ハンズオンでは、末広さんによるサンプルコードや環境設定に必要なファイルなどが提供されましたので、下記そのリンクもシェアします。

Twilioを動かすためには、Twilioがリクエストを送ることが可能なウェブサーバーが必要です。

当日、自分のウェブサーバーを持っている参加者はそのサーバーを利用しましたが、持っていない参加者は heroku を使ってハンズオンを進みました。

※ 本ブログは、Android Studioがインストールされているのを前提で作成致しました。

サンプルコードリンク

・Android Studio：https://developer.android.com/sdk/index.html

・Twilio BasicPhone（SDK）：https://jp.twilio.com/docs/client/android

・電話帳サンプルコード：https://github.com/bols-blue/TwilioPhoneExsample

・Twilioアカウント：https://jp.twilio.com/try-twilio/kddi-web

バージョン情報

Twilio Android SDK：twilioclient-android-1.2.6

Android Studio：1.1以上

Android Emulator：Nexus 5

TwiML APPS作成

TwiML APPSは、皆さんが開発するTwilioのiOSやAndroid、ウェブブラウザ（JS）のアプリケーションと連動するサーバー側の処理（TwiML（Twilio Markup Language））を設定することで電話やSMSの処理を行うことが可能になります。

TwiML Appsを作成してみましょう。

・下記の画面に移動：ログイン → ツール → TWIML APPS

・画面の「TwiMLAppを作成する」をクリック

下記の画面では、TwiML Appsの設定を行います。（設定後、変更可）

・フレンドリーネーム：TwiML APPのID（識別名）を入力します。

・Request URL：TwiML APPに着信されたら行う処理を行うTwiMLのURLを入力します。

・最後に「保存」ボタンをクリックします。

下記のように作成した「hoge」というTwiML APPが表示されます。

Application Sidを確認しましょう。

上記で生成された、TwiML APP「hoge」をクリックします。

画面に「Sid」が表示されます。（APから始まる34桁の文字列）

Twilioは、このTwiML APP Sid（Application Sid）とAccount Sid、Auth Tokenを使って、

通信に必要なケイパビリティトークンを発行します。

TwiML：サーバー側の設定

ダウンロードしたTwilio Android SDKのフォルダーを開いてください。

下記、フォルダーの構造ですが、「Server→server.py」を修正致します。

【Python】

Twilio Android SDKのServerには、server.pyで提供されていますので、Pythonユーザーのみなさんはこのまま設定を変えてサーバーに配置してください。

設定

①：AccountSIDとAuthTokenを設定します。

※ 本ブログでは、サブアカウントを使っているため、みなさんの画面と違うと思います。

　下記の画面のように、アカウントを選択するとクレデンシャル情報が表示されますので、

「Live」の情報を設定してください。

②：TwiML APP(Twilio Application) Sidを設定（Sid）

③：「CLIENT」を設定（フレンドリーネームに設定されているテキスト）

④：「CALLER_ID」を設定

これで設定完了です。結果物はこちらになります。

設定完了ファイルをみなさんのウェブサーバーにアップロードしてください。

※ ウェブサーバーは、公開されている必要があります。

■ 動作確認

サーバーにアップロードされた、スクリプトからTwilioのケイパビリティトークンが生成されるかを確認してみます。

みなさんのウェブサーバーにアップロードしたファイル名の後ろに「/token」を付けてブラウザなどで実行すると長い文字列が表示されます。ここで表示されるのが、ケイパビリティトークンになり、トークンが表示されると正常に動いていることを意味します。

【PHP】

せっかくなので、PHPのコードも紹介します。

PHPのフォルダー構造は、こちら。「server-php」フォルダーをウェブサーバーに公開します。

■ server-php

・Services：Twilio PHP ライブラリーです。

　PHP ライブラリーダウンロード：https://jp.twilio.com/docs/php/install#installation

・token.php：https://gist.github.com/twilioforkwc/f1764e13872b36a5d827

　※ Androidコードの「AUTH_PHP_SCRIPT」に設定します。

・twiML.php：https://gist.github.com/twilioforkwc/2f223556da0cee85bbf2
　※ TwiML Appsの「Request URL」に設定します。


※ 設定内容は、Pythonと同じですので、各リンクからファイルを取得し、設定変更後ウェブサーバーにアップロードしてください。（動作確認も忘れずに！）

Androidアプリを作ろう。

Twilio APPsのRequest URL設定。

いよいよ、Android Studioの出番です。Android Studioを起動しましょう。

下記、初期画面です。Quick Startから「Import project」をクリックします。

先ほど、ダウンロードしたTwilio Client Android SDKフォルダーから「BasicPhone」を選択します。

正常にインポートされたら、下記のプロジェクト画面に遷移され、コードが表示されます。

・app > java > BasicPhone.java に移動し、「AUTH_PHP_SCRIPT」に設定されているURLをみなさんのウェブサーバーに格納されてあるトークン生成用URL（token.phpなど）に変更してください。

これで、設定は全て終了完了です。

今回は、Android Studioのエミュレータで動作確認をしてみたいと思います。

トークン生成用URL変更後、「実行」ボタンをクリックします。

アプリを実行するデバイス選択画面が表示されます。

ここで、エミュレータを選択（実機を使う方は検索された実機が表示されますのでそれを選択）。

アプリケーションが起動をし、受信や発信ができるようになります。

Twilioの電話番号とアプリケーションの連動。

この作業（設定）によって、Twilioの電話番号（050）に着信されたら、アプリケーション側に着信できるようになります。

連動させる電話番号選択 → 音声通話 → Configure with → アプリケーション選択