Slackコネクタ実践ガイド｜アプリの動きをチームに即共有する『通知ハブ』を作る

1. これは何？（30秒で）#

Slackコネクタは、Lovableで作ったアプリから『Slackの特定チャネルに自動でメッセージを送る』機能を、ボタン1つで使えるようにする仕組みです。たとえば『新しいお客様が登録した瞬間に #sales チャネルに通知』『エラーが起きたら #alerts に当番付きでアラート』を、コードを書かずに作れます。

2. これで何ができるようになる？#

• アプリ内で課金が成立した瞬間、#sales に『💎 新規Pro契約: 山田様』を投稿
• 問い合わせフォームの送信を、担当チャネルにスレッド付きで通知
• 毎朝9時にKPI（昨日の売上・新規登録・解約）を #daily に自動投稿
• 重大エラー検知時に @oncall 付きで #alerts にアラート（リトライ込み）
• Stripeの決済失敗を検知 → 該当ユーザー名と金額を #billing にエスカレーション

3. ハマる人 / ハマらない人#

• ✅ Slackが社内コミュニケーションの中心になっている組織
• ✅ 『Webアプリで起きたこと』をリアルタイムでチームに見せたい人
• ✅ メールよりチャットの方が反応が早い文化のチーム
• ⚠️ Microsoft Teams中心の組織 → Teamsコネクタを使う
• ⚠️ 個人開発で『自分しか見ない』通知 → LINE Notifyの方が手軽

4. 全体の流れ（アーキテクチャ）#

技術的にどう動いているのか、図にしました。難しく見えますが、左から右に矢印が流れているだけです。

┌──────────────┐    ┌────────────────────┐    ┌─────────────────────┐    ┌────────┐
│ ユーザー操作 │ →  │ Lovableフロント   │ →  │ サーバーファンクション │ →  │ Slack  │
│ (ボタン押下) │    │ (ブラウザのUI)    │    │ (安全な裏側の関数)   │    │ チャネル│
└──────────────┘    └────────────────────┘    └─────────────────────┘    └────────┘
                                                       ↑
                                            APIキーはここだけが知っている
                                            （ブラウザには絶対に出さない）

• ユーザーが『送信』ボタンを押す
• ブラウザ側のLovableアプリが、サーバー側の小さな関数（サーバーファンクション）を呼び出す
• サーバーファンクションが、Lovableが管理しているSlackのAPIキーを使って、Slackに投稿
• 結果（成功 / 失敗）をブラウザに返して、UIに『送信しました ✅』と表示

5. 最短3分で繋ぐ手順#

1. Lovable画面右上 → Workspace → Connectors を開く
2. 一覧から Slack を探して『Connect』をクリック
3. Slackワークスペース選択画面に飛ぶので、投稿したいワークスペースを選ぶ
4. 『許可する』ボタンを押すと、Lovableに戻ってきて『Connected ✅』と表示
5. プロジェクトの『Use this connection』にチェックを入れて、このアプリで使えるようにする

6. そのままコピペで動くプロンプト例#

Lovableチャット欄に貼って送信してください。コツは『1メッセージ＝1目的』。複数の機能を一気に頼むと精度が落ちます。

例1: 一番シンプルな『送信ボタン』

Slackの『#general』チャネルに任意のテキストを投稿できる管理画面 /admin/slack を作って。
- フォーム: テキストエリア + 送信ボタン
- 送信処理はサーバーファンクションにして、SLACK_API_KEY を使う
- 送信後にトーストで『送信完了』を表示

例2: 業務イベントを自動通知

アプリで新規ユーザー登録が成功したら、Slackの『#sales』チャネルに次の内容を投稿して:
『🎉 新規登録: <名前>（<メールアドレス>）』
失敗時は3回までリトライ、それでもダメなら server-function-logs に記録。

例3: 朝の自動レポート

毎朝9時(JST)に、前日のサインアップ数 / 売上 / アクティブユーザー数を集計して、
Slackの『#daily』チャネルにブロックキット形式で投稿するスケジュール処理を作って。

7. 裏で生成されるコードの例#

Lovableが上のプロンプトから自動で書いてくれるコードは、ざっくり以下のような姿をしています。読めなくてOKですが『こういうものが裏で動いてるんだ』と知っておくと、トラブル時に強くなります。

// src/lib/slack.functions.ts
import { createServerFn } from "@tanstack/react-start";
import { z } from "zod";

const GATEWAY_URL = "https://connector-gateway.lovable.dev/slack/api";

export const postSlack = createServerFn({ method: "POST" })
  .inputValidator(z.object({ channel: z.string(), text: z.string().max(2000) }).parse)
  .handler(async ({ data }) => {
    const LOVABLE_API_KEY = process.env.LOVABLE_API_KEY;
    const SLACK_API_KEY = process.env.SLACK_API_KEY;
    if (!LOVABLE_API_KEY) throw new Error("LOVABLE_API_KEY missing");
    if (!SLACK_API_KEY) throw new Error("SLACK_API_KEY missing (Slack未接続)");

    const res = await fetch(`${GATEWAY_URL}/chat.postMessage`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${LOVABLE_API_KEY}`,
        "X-Connection-Api-Key": SLACK_API_KEY,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ channel: data.channel, text: data.text }),
    });

    const json = await res.json();
    if (!res.ok || !json.ok) {
      return { ok: false, error: json.error ?? `HTTP ${res.status}` };
    }
    return { ok: true, ts: json.ts };
  });

8. よくある失敗とリカバリ#

9. セキュリティと運用のチェックリスト#

• 送信先チャネルはホワイトリスト化（任意のチャネルに送れないようにする）
• 本文の長さに上限（z.string().max(2000)）を必ず付ける
• ログイン中ユーザーのみが送信できるよう認証ミドルウェアを噛ませる
• テスト時は #lovable-test など専用チャネルで
• 本番運用前に『誤爆した時のロールバック手順』を1行で決めておく

10. 次の一歩#

Slack通知だけで満足せず、Inngest（リトライ）や Sentry（エラー監視）と組み合わせると、『障害 → 自動リトライ → ダメなら人間に通知』の信頼性高い運用ラインが組めます。Notion / Linear と組み合わせれば『Slackで議論 → タスク化 → ナレッジ化』が一気通貫に。