kintone×MakeでSlack通知を実現するまでの試行の一部始終を紹介

はじめに

業務で活用しているkintoneにおいて、レコードが追加された際にSlackなどのアプリへ自動通知を送る仕組みを構築したいというニーズはよくあります。

kintoneからSlackの通知は、基本的なカスタマイズで対応可能です。
というのも、kintoneの標準機能でアプリの設定からSlackとの連携が可能だからです。

ですが 利用の範囲が限られている ことから、うまく業務にはまらないという話をよく聞きます。

たとえばインシデント対応がすぐに必要な場合、kintoneにレコードが追加された瞬間に通知が届くと非常に便利ですよね。

緊急性の高い対応を即座にチームで共有できるようにすることで 業務のスピードと確実性を向上させたい というのがこの記事の目的です。

この記事では、kintoneのレコード登録をトリガーに、Slackへ通知を送るまでの試行錯誤の一部始終を紹介します。

結論からいうと、2と3のMakeで実現可能でした。

最後までお付き合いいただければと思います！

事前準備

業務利用を前提としているため、無料枠の制限は考慮していません。
以下の準備が整っていれば、すぐに構築に取りかかれます。

項目	内容
kintone	アカウント作成・ログイン、対象アプリの作成、APIトークンの発行
Make（旧Integromat）	アカウント作成・ログイン、Slack・kintoneとの連携設定、シナリオ作成
Slack	アカウント作成・ログイン、通知先チャンネルの準備、Webhook URLの取得（必要に応じて）

1.kintone→PowerAutomate→Slackというシンプルな構成

はじめは、サイボウズ公式の技術記事を参考に、
「kintone → Power Automate → Slack」というシンプルな構成で試してみました。

kintoneでレコードを追加し、それをトリガーにSlackのチャネルに通知、という流れです。

結論から言うと、有償契約をしていれば実現可能です。

公式の記事では「有償プランでなければ実現できない」と明記されていましたが、一応試してみることにしました。

実際に試してみると無料プランでは必要な機能が使えず、通知の自動化はできませんでした。

PowerAutomateでの操作と試行錯誤

PADのフロー作成が完了後、以下の画像のように見た目は問題ないように思われます。

しかし、保存して一覧画面に戻るとしっかりダイヤモンドマークが。。

このダイヤモンドマークがついているコネクタは有償扱いとなります。

主に、HTTPリクエストやデスクトップフローをPowerAutomateで使うには、有償のライセンスが必要ということです。

念のため、kintoneでレコードを追加をテスト。

画像の通り、障害対応管理アプリでレコードを追加し、保存を押すとトリガーが発動するので、PowerAutomateからSlackへ連携される、というのが通常の流れです。

Webhookの設定画面には △ マークがついており、連携ができなかった旨の記載がありました。

Webhookのログにも同様の記載。

案の定、slackでも通知はされておりませんでした。

たしかにPowerAutomateの「Premiumコネクタ」を使えば簡単に連携できます！

ですが有償はちょっと、、とお考えの方のために他の方法を考えました。

そもそも、JavaScriptから直接 通知を送れるのではないか？という発想にたどり着きました。

前置きが長くなりましたがここからは、JavaScriptカスタマイズだけでSlackの通知を目指す方向にシフトします。

2.kintone→Slack（JavaScriptカスタマイズのみ）

kintoneからJavaScriptカスタマイズでSlackに通知する流れは以下の通りです。

1. SlackのIncoming Webhook URLを取得
2. kintoneのアプリにJavaScriptカスタマイズを追加
3. レコード追加時にSlackへ通知

通常のAPIであればこれでいけるはず。

結論、これもアウトです。
簡単にいうと、Slack側がこの対応ではAPIを利用できないからです。
kintone.proxy()を使えばできました。（後日）

順番に解説していきます。

🧩 ステップ詳細

① SlackのIncoming Webhook URLを取得

1. Slackの「App管理」ページへアクセス（https://api.slack.com/apps）
2. 新しいアプリを作成 → 「Incoming Webhooks」を有効化
3. 投稿先チャンネル（例：#kintone）を選択
4. 発行されたWebhook URLをコピー（例：https://hooks.slack.com/services/XXXX/YYYY/ZZZZ）

② kintoneのJavaScriptカスタマイズを追加

kintoneで使用するJavaScriptのファイルを準備します。（例：postToSlack.js）

jS

(() => {
  'use strict';

  // レコード追加成功時にSlack通知
  kintone.events.on('app.record.create.submit.success', function(event) {
    const record = event.record;
    const title = record.タイトル.value;
    const url = location.href;

    const payload = {
      text: `要対応の案件が発生しました。\n障害対応管理アプリをご確認ください。\n*タイトル:* ${title}\n<${url}|詳細を見る>`
    };

    fetch('https://hooks.slack.com/services/XXXX/YYYY/ZZZZ', {
      method: 'POST',
      body: JSON.stringify(payload),
      headers: {
        'Content-Type': 'application/json'
      }
    }).catch(error => {
      console.error('Slack通知エラー:', error);
    });

    return event;
  });
})();

※ https://hooks.slack.com/services/... はSlackで取得したWebhook URLに置き換えてください。

補足

• 通知内容は絵文字、リンク、メンションなど、自由にカスタマイズ可能
• 通知条件を特定のフィールド値がある場合のみなどに絞れる

③ kintoneにJavaScriptを読み込ませる

1. kintoneアプリの「設定」→「JavaScript / CSSでカスタマイズ」
2. 作成した .js ファイルをアップロード
3. アプリを更新して公開

テストの実施

kintoneアプリで新しいレコードを追加し、Slackの #kintone チャンネルに通知が届くか確認しました。

結果、kintoneからの直接通知はできませんでした。

処理が一瞬で完了するので、console.logではエラーとしても吐き出しを確認できません。

debuggerを使い、エラーを確認。

slackのWebhookでブロックされたようです。

ちなみにSlackの画面を見る限り連携自体はできていました。

Slackへの通知がブロックされている原因は、CORS（クロスオリジンリソース共有）エラーです。

❌ 問題の概要

SlackのWebhookに対して fetch() を使って直接リクエストを送ると、ブラウザが「CORS制限」によりリクエストをブロックすることがあります。

Slackの公式ドキュメントには、Incoming WebhookがCORSに対応していないとは書かれていません。

ですが、クライアントサイド（JavaScript）からの直接アクセスが推奨されていないと、セキュリティベストプラクティスとして記載されています。

関連情報（Slack公式）

SlackのIncoming Webhookは、サーバーサイドからのPOSTを前提としています。
クライアントサイド（ブラウザ）から直接 fetch() で呼び出すと、CORS制限によりブロックされることがあります。
Slackはセキュリティの観点から、Webhook URLをクライアントサイドに埋め込むことを推奨していません。

逆にいうと、サーバーサイドからのアクセスが可能です。

SlackのWebhookは、curlやサーバーサイドのコード（Node.js, Pythonなど）からのPOSTには問題なく対応しています。

そのため、kintoneのJavaScriptから直接SlackにPOSTするのはCORSの壁により非推奨なため、中継サーバーやZapierなどのサービスを使うのが現実的な解決策でしょう。

CORSについて詳しく知りたい方はこちらを参照ください。

✅ 解決策（次の方向性）

① 中継サーバーを使う　※別記事で紹介予定

• kintone → 自分のサーバー（Node.jsなど）→ Slack
• 自分のサーバーはCORSを許可しておき、Slackにはサーバー側からPOSTする

② kintone.proxy() を使う。
kintoneから外部連携をする際にはkintone.proxy()を使えばCORSを考慮せずにAPIが使えます。

JS

(() => {
  'use strict';

  const webhookUrl = 'https://hooks.slack.com/services/XXXX/YYYY/ZZZZ';
  const fieldCode = '内容'; // ← 実際のフィールドコードに合わせて変更してください

  kintone.events.on('app.record.create.submit.success', async (event) => {
    const recordId = event.recordId;
    const subdomain = location.hostname;
    const thisUrl = `https://${subdomain}/k/${kintone.app.getId()}/show#record=${recordId}`;

    const payload = {
      text: `障害対応が必要です。\nタイトル：${event.record.タイトル.value}\n内容：${event.record[fieldCode].value}\n${thisUrl}`
    };

    try {
      await kintone.proxy(webhookUrl, 'POST', {}, payload); // ← JSON.stringifyしない！
      console.log('Slack通知成功');
    } catch (error) {
      console.log('Slack通知失敗:', error);
    }

    return event;
  });
})();

kintone.prox()を使う場合のpayloadはJSON形式ではなくJavaScriptオブジェクトです。

fetchでbody: JSON.stringify(payload)としていたので、同じものを使うと通知が受け取れないので注意してください。

③ 外部サービスを使う

• CORS対応済みの中継サービス（Zapier、IFTTT、Makeなど）を使ってSlack通知を送る

以下をもとに考察した結果、おすすめはMake（旧Integromat）だと考えます。

・kintoneとの親和性が高く、Slack通知も簡単に設定可能
・Webhookが無料で使える
・UIが直感的で、条件分岐や複雑な処理も対応可能
・Cybozu開発者コミュニティでも活用事例が豊富

ひとつ難点をあげるのであれば、日本語に対応していない点ですね。

個人的な意見ですが、UIがとてもきれいで見やすいところはポイントが高いです。
たとえ英語だったとしても使いやすい印象を与えてくれました。

kintoneと相性の良いサービス比較

サービス	相性	Slack連携	Webhook	無料枠	事例等
Make（旧Integromat）	◎（専用モジュールあり）	◎	◎（無料で使える）	1000操作/月	QiitaやNoteで多数事例あり。Cybozu開発者ライセンスでも活用例あり
Zapier	○（API連携可能）	◎	△（Webhookは有料）	100タスク/月	一部事例あり。自由度は低め
IFTTT	△（API連携に工夫が必要）	○	△（制限あり）	有	個人用途向け。業務利用には不向き
Power Automate	◎（Microsoft製）	◎	△（Premium）	Microsoft 365連携時のみ	Cybozu公式では特に推奨なし。Premium機能に注意

3.Makeで流れを再構成

JavaScriptカスタマイズで直接連携というのはできませんでしたので、Makeをつかって再挑戦しました。

kintoneからMake経由でSlackに通知する流れは以下の通りです。

1. Makeアカウント作成
2. Webhookモジュール作成（kintoneから呼び出し）
3. Slack通知モジュール設定
4. kintoneのJavaScriptでWebhook URLに fetch() 送信

🧩 ステップ詳細

① Makeアカウント作成

• https://www.make.com にアクセス
• 無料アカウントを作成

② Makeシナリオ（Scenario）作成

1.MakeにLoginしSenarioタブを開き、右上の「Create a new scenario」をクリック

2.最初のモジュールに「Webhook」を選択

3.「Custom Webhook」→「Add」→ 任意の名前を付けて保存

これでWebhookのモジュールが完成です。
保存をするとWebhook URLを発行してくれます。

例：https://hook.integromat.com/xxxxx

4.Slackモジュールを追加
Webhookのとなりにある＋マークを押すことで、新しくモジュールを追加できます。

検索窓から「slack」と入力してSlackを選択してください。

今回は、メッセージをSlackに通知するので「Create a Message」を選択します。

5.モジュールの設定を行っていきます。
Connectionの「Add」を押すと「Connection Type」を入力するように言われます。

今回は「Slack(user)」を選択。
「Connection name」は任意の名前を設定してください。

「Save」を押すとSlackアカウントと連携（OAuth認証）がポップアップで出てきますので、右上の連携するチャネルを選択して「許可する」を押してください。

画像の例では投稿先チャンネル（#kintone）を指定しています。

Slackとの連携が完了すると、IDや名前、などをプルダウンから選択できるようになります。

自分が通知したいチャネルを選択してください。

Textの部分は、通知するメッセージ内容を設定できます。

Webhookから受け取ったデータを使えますので、変数で受け渡しができるようにしておきましょう。

TEXTの入力例

障害が発生しました。
障害対応管理アプリで確認してください。

*タイトル：* {{2.title}}
*内容：* {{2.content}}
*登録日時：* {{2.createdAt}}
*URL：* {{2.url}}

※kintoneのJavaScriptカスタマイズで使用する変数名を入力
※例の"2"はWebhookのモジュールID

右下のSaveを押して初期設定は完了です。

画面左下の「Run once」でテストができます。

問題なければ「Scenarios」からスイッチを切り替えて「ON」にして常時待機状態にできます。

③ kintone側のJavaScriptカスタマイズ

kintoneに設定するWebhook URLをMakeで発行したURLに書き換えます。

URLはMakeでモジュールを保存した段階で発行されています。

書き換えた状態がこちら。

JS

(() => {
  'use strict';

  // レコード保存前にSlack通知を送信
  kintone.events.on('app.record.create.submit.success', async (event) => {
    const record = event.record;

    // 現在時刻を取得（yyyy/mm/dd hh:mm:ss形式）
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    const formattedDateTime = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;

    const title = record.タイトル.value;
    const recordUrl = `${location.origin}/k/guest/6/${kintone.app.getId()}/show#record=${event.recordId}`;
    const content = record.内容.value;

    const payload = {
    title: title,
    createdAt: formattedDateTime,
    url: recordUrl,
    content: content
    };

    try {
      const response = await fetch('https://hook.us2.make.com/XXXXXXXXXXXXXXXXXXXXXXX', {
        method: 'POST',
        body: JSON.stringify(payload),
        headers: {
          'Content-Type': 'application/json'
        }
      });

      if (response.ok) {
        alert(`Slackに通知が送られました。: ${response.status}`);
        return event; // 保存を続行
      } else {
        alert(`Slackへの通知が失敗／保存を再度実行してください。: ${response.status}`);
        return false; // 保存を中止
      }
    } catch (error) {
      alert(`Slack通知エラー: ${error}`);
      return false; // 保存を中止
    }
  });
})();

先ほどと3点ほど変更してあります。

• WebhookのURLをMakeで発行されたものに入れ替え
• 時間の設定を追加（日時分秒まで表記）
• 非同期処理の追加／処理完了のアラート

非同期処理にし忘れてしまい、通知が正確に送れない場合がありました。

API通信が完了する前にレコード追加の処理が完了してしまい、Make側にデータが送られないという状態です。

非同期処理がよくわからないという方はこちらの記事を参考にしてください。

テスト実施

JavaScriptカスタマイズをした障害対応管理アプリで、新しいレコードを追加します。

画像のようにアラートが出たので、通知が送られた。
つまり、Make側にデータが送信され、MakeからSlackへ連携されたということです。

Makeでも実行記録を確認できます。

Slackも見てみましょう。

ちゃんと通知が届いていますね。

これでkintoneのレコード追加によりMake経由でSlack通知が届くことを確認できました。

💡補足

Makeでは、Slack通知の内容を柔軟に整形できます（絵文字、リンク、メンションなど）
条件分岐やフィルターを追加して、特定のレコードだけ通知することも可能です

まとめ

業務で使うkintoneにおいて、レコード追加をトリガーにSlackへ即時通知を送る仕組みを構築したいというニーズに対し、標準機能では対応範囲が限られているため、より柔軟な方法を模索しました。

試行錯誤の流れ

1. Power Automateを使った方法

• 構成：kintone → Power Automate → Slack
• 結果：無料プランではPremiumコネクタが使えず通知不可
• 有償契約が必要で、業務要件に合わず断念

1. JavaScriptカスタマイズによる直接通知

• SlackのIncoming Webhookを使って、kintoneのJavaScriptから直接POST
• 結果：CORS制限によりSlack側でブロックされ通知失敗
• クライアントサイドからのWebhook利用は非推奨

1. Make（旧Integromat）を使った構成

• 構成：kintone → Make（Webhook）→ Slack
• JavaScriptからMakeのWebhookにPOST → MakeからSlackへ通知
• 非同期処理を導入することで通知の安定性が向上
• UIが直感的で使いやすくSlack連携も柔軟に設定可能

成果と考察

• Makeを使うことでkintoneのレコード追加をトリガーにSlack通知を安定して実現
• 通知内容のカスタマイズや条件分岐も可能で業務に最適化しやすい
• 非同期処理を忘れると通知が失敗するため注意が必要
• 標準機能では物足りない場合は外部サービスやカスタマイズで補完するのが有効

補足

• MakeではSlack通知の内容を柔軟に整形可能（絵文字、リンク、メンションなど）
• 条件分岐やフィルターを追加して、特定のレコードだけ通知することも可能

さいごに

試行錯誤の末Makeを使うことで目的を達成できました。
知らないまま進めていくと落とし穴がいくつかあり、特に非同期処理をしないと高い頻度で通知が失敗するという致命的な問題も。
RPAでインシデント対応する場合、通知が届かないと業務に支障をきたすため、確実な通知の仕組みを構築することが重要です。

基本機能では業務に合わない人は、カスタマイズして自分の業務に合うようにアプリを改造していきましょう！

参考になったらぜひいいねを押していただけると励みになります！