📡 Retoolで簡単！Twilio＆代替SMSサービス連携通知システム構築ガイド

![Retoolで簡単！Twilio＆代替SMSサービス連携通知システム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/7642fd3a-4f20-5f3e-147c-c91f59c90542.png)

## はじめに

現代のアプリケーションでは、システムの監視やユーザーへの重要な通知をSMSで送信するニーズが高まっています。  
Twilioはその代表的なサービスですが、料金や規制、配信率・信頼性などの理由から、別のSMSプロバイダーに切り替えるケースも少なくありません。  
本記事では、Retoolというローコードプラットフォームを活用して、SMSサービス（Twilioを含む）との連携による通知システムを構築する方法を、実際のコード例や図解を交えて丁寧に解説します。😊

---

## なぜSMSサービスの切り替えが必要なのか？

SMS通知サービスを選定する際に考慮すべきポイントは下記の通りです：

- **コスト管理**  
  従量課金制の場合、利用量が増えると料金がかさむため、安定した料金体系が求められる場合があります。

- **地域規制や配送成功率**  
  一部のサービスが特定地域で利用できなかったり、配信成功率に差があったりするため、代替サービスの検討が必要です。

- **開発・実装の柔軟性**  
  APIの使いやすさやドキュメントの充実度は、エンジニアの生産性に直結します。

例えば、Twilioは洗練されたAPIを提供している一方、EUや一部の地域では利用に制約があるため、TelnyxやSinch、MessageBirdなどへの切替えを考える企業も存在します。  

---

## Retoolを使ってSMS通知システムを構築する

Retoolは、ドラッグ＆ドロップでUIを組み立てつつ、各種データベースや外部APIと簡単に連携できるローコードプラットフォームです。  
今回のシステムでは、ユーザーがRetool上のフォームからSMSメッセージの送信条件（電話番号、メッセージ内容など）を入力し、ボタン操作でSMS送信APIを呼び出して通知を送信する流れを実装します。

### システム構成図

以下は、全体のフローをシンプルな図で表したものです。

```mermaid
flowchart TD
    A[Retoolのフォーム] --> B{SMSサービス選択}
    B -- Twilioの場合 --> C[Twilio APIエンドポイント]
    B -- 代替サービスの場合 --> D[代替APIエンドポイント]
    C --> E[SMS送信]
    D --> E
    E --> F[メッセージ受信（通知）]
```

※上記の図は、Retoolからの入力に応じて、利用するSMSプロバイダーが柔軟に切り替わる仕組みを想定しています。

---

## 実装手順

### 1. Retool上でフォームを作成

Retoolのダッシュボードから「New App」をクリックして新規アプリを作成します。  
フォームには以下のコンポーネントを配置しましょう：

- **電話番号入力フィールド**  
  ※入力チェック（例：E.164形式：+819012345678）を実施することで、正確な番号入力を促します。

- **メッセージ入力エリア**  
  ユーザーが送信したいメッセージを入力。

- **SMSサービス選択のドロップダウン**  
  「Twilio」や「Telnyx」など、利用したいサービスを選択できるようにします。

- **送信ボタン**  
  ボタン押下時に、入力内容を元にSMS送信のAPIリクエストを発行します。

### 2. APIリクエストの設定

RetoolのQueryエディタにて、以下のようなサンプルコード（Node.js/JavaScript風）を作成します。  
ここではTwilio APIを利用する場合のコード例を示しますが、環境変数やサービス名に応じてエンドポイントを動的に切り替えるように実装可能です。

```javascript
// 例：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サービスの切り替えロジック

ドロップダウンで選択したサービスに応じ、以下のようにエンドポイントや認証情報を動的に切り替えます。

```javascript
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サービスへの切り替えが容易になります。  
エンジニア初心者から中級者までが実践できる実装例も交えて紹介したため、ぜひ皆さんのプロジェクトに取り入れてみてください。📱💬

---

次回は、実際の運用事例や、通知ログの自動集計機能の追加方法など、さらに高度な機能拡張について解説する予定です。  
引き続き、快適なシステム開発ライフをお楽しみください！

---
## **💖 ご支援いただけませんか？**

![スクリーンショット 2025-01-31 7.51.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/f9d94b4d-dbd3-ab70-6b2b-dfc289cda562.png)


このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです！

---

### **暗号資産による寄付**
以下のウォレットアドレスをご利用ください。**重要：Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます！** 送金時には、**絶対に**使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を**必ず**正しく選択してください。

---

<img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="Ethereum Logo" width="20">

**Ethereum (ETH)**  （ネットワーク: ERC-20）

```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
```
<img src="https://cryptologos.cc/logos/binance-coin-bnb-logo.png" alt="BNB Logo" width="20">

**BNB Chain (BNB)**  （ネットワーク: BEP-20）
```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
```
<img src="https://cryptologos.cc/logos/polygon-matic-logo.png" alt="Polygon Logo" width="20">

**Polygon (MATIC)**   （ネットワーク: Polygon）

```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174  
```
<img src="https://cryptologos.cc/logos/avalanche-avax-logo.png" alt="Avalanche Logo" width="20">

**Avalanche (AVAX)**    （ネットワーク: Avalanche C-Chain）

```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
```
<img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="Solana Logo" width="20">

**Solana (SOL)**  
```
EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f
```

<img src="https://cryptologos.cc/logos/stellar-xlm-logo.png" alt="Stellar Logo" width="20">

**Stellar (XLM)**    メモ: 必要に応じて入力してください。

```
GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO 
```

<img src="https://cryptologos.cc/logos/xrp-xrp-logo.png" alt="Ripple Logo" width="20"> 

**Ripple (XRP)**    タグ: 必要に応じて入力してください。

```
r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN
```

<img src="https://cryptologos.cc/logos/cardano-ada-logo.png" alt="Cardano Logo" width="20">

**Cardano (ADA)**  

```
addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7
```

<img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" alt="Dogecoin Logo" width="20">

**Dogecoin (DOGE)**  
```
DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H
```

---

### **資金用途**
寄付金は以下の目的で活用させていただきます：

1. サーバー維持費やデザインツール購入  
2. 学習活動（オンラインコース受講・書籍購入）  
3. 読者向け無料コンテンツ制作  

ご協力いただいた皆さまには心より感謝申し上げます！ 🙏

---

### **補足情報**
- **Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について**  
  上記4つのネットワークは**同じウォレットアドレス**（`0x5CDA2F68f59F641B00aD172475c3d5fC10321174`）を使用します。ただし、送金時には、**絶対に**使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を**必ず**正しく選択してください。

- USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、**送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。**

- 初回送金時には少額でテスト送金することをおすすめします。

---