PowerAppsでTwilioの架電を操作してみた（カスタムコネクタをAzure Functionsで作って）

はじめに

こんばんは、ACS事業部の東出です。

私は元々テレフォニー系ソリューションを扱っていた経験があるのですが、最近そちら絡みの調べ物が増えたことから、Twilioで少し遊んでいます。

そんなことから、今日はPowerAppsからTwilioの発信機能を呼び出してみようと思います。

Azure FunctionsでTwilioのAPIを呼び出す関数を作る

PowerAppsには、Twilioの発信とかができる標準コネクタがないため（※）、カスタムコネクタを用意する必要があります。

※メッセージ送信機能などは標準コネクタがありますが、電話はなさそうです（参考）。

今回は、Azure FunctionsでTwilioのAPIを呼び出す関数を作り、それをPowerAppsから呼び出す形で実現したいと思います。

手順

Azure Functionsのリソースを作成します
- ランタイムはNode.jsを選択します
ローカル環境でAzure Functions Core Toolsを使ってプロジェクトを作成します
- HttpTriggerでプロダクトを作ります
twilioのヘルパーライブラリが必要なので、上記で作ったプロジェクト配下でインストールします（参考）
twilioを呼び出すコードを書いて、Azureにデプロイします

サンプルコード

色々と良い子はマネしたらダメな書き方していますが、サンプルなのでご容赦ください
twilioの架電呼び出しは公式のチュートリアルを参考にしています

const accountSid = '**************************************';
const authToken = '***************************************';
const client = require('twilio')(accountSid, authToken);

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    const name = (req.query.name || (req.body && req.body.name));
    const phone_number_from = (req.query.phone_number_from);
    const phone_number_to = (req.query.phone_number_to);

    client.calls
        .create({
            twiml: '<Response><Say>Ahoy, World!</Say></Response>',
            to: phone_number_to,
            from: phone_number_from
        })
        .then(call => console.log(call.sid));

    const responseMessage = name
        ? "Hello, " + name + ". This HTTP triggered function executed successfully."
        : "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";

    context.res = {
        // status: 200, /* Defaults to 200 */
        body: responseMessage
    };
}

PowerAppsでカスタムコネクタを作る

先程デプロイしたAzure FunctionsのHttp Triggerをキックするためのカスタムコネクタを用意します。

メニューからカスタムコネクタを選択します。

今回は一から作成で作成します

コネクタ名を適当につけます

Azure Functionの呼び出しホストを設定します

セキュリティのところは認証なしですすめます（良い子はマネしちゃ(ry）

要求の定義を設定します

サンプルからのインポートで、クエリパラメータ含めてURLに貼り付けたら、先の画像のようにクエリパラメータが識別されます

コネクタの作成を選択します

これでカスタムコネクタの作成は完了しました

PowerAppsでアプリを作る

キャンバスアプリを一から作成します。アプリ名は適当につけました

データで先程作成したカスタムコネクタを追加します

こんな感じでコンポーネントを配置しました

真っ白なコンポーネントが2つありますが、ここに発信元電話番号とFunctionsキー（Azure Function呼び出す時のキー）をTextとして入力しています（良い子は(ry）
発信先番号は、一応テキスト入力できるようにしています
発信する時は国番号まで必要なので、それも入力しています
callボタンをクリックすると、カスタムコネクタを実行して、Azure Functionを呼び出すようにしてます