> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Slack 連携

> Base44 アプリを Slack に接続して、新しいタスクの作成やステータス変更など、重要なイベントが発生したときにリアルタイムメッセージを送信できるようにします。ツールを切り替えることなく、Slack 内で直接チームに最新情報を共有するのに最適な方法です。

<Info>
  <u>注意</u>: Slack 連携は Builder ティア以上で利用できます。
</Info>

# ステップごとのセットアップ:

## パート 1: Slack 側

すでに Slack の Webhook をお持ちの場合は、[パート 2 - Base44 側](https://docs.base44.com/Integrations/Slack-integration#part-2%3A-the-base44-side) に進んでください。

<Steps>
  <Step title="Slack API Apps へ移動">
    <img src="https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/SlackCreateApp.png?fit=max&auto=format&n=x7uieDiv9xNLARBF&q=85&s=665ce65dff5bb32ded5bd5455d46b334" alt="Slack Create App Pn" width="1582" height="812" data-path="images/SlackCreateApp.png" />

    * [https://api.slack.com/apps](https://api.slack.com/apps) にアクセスします
    * **Create an App** をクリックします
    * **From Scratch** をクリックします

          <img src="https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/SlackFromScratch.png?fit=max&auto=format&n=x7uieDiv9xNLARBF&q=85&s=c4ca31f4e81b72b99d87851699e5d155" alt="Slack From Scratch Pn" width="1590" height="789" data-path="images/SlackFromScratch.png" />
  </Step>

  <Step title="名前を付ける">
    <img src="https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/Slack-nameWorkspace.png?fit=max&auto=format&n=x7uieDiv9xNLARBF&q=85&s=8f770788c510c5db160b8e27cd3b737d" alt="Slack Name Workspace Pn" width="1999" height="1003" data-path="images/Slack-nameWorkspace.png" />

    * 例: `Base44 Notifications`
    * ワークスペースを選択します
  </Step>

  <Step title="Incoming Webhooks をセットアップ">
    <img src="https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/Screenshot2025-08-23at1.39.17PM.png?fit=max&auto=format&n=x7uieDiv9xNLARBF&q=85&s=f692e79c91c3f120b208fcf1da1956af" alt="Screenshot2025 08 23at1 39 17PM Pn" width="1581" height="705" data-path="images/Screenshot2025-08-23at1.39.17PM.png" />

    * サイドバーで **Incoming Webhooks** を開きます
    * **Activate Incoming Webhooks** をオンに切り替えます
  </Step>

  <Step title="Webhook をワークスペースに接続">
    <img src="https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/Screenshot2025-08-23at1.41.31PM.png?fit=max&auto=format&n=x7uieDiv9xNLARBF&q=85&s=f704aa5753256f5abe3ae417aa1771ec" alt="Screenshot2025 08 23at1 41 31PM Pn" width="1579" height="704" data-path="images/Screenshot2025-08-23at1.41.31PM.png" />

    * 同じページを下にスクロールします
    * **Add New Webhook to Workspace** をクリックします
    * メッセージを表示するチャネルを選択します
    * **Allow** をクリックします
  </Step>

  <Step title="Webhook URL をコピー">
    * Webhook URL は次のような形式になります:

      `https://hooks.slack.com/services/T000/B000/XXXXXXXX`
    * Base44 が **secret** を要求したときに使用するので、すぐ取り出せるようにしておきます。
  </Step>
</Steps>

***

## パート 2: Base44 側

Slack Webhook URL を取得したら、2 つの方法で Base44 に接続できます:

<CardGroup cols={2}>
  <Card icon="sparkle" href="https://docs.base44.com/Integrations/Slack-integration#option-a%3A-ready-made-integration-for-new-apps" title="オプション A: Ready-made 連携 (推奨)">
    * ゼロから新しいアプリを始める場合は、こちらの方法を選択してください。
  </Card>

  <Card icon="bolt" href="https://docs.base44.com/Integrations/Slack-integration#option-b%3A-instant-integration-connecting-slack-to-an-existing-app" title="オプション B: Instant 連携">
    * すでにアプリを構築中で、既存のアプリに Slack を統合したい場合は、こちらの方法を選択してください。
  </Card>
</CardGroup>

***

### オプション A: Ready-made 連携 (新しいアプリ向け)

<Steps>
  <Step title="Integrations カタログを開く">
    * Base44 で Integrations をクリックします

          <img src="https://mintcdn.com/base44/oUaRpzSyJvMVshj9/images/Integrations.png?fit=max&auto=format&n=oUaRpzSyJvMVshj9&q=85&s=16ac71b185167177ef260be7c92b0339" alt="Integrations Pn" width="1570" height="652" data-path="images/Integrations.png" />
    * **Slack** を選択します
    * **Use this Integration** を選択します

          <img src="https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/SlackCatalog.png?fit=max&auto=format&n=x7uieDiv9xNLARBF&q=85&s=b1ba898486c17d838ebdcb378e2b0727" alt="Slack Catalog Pn" width="1869" height="860" data-path="images/SlackCatalog.png" />
  </Step>

  <Step title="シークレットを貼り付け">
    <img src="https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/SlackWebhookIntegration.png?fit=max&auto=format&n=x7uieDiv9xNLARBF&q=85&s=7bdea82b9adb64802cd47999228a53e3" alt="Slack Webhook Integration Pn" width="1878" height="861" data-path="images/SlackWebhookIntegration.png" />

    * プロンプトが表示されたら、`SLACK_WEBHOOK_URL` を貼り付けます
  </Step>

  <Step title="アプリを作成">
    * アプリをスキャフォールドするための最初のプロンプトを入力します
    * サンプルプロンプト:

      `Build me a to-do list app "Todo" that will send a message to my Slack channel every time a task is created or the status changes to Done, In Progress, or Deleted.`
  </Step>

  <Step title="アプリをテスト">
    <img src="https://mintcdn.com/base44/UsrMcs9B3MEl2R91/images/Base44SlackTest.png?fit=max&auto=format&n=UsrMcs9B3MEl2R91&q=85&s=747a305a3a27c40b96f24a70ec7ecf29" alt="Base44slack Test Pn" width="1999" height="1609" data-path="images/Base44SlackTest.png" />

    * タスクを作成または更新すると、Slack チャネルにメッセージが投稿されるはずです
    * 何も表示されない場合は、以下を再確認してください:
      * Webhook が正しいチャネルに属していること
      * シークレットが正しく保存されていること
      * 投稿がブラウザではなくバックエンドのみから行われていること
  </Step>
</Steps>

***

### オプション B: Instant 連携 (既存のアプリに Slack を接続)

<Steps>
  <Step title="既存のアプリを開く">
    <img src="https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/ToDoListApp.png?fit=max&auto=format&n=x7uieDiv9xNLARBF&q=85&s=22e08d98bb0dedcf86dbc22495e54383" alt="To Do List App Pn" width="1853" height="860" data-path="images/ToDoListApp.png" />

    * サンプルアプリを構築するために AI チャットに入力したプロンプト:\
      `Build me a to-do list app called Todo`
  </Step>

  <Step stepNumber={2} title="AI チャットでアプリを Slack に接続するよう依頼">
    <img src="https://mintcdn.com/base44/UsrMcs9B3MEl2R91/images/Base44UpdateSlacksecret.png?fit=max&auto=format&n=UsrMcs9B3MEl2R91&q=85&s=e1c3c0f0801662cf38c7b351d3e5d80e" alt="Base44update Slacksecret Pn" width="1885" height="860" data-path="images/Base44UpdateSlacksecret.png" />

    * AI チャット用のサンプルプロンプト:

      `Connect this app to Slack using an Incoming Webhook. Ask me for SLACK_WEBHOOK_URL and save it as a Secret. Post to Slack from the backend only.`
  </Step>

  <Step stepNumber={3} title="Webhook URL を貼り付け">
    <img src="https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/SlackWebhookPopup.png?fit=max&auto=format&n=x7uieDiv9xNLARBF&q=85&s=35850648cc954557e140745ab7517e0d" alt="Slack Webhook Popup Pn" width="1866" height="843" data-path="images/SlackWebhookPopup.png" />

    * AI チャットでプロンプトが表示されたら、`Update SLACK_WEBHOOK_URL secret` をクリックします
    * 続いて Webhook URL をポップアップウィンドウに貼り付けます
  </Step>

  <Step title="イベントを配線">
    * アプリが Slack をどのように使用するかを AI チャットに伝えます
    * サンプルプロンプト:

    `Hook the backend Slack post into the todo lifecycle:`

    `- On create: post "New task: {title}"`

    `- On status change: post "Task status updated: {title} -> {status}"`

    `- On delete: post "Task deleted: {title}"`

    `Use the channel from SLACK_WEBHOOK_URL. If a call fails, show a small toast and continue.`
  </Step>

  <Step title="アプリをテスト">
    <img src="https://mintcdn.com/base44/UsrMcs9B3MEl2R91/images/Base44SlackTest.png?fit=max&auto=format&n=UsrMcs9B3MEl2R91&q=85&s=747a305a3a27c40b96f24a70ec7ecf29" alt="Base44slack Test Pn" width="1999" height="1609" data-path="images/Base44SlackTest.png" />

    * タスクを作成します。
    * ステータスを *In Progress*、続いて *Done* に変更します。
    * 対応するメッセージが Slack チャネルに届くはずです。
  </Step>
</Steps>

***

## トラブルシューティング

* **Slack にメッセージが届かない** → Webhook が別のチャネルを指している可能性があります。正しいチャネル用に新しいものを作成してください。
* **フロントエンドエラー (401 / CORS)** → ブラウザから Slack を直接呼び出さないでください。常にバックエンドから投稿してください。
* **Webhook がローテーションまたは取り消された** → 新しい Webhook を Base44 Secrets に貼り付けてください。
* **ワークスペースがカスタムアプリをブロック** → ワークスペース管理者に Slack アプリの承認を依頼してください。

***

## **Base44 × Slack 連携のよくあるユースケース**

この連携は、Slack を離れずにチームの情報を共有するのに最適です。よくあるパターンには以下があります:

* **タスクトラッキング:** アプリで新しいタスクが作成、更新、完了するたびにメッセージを投稿。
* **チーム通知:** ステータスが *Done*、*In Progress*、*Blocked* に変わるなどの重要なイベントが発生したときに、共有チャネルにアラートを送信。
* **エラー報告:** 何かが失敗 (たとえば支払いやデータ同期) したときにバックエンドが Slack メッセージを送るようにし、すばやく対応できるようにする。
* **デイリーサマリー:** Zapier や他の連携と組み合わせて、昨日作成・完了した todo を朝のダイジェストとして Slack に配信。

<Note>このページは AI を使用して翻訳されました。最も正確で最新の情報については、[英語版](/) を参照してください。 </Note>
