ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Twilio と連携して Bubble から SMS を送信する方法

f:id:yksmt:20200518134729p:plain

皆さん、こんにちは!今回は、Bubble から SMS(ショートメッセージサービス、ショートメール)を送信する方法として、Twilio というサービスを利用して実現する方法をご紹介したいと思います。

1. Twilio とは

Twilio はクラウド上にある電話機能をAPI公開しているサービスです。

  • テキストメッセージを送受信する「SMS」
  • 通話の管理をする「Voice」
  • リアルタイムビデオを作成する「Video」

などのサービスがあり、従量課金制なので、使った分だけの料金で利用することが可能です。

SMSサービスにおいては、文字数制限があるものの1メールの送信料は0.08ドル(2020/05/18現在)と安価で利用できます。

f:id:yksmt:20200518143218p:plain 出典元:https://www.twilio.com/sms/pricing/jp

今回は、Twilio で検証用のトライアルアカウントを作成して、Bubble で SMS 機能を作成していきたいと思います。

2. Twilio の使い方

2-1. Twilio にサインアップ

では、まずは Twilio にサインアップしていきましょう。

www.twilio.com

上記URLより Twilio サイトへ移動し、「今すぐ無料サインアップ>」ボタンをクリックします。

f:id:yksmt:20200518145648p:plain

氏名など必要項目を入力し、「無料トライアルをはじめましょう」ボタンをクリックしてアカウントを作成します。

f:id:yksmt:20200518145732p:plain

登録したメールアドレスに確認メールが届くので、「Confirm Your Email」をクリックして認証します。

次にテスト用の電話番号認証を行います。「+81」は日本の国番号です。テストで使用する携帯の電話番号を先頭の「0」と「‐」を除いて入力します。例えば「090-XXXX-XXXX」という番号の場合は「90XXXXXXXX」と入力します。

f:id:yksmt:20200518150220p:plain

確認コードがショートメールに送信されるので、取得したコードを入力して「Submit」ボタンをクリックします。

f:id:yksmt:20200518151033p:plain

いくつか質問されるので回答します。質問によっては「Skip to dashboard」ボタンでスキップすることも可能です。

f:id:yksmt:20200518151331p:plain

f:id:yksmt:20200518151541p:plain

f:id:yksmt:20200518151604p:plain

ダッシュボードが表示されれば、アカウント作成の完了です。なお、ダッシュボードには少額の残高が登録されていますが、これはトライアル用のものです。アップグレードを行うまでは、サービスの使用で課金されることはありません。

f:id:yksmt:20200518151814p:plain

ダッシュボードに表示されている「アカウントSID」と「AUTHTOKEN」は、後ほど Bubble 側の設定で使用します。

2-2. Twilio番号の作成

では、次に SMSの送信元となるトライアル用の Twilio 番号を作成します。

ダッシュボートの「Get a Trial Number」ボタンから、番号を取得します。「この番号を選択」ボタンで登録を完了させましょう。

f:id:yksmt:20200518154117p:plain

トライアルで取得した番号は、30日間使用しないと、トライアルプロジェクトから削除されますのでご注意くださいね。また、アップグレードした場合はトライアルの番号はそのまま引き継がれます。

以上で、Twilio の準備が整いました!

3. Bubble と連携しよう

では、次に Bubble 側の設定をしていきましょう。まずは連携したい Bubble アプリに、Twilio プラグインをインストールしていきたいと思います。

3.1 Twilio プラグインのインストール

Plugins タブからプラグインを追加していきます。Copilot の Twilio というプラグインを選択してください。

f:id:yksmt:20200518155711p:plain

プラグインの設定ページで、Twilio のダッシュボードに表示されている Account SID と Auth Token を登録します。ここでは、Development モードで実行するため「dev」の項目に入力しています。

f:id:yksmt:20200518160519p:plain

3.2 ワークフローの作成

次に、ワークフローを追加します。ここでは、ボタンをクリックした時のタイミングで SMS 送信するように、クリックイベントに追加しています。

Click here to add an action... で Plugins から「Twilo - Send text message」を選択してアクションを追加します。From に Twilio 番号を、To にテスト用に登録認証した電話番号を、Message に本文を入力します。

f:id:yksmt:20200518161642p:plain

f:id:yksmt:20200518162033p:plain

ワークフローの設定ができました!プレビューして SMS を送信してみましょう!

3.3 SMSの受信画面

f:id:yksmt:20200518162711p:plain

無料のトライアル電話番号からSMSを送信する場合は、メッセージの冒頭に「Sent from a Twilio Trial account.」と表示されます。

まとめ

いかがでしたか?今回は Twilio というサービスを利用して、Bubble から SMS を送信する方法についてご紹介しました!Webサービスのサインアップ処理などで、SMS送信を利用するとセキュリティも強化することができそうですね!では、次回もどうぞお楽しみに!

おすすめ記事

Twilio と連携して、Bubble で電話番号認証を実装する方法について記事にしました!

blog.nocodelab.jp