RorkアプリにZapierを繋ぐ

Rorkでアプリを作り終えて「よし、公開しよう」と思ったとき、ふと気づくことがあります。「ユーザーが登録したら welcome メールを送りたい」「フォームの内容を Notion に保存したい」「購入が完了したら Slack に通知したい」——これらは全部、いわゆる"バックエンド処理"です。

Supabase や Firebase を使えば解決できますが、それなりに設定が必要で、コードも書かなければなりません。個人開発で「そこまでやりたくない」と感じるのは正直なところではないでしょうか。

そこで試してほしいのが Zapier との連携です。Rork の Webhook 機能と組み合わせることで、バックエンドをほとんど書かずに多くの自動化が実現できます。今回は実際に動作するコード例を交えながら、その仕組みと具体的なユースケースを紹介します。

ZapierとRorkの連携は「Webhook」が橋渡し

ZapierはSaaSツール同士を繋ぐ自動化プラットフォームです。「トリガー（何かが起きたとき）」→「アクション（何かをする）」という形式でワークフローを定義します。

Rorkアプリから Zapier を動かすには、Zapier の「Webhooks by Zapier」トリガーを使います。仕組みはシンプルです。

Zapier 側でWebhookのURLを発行する
RorkアプリからそのURLに fetch でデータを送る
Zapier がデータを受け取り、後続のアクションを実行する

Rork 側でのコードは数行で済みます。

// ユーザー登録時にZapierへ通知する例
const notifyZapier = async (userData: { email: string; name: string }) => {
  try {
    const response = await fetch('https://hooks.zapier.com/hooks/catch/XXXXXX/YYYYYYY/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: userData.email,
        name: userData.name,
        registered_at: new Date().toISOString(),
        source: 'rork_app',
      }),
    });
 
    if (!response.ok) {
      console.error('Zapier通知失敗:', response.status);
    }
  } catch (error) {
    // 自動化の失敗はアプリの動作を止めない
    console.error('Zapier fetch error:', error);
  }
};
 
// 登録処理の中で呼び出す
const handleSignUp = async (email: string, name: string) => {
  // メインの登録処理（Supabase/Firebase）
  await createUser(email, name);
 
  // Zapierへの通知（失敗してもアプリは続行）
  await notifyZapier({ email, name });
};

重要なのは、Zapierへの通知が失敗してもアプリのメイン処理を止めないように設計することです。try/catch で囲み、エラーをログに残すだけに留めましょう。

実践例① ユーザー登録 → ウェルカムメール自動送信

新規ユーザーが登録したとき、個別にメールを送るのは手間ですが、Zapierを使えばこれが自動化できます。

Zapierの設定:

トリガー: Webhooks by Zapier → Catch Hook
アクション: Gmail（または SendGrid）→ Send Email

アクションの設定で、受け取ったWebhookデータを使います。

宛先: {{name}} (Webhookで受け取ったemail)
件名: 「ご登録ありがとうございます、{{name}}さん」
本文: 自由にHTMLで作成可能

// フロントマター: メール通知用のデータ構造
interface WelcomeEmailPayload {
  email: string;
  name: string;
  registered_at: string;
  app_version: string;
  platform: 'ios' | 'android';
}
 
// 送信例
const sendWelcomeEmailViaZapier = async (user: WelcomeEmailPayload) => {
  await fetch(process.env.ZAPIER_WELCOME_WEBHOOK_URL!, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(user),
  });
};

環境変数に Webhook URL を保存しておくのがお勧めです。Rork のプロジェクト設定で環境変数を定義できます。

実践例② フォーム送信 → Notionデータベースに自動追加

「お問い合わせフォームの内容を Notion で管理したい」という需要は意外と多いです。特に個人開発者にとって、Notion はシンプルなCRMとしても使えます。

Zapierの設定:

トリガー: Webhooks by Zapier → Catch Hook
アクション: Notion → Create Database Item

// お問い合わせフォームの送信処理
interface ContactFormData {
  name: string;
  email: string;
  message: string;
  category: 'bug' | 'feature_request' | 'general';
}
 
const submitContactForm = async (formData: ContactFormData) => {
  // バリデーション
  if (!formData.email.includes('@') || formData.message.length < 10) {
    throw new Error('入力内容を確認してください');
  }
 
  const response = await fetch(process.env.ZAPIER_CONTACT_WEBHOOK_URL!, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      ...formData,
      submitted_at: new Date().toISOString(),
      user_agent: 'RorkApp/1.0',
    }),
  });
 
  if (!response.ok) {
    throw new Error('送信に失敗しました。しばらくしてからお試しください。');
  }
};

このコードのポイントは、エラーを ユーザーに見える形でちゃんと投げていることです。Zapierへの送信失敗はユーザーに通知すべきケースなので、notifyZapier の例とは逆に、エラーを上位に伝播させています。

実践例③ 購入完了 → Slackチャンネルに通知

アプリの購入が発生したとき、即座に知りたいですよね。Stripe の Webhook を直接受け取る設定は少し複雑ですが、Zapier を介せばSlackへの通知が簡単にできます。

Zapierの設定（Stripe経由の場合）:

トリガー: Stripe → New Payment
アクション: Slack → Send Channel Message

または Rork から直接 Zapier に通知する場合：

// RevenueCategory の購入完了コールバック内で実行
const notifyPurchaseToSlack = async (purchase: {
  productId: string;
  price: number;
  currency: string;
  userId: string;
}) => {
  const message = `💰 購入完了: ${purchase.productId} / ¥${purchase.price} / User: ${purchase.userId}`;
 
  await fetch(process.env.ZAPIER_PURCHASE_WEBHOOK_URL!, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      ...purchase,
      message,
      purchased_at: new Date().toISOString(),
    }),
  });
};

購入通知はリアルタイムで知りたいケースなので、Slack への通知は特に効果的です。月に数件の購入でも、実際に通知が来ると嬉しいものです。

Zapierの無料枠で足りる？ Make・n8nとの使い分け

Zapierの無料プランは月100タスク・5つのZapが上限です。個人開発の初期段階ならほぼ十分ですが、ユーザー数が増えてきたら有料プランへの移行が必要になります。

用途によって他のツールと使い分けるのも良い選択肢です。

Zapier: 設定が直感的で、連携できるサービスが最多（6,000以上）。迷ったらこれ
Make（旧Integromat）: より複雑なワークフロー向け。無料枠が少し広い。詳しくはMakeとWebhookで自動化する方法を参照してください
n8n: セルフホスト可能でコスト最小化できます。技術的なハードルは上がります。n8nとRorkの自動化も参考になります

まずはZapierで試して、コストやワークフローの複雑さに応じて乗り換えを検討するのが現実的なアプローチです。

Zapierでは対応できないようなカスタムなAPI連携が必要になったときは、RorkのAPI外部連携ガイドも合わせて読んでみてください。

Webhook URLをソースコードに直書きしない

最後に、セキュリティ面での注意を一つ。ZapierのWebhook URLはアクセストークンの役割を持っています。これをコードに直書きするとGitHubにアップロードされたとき誰でも悪用できてしまいます。

// ❌ 直書きは絶対にしない
const ZAPIER_URL = 'https://hooks.zapier.com/hooks/catch/1234567/abcdefg/';
 
// ✅ 環境変数から読み込む
const ZAPIER_URL = process.env.ZAPIER_WEBHOOK_URL;
// Rorkのプロジェクト設定 → Environment Variables に追加する

Rork のプロジェクト設定画面から環境変数を追加できます。本番・開発環境で別のURLを使い分けることもできるので、ぜひ活用してください。

Zapierとの連携は、個人開発の「バックエンドを書く手間を省きつつ、必要な自動化だけ拾っていく」という戦略にぴったりです。まず1つのワークフローから試してみると、意外とすんなり動くはずです。最初の1つは「ユーザー登録 → 自分への Slack 通知」あたりが手軽でお勧めです。

RorkアプリにZapierを繋ぐ — バックエンドなしでユーザー通知・データ連携を自動化する方法