インテグレーション
MonstarX は Connectors を通じて外部サービスに接続します。このガイドでは、コネクターの仕組みと各サービスのセットアップ方法を説明します。
コネクターの仕組み
Workbench の Connectors タブを開くと、利用可能なすべてのサービスと現在のステータスが表示されます。
- Required（必須） — これがなければアプリは機能しません。今すぐ接続してください。
- Optional（任意） — なくてもアプリは動作します。準備ができたら接続してください。
- Connected（接続済み） — アクティブで正常に動作しています。何もする必要はありません。
- Not connected（未接続） — 利用可能ですがまだセットアップされていません。
必須コネクターが接続されていない場合、Preview でアプリが正しく読み込まれても、関連する機能は動作しません。
クイックリファレンス
| インテグレーション | 必要なタイミング | 無料の代替手段 |
|---|---|---|
| Supabase | ユーザーアカウントまたは永続データ | メール/パスワード認証 |
| Stripe | 支払い機能 | なし |
| Resend | トランザクションメール | なし |
| Google Maps | マップ表示またはジオコーディング | OpenStreetMap + Leaflet |
| Google OAuth | Google でサインイン | メール/パスワード認証 |
| Google Analytics | トラフィック分析 | Plausible |
| OpenAI | アプリ内の AI 機能 | OpenRouter |
| OpenRouter | マルチモデル AI ルーティング | OpenAI |
| Twilio | SMS 通知 | なし |
Supabase（データベース + 認証）
Supabase はアプリに PostgreSQL データベースと認証（サインアップ、サインイン、セッション管理）を提供します。
必要なタイミング: アプリがユーザーデータを保存する場合、ユーザーアカウントを持つ場合、または永続的な状態が必要な場合。
セットアップ
- supabase.com にアクセスして無料アカウントを作成します。
- 新しいプロジェクトを作成し、プロジェクト URL と anon キーをメモします。
- MonstarX で Connectors タブを開いて Supabase → Connect をクリックします。
- 接続フローを完了するか、プロジェクトの認証情報を貼り付けます。
- 生成されたデータベーススキーマを確認します。
- Approve をクリックして Supabase プロジェクトに適用します。
表示されるもの: Supabase が「Connected」と表示され、アプリのデータベースがライブになります。
トラブルシューティング:
- 無料の Supabase プロジェクトは非アクティブ後に一時停止されます。ログインして再開してください。
- 接続が失敗する場合は、プロジェクト URL と anon キーを再確認してください。
- スキーマの移行が失敗する場合は、Supabase ダッシュボードの SQL エディターでエラーの詳細を確認してください。
無料の代替手段: データベースなしで認証のみが必要な場合、メール/パスワード認証では Supabase 接続が不要な場合があります。
Stripe（支払い）
Stripe はアプリ内の支払い処理、サブスクリプション、請求を担います。
必要なタイミング: アプリの任意の機能でユーザーへの課金やトランザクションの処理が必要な場合。
セットアップ
- stripe.com にアクセスしてアカウントを作成します。
- Stripe ダッシュボードで 公開可能キー（
pk_...）と シークレットキー（sk_...）をコピーします。開発中はテストモードのキーを使用してください。 - MonstarX の Connectors で Stripe → Connect をクリックし、プロンプトが表示されたらキーを入力します。
表示されるもの: Stripe が「Connected」と表示され、支払いフローがアクティブになります。
トラブルシューティング: 正しいキーの種類を使用していることを確認してください。テストキーは pk_test_ と sk_test_ で始まります。
Stripe のシークレットキーをチャットメッセージやプロンプトに貼り付けないでください。安全な Connectors フィールドにのみ入力してください。
Resend（メール）
Resend はトランザクションメール（アカウント確認、パスワードリセット、通知）を処理します。
必要なタイミング: アプリにメールベースのサインアップや通知フローがある場合。
セットアップ
- resend.com にアクセスしてアカウントを作成します。
- Resend ダッシュボードから API キーを生成します。
- MonstarX の Connectors で Resend → Connect をクリックし、API キー（
re_...）を入力します。 - 独自ドメインからメールを送信したい場合は、Resend でドメインを追加して確認します。
表示されるもの: Resend が「Connected」と表示され、メールフローが正しくトリガーされます。
トラブルシューティング: 送信エラーは Resend ダッシュボードのログで確認し、API キーがまだアクティブかどうかを確認してください。
Google Maps
Google Maps はアプリ内でマップを表示し、住所検索（ジオコーディング）を処理します。
任意。 アプリがマップを表示したり、位置情報機能が必要な場合のみ必要です。
セットアップ
- Google Cloud Console にアクセスして Maps JavaScript API を有効にします。
- Maps アクセス権を持つ API キーを生成します。
- MonstarX の Connectors で Google Maps → Connect をクリックし、API キー（
AIza...）を入力します。
表示されるもの: Preview および公開されたアプリでマップが正しく読み込まれます。
トラブルシューティング: API キーに Maps JavaScript API が有効になっていることを確認してください。Google Maps は無料枠でも有効な請求アカウントが必要です。
無料の代替手段: OpenStreetMap + Leaflet — API キー不要。
Google OAuth（Google でサインイン）
Google OAuth を使うと、ユーザーが Google アカウントで認証できるようになります。
任意。
セットアップ
- Google Cloud Console で OAuth 2.0 クライアントを作成します。
- 承認済みのリダイレクト URI を MonstarX プロジェクトの URL に合わせて設定します。
- クライアント ID とクライアントシークレットをコピーします。
- MonstarX の Connectors で Google OAuth → Connect をクリックし、認証情報を入力します。
表示されるもの: アプリに動作する「Google でサインイン」ボタンが表示されます。
トラブルシューティング: OAuth エラーはほぼ常にリダイレクト URI の不一致が原因です。URI が完全に一致していることを再確認してください。
無料の代替手段: メール/パスワード認証。
Google Analytics
Google Analytics は公開されたアプリ全体のページビュー、イベント、ユーザー行動を追跡します。
任意。
セットアップ
- analytics.google.com にアクセスしてプロパティを作成します。
- 測定 ID（
G-...）をコピーします。 - MonstarX の Connectors で Google Analytics → Connect をクリックし、測定 ID を入力します。
表示されるもの: 公開後に Google Analytics ダッシュボードにイベントが表示されます。
無料の代替手段: Plausible Analytics — プライバシーに配慮した GDPR 準拠のサービスで、Cookie バナーも不要。無料枠あり、API キー不要。
OpenAI
OpenAI はアプリに AI 機能（チャット、テキスト生成、分類など）を追加します。
必要なタイミング: アプリが生成、埋め込み、補完のために OpenAI を呼び出す場合。
セットアップ
- platform.openai.com にアクセスして API キーを生成します。
- MonstarX の Connectors で OpenAI → Connect をクリックし、キー（
sk-...）を入力します。
トラブルシューティング: API キーがアクティブで利用可能なクレジットがあることを確認してください。
代替手段: OpenRouter は複数の AI プロバイダーへのリクエストをルーティングします。モデルの柔軟性やコスト管理に役立ちます。
OpenRouter
OpenRouter は複数の AI モデル（GPT、Claude、Llama など）への統合ゲートウェイとして機能します。
任意。 モデルの柔軟性が必要な場合に OpenAI の代わりまたは併用として使用します。
セットアップ
- openrouter.ai にアクセスしてアカウントを作成します。
- API キーを生成します。
- MonstarX の Connectors で OpenRouter → Connect をクリックし、キーを入力します。
Twilio（SMS）
Twilio はアプリから SMS メッセージ（確認コード、アラート、通知）を送信します。
任意。 アプリが SMS を送信する場合のみ必要です。
セットアップ
- twilio.com にアクセスしてアカウントを作成します。
- アカウント SID、Auth Token、Twilio の電話番号をメモします。
- MonstarX の Connectors で Twilio → Connect をクリックし、認証情報を入力します。
表示されるもの: アプリの SMS 機能が正しく送信されます。
「Connector Required」によるブロックからの回復
必須コネクターが接続されていないためにアプリがブロックされている場合は、以下の手順で対処します。
- Connectors タブを開きます。
- Required とマークされたサービスを見つけます。
- そのサービスの上記のセットアップ手順に従います。
- Preview に戻って再読み込みします。
そのサービスを使いたくない場合は、上記のクイックリファレンステーブルで無料の代替手段を確認してください。
セキュリティに関する注意事項
- API キーや認証情報をプロンプトやチャットに貼り付けないでください。
- 認証情報は安全な Connectors フィールドにのみ入力してください。
- 開発中はテストキーを使用してください。最終公開前にのみ本番キーに切り替えてください。
- 誤って公開された可能性のあるキーは必ずローテーションしてください。