APC 技術ブログ

株式会社エーピーコミュニケーションズの技術ブログです。

株式会社 エーピーコミュニケーションズの技術ブログです。

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を呼び出すようにしてます

カスタムコネクタは関数として呼び出しを定義します

電話をかけてみる

注意:カスタムコネクタを使用するには、PowerAppsのサブスクリプションプランが必要になります(Microsoft 365 プランではカスタムコネクタは使えないですが、テスト実行だけだったらMicrosoft 365 プランでもいけるみたいです)

電話番号を入力して、callボタンをクリックします

自分のスマホに電話をかけるようにしたのですが、ちゃんと着信しました

Twilio側のログでも発信記録が残っています。

ここまで、手軽な感じで作成できました。

昔は電話を操作するライブラリなんかは、作るの骨が折れたのですが、便利になりましたね、、、(今更)。

さいごに

私達ACS事業部はAzure・AKSを活用した内製化のご支援をしております。ご相談等ありましたらぜひご連絡ください。

www.ap-com.co.jp

また、一緒に働いていただける仲間も募集中です!
切磋琢磨しながらスキルを向上できる、エンジニアには良い環境だと思います。ご興味を持っていただけたら嬉しく思います。

www.ap-com.co.jp

本記事の投稿者: 東出 恵次
内製化支援・攻めのDX領域のコンサルティング・アプリケーション開発をおこなう部署の責任者をやっております。スパイス&ハーブ検定2級。