2020.12.23

ローコードでスマートフォンをSIPソフトフォンにする方法

こんにちは、Twilio事業部のkatsu.tです。

昨今コロナ禍の影響もあり、「会社にかかってきた電話を携帯電話に転送したい！」といったお声を多くいただきます。その際、単純にTwilioから自分の携帯電話に電話を転送する方法の場合、いくつか課題を感じると思います。

転送元の電話番号がTwilioの番号となるため、誰から着信があったかわからない
発信の際、着信したTwilioの電話番号からかけるのに工夫が必要
電話転送費がかさむ

上記のような課題を解決してくれるのがスマートフォンでも使用できるソフトフォンアプリを利用したSIPソフトフォンです。

TwilioのSIPレジストを使うことによって、TwilioにSIP端末をレジストレーションすることができます。これにより外部にSIPサーバーがない場合でも、Twilioを使ってSIP端末を利用した発着信ができるため、お手持ちのスマートフォンをSIPソフトフォンとして利用することが可能です。
SIPソフトフォンを利用すると、以下のような機能を実現することが可能です。

着信した電話番号を転送先の携帯電話に表示することができる
発信する時にTwilioの電話番号でかけることができる
電話転送費が格安になる
※料金についてはこちらの問い合わせフォームよりご連絡ください。
データ通信用のSIMでも通話ができる

本ブログでは、このようなSIPソフトフォンをローコードで実現する方法をご紹介いたします。

使用するサービス

Twilio Studio
- Twilioに受けた着信、発信を制御するコールフローの作成に利用します。
Twilio Functions
- Twilioから発信する際の電話番号の整形に利用します。
ソフトフォンアプリ（Android、iOS）
- スマートフォンをソフトフォンとして利用するために必要となります。別のソフトフォンアプリでも利用可能です。

事前準備

Twilioアカウント作成
電話番号の購入
ソフトフォンアプリのインストール

作り方

それでは早速SIPソフトフォンを作っていきたいと思います。

SIPドメインの作成

まず初めにSIPドメインを作成していきます。
All Products & ServicesをクリックしてProgrammable Voiceを選択します。

Programmable Voiceの画面が開いたらSIPドメインをクリックします。

IPアクセス制御リストをクリックします。

続いて、Create new IP Access Control Listをクリックします。

以下内容を入力してCreate ACLをクリックします。

Properties
- FRIENDLY NAME：リストにつける任意の名前を入力
Add an IP Address Range
- CIDR NETWORK ADDRESS：使用する端末が接続しているグローバルIPアドレスを入力
  ※グローバルIPを調べるサイトにアクセスすると確認することができます。
  ※Wi-Fi接続などにより、グローバルIPが変わるとSIPソフトフォンから発信できなくなります。
- FRIENDLY NAME：IPアドレスにつける任意の名前を入力

IPアクセス制御リストの設定が完了したら、次はユーザーの設定に移ります。
クレデンシャルリストをクリックし、画面が開いたら＋をクリックします。

以下内容を入力してSaveをクリックします。

Properties
- Friendly Name：リストにつける任意の名前
Add Credentials
- Username：端末を識別するための任意の文字列（内線番号など）
- Password：任意のパスワード（1文字以上数字を含む12文字以上の文字列）

ユーザーが作成できたら、次にドメインの作成を行います。
ドメインをクリックして、画面が表示されたら＋をクリックします。

以下を入力して、画面下部のSaveをクリックします。

Properties
- FRIENDLY NAME：識別するための任意の名前
- SIP URI：全世界で一意になる文字列
  ※文字列を入力し、Availableと表示されたら利用が可能です。
Voice Authentication
- IP ACCESS CONTROL LISTS：作成したIPアクセス制御リストを選択
- CREDENTIAL LISTS：作成したクレデンシャルリストを選択
SIP Registration
- ENABLEDに変更
- CREDENTIAL LISTS：作成したクレデンシャルリストを選択

着信時にソフトフォンへ転送する

Twilioで受けた着信をSIPソフトフォンへ転送する部分は、Twilio Studioを使って作成しています。Studioを使うことによって、簡単にIVR（自動音声応答）を追加することができ、ユーザーの入力によって転送先を振り分けるなどを行うことができます。

まず初めにStudioのフローを作成します。
All Products & Servicesを開いてStudioをクリックします。

Create a flowをクリックして新規フローを作成します。

FLOW NAMEにはわかりやすくsipinと入力してNextをクリックします。

Start from scratchを選択してNextをクリックします。

画面が開いたら、WIDGET LIBRARYからConnect Call Toをキャンバス上にドラッグ＆ドロップします。

CONNECT CALL TOの項目でSIP Endpointを選択します。

SIP ENDPOINTに以下内容を入力し、Saveをクリックします。

sip:[Username]@[domain].sip.twilio.com
- [Username]はクレデンシャルリストで作成したUsernameに置き換えてください。
- [domain]はドメインで作成したSIP URIに置き換えてください。
- 例：sip:1234@kddi-web.sip.twilio.com

スクリーンショット 2020-12-17 11.46.23

Incoming Call から connect_call_1 へ、ドラッグ & ドロップでつなぎます。
つなげられたらPublishをクリックします。

最後に、購入した電話番号に作成したフローを設定します。
購入した電話番号の設定画面を開いた後、A CALL COMES INの項目でStudio Flowを選択し、作成したフローを設定します。
設定が完了したら、画面下部のSaveをクリックします。

以上で、Twilioへ着信した電話をSIPソフトフォンへ転送する設定は終了です。

SIPソフトフォンから発信する

次は、SIPソフトフォンから発信する際の処理を実装していきたいと思います。
発信する際もStudioを利用することにより、ビジュアル的にわかりやすくフローを作成することができます。

電話番号を抽出するFunctionの作成

SIPソフトフォンから発信するとTwilio側に届く発信先は「sip:090xxxxxxxx@xxxxx.sip.tokyo.twilio.com」となるため、この中から発信先の電話番号を抽出する必要があります。
しかしStudioだけの場合、電話番号を抽出する機能を作るのが難しいため、Functionsを使ってnodejsで電話番号を抽出する機能を作成します。

All Products & Servicesをクリックし、Functionsを選択します。

Create Serviceをクリックします。

Service Nameに任意の名前の入力し、Nextをクリックします。

Add+をクリックし、Add Functionを選択します。

Function名に「get-number」と入力します。

Functionが作成できたら、作成したFunctionを以下ソースコードで上書きします。

exports.handler = function(context, event, callback) {
  // 宛先
  const to = event.To || '';
  // 宛先から電話番号を抽出 'sip:XXXXXXXXXXX@xxx.sip.tokyo.twilio.com' -> 'XXXXXXXXXXX'
  const toNumber = to.indexOf("@") > 0 ? to.substring(4, to.indexOf("@")) : '';
  // 0AB〜Jを+81に変換
  const number =  (toNumber.substring(0, 1) === '+' ? toNumber : '+81' + toNumber.substring(1));

  callback(null, {'number':number});
}

上書きしたらSaveをクリックし、保存を行ってからDeploy Allをクリックします。

電話発信用フローの作成

電話番号を抽出するためのFunctionが作成できたので、次はStudioで電話発信用のフローを作成します。

再度Studioの画面を開き、＋をクリックします。

今度は発信用のフローなので、sipoutと入力しNextをクリックします。

Start from scratchを選択し、Nextをクリックします。

まず、電話番号抽出用Functionを使うため、Run Functionをドラッグ＆ドロップでキャンバスへ移動させます。

配置できたら、TriggerのIncoming CallとRun Functionをつなぎます。

つなげたら、function_1をクリックしてRun Functionの設定を行っていきます。
SERVICEに先ほど作成したServiceを選択します。

ENVIRONMENTにuiを選択します。

FUNCTIONに先ほど作成したFunctionを選択します。
※Functionが表示されない場合、Deployできてない場合があるので再度Functions画面を開いていただき、Deploy Allをクリックしてください。

Functionの設定が完了したら、Functionに渡す引数を設定します。
＋をクリックしてパラメータを追加します。

KeyにToと入力し、Valueにと入力します。

入力が完了したら、Saveをクリックします。

取得した電話番号を元に電話を転送するため、Connect Call Toをドラッグ＆ドロップでキャンバス上へ配置します。

function_1のSuccessからconnect_call_1へ接続します。

接続ができたら以下の転送内容を設定します。

CONNECT CALL TO：
CALLER ID：Twilioで購入した電話番号

フローが作成できたら、Publishをクリックします。

最後に、作成した発信用フローをSIPドメインに設定します。
作成したSIPドメインの設定画面を開き、 A CALL COMES IN の設定部分でStudioを選択した後、上記で作成したsipoutのフローを設定し、Saveをクリックします。

以上で発信用のフローは完成です。

SIPソフトフォンの設定

最後に、SIPソフトフォンを使うためにアプリの設定を行います。
まずは、アプリをインストールします。
※今回使用するアプリは無料でご利用いただけますが、制限等についてはリンク先をご確認ください。

iOS
Android

インストールが完了したら、アプリを立ち上げて設定を行います。
プロバイダーの選択を求められるので一般的なSIPを選択します。

設定に以下の内容を入力して、保存をタップします。

ユーザーネーム：クレデンシャルリスト作成時に作成したUsername
パスワード：クレデンシャルリスト作成時に作成したPassword
ドメイン：[domain].sip.tokyo.twilio.com
- [domain]はドメインで作成したSIP URIに置き換えてください。
- 例：kddi-web.sip.tokyo.twilio.com

設定画面を開き、レジストレーションが完了しているかを確認します。

アカウントのステータスが登録済みになっていれば、正常にレジストレーションされています。
※登録に失敗している場合は、設定の見直しやIPアドレスの確認を行ってください。

以上で設定は完了です。
早速、受発信を行って動作するか試してみてください！

まとめ

今回はTwilio Studioを使ってSIPソフトフォンへの電話の転送をご紹介いたしましたが、別の電話に転送を行うことも可能です。Twilio Studioを使った電話転送を行う記事では、留守番電話とSMSでの通知方法についても知ることができます。あわせてご覧ください。

アプリケーションエンジニア葛智紀

前職でiOS、Androidのネイティブアプリケーション開発、AngularやLaravelを用いたウェブアプリケーション開発に従事。KDDIウェブコミュニケーションズではTwilioの最新情報の発信やTwilioを用いた地域課題解決を担当。個人では、Google Developer Group Tokyoのオーガナイザーを務める。