【Bubble】SMS（ショートメール）の実装方法
概要
SMSとは、ショートメッセージサービスのことです。携帯電話の電話番号を使ったメッセージの送受信ができるサービスです。Bubbleではプラグインを用いることで手軽にSMS機能を実装できます。
今回はSMS機能のAPIを提供している「Twilio」を用いた、SMS機能の実装方法を紹介します。
SMSの実装方法
完成イメージ
Bubbleアプリからメッセージを記入し、送信ボタンを押します。
指定の電話番号へ、ショートメールが届きました。
1. Twilioのアカウントを作成する
Twilioにてアカウントを作成します。
認証メールが送信されるので、メールを確認し認証します。
自分の電話番号を使い認証します。電話番号を入力し「Verify」をクリックします。
質問されるので回答し「Get Started with Twilio」をクリックします。
アカウント登録が完了し、ダッシュボードに遷移しました。
画面上部にある通り、最初はトライアル用の残高が付与されており、無料でSMSの送信等が可能です。
引き続き、トライアル用の電話番号を取得します。「Get a trial phone number」をクリックします。
トライアル用の電話番号が生成されました。
ダッシュボードに表示されている「Account SID」「Auth Token」「My Twilio phone number」をこのあと使用します。
2. プラグインをインストールする
続いてBubbleにて、Twilioプラグインをインストールします。
Twilioダッシュボードの「Account SID」「Auth Token」をそれぞれ、プラグインに設定します。
今回は開発環境での検証なので、dev.の欄に入力します。
3. SMS送信機能を実装する
BubbleにてSMS送信機能を実装します。
Multiline InputとButtonを1つずつ配置し、Button押下時のWorkflowを設定します。
| When | Step | 意味 |
|---|---|---|
| Button SMSを送信 is clicked | Plugins > Twilio – Send text message | Twilioでテキストメッセージを送信する |
FromにTwilioで取得した電話番号を設定します。
Toには送信先の電話番号を設定します。このとき先頭の「0」は、国際電話において日本を意味する「81」に置き換えます。たとえば「080」で始まる番号は「8180」となります。
Messageには本文内容なので、「MultilineInput 本文を入力’s value」を設定します。
以上で実装完了です。
プレビューにて本文を入力し送信すると、設定した電話番号宛にSMSが届きました。
