はじめに
現代のアプリケーションでは、システムの監視やユーザーへの重要な通知をSMSで送信するニーズが高まっています。
Twilioはその代表的なサービスですが、料金や規制、配信率・信頼性などの理由から、別のSMSプロバイダーに切り替えるケースも少なくありません。
本記事では、Retoolというローコードプラットフォームを活用して、SMSサービス（Twilioを含む）との連携による通知システムを構築する方法を、実際のコード例や図解を交えて丁寧に解説します。😊
なぜSMSサービスの切り替えが必要なのか？
SMS通知サービスを選定する際に考慮すべきポイントは下記の通りです：
-
コスト管理
従量課金制の場合、利用量が増えると料金がかさむため、安定した料金体系が求められる場合があります。 -
地域規制や配送成功率
一部のサービスが特定地域で利用できなかったり、配信成功率に差があったりするため、代替サービスの検討が必要です。 -
開発・実装の柔軟性
APIの使いやすさやドキュメントの充実度は、エンジニアの生産性に直結します。
例えば、Twilioは洗練されたAPIを提供している一方、EUや一部の地域では利用に制約があるため、TelnyxやSinch、MessageBirdなどへの切替えを考える企業も存在します。
Retoolを使ってSMS通知システムを構築する
Retoolは、ドラッグ＆ドロップでUIを組み立てつつ、各種データベースや外部APIと簡単に連携できるローコードプラットフォームです。
今回のシステムでは、ユーザーがRetool上のフォームからSMSメッセージの送信条件（電話番号、メッセージ内容など）を入力し、ボタン操作でSMS送信APIを呼び出して通知を送信する流れを実装します。
システム構成図
以下は、全体のフローをシンプルな図で表したものです。
※上記の図は、Retoolからの入力に応じて、利用するSMSプロバイダーが柔軟に切り替わる仕組みを想定しています。
実装手順
1. Retool上でフォームを作成
Retoolのダッシュボードから「New App」をクリックして新規アプリを作成します。
フォームには以下のコンポーネントを配置しましょう：
-
電話番号入力フィールド
※入力チェック（例：E.164形式：+819012345678）を実施することで、正確な番号入力を促します。 -
メッセージ入力エリア
ユーザーが送信したいメッセージを入力。 -
SMSサービス選択のドロップダウン
「Twilio」や「Telnyx」など、利用したいサービスを選択できるようにします。 -
送信ボタン
ボタン押下時に、入力内容を元にSMS送信のAPIリクエストを発行します。
2. APIリクエストの設定
RetoolのQueryエディタにて、以下のようなサンプルコード（Node.js/JavaScript風）を作成します。
ここではTwilio APIを利用する場合のコード例を示しますが、環境変数やサービス名に応じてエンドポイントを動的に切り替えるように実装可能です。
// 例：Twilio APIを使ったSMS送信（Node.jsの場合）
const accountSid = {{ TWILIO_ACCOUNT_SID }};
const authToken = {{ TWILIO_AUTH_TOKEN }};
const client = require('twilio')(accountSid, authToken);
const toNumber = {{ phoneNumberInput.value }}; // Retoolの電話番号入力コンポーネント
const fromNumber = {{ TWILIO_PHONE_NUMBER }};
const messageBody = {{ messageTextInput.value }}; // メッセージ入力エリアから
client.messages.create({
to: toNumber,
from: fromNumber,
body: messageBody,
})
.then(message => {
utils.showNotification({
title: "送信成功",
description: "メッセージID: " + message.sid,
notificationType: "success"
});
})
.catch(error => {
utils.showNotification({
title: "送信失敗",
description: error.message,
notificationType: "error"
});
});
※ このコードはRetoolのQuery内で実行できるよう、必要なライブラリ（twilioなど）があらかじめ含まれていることが前提です。
※ 同様に、別のSMSサービスのAPI仕様に合わせたコードとエンドポイントに切り替えるロジックも実装可能です。
3. SMSサービスの切り替えロジック
ドロップダウンで選択したサービスに応じ、以下のようにエンドポイントや認証情報を動的に切り替えます。
const service = {{ smsServiceDropdown.value }}; // "Twilio" もしくは "Telnyx" など
if(service === "Twilio") {
// Twilio用の設定
const accountSid = {{ TWILIO_ACCOUNT_SID }};
const authToken = {{ TWILIO_AUTH_TOKEN }};
const fromNumber = {{ TWILIO_PHONE_NUMBER }};
// Twilioの送信処理（上記と同様）
// ・・・
} else if(service === "Telnyx") {
// Telnyx用の設定例
const apiKey = {{ TELNYX_API_KEY }};
const fromNumber = {{ TELNYX_PHONE_NUMBER }};
fetch("https://api.telnyx.com/v2/messages", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + apiKey
},
body: JSON.stringify({
from: fromNumber,
to: {{ phoneNumberInput.value }},
text: {{ messageTextInput.value }}
})
})
.then(response => response.json())
.then(result => {
utils.showNotification({
title: "送信成功",
description: "Telnyx Message ID: " + result.data.id,
notificationType: "success"
});
})
.catch(error => {
utils.showNotification({
title: "送信失敗",
description: error.message,
notificationType: "error"
});
});
}
このように、選択されたSMSサービスごとに適切なAPIエンドポイントやリクエストフォーマットに切替えることで、柔軟な通知システムが実現します。🔄
実装後のメリットと注意点
メリット
-
柔軟な切り替え
どのSMSサービスを利用するかを簡単に変更できるため、コストや配信品質の問題に迅速に対応可能です。 -
Retoolによる迅速な開発
UIパーツをドラッグ＆ドロップで配置できるため、エンジニア初心者でも直感的にシステムを構築でき、開発コストを大幅に削減できます。🚀 -
エラーハンドリングの容易さ
APIリクエストの結果に応じた通知機能を組み込むことで、ユーザーにリアルタイムなフィードバックを提供できます。
注意点
-
セキュリティ対策
APIキーや認証情報は環境変数として管理し、Retool内で直接記述しないようにしましょう。 -
API利用制限
利用するSMSサービスのレートリミットや料金体系に注意し、システム全体の負荷を考慮した設計を行ってください。 -
テスト環境の整備
開発時はTwilioのトライアルアカウントや、代替サービスのテスト用APIを利用し、十分な検証を行うことが重要です。
まとめ
本記事では、Retoolを駆使してTwilioまたはその他のSMSサービスに柔軟に対応可能な通知システムの構築方法を解説しました。
特に、サービス選択用のインターフェースを用意することで、利用環境や要件に応じたSMSサービスへの切り替えが容易になります。
エンジニア初心者から中級者までが実践できる実装例も交えて紹介したため、ぜひ皆さんのプロジェクトに取り入れてみてください。📱💬
次回は、実際の運用事例や、通知ログの自動集計機能の追加方法など、さらに高度な機能拡張について解説する予定です。
引き続き、快適なシステム開発ライフをお楽しみください！
💖 ご支援いただけませんか？
このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです！
暗号資産による寄付
以下のウォレットアドレスをご利用ください。重要：Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます！ 送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。
Ethereum (ETH) （ネットワーク: ERC-20）
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
BNB Chain (BNB) （ネットワーク: BEP-20）
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Polygon (MATIC) （ネットワーク: Polygon）
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Avalanche (AVAX) （ネットワーク: Avalanche C-Chain）
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Solana (SOL)
EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f
Stellar (XLM) メモ: 必要に応じて入力してください。
GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO
Ripple (XRP) タグ: 必要に応じて入力してください。
r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN
Cardano (ADA)
addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7
Dogecoin (DOGE)
DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H
資金用途
寄付金は以下の目的で活用させていただきます：
- サーバー維持費やデザインツール購入
- 学習活動（オンラインコース受講・書籍購入）
- 読者向け無料コンテンツ制作
ご協力いただいた皆さまには心より感謝申し上げます！ 🙏
補足情報
-
Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について
上記4つのネットワークは同じウォレットアドレス（0x5CDA2F68f59F641B00aD172475c3d5fC10321174）を使用します。ただし、送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。 -
USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。
-
初回送金時には少額でテスト送金することをおすすめします。