[iOS] Twilio Client SDK for iOS のサンプルを動かしてみた

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Twilio Client SDK for iOS とは

Twilio Client SDK for iOS とは Twilio サービスを iOS から使うための公式ライブラリです。Twilio サービスを使うとさまざまなアプリに IP 電話機能をつけることができます。
ということで、iOS 版にも Android 版と同様のサンプルがあるのでまずは動かしてみたいと思います!

用意するもの

サンプルアプリを動かしてみる

ということで、サンプルアプリである HelloMonkey というアプリを作ってみたいと思います。今回実装する内容は以下のとおりです。

  1. Twilio アプリサーバーから Capability Token を取得する
  2. Capability Token を使って Twilio サービスに接続する
  3. Twilio が Twilio アプリサーバーに登録してある TwiML を取りにいく
  4. クライアントアプリが TwiML の内容を読み上げる

サーバーサイドの実装

まずはサーバーサイドの実装です。QuickStart では Capability Token を取得するための APITwiML を返す API の2つの API が必要となります。Android であれ iOS であれ Web アプリであれ、基本的には同じもので良いです。PHP の場合は以下のような API にします。

auth.php

<?php

// Found in the 'helper-libs' folder, or download twilio-php from http://twilio.com/docs/libraries
require "Services/Twilio/Capability.php";

$accountSid = "アカウントのSID"; 
$authToken = "アカウントの認証トークン";

// The app outgoing connections will use:
$appSid = "TwilioアプリのSID"; 

// The client name for incoming connections:
$clientName = "monkey"; 

$capability = new Services_Twilio_Capability($accountSid, $authToken);

// This would allow incoming connections as $clientName: 
$capability->allowClientIncoming($clientName);

// This allows outgoing connections to $appSid with the "From" parameter being $clientName 
$capability->allowClientOutgoing($appSid, array(), $clientName);

// This would return a token to use with Twilio based on 
// the account and capabilities defined above 
$token = $capability->generateToken(3600);

echo $token;
?>

$appSid は Twilio アプリを登録のときに生成される SID を入力します。Twilio アプリの登録は Twilio ユーザー画面から行うことができます。

twilio_app03

hello.php

<?php
header('Content-type: text/xml');
?>
<Response>
    <Say language="ja-jp" voice="woman">電話ってこれね、おばさま!</Say>
</Response>

hello.php は TwiML を返す API です。TwiML の Say タグ内に入れた文字列が読み上げられます。TwiML の書きかたについてはこちらを参照しましょう。

なお Ruby on Rails で作りたいかたは こちら を、Node.js で実装したいかたは こちら を参照してください!

クライアントアプリの実装

まずは こちら から Twilio Client SDK for iOS をダウンロードしましょう。ダウンロードしたファイルを解凍すると QuickStart/HelloMonkey フォルダの中に HelloMonkey.xcodeproj があるので開きます。

twilio_ios01

Twilio のサンプルアプリはそのままでは動きません。「ベースは作ってあるからそれに従って実装してね」というスタンスなので、少しだけ実装しなければいけません。ということでまずは MonkeyPhone クラスから実装していきます。このクラスは Twilio サービスへの接続を行うクラスです。 init メソッドでは auth.php への GET 処理を実装していて、ここで Capability Token を取得しています。URL は自分のサーバーの URL に変更しましょう。またその他に connect メソッドと disconnect メソッドを実装します。

MonkeyPhone.h

#import <Foundation/Foundation.h>

#import "TCDevice.h"
#import "TCConnection.h"

@interface MonkeyPhone : NSObject
{
@private
	TCDevice* _device;
    TCConnection* _connection;
}

-(void)connect;
-(void)disconnect;

@end

MonkeyPhone.m

#import "MonkeyPhone.h"

@implementation MonkeyPhone


-(id)init
{
	if ( self = [super init] )
	{
// Replace the URL with your Capabilities Token URL
		NSURL* url = [NSURL URLWithString:@"http://companyfoo.com/auth.php"];
		NSURLResponse*  response = nil;
		NSError*  	error = nil;
		NSData* data = [NSURLConnection sendSynchronousRequest:
						[NSURLRequest requestWithURL:url] 
											 returningResponse:&response 
														 error:&error];
		if (data)
		{
			NSHTTPURLResponse*  httpResponse = (NSHTTPURLResponse*)response;
			
			if (httpResponse.statusCode == 200)
			{
				NSString* capabilityToken = [[[NSString alloc] initWithData:data
																	 encoding:NSUTF8StringEncoding] 
											   autorelease];
				
				_device = [[TCDevice alloc] initWithCapabilityToken:capabilityToken
															 delegate:nil];
			}
			else
			{
				NSString*  errorString = [NSString stringWithFormat:
											@"HTTP status code %d",                          
											httpResponse.statusCode];
				NSLog(@"Error logging in: %@", errorString);
			}
		}
		else
		{
			NSLog(@"Error logging in: %@", [error localizedDescription]);
		}
	}
	return self;
}


-(void)dealloc
{
	[_device release];
	[super dealloc];
}

-(void)connect
{
    _connection = [_device connect:nil delegate:nil];
    [_connection retain];
}


-(void)disconnect
{
    [_connection disconnect];
    [_connection release];
    _connection = nil;
}


@end

あとはこのクラスを HelloMonkeyViewController クラスから呼び出します。 connect を Dial ボタンが押されたタイミングで、また disconnect を Hangup ボタンが押されたタイミングでそれぞれ呼び出します。

HelloMonkeyViewController.m

#import "HelloMonkeyViewController.h"
#import "HelloMonkeyAppDelegate.h"
#import "MonkeyPhone.h"

@implementation HelloMonkeyViewController

@synthesize dialButton = _dialButton;
@synthesize hangupButton = _hangupButton;
@synthesize numberField = _numberField;

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
	// Limit to portrait for simplicity.
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

- (void)viewDidUnload
{
	self.dialButton = nil;
	self.hangupButton = nil;
	self.numberField = nil;

	[super viewDidUnload];
}

-(IBAction)dialButtonPressed:(id)sender
{
    HelloMonkeyAppDelegate* appDelegate = (HelloMonkeyAppDelegate*)[UIApplication sharedApplication].delegate;
    MonkeyPhone* phone = appDelegate.phone;
    [phone connect];
}

-(IBAction)hangupButtonPressed:(id)sender
{
    HelloMonkeyAppDelegate* appDelegate = (HelloMonkeyAppDelegate*)[UIApplication sharedApplication].delegate;
    MonkeyPhone* phone = appDelegate.phone;
    [phone disconnect];
}

@end

これで実装は終わりです!あとは実行してみましょう!と、エラーが。

twilio_ios02

使われているライブラリが正しく参照できていないようです。ということで参照させましょう。プロジェクトをクリックし、TARGETS の HelloMonkey を選択し BuildPhases タブを選択します。そしてその中の Link Binary With Libraries を開き、追加ボタンをクリックします。

twilio_ios03

追加するライブラリ一覧が出てくるので、Add Other... ボタンをクリックします。そして Twilio Clinet SDK for iOS の中にある Libraries フォルダから libcypto.a libssl.a libTwilioClient.a を選択します。

twilio_ios04

これでもう一度実行すればエラーなく起動できるようになると思います!あとは Dial ボタンをクリックすると自分のサーバーに実装した TwiML の内容を読み上げてくれます。ちょっと時間がかかる場合もあるので、音声が聞こえない場合も焦らずログでエラーが出るまでは気長に待ちましょう…。

twilio_ios05

まとめ

まずは QuickStart の前半戦のみ試してみました。Android 版とほぼ同じ感じで実装できますね。今後 Android アプリや Web アプリとの通話などを試していこうと思います。

参考