【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://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を作成する」をクリック

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のイベントを楽しみにしていてください!

この記事をシェア

すべての記事へ

Event

ビジネスセミナーVol.58 SIGNAL2019 報告会

Event

ビジネスセミナーVol.57 コミュニケーションをデータにして分析しよう

Event

セミナーレポート:ビジネスセミナーVol.56 顧客体験向上のためのLINE活用法

Event

Twilio ビジネスセミナー Vol.55 Twilio × Stripe で実現する Fintech ソリューション 〜プログラマブルで安全な電話決済と業務効率化〜

Event

TwilioビジネスセミナーVol.54 SIGNAL報告会

Event

SIGNAL Day2での発表事項振り返り