OIKE[ENGINEER]カレー好き。来世は印度に生まれたい。Tweet1.初めに無料で電話をかけられたらいいなと思いませんか?そうは言っても、いちから電話の仕組みを実装していくのは大変な気がするし・・・、そもそも、そんなこと出来るの!?って感じですよね。ウェブコミュニケーションズが提供している、コミュニケーションAPIの「Twilio」を利用すると言う方法があります。「Twilio」を利用すると、電話、SMSのほか、ビデオ、チャットなどの通信手段をアプリケーションに簡単に埋め込む事ができます。機能)をアプリから直接利用出来るフレームワークが、iOS10から一般の開発者に開放されました。これは開発者にとってはけっこうなインパクト(・o・)でした。それまでプッシュ通知経由で無理やり実現していた事が普通に出来るようになったからです。いう事かというと、CallKitはPushKitと組み合わせて使うことで、普通の電話がかかってきたのと同じ画面(UI)を利用出来て、また普通の電話と同じように、画面のロック中でも受信する(電話に出る)ことが出来るようになったのです。その結果、飛躍的に通話系アプリのユーザ体験(UX)の改善にも繋がりました。ロックを解除したり、通知をタップして、なんてことをしなくて良くなったんです。2.アプリOKOS(オコス)を開発しました弊社では「Twilio」と、CallKitを使用し、決まった時間帯に電話をかけるアプリ「OKOS」(オコス)を開発しました。現在はユーザが予約した時間帯に、自動的にサーバーから電話をかけて、電話を取ると録音した音声が流れるようにしています。将来的には人対人の通話機能も実装する予定です。一例ですが、下の画像はCallKitでiOSの電話機能を利用することによって表示出来るようになった受信画面です。-結び-』)】CallKitを使用したアプリとして、iOS版のOKOSをリリースしています。CallKitとは関係ありませんが、Android版OKOSもリリースしています(Androidは以前から電話の機能にアクセスできていました)。サーバーサイドの技術的な側面に焦点を当てて、以下の順番で説明しようと思います。Programで必要な設定8.サーバー側の実装のポイント説明9.Swift3を使用した、実装のポイント説明10.OKOSの今後の展望11.結び3.OKOSってどんなアプリ技術的な説明をする前に、OKOS(オコス)がどんなアプリか見てみましょう。OKOSアプリの説明OKOSはとてもシンプルなコールアプリです。お試しモーニングコール、各種キャンペーンコールを用意しており、コール登録すると、指定された時間帯(日本時間)に電話がかかってきます。コールには電話料金はかかりません。OKOS2.0から登場したプレミアムコールでは、猫さんコール、武将コールなど特別なコールを用意しています。映画とのコラボレーションOKOSでは、キャンペーンの1つとして、映画とのコラボレーションを行いました。映画キャンペーンに登録すると、様々な俳優さんの音声で電話がかかってくるようにしました。-結び-』広瀬すずさん映画キャンペーンに登録すると俳優さんの実名で電話が掛かってくるので、スクショを撮ってTwitterにアップする人が続出し、けっこうな人気を博しました。映画キャンペーンに関して詳しくは以下をご覧下さい。インフェルノ』映画コラボを展開しています。(2018年3月現在)【キャンペーン予約画面】ユーザ参加型のイベントユーザ参加型のイベントとして、コケコッコー選手権を開催しました。選手権概要4.OKOSの構成さて、ここからはOKOSの技術的な説明に入ります。概要を把握するために、簡単に、システム構成を図示します。通話者が、4.自分の聴きたいキャンペーンの予約を行い。それに基づいて、定期的に、5.サーバー側からTwilioにリクエストし、Twilioが通話者に電話をかけることになります。処理のシーケンスはホントはもっと細かく複雑ですが、ざっくり言うと上記の仕組みだけで、定期的にサーバーから電話をかけることが出来ます。5.Twilioとはさて、Twilioが沢山でてきましたが、Twilioってなんぞやの説明を少しします。Twilioの来歴Twilio(トゥイリオ)は合衆国のサンフランシスコにある企業の名前ですが、2008年に電話や、テキストメッセージの送受を簡単に行えるWebAPIサービスを公開しており、そのサービス自体を指してTwilioと呼んでいます。日本でもサービスが提供されており、KDDIウェブコミュニケーションズがその代理店となっています。OKOSでは、KDDIウェブコミュニケーションズ提供のAPIを利用しています。Twilioで出来ることTwilioはコミュニケーションに必要な様々な機能をAPIで提供しています。メッセージングアプリケーションの開発が出来る・最近ではチャットやビデオ通話などのコミュニケーションに使用出来るAPIも提供されている・料金は使った分のみ実際にTwilioを使った感じでは、言うほど簡単でもないです。いうのも、サンプルを動かすのは簡単に出来ますし、サンプルの範囲内で何かを開発しようとすれば簡単ですが、そこから外れて、やりたい事をやろうとすると、それなりに調べてやらないと出来ないからです。電話の仕組みを一から実装するよりは遥かに簡単に出来ます。豊富なサンプルがあり、多くの言語に対応していて、サポートの方も懇切丁寧に質問に答えてくれますので、つまずいても何とかなります。中の人が...機能が結構なペースで追加されてるなと思っていたところ、最近Twilio+IoTのワークショップに出る機会がありました。その時に、Twilioの中の人と話したところ、これからはコミュニケーションを便利にするあらゆることを実装していくと言われてました。参考サイト:https://twilio.kddi-web.com/availability/6.Twilioでサーバーから電話をかけるために必要な設定Twilioがどんなサービスか掴めましたか?ここからは、実際にOKOSで実現している、サーバーからアプリへの電話発信の話に絞り、Twilioで電話をかける方法を説明していきます。Twilioをサーバーサイドプログラムで利用し電話をかける方法Twilioをプログラムと連携するためには、まず以下が必要となります。Twilioのアカウント開設まず必要なものとして、Twilioのアカウントがあります。取得の方法は簡単ですので端折ります。https://twilio.kddi-web.com/アカウントを作成しログインすると、ダッシュボードが以下のようになっています。図示すると以下のような手続きが必要となります。トークンの取得方法Twilioから電話するためには、下記をサーバーサイドプログラムに埋め込む必要があります。(a)アカウントSID(ACで始まる)(b)APIキー(SKで始まる)(c)APIシークレットキー(接頭文字がない)(d)アプリケーションSID(APで始まる)(アプリ側から電話をかけたりする場合に必要、将来を見越してセット)(e)クレデンシャルSID(CRで始まる)(a)〜(d)の取得方法(a)アカウントSIDはダッシュボードより取得できます。infoのアカウントSIDです。ツール→APIキーと進みAPIキーを作成しますが、この時に同時にシークレットキーも作成されますので、忘れないようにメモ帳などにコピペしておいて下さい。Appsより取得します。ツール→TwiMLAppsと進みプラスボタンで生成します。Apps作成画面】この画面にAPで始まるアプリケーションSIDが表示されています。Apps編集画面】(e)の取得方法(e)クレデンシャルSID(CRで始まる)TwilioはAppleのVoIPサービスを使用して、アプリケーションに電話をかけます。そのために必要なクレデンシャルSIDを生成する際に、VoIPサービス証明書が必要となります。VoIPサービス証明書の生成はまず、Apple側で行う必要があります。以下証明書の生成を詳しく見ていきます。Programでの設定を行います。Programで、証明書とプライベートキーを取得後、Twilioのダッシュボードにプッシュクレデンシャル追加でTwilioからVoIPが使用可能となります。ここでは、プッシュクレデンシャルSIDの生成に絞って説明します。Programの登録(有償)が必要となります。ここでは登録の仕方は割愛します。1.CSRファイルの作成まずCSR(証明書署名要求)ファイルの作成(CertificateSigningRequest.certSigningRequest)を行います。macより「キーチェーンアクセス」を開いて、メニューバーの「キーチェーンアクセス」>「証明書アシスタント」>をクリックします。証明書アシスタント画面で、メールアドレスと、通称を入れて、続けるボタンを押します。鍵ペアを以下のようにして続けるを押します。【証明書アシスタント画面2】ディスク上にCSRファイルが作成されます。Profiles」に進みます。開発用ですがVoIPはProductionの配下となっています。左側のCertificatesより、Developmentを選択します(どれでもいいです)。右上の「+」ボタンを押します。Certificateを選択します。利用するアプリのIDを選択します。Certificate(.cer)]が作成されます。Certificate.p12)を作成します。Certificate(.cer)をダブルクリックします。macのキーチェーンアクセスに登録されるので、キーチェーンアクセスを開きます。該当の証明書のところで右クリックします(秘密鍵と間違えないようにして下さい。右クリック画面で書き出すを選びます。パスワードを入力しOKを押します。パスワードを入力し許可を押下で、ディスク上にAPNs用証明書が作成されます。cert.pem5.TwilioのクレデンシャルSIDを取得しますp12ファイルから証明書(cert.pem)と秘密鍵(key.pem)が生成出来たので、Twilioのモバイルプッシュクレデンシャルに、証明書と秘密鍵をセットしクレデンシャルSIDを取得します。Voice→SDK→モバイルプッシュクレデンシャル一覧画面でプラスボタンを押します。各項目をセットするわかりやす名前は、後でみて分かりやす名前にして下さい。サンドボックスにチェックを付けて、保存して下さい(※本番リリース用の場合は外して下さい)。生成したVoIPサービス証明書は、プロダクション環境でも、Appleのサンドボックスでも使用できます。このチェックボックスをオンにすると、開発プロビジョニングプロファイルに適したアップルのサンドボックスにプッシュを送信するようにTwilioに指示します。【モバイルプッシュクレデンシャル追加画面】5.2.4クレデンシャルSIDが表示されます。紐付ける必要がありますが、ここでは割愛します。今回はサーバーサイドにPHPを利用していますので、下記よりPHPのライブラリを取得します。Twilioで生成した以下が必要となります(a)アカウントSID(ACで始まる)(b)APIキー(SKで始まる)(c)APIシークレットキー(接頭文字がない)(d)アプリケーションSID(APで始まる)(アプリ側から電話をかけたりする場合に必要、将来を見越してセット)(e)クレデンシャルSID(CRで始まる)OKOSのテストコールをサンプルに説明しますテストコールは、クライアントのボタンをタップしたら、サーバー側から電話をかける仕様です。受信後、サーバー側の音声を再生します。ネイティブの電話のUIが立ち上がるので、ほんとに電話が掛かってくるのと同じユーザ体験が出来るところがみそです。アプリインストール時のシーケンスアプリインストール時の処理では、サーバーからTwilioを通じて特定の端末に電話を発信する為の準備を行います。各々の役割と順番をシーケンス図に示します。サーバー:端末識別キーをサーバで発行OKOSでは電話番号を使わずに、端末を識別出来る一意となるキー(以下、端末識別キー)をサーバー側で発行して、その端末識別キーを持つ端末に対して電話をかけることにしています。サーバー:端末識別キーを組み込んだアクセストークンを発行Twilioが端末を特定して電話をかけるには、その端末識別キーとTwilioで生成したトークンを組み合わせて端末別にアクセストークンを発行し、アクセストークンをTwilio側に持たせる必要があります。アプリ:アクセストークンを取得しTwilioに設定する上記を行うことで、サーバーからTwilioを通じて特定の端末に電話を発信する準備が出来ました。それでは、どのようにしてサーバー側から電話をかけられるのかを説明していきます。2.ライブラリ組み込みまず、Twilioがサーバーで利用出来るようにSDKを組み込みます。サーバーにTwilioライブラリを組み込むサーバーサイドにCakePHP3を利用していますので、下記よりPHPのAPIを取得します。https://github.com/twilio/twilio-php今回は直接twilio-php-master.zipをダウンロードします。サーバーサイドは、CakePHP3で作っていますのでvenderのフォルダの下に、twilioフォルダを作成しtwilio-php-master.zipを展開し、CakePHP3で利用出来るようにパスを通します(通し方は割愛)。以下のように置いてます(twilio-phpのバージョンによってファイルは変わると思われます)【CakePHP3のVenderフォルダ】3.端末識別キー生成用の処理(サーバーAPI:端末識別キーAPI)端末識別用の一意のキーを生成するAPIです。Twilioのライブラリとは関係ないので割愛します。4.AccessTokenの生成用の処理(サーバーAPI:アクセストークン取得API)Twilio関連の処理はCakePHP3のComponentとして作成しています。Controllerに組み込み、RestAPIとして使用可能にしています。以下は抜粋です(CakePHPの書き方をしています)。VoiceGrantクラスと、Twimlクラスをインスタンス化します。TwilioのAccessTokenクラスを使用して、トークンを作成します。アクセストークン生成$this->token->toJWT();5.コール時のシーケンステストコールは、電話発信APIをアプリ側からリクエストすることで、ユーザの任意のタイミングで電話をかけさせることが出来ます。それぞれの役割、順番をシーケンス図に示します。Twilioに電話発信をリクエストする)クライアントからテストコールの要求を受けて、Twilioにリクエストする時の処理です。$call->sid;$sidをCakePHPのViewでechoしてます。この時点で電話がかかります。コール処理その2(サーバーAPI:電話をかける時にTwilioから呼ばれるAPI)アプリ側で電話を取ると、Twilio側からAPIが呼ばれ、TwiMLを返します。音声ファイルのURLをセットします。$this->twiml->__toString();下記のようなXMLがレスポンスとしてTwilio返り最終的にアプリで音声が再生されます。補足、TwiMLに関してTwilioには、TwiMLというXMLで作る言語が用意されています。通話の着信やSMSの受信時にTwilioが行うべきことを指示するために使用される一連の命令文です。マークアップ言語9.Swift3を使用したiOSでの実装の要点説明OKOSに電話がかかってくる、実装の要点を説明します。サーバーからTwilioを通して、特定のデバイスに電話を掛けられるようにアプリを実装します※前述のアプリインストール時のシーケンスを再度載せます。電話のUIの表示、着信、切断などが出来るようにアプリを実装しますCallKit、PushKitフレームワークにある、Delegateを継承し、メソッドを実装することで可能となります。CXProviderDelegateを継承します。実際に作る場合は、下記のサンプルアプリを参考にして下さい。iOS」https://github.com/twilio/voice-quickstart-swift#quickstartもう少し具体的に見ていきましょう。2.0'end3.Xcodeの初期設定(プロジェクト名TwilioCollaboは適当です)CallKitを使用するための設定をします。ターゲットの設定CallKitはiOS10以上でしか使えません【デプロイメントターゲットを10.0にする】4.AppDelegateTwilioクライアントにはAPNsのデバイストークンが必要なので、アプリ初回起動時に、APNsへのプッシュ通知登録を行い、デバイストークンを取得します(ソースは割愛)。最初に起動する画面のViewControllerに電話の受信処理を記述することとします。最低限下記のライブラリ、フレームワークのインポートが必要です。最初に起動する画面のViewControllerの名前をここではMainViewControllerとします。TVOCallDelegate,CXProviderDelegateを継承します。MainViewControllerの初期処理ほぼサンプル通りです。プッシュ通知受信、通話のインタフェース人数などの設定、着信,発信,切断時の挙動に関するクラスのインスタンス化、委譲の設定を行います。CXProviderDelegateのメソッドの実装MainViewControllerにメソッドを追加し、必要な場合に処理を書きます。PKPushRegistryDelegateのメソッドの実装MainViewControllerにメソッドを追加し、必要な場合に処理を書きます。着信時に電話にでたり、発信者の名前を表示出来るように、MainViewControllerにメソッドを追加し、必要な場合に処理を書きます。https://forums.developer.apple.com/message/169511TwilioVoice.sharedInstance().configureAudioSession()}}以上、サーバー側、アプリ側の実装の要点をかいつまんで説明しました。Twilioで簡単に電話出来ることがわかったでしょうか?※ソースの説明は要点のみですので、このまま書いても動きません。疑問がある場合はご一報下さい。OKOSの紹介、CallKit、Twilioの説明、電話をかけるためのソースの紹介は以上です。OKOSは以下からダウンロード出来ますので、インストールして実際にご使用下さい。Android版ダウンロード10.OKOSの今後の展望さて、OKOSもリリースして数ヶ月が過ぎました、認知度も高まり、ユーザ数も増えつつあります。今後も盛り沢山な内容を構想中です。ここで少し、次の展開を紹介しておきましょう。キャンペーンや予約コールだけではなく、もっと恒常的に使いたいと言う要望に答えて以下のコンテンツを追加していく予定です。●これから上映予定の映画のキャンペーン●コケコッコー選手権2018のようなイベント11.結び駆け足ですが、Twilioを利用して無料で電話をかける方法について概観してきました。TwilioにはOKOSで使っている機能だけではなく、まだまだ多様な機能があります。Flex」というコンタクトセンター構築のためのクラウドアプリケーションプラットフォームなどを発表しています。凄く攻めてる感がありますよね。弊社でもOKOSで、またはOKOSとは別に、Twilioの機能を利用し、コミュニケーションを中心に据えた役に立つプロダクトを開発したいと考えています。ブログも随時追記していく予定です。最後に、この記事を読まれて、興味をお持ちになった方は下記までご連絡下さい。OKOSへのお問い合わせ読んでいただきありがとうございました。Co.,Ltd.MEMBERABOUTCONTACT。