こんにちは！今回は、ZeroqodeのTwilio SMS送信プラグインを使ってSMS送信機能を実装する方法をご紹介します。
ノーコードラボでは、Twilioと連携して電話番号認証やSMS送信の機能を実装する方法をご紹介する際、CopilotのTwilioプラグインを使用してきました。ですが、Copilotのプラグインは、最新バージョン4.3.11では正常にSMSを送信することができず、1つ前のバージョン4.3.10ではBubble Plugin APIバージョン4に対応していないため、使い続けることが難しくなってしまいました。
そこで今回は、上記のCopilotのプラグインに代わってZeroqodeのTwilio連携プラグインでSMSを送信する方法をご紹介いたします。正常にSMSが送信できるかを確認するための初めてSMS送信機能を実装する方はもちろん、Copilot製プラグインの代替プラグインを探している方はぜひご覧ください。
1. Twilio概要
Twilioは、SMS、通話、ビデオなどのコミュニケーション機能をアプリに組み込めるサービスです。
SMS送信にかかる料金は、2024/3/1時点で1メッセージあたり$0.084です（文字数制限あり）。これまでは$0.08でしたが少し値上がりしています。
最新の料金は下記のページで確認できます。
2. プラグインの比較
まずは、CopilotのプラグインとZeroqodeのプラグインを簡単に比較してみます。
2.1. Copilot製Twilioプラグイン
Copilotが作成した、Twilio経由でSMSを送信するアクションを実装できるプラグイン（無料）です。SMS送信の他、電話の発信やFAXの送信などTwilioの機能全般を実装するActionを使えるプラグインです。
このプラグインが使えないのは、Bubble Plugin API Version 4に対応できていないためです。Bubbleより、Node 14のサポートが終了するためサーバー側アクションを実装しているプラグインは2024/1/4までにNode 18で実行されるBubble Plugin API Version 4にアップデートする必要があるとの告知がありました。Version 4にアップデートしていないプラグインでは2024/3/12以降サーバー側アクションが実行できなくなる可能性があるとも告知されています。
こちらのプラグインはBubble Plugin API Version 4への対応としてVersion 4.3.11をリリースしましたが、SMS送信アクション「Send Text Message」実行時にエラーが発生してしまいます。Version 4.3.10では正常に「Send Text Message」を実行できますが、Bubble Plugin API Versionが0のため、3/12以降使えなくなります。
2.2. Zeroqode製Twilio経由SMS送信プラグイン
Copilot製プラグインの代わりに使用するプラグインが下記のZeroqode製Twilio SMS送信プラグイン（無料）です。Copilot製プラグインとは異なり、SMS送信に特化したプラグインです。実装できるプラグインアクションはTwilio経由でSMSを送信する「Twilio Send SMS」のみです。
こちらのプラグインはBubble API Version 4で実装されており、定期的にアップデートもされているので代替プラグインとして選定しました。
3. SMS送信アクション実装方法
それでは、Zeroqodeのプラグインを使ってSMSを送信する方法をご紹介します。
3.1. Twilio
Twilioのアカウント作成・初期設定を行います。ここでの目標は、検証環境でTwilio SMS送信を確認するためのMy Twilio phone number（Twilio電話番号）、Account SID、Auth tokenを取得することです。
下記のTwilioトップページにアクセスして、画面右上の「無料トライアル」ボタンをクリックして新規登録ページを開きます。
新規登録するアカウント情報を入力したら、電話番号を認証する画面が表示されます。ご自身の携帯電話番号を入力して「Send code via SMS」をクリックします。トライアルアカウントでは認証された電話番号にしかメッセージ送信・通話できないのですが、ここで登録した電話番号が1つ目の認証済み電話番号になります。
入力した電話番号に認証コードが記載されたSMSが届きます。SMSを確認して認証コードを次の画面で入力して、「Verify」をクリックします。
次の画面で、Twilioアカウントのリカバリーコードが表示されます。このコードはコピーしてどこかに保存しておきます。保存できたら「Continue」をクリックします。
アンケート画面が表示されるので、回答して「Get started with Twilio」をクリックするとアカウント登録完了です！次の画面でダッシュボードに遷移します。
最初のログインでは、利用開始の初期設定の手順が表示されています。「Step1: Get a Twilio phone number」の「Get phone number」をクリックします。
ボタンがあったところに番号が表示されます。これがTwilio phone numberで、SMSの送信者番号になります。
ダッシュボードを下にスクロールすると、「Account Info」欄にAccount SIDとAuth tokenが表示されています。この2つも後ほど使用します。
ダッシュボードの左上にはトライアルアカウントに付与される検証用の金額が表示されています。Twilioは有料のサービスなのですが、トライアルアカウントではこの金額の範囲で無料で検証することが出来ます。
3.2. Bubble
Bubbleアプリを新規作成して、ZeroqodeのTwilioプラグインをインストールします。
Pluginsタブで、Twilioダッシュボードで確認したSID（Account SID）とToken（Auth token）を入力します。
Data Type 「Twilio」を新規作成して、Twilioで発行したAccount SID、Twilio phone numberを保存します。
SMSを送信するActionを実装するページを作成します。下記のエレメントを配置します。
- Input：電話番号入力用
- Button：SMS送信Workflow開始用
下記の記事を参考に、入力された電話番号にSMSを送信するページとWorkflowを作成します。SMS送信Buttonの新規Workflowを作成したら、Step1にZeroqodeプラグインのアクション、Plugins > 「Twilio send SMS」を設定します。
各項目を下記の通り設定してください。
ちなみに、SMSの送信先番号は国際電話番号の形式で記載する必要があります。
- 日本の国際電話番号形式：「81」「先頭の0を取った電話番号」
例えば、入力された電話番号が012-3456-7890の場合国際電話番号は811234567890となります。
3.3. プレビュー確認
作成したページをPreview表示して、Inputに国際電話番号を入力して「SMS送信」ボタンをクリックします。ここで入力する番号はTwilioで認証済みになっている番号にしてください。
入力した電話番号にSMSが届けば成功です。
3.4. おまけ：レベルアップ実装方法
今回ご紹介した方法は、正常に送信できるかを確認するための簡単なものになります。実際のアプリでTwilioプラグインを使った電話番号認証を実装する方法は下記の記事をご確認ください。
この記事では、電話番号を国際電話番号に変換する機能も含んで実装しています。使用するプラグインをCopilot製からZeroqode製に置き替えてご覧ください。
4. まとめ
今回は、TwilioでSMSを送信する方法として、Zeroqodeのプラグインを使う方法をご紹介いたしました。
現在進行形で使っているプラグインのアップデートが行われず困っている方は多いのではないでしょうか。CopilotのプラグインからZeroqodeのプラグインに置き替える手順はシンプルで影響範囲も狭いので、ぜひ本記事を参考に置き替えを行ってみてください。
