学生インターンシップです！ スパイラル株式会社の学生インターンとして、SPIRALを学習しながらユーザー目線で質問に答える活動をしています。 補足情報や調査結果の提供を行い、皆様のお役立てができればと思っています！
※学生が学びの一環として調査・まとめた内容です。
　正確な仕様や最新情報は、公式リファレンスをご確認ください。

はじめに

日々の教務の中で、たった数行の確認と返信だけの申請に対してわざわざメールを開いて返信するのが面倒だと思ったことはありませんか？
そこで今回はこれらの課題を解決すべく、SPIRALver.2×n8nを連携した「Slackによる即時申請承認システム」を作成します。
Slackに送信された申請内容に対し、ボタン一つで承認からメール通知までを完結させることで、申請関連業務の効率化とスピードアップを目指します！
所要時間は60分ほどで作成できるので、ぜひお試しください！

事前準備

連携を始める前に、以下のアカウントとサービスを用意しておく必要があります。

・n8nアカウント(リンクで14日間無料トライアル可能(2026年2月10日現在))

登録はこちらから

SPIRALの設定

フォーム作成の設定

今回はSPIRALver.2を使用して、申請内容を収集する申請フォームを作成します。

これでアプリ作成からフォーム作成まで完成しました。

トリガ設定

次にフォームからDBに登録された情報をn8nに渡すためのトリガ設定を行います。

// 予約データの取得（$SPIRALから必要な情報を取得）
$record = $SPIRAL->getRecord();

$reservationData = array(
    'form_id' => $record["item"]["_id"],
    'form_name' => $record["item"]["f_name"],
    'form_mail' => $record["item"]["f_mail"],
    'form_content' => $record["item"]["f_content"],
    
);

// n8nに送信するためのWebhook URL
$n8n_webhook_url = '　n8nで取得したURLを張り付けてください　';


// cURLを使用してn8nにデータを送信
$ch = curl_init($n8n_webhook_url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($reservationData));
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// 送信実行
$response = curl_exec($ch);
curl_close($ch);
?>

Slackの設定

Slack API公式サイトにアクセスし、申請内容を送信するチャットの作成とn8nとSlackを連携します。

最後にSlack内に設置するボタン設定を行います

n8nの設定

n8nにログインし、SPIRALまたはSlackと連携設定を行います。
始めにn8nを用いて、SPIRALから必要な情報を取得します。

HTTP Method : POST
Path : spiral-webhook
Authentication : none
Respond：Immediately

Credential to connect with : 作成したスプレッドシートのアカウントを接続
Resource : Sheet Within Document
Operation : Append Row
Document : 作成したスプレッドシート名
Sheet : 作成したスプレッドシート内のページ名
Mapping Column Mode : Map Each Column Manually

Credential to connect with : 送信先のSlackアカウント
Resource: Message
Operation : Send
Send Message To : Channel
Channel: Slack取得できる送信先チャンネルのIDを入力
Message Type : Blocks
Blocks : 下記コード参照

{
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "📢 *【承認依頼】*\n申請内容を確認し、以下のボタンから回答してください。\n申請者：{{ $json['申請者名'] }}\n申請内容：{{ $json['ステータス'] }}"
      }
    },
    {
      "type": "divider"
    },
    {
      "type": "actions",
      "elements": [
        {
          "type": "button",
          "text": {
            "type": "plain_text",
            "text": "承認する ✅",
            "emoji": true
          },
          "style": "primary",
          "value": "{{ $json.ID }}:approve",
          "action_id": "approve_button"
        },
        {
          "type": "button",
          "text": {
            "type": "plain_text",
            "text": "承認しない ❌",
            "emoji": true
          },
          "style": "danger",
          "value": "{{ $json.ID }}:reject",
          "action_id": "reject_button"
        }
      ]
    }
  ]
}

ここまでで、SPIRALで取得した情報をスプレッドシートに記録し、Slackに送信する設定が完了しました
次に、Slackからクリックされたボタンを読み取り、申請結果をメールで送信する設定を行います。

HTTP Method : POST
Path : slack-interaction
Authentication : none
Respond： When Last Node Finishes
Response Date : First Entry JSON

Credential to connect with : Google Sheets account
Resource: Sheet Within Document
Operation : Get Row(s)
Document : 作成したスプレッドシート名
Sheet : 作成したスプレッドシート内のページ名
Mapping Column Mode : Map Each Column Manually

Conditions
(fx) : {{ $('Webhook').item.json.boby.payload ? JSON.parse($('Webhook').item.json.boby.payload).actions[0].value.split(':')[1] : ""}}
T : is equal to
(fx) : approve

Credential to connect with :　送信するメールアカウント
Resource: Message 
Operation : Send
To : {{ $('Get rows(s) in sheat1').item.json.Email}}
Subject : ご申請いただいた件について
Email Type : Text
Message : ご提出いただいた以下の申請につきまして、内容を確認し承認しました。
　　　　　申請内容 ： {{ $('Get row(s) in sheet1').item.json["ステータス"] }}
　　　　　本件については、このまま進めていただいて問題ございません。
　　　　　引き続き、よろしくお願いいたします。

Credential to connect with :　送信先のSlackアカウント
Resource: Message 
Operation : Send
Send Message To : 送信先のSlackチャンネル
Channel :  送信先のSlackチャンネルID
Message Type : Simple Text Message
Message Text : 承認を受け付けました

Conditions
(fx) : {{ $('Webhook').item.json.boby.payload ? JSON.parse($('Webhook').item.json.boby.payload).actions[0].value.split(':')[1] : ""}}
T : is equal to
(fx) : reject

Credential to connect with :　送信するメールアカウント
Resource: Message 
Operation : Send
To : {{ $('Get rows(s) in sheat1').item.json.Email}}
Subject : ご申請いただいた件について
Email Type : Text
Message : ご提出いただいた以下の申請につきまして、内容を確認いたしましたが、
　　　　　いったん差し戻しと指していただきます。
　　　　　申請内容 ： {{ $('Get row(s) in sheet1').item.json["ステータス"] }}
　　　　　詳細については担当者までご確認の上、お手数ですが再度申請をお願いいたします。

Credential to connect with :　送信先のSlackアカウント
Resource: Message 
Operation : Send
Send Message To : 送信先のSlackチャンネル
Channel :  送信先のSlackチャンネルID
Message Type : Simple Text Message
Message Text : 却下しました。

これで、n8nの設定が完了しました。

動作確認

申請者：テスト花子
申請内容：業務用マウスの購入

また、フォーム送信者のメールアドレスにも次のようなメールが届きました。

まとめ