FlexプラグインTips（ダイヤルパッドでSIP宛てに発信）

2023年5月1日を持ちまして、株式会社KDDIウェブコミュニケーションズのTwilioリセール事業が終了したため、本記事に記載されている内容は正確ではないことを予めご了承ください。

はじめに

みなさん、こんにちは。
KDDIウェブコミュニケーションズのTwilioエバンジェリストの高橋です。

本記事では、標準で用意されている Dialpad を使って、SIP アドレス宛に発信するための方法について解説をします。

Dialpadについて

Twilio Flex での発信では、予め用意されている Dialpad を使うのが一般的です。ただし、Dialpad は最初からは有効になっておらず以下の手順で有効にする必要があります。

有効に設定すると、画面右上に Dialpad を起動するボタンが表示されるので、そちらを押すと以下のように発信画面が表示されます。

実際に発信するには、Enter a numberに電話番号を入力します。例えば日本宛に発信したい場合は、+81に続けて電話番号を指定します。このとき先頭の0は除きますので、たとえば[phone]のようになります（E.164形式）。

SIP宛に発信したい場合

+81から始まる電話番号は、一般公衆回線経由での発信に使われるものですが、それとは別にSIP サーバー経由での発信をしたい場合があります。
たとえば、Flex プロジェクト内で SIP Interface + SIP Registration　を使った SIP 電話が存在していて、そこに発信したい場合や、フォースネット様が提供している FC-GW のようなサービスを用いて、既存の電話番号（0AB〜J番号）を使った発着信を利用したい場合などです。

このようなケースでは、発信先電話番号には、E.164形式ではなく、以下のようなSIPアドレスを指定する必要があります。

sip:XXXXXX@sipドメイン

デフォルトで表示されている+81を削除して、仮に2001のような内線番号を入力すると、自動的に+81が付加されて、Dialpad は+812001に電話をかけようとします。そして当然のことながら、お繋ぎすることはできませんとのメッセージが流れてかけることはできません。
そこで、今回ご紹介するプラグインの登場です。

何をするプラグインか

Dialpadを使って発信した際に利用される Action Framework の中の StartOutboundCall アクションを上書きして、発信時に先頭が + から始まっていなかった場合に、宛先を強制的に SIP アドレスに書き換えます。先頭が + から始まる場合は、そのままにしておきます。
これにより、Dialpad で +81 削除して 2001 と入力し発信すると、sip:2001@sipドメイン宛に発信されるようになります。

セットアップ

以下の GitHub 上にソースコードを準備しています。

こちらをgit cloneしていただき、README　にかかれているようにセットアップを行いましょう。
途中で、環境変数の指定が必要です。ここでは、SIP発信をするときのSIPドメインの指定をしてください。
たとえば、Twilio のSIP Registration を使っているのであれば、xxxxx.sip.twilio.comのような感じになります。

実行例

実際にプラグインを実装すると、たとえば内線2001に発信すると以下のようになります。

解説

まず、プラグインのエントリーポイントであるsrc/OutboundSipPlugin.jsのinitメソッド内でreplaceOutboundNumber関数を呼び出しています。

src/OutboundSipPlugin.js

import React from 'react';
import { FlexPlugin } from '@twilio/flex-plugin';

import { replaceOutboundNumber } from './actions/OutboundSip/OutboundSip';

const PLUGIN_NAME = 'OutboundSipPlugin';

export default class OutboundSipPlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  /**
   * This code is run when your plugin is being started
   * Use this to modify any UI components or attach to the actions framework
   *
   * @param flex { typeof import('@twilio/flex-ui') }
   */
  async init(flex, manager) {
    replaceOutboundNumber(flex);
  }
}

この関数の実体は、src/actions/OutboundSip/OutboundSip.jsです。

src/actions/OutboundSip/OutboundSip.js

export function replaceOutboundNumber(flex) {
  const { REACT_APP_SIP_DOMAIN } = process.env;
  console.info(`🐸 Replace destination number to sip address >>>  ${REACT_APP_SIP_DOMAIN}`);
  flex.Actions.replaceAction('StartOutboundCall', (payload, original) => {
    // Get original destination from payload
    const { destination } = payload;
    const newPayload = payload;
    if (!destination.match(/^\+/)) {
      // sip number
      newPayload.destination= `sip:${destination}@${REACT_APP_SIP_DOMAIN}`,
      console.log(`🐞 new destination: ${newPayload.destination}`);
    }
    original(newPayload);
  });
}

ポイントは、flex.Actions.replaceAction('StartOutboundCall', (payload, original) => {のところです。
冒頭で説明したように、発信時のアクションとして事前に用意されているStartOutboundCallAction を書き換え、先頭に + がなかった場合は、SIP アドレスを宛先にしています。
これにより、このプラグインが有効になっている場合は、+ から始まらない電話番号はすべて SIP 経由での発信となります。

まとめ

Dialpad を使うと、通常の電話発信はとても便利ですが、今回のように SIP 経由で発信しなくてはならない場合はプラグインを作成するのがよさそうです。
ぜひ参考にしてみてください。

★次の記事
Flexプラグイン Tips（環境変数の利用）

---

Twilio（トゥイリオ）とは

https://cloudapi.kddi-web.com
Twilioは音声通話、メッセージング（SMS/チャット）、ビデオなどの 様々なコミュニケーション手段をアプリケーションやビジネスへ容易に組み込むことのできるクラウドAPIサービスです。初期費用不要な従量課金制で、各種開発言語に対応しているため、多くのハッカソンイベントやスタートアップなどにも、ご利用いただいております。

自己紹介
	高橋克己（Katsumi Takahashi） 自称「赤い芸人」 グローバル・インターネット・ジャパン株式会社　代表取締役 株式会社KDDIウェブコミュニケーションズ　Twilio事業部エバンジェリスト 2001年より大手通信事業者の法人サービスの教育に携わり、企業における電話のしくみや重要性を研究。2016年よりTwilio事業部にジョインし、Twilioを使ったスマートコミュニケーションの普及活動を精力的に行っている。 2019 Twilio Champions