【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

講師のご紹介

2015-08-2719.55.01.jpgのサムネイル画像

今回の講師は、株式会社 リーディング・エッジ の末広さん。
末広さんは、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://twilio.kddi-web.com/signup/

バージョン情報

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を作成する」をクリック
2015-08-28 15.56.32.png

下記の画面では、TwiML Appsの設定を行います。(設定後、変更可)
・フレンドリーネーム:TwiML APPのID(識別名)を入力します。
・Request URL:TwiML APPに着信されたら行う処理を行うTwiMLのURLを入力します。
・最後に「保存」ボタンをクリックします。
2015-08-28 16.00.39.png

下記のように作成した「hoge」というTwiML APPが表示されます。
2015-08-28 16.05.36.png

Application Sidを確認しましょう。
上記で生成された、TwiML APP「hoge」をクリックします。
画面に「Sid」が表示されます。(APから始まる34桁の文字列)
2015-08-28 16.08.27.png

Twilioは、このTwiML APP Sid(Application Sid)とAccount Sid、Auth Tokenを使って、
通信に必要なケイパビリティトークンを発行します。

TwiML:サーバー側の設定

ダウンロードしたTwilio Android SDKのフォルダーを開いてください。
下記、フォルダーの構造ですが、「Server→server.py」を修正致します。
2015-08-28 17.25.06.png

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

設定
①:AccountSIDとAuthTokenを設定します。
※ 本ブログでは、サブアカウントを使っているため、みなさんの画面と違うと思います。
 下記の画面のように、アカウントを選択するとクレデンシャル情報が表示されますので、
「Live」の情報を設定してください。

2015-08-28 17.50.02.png

②:TwiML APP(Twilio Application) Sidを設定(Sid)
③:「CLIENT」を設定(フレンドリーネームに設定されているテキスト)
2015-08-28 17.55.26.png

③:「CALLER_ID」を設定
2015-08-28 17.59.58.png

これで設定完了です。結果物はこちらになります。
設定完了ファイルをみなさんのウェブサーバーにアップロードしてください。
※ ウェブサーバーは、公開されている必要があります。
2015-08-28 18.03.16.png

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

【PHP】
せっかくなので、PHPのコードも紹介します。
PHPのフォルダー構造は、こちら。「server-php」フォルダーをウェブサーバーに公開します。
2015-08-28 18.50.50.png
■ server-php
・Services:Twilio PHP ライブラリーです。
 PHP ライブラリーダウンロード:https://jp.twilio.com/docs/php/install#installation
2015-02-20 0.07.40.png

・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設定。
2015-08-31 1.13.31.png

いよいよ、Android Studioの出番です。Android Studioを起動しましょう。
下記、初期画面です。Quick Startから「Import project」をクリックします。
2015-08-30 23.43.01.png

先ほど、ダウンロードしたTwilio Client Android SDKフォルダーから「BasicPhone」を選択します。
2015-08-30 23.18.32.png
正常にインポートされたら、下記のプロジェクト画面に遷移され、コードが表示されます。
・app > java > BasicPhone.java に移動し、「AUTH_PHP_SCRIPT」に設定されているURLをみなさんのウェブサーバーに格納されてあるトークン生成用URL(token.phpなど)に変更してください。
これで、設定は全て終了完了です。
2015-08-30 23.49.14.png
今回は、Android Studioのエミュレータで動作確認をしてみたいと思います。
トークン生成用URL変更後、「実行」ボタンをクリックします。
2015-08-30 23.57.26.png
アプリを実行するデバイス選択画面が表示されます。
ここで、エミュレータを選択(実機を使う方は検索された実機が表示されますのでそれを選択)。
2015-08-30 23.39.47.png
アプリケーションが起動をし、受信や発信ができるようになります。
2015-08-31 1.01.07.png

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

この作業(設定)によって、Twilioの電話番号(050)に着信されたら、アプリケーション側に着信できるようになります。
連動させる電話番号選択 → 音声通話 → Configure with → アプリケーション選択
2015-08-31 1.08.13.png

まとめ

今回ハンズオンで試した、Twilio BasicPhoneは、Twilio Client Android SDKの使い方やアプリケーションの動きを確認できるように開発されており、Android エミュレータで起動した画面には、Twilioとのコネクション状態を含め、アプリケーションの通信状態が表示されるようになっていますので、Twilio Client Androidアプリの開発を検討している際には、一回動かしてみるのも良いかと思います。

なお、当日講師の末広さんより、配布された電話帳サンプルも是非動かしてみてください。
動かし方は、Twilioの設定部分は同様で「Android アプリを作ろう」から参考にしていただければと思います。

最後に、今回講師として参加者のみなさんにTwilio Client BasicPhoneやAndroid Studioの使い方を紹介してくださった末広さん、参加者のみなさんありがとうございました。
今後、TwilioJP-UGは様々な形(テクニカルや情報配信など)のイベントでみなさんとお会いできればと思っておりますので、これからもTwilioJP-UGのイベントを楽しみにしていてください!

この記事をシェア

最新記事

すべての記事へ