Smart at message for kintoneとTwilioを連携させる方法

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

# はじめに

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

今回は、M-SOLUTIONSさんが提供している[Smart at message for kintone](https://smartat.jp/message/)のWebhook機能を利用して、kintone上でなんらかのトリガーを検出したときに、Twilio経由でSMSを送信する方法を説明します。
![スクリーンショット 2020-02-18 17.59.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/e79b551a-c91b-1b0f-3174-b7fd87316ae6.png)

# 準備

まずは、Smart at messageのトライアル版を申し込みましょう。
[こちらのページ](https://smartat.jp/message/)の下の方に、kintoneサービス無償トライアル実施中というバナーがあるので、そちらから申し込みを行います。
申込みが完了すると、プラグインのダウンロードリンクや、利用方法のドキュメントがメールで届きます。

ダウンロードしたプラグインのZIPファイルは、以下の手順を参考にkintoneにセットアップしておきましょう。
[kintoneにプラグインをインストールする](https://jp.cybozu.help/ja/k/admin/plugin)

次にTwilioのアカウント準備です。
以下の記事を参考に、まずはTwilioのトライアルアカウントを作成しましょう。
[Twilioのサインアップ](https://qiita.com/mobilebiz/items/932eb21ff6ed36f524d8)
今回はトライアルアカウントでも大丈夫です。

<font color='red'>注意</font>
トライアルアカウントでは、以下の制限があります。

- 電話番号は１つしか購入できません。
- SMSは認証済み番号として登録した電話番号にしか送信できません。
- トライアルアカウントから送信した旨のメッセージがSMSに追加されます。
- 500円分のポイントが付与されていますが、ポイントがなくなった時点でサスペンドされます（アップグレードすればそのまま利用できます）。


# ハンズオン

## シナリオ

今回は以下のシナリオで進めます。

kintone上に、以下のようなアプリを作成します。
![承認SMS_設計 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/733308d7-bcab-04c0-fc42-b675f0a617b0.png)

何かを承認してほしい人がこのアプリに起案内容と通知先を登録しておき、上司がこれを確認して承認もしくは否認を行います。そのときにメッセージを登録することができます。承認もしくは否認の状態でレコードを保存すると、Smart at messageのWebhook通知を使って、Twilio経由でSMSが送信されます。このとき、承認もしくは否認というステータスと併せて、登録されたメッセージがSMSに記載されます。

## 作業手順

1. まずは上記の図のようにkintoneアプリを作成してください。起案内容と通知先を必須項目にしています。
2. 承認のプルダウンには、「未処理」と「承認」「否認」の3つの選択肢を設定し、「未処理」をデフォルト値にしています。
3. 本来は**メッセージ**フィールドと**承認**フィールドは、上司のみがアクセス権を持つように設定しますが、今回はこの部分は割愛します。フィールドにアクセス権を設定する方法は、[こちら](https://jp.cybozu.help/k/ja/user/app_settings/rights/field_rights.html)を参考にしてください。

## 作業1. Twilio側で電話番号を購入する

- Twilioの管理コンソールにログインします。
- スライドバーボタン（左側のボタンアイコン）を押して、スライドメニューを開き、**Phone Numbers**を選択します。
![Buy-a-number.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/c0199083-6988-bea8-9ca8-d793cb56b03e.png)

- **番号を購入**を選択します。
- **COUNTRY**のプルダウンから「United States(+1)」を選択し、さらに機能の中の**SMS**にチェックを入れて、**検索**ボタンを押します。
![Buy-a-number-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/8ae94ec9-54d5-dd49-b296-c2b6711dedf1.png)

- 番号のリストが表示されるので、TYPEが**ローカル**と書かれているいずれかの番号の右側にある**購入**ボタンを押します。
- さらに、**Buy(xxx)xxx-xxxx**というボタンを押して番号を購入します。後ほど購入した電話番号を使うので、＋1から始まる番号をメモ帳などに控えておいてください。
- 番号の設定画面が表示されるので、**Voice**セクションの**A CAQLL COMES IN**にデフォルトで表示されているURLを削除します。
- 同じく**Messaging**セクションの**A MESSAGE COMES IN**にデフォルトで表示されているURLも削除します。
![Number-setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/5d13e39c-feb2-2c6b-0cbc-2acfae6c8cd1.png)

- 一番下にある**Save**ボタンを押して設定を保存します。今回はこちらからSMSを送信するだけなので、この作業によって、電話やメッセージを着信した場合にも無駄な費用が発生しなくなります。

## 作業2. SMSを送信するプログラムを作る

- スライドバーボタンを押して、スライドメニューを開き、**Functions**を選択します。
- **設定**を選択します。
![Functions-environment.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/a271087f-86df-04b5-1462-68ec7dde0952.png)

- **Enable ACCOUNT_SID and AUTH_TOKEN**というチェックボックスをONにします。
- **Environment Variables**セクションの赤いプラスアイコンを1度押します。
- 追加された**KEY**欄に、「FROM_NUMBER」、**VALUE**欄には先程購入した電話番号を+1からスペースを開けずに登録します。
![Functions-environment-setting (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/ebabbe06-add7-7178-6969-68babbbab755.png)

- 画面下部にある**Save**ボタンを押します。
- つぎに、Functionsメニューから**管理**を選択します。
- **Create a Function**ボタンを押すか、赤いプラスアイコンを押して新しいFunctionを作ります。
![Functions-template.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/39aaaf77-d148-9a9a-2574-f9cf2e20f11f.png)

- テンプレート選択ダイアログが表示されるので、**Blank**を選択して、**Create**ボタンを押します。
- **FUNCTION NAME**欄に「Trigger」と入力します。
- **PATH**欄に「/trigger」と入力します。
![Function-name.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/afc3a523-d028-11d2-e68e-f3dd6c1fa339.png)

- **ACCESS CONTROL**のチェックボックスは外します。
![Access-control-off.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/956f47d8-c98d-08db-ff5d-729ccc9ccf66.png)

- **CODE**欄に書かれているプログラムはすべて削除し、代わりに以下のコードを貼り付けます。

```javascript
exports.handler = function(context, event, callback) {
    const client = context.getTwilioClient();
    const to = `+81${event.Number.slice(1)}`;  // E.164形式に変換
    const body = `結果:${event.Approval} メッセージ:${event.Message || "メッセージなし"}`;
    client.messages.create({
        body: body,
        from: context.FROM_NUMBER,
        to: to
    })
    .then(message => { // 送信成功
        console.log(`Message sent. ${message.sid}`);
        callback(null, 'OK');
    })
    .catch(err => { // 送信失敗
        console.log(err);
        callback(new Error(err));
    });
};
```

- **Save**ボタンを押します。
- **PATH**欄の右側にあるコピーアイコンをクリックして、URLをクリップボードにコピーします。
![Function-url (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/dc69262e-c5ee-0106-f49e-c51626e5174b.png)

- このURLは後ほど利用するので、メモ帳などに保存しておきます。

以上でTwilio側の設定はすべて終了です。

## 作業3. kintoneアプリにプラグインを設定する

今回は以下のようなアプリを作ってあるという前提で進めます。
![承認SMS_設計 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/733308d7-bcab-04c0-fc42-b675f0a617b0.png)

各フィールドコードは上記の通りに設定しておいてください。

- **アプリの設定を変更する**アイコン（歯車アイコン）を押します。
- **設定**タブを開きます。
- **プラグイン**をクリックします。
![kintone-plugin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/3b67a709-7c2c-884a-baad-ccd5b5000102.png)

- 画面上部にある**プラグインの追加**をクリックします。
- 「Smart at message for kintone v2.0.1」を選択し、**追加**ボタンを押します。
- 追加されたプラグインの設定アイコン（歯車アイコン）をクリックします。
![kintone-plugin-config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/304c4761-f652-ac11-00bb-dd8e2c5e0df1.png)

- **プロダクトキー**は、トライアルの場合は空にします。
- **利用する通知手段**として、「Webhook」を選択します。
- **条件通知**セクションの**通知を有効にする**にチェックを入れます。
- **レコード条件**のプルダウンから、「Approval」を選択します。
- その右側は「次のいずれかを含む」にしておきます。
- その右側の条件設定のところは、「承認」と「否認」の２つを選択します。
- その下は「いずれかの条件を満たす」を選択します。
![kintone-message-plugin-config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/a5b688a2-d471-4e4b-2ee0-9eeccb4e86b6.png)

- **通知先**の追加ボタンを押して、ダイアログを開きます。
- 「Webhook」を選択し、**Webhook URL**欄に、手順２でメモ帳に控えておいたFunctionsのURLを記載します。
- **表示名**には「Trigger」と入力し、**追加**ボタンを押します。
![kintone-plugin-webhook.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/c7155f17-065c-4a9d-d2cc-bd78f84ee3a8.png)

- **Webhook用POST Body**に、以下のJSONを指定します（通知先電話番号、メッセージ、承認否認の情報がTwilioに渡るようになっています）。

```json
{
	"Number":"%%Number%%",
	"Message":"%%Message%%",
	"Approval":"%%Approval%%"
}
```
- 画面上部の**保存**ボタンを押します。
- アプリの設定画面に戻り、**アプリを更新**ボタンを押します（<font color='red'>これを忘れると設定が保存されません</font>）。
- 「アプリの変更を運用環境に適用します。よろしいですか？」と聞かれるので、**OK**ボタンを押します。

## 手順4. テスト

- アプリの新しいレコードを追加してみましょう。
- 通知先にSMSを送信する先の電話番号を指定し、メッセージ（必須ではないです）を入力したら、承認もしくは否認を選択してレコードを保存します。
- 無事にSMSが通知されれば成功です。

# まとめ

kintoneのJavaScriptを使っても同様の作業が可能ですが、Smart at messageを利用するとかんたんにSMS連携が実装できます。
SMS以外にも、たとえば電話を自動でかけて、指定したメッセージを流すなどの応用も可能ですので、ぜひ色々と試してみてください。

---
### Twilio（トゥイリオ）とは

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