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

## Twilioの準備
SMS送信が可能な番号を取得しておきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/102503/f9ec59df-cc32-82c4-97ca-322c5a0f3648.png)

## Microsoft Flowの準備
トリガー（HTTP要求）を作成し，以下のようにJSONスキーマを設定します。

```javascript
{
    "type": "object",
    "properties": {
        "receiverNumber": {
            "type": "string"
        },
        "message": {
            "type": "string"
        }
    }
}
```
Twilioコネクターを作成し，以下のように設定します。

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

こんなかんじです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/102503/ba9760b3-6ff6-b3b4-836f-22913e48497e.png)

## kintoneの準備
アプリを作成し，以下のフィールドを作成します。

|フィールド名|フィールドコード|型|
|:--|:--|:--|
|氏名|receiver_name|文字列（1行）|
|携帯電話番号|cellphone_number|文字列（1行）|

## kintoneカスタマイズ
以下のようなJavaScriptを設定します。

```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](https://qiita-image-store.s3.amazonaws.com/0/102503/b64d5776-ff9d-4094-2e73-b9a55c8edd1c.png)

メッセージボックスにメッセージを入力します。[Twilioだと，日本語で70文字を超えると分割して送信されます。（上限1600文字）](https://twilioforkwc.zendesk.com/hc/ja/articles/206367021-Twilio-%E3%81%AF%E9%80%A3%E7%B5%90-SMS-%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%84-160-%E6%96%87%E5%AD%97%E4%BB%A5%E4%B8%8A%E3%81%AE%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%81%97%E3%81%BE%E3%81%99%E3%81%8B-)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/102503/1021d452-dd3e-105c-ebd5-c6ba27d8e975.png)

メッセージが送信されました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/102503/63d91a1b-20de-dddc-9062-98c57f3ecc07.png)

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