7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

kintoneAdvent Calendar 2018

Day 6

MS FlowとTwilioを使ってkintoneからSMS送信

Last updated at Posted at 2018-12-05

Twilioの準備

SMS送信が可能な番号を取得しておきます。
image.png

Microsoft Flowの準備

トリガー(HTTP要求)を作成し,以下のようにJSONスキーマを設定します。

{
    "type": "object",
    "properties": {
        "receiverNumber": {
            "type": "string"
        },
        "message": {
            "type": "string"
        }
    }
}

Twilioコネクターを作成し,以下のように設定します。

項目
発信元の電話番号 先ほど取得した番号
発信先の電話番号 receiverNumber
テキスト message

こんなかんじです。
image.png

kintoneの準備

アプリを作成し,以下のフィールドを作成します。

フィールド名 フィールドコード
氏名 receiver_name 文字列(1行)
携帯電話番号 cellphone_number 文字列(1行)

kintoneカスタマイズ

以下のようなJavaScriptを設定します。

    const twilioSmsSendUrl = 'https://prod-30.japaneast.logic.azure.com:443/workflows/...※MS Flowで取得したURL';

    //MS FlowのHTTP要求にPOST
    function sendTwilioSms(receiverNumber, message) {
        //国番号付加(日本限定になります)
        var num = '+81' + receiverNumber;
        num = num.replace('+810', '+81');
        var body = {
            receiverNumber: num,
            message: message
        }
        var headers = {
            'Content-Type': 'application/json'
        }
        kintone.proxy(twilioSmsSendUrl, 'POST', headers, JSON.stringify(body)).then(function (args) {
            alert(receiverNumber + 'にメッセージを送信しました');
        }, function (error) {
            alert(receiverNumber + 'へのメッセージ送信に失敗しました');
        });
    }

    //レコード詳細画面表示時の処理
    function setFieldsDetailShow(record) {
        //送信ボタンを表示し,クリック時に送信
        var smsButton = document.createElement('button');
        smsButton.id = 'twilio_sms_send';
        smsButton.innerHTML = 'SMS送信';
        smsButton.onclick = function () {
            var receiverNumber = record.cellphone_number.value;
            var message = window.prompt(receiverNumber + 'へのメッセージを入力してください', '');
            sendTwilioSms(receiverNumber, message)
        }
        kintone.app.record.getHeaderMenuSpaceElement().appendChild(smsButton);
    }

    //レコード詳細イベント
    kintone.events.on('app.record.detail.show', function (event) {
        setFieldsDetailShow(event.record);
        return event;
    });

実行

「SMS送信」ボタンをクリックします。
image.png

メッセージボックスにメッセージを入力します。Twilioだと,日本語で70文字を超えると分割して送信されます。(上限1600文字)
image.png

メッセージが送信されました。
image.png

用途

kintoneで作ったメンバーリストなどで使用しています。メンバーの中にメールアドレスを持っていない人がいたり,メールがエラーで返ってくる人がいたりする場合の連絡に便利です。レコード一覧画面で繰り返し処理を行えばSMSによる一斉通知もできます。直接TwilioのAPIにアクセスすることもできるとは思うのですが,MS Flowを介することで手軽に連携ができるのはありがたいです。

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?