はじめに

こんにちは。ラクスル Advent Calendar 2025 22 日目を担当する、Corporate Technology IT Service チーム / Helpdesk チームの内山です。

社内では AI の活用が広がり、業務整理や壁打ちとして AI が自然に使われるようになってきました。
ラクスルで導入している n8n も AI と統合しやすい一方で、AI を使わないシンプルな業務改善にも適しており、今回紹介する仕組みはそのよい例だと考えています。
この記事では、会議室のトラブル報告フローを n8n で実装した例を紹介します。

なぜ作ったのか

会議室では日々さまざまな小さなトラブルが発生しますが、報告導線には課題がありました。

「ついで報告」で記録が残らない
DM や雑談チャンネルに届き、情報が散在する
一部の人だけが報告する構造になりがち
社内のチケットシステムは心理的ハードルが高い

会議中のトラブルは進行が止まるため影響が大きく、だれでも迷わず報告できる導線が必要でした。

設計方針

QR コードが自然で早い導線

読み取った瞬間に必要な情報を渡せるため、迷わず報告可能

ログイン不要・スマホで完結

PC を開く必要がなく、その場で短時間で入力可能

会議室数が多いため選択させない

会議室を選択する方式は手間やミスが発生しやすいため、QR に部屋情報を埋め込んで自動判別

全体フロー

従業員が各会議室に設置した QR コードを読み取る
n8n がスマホ向けフォームを返す
従業員が送信フォームを入力し送信を行う
n8n は入力情報を Slack に通知し、従業員に完了画面を返す

実際の n8n のノード

こちらが実際の n8n のノードです。非常にシンプルだと思います。上のノードが全体フローの「1-2 」、下のノードが「3-4」になります。

各フローの詳細

1. QR コードに会議室情報を含める

QR に直接会議室名を含めることで、利用者が選択する必要をなくしています。

https://example.com/webhook/report?room=A&token=rksl_xxx_123

2. n8n がスマホ向けフォームを返す

Webhook（GET）で受け取った後、Code のノードでフォーム HTML を返します。

※サンプルコード

const token = $json.query.token;
if (token !== 'YOUR_SECRET_TOKEN') {
    return [{
        headers: { "Content-Type": "text/plain" },
        body: "Unauthorized"
    }];
}

const room = $json.query.room || 'UNKNOWN';

const escapeHtml = (s) =>
    String(s).replace(/[&<>"']/g, (c) =>
        ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c])
    );

const html = `
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <style>
        body {
            font-family: system-ui, sans-serif;
            padding: 24px;
            background: #f5f7fa;
        }
        .card {
            background: #fff;
            padding: 28px;
            border-radius: 14px;
            max-width: 440px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="card">
        <h2>会議室トラブル報告</h2>
        <div>会議室：${escapeHtml(room)}</div>

        <form action="https://example.com/webhook/room-trouble" method="POST">
            <input type="hidden" name="room" value="${escapeHtml(room)}" />
            <input type="hidden" name="token" value="${escapeHtml(token)}" />

            <input type="text" name="name" required />
            <select name="trouble" required>
                <option value="">選択してください</option>
                <option>モニターが映らない</option>
                <option>音が出ない</option>
                <option>Web会議に接続できない</option>
                <option>その他</option>
            </select>

            <textarea name="detail"></textarea>
            <button type="submit">送信</button>
        </form>
    </div>
</body>
</html>
`;

return [{ html }];

実際の画面

3. 従業員が送信フォームを入力し送信を行う

従業員は、上記の送信フォームに情報を入力し、送信を行います。

4. n8n は入力情報を Slack に通知し、授業員に完了画面を返す

利用者がフォーム画面の送信ボタンを押すとWebhook（POST） Node で受け取り、受け取ったテキストを整形し Slack Webhook に送信します。
形式は単純で、本文をそのまま Slack に渡すだけです。合わせて利用者には送信内容を整形したものを完了画面として返します。

実際の画面

セキュリティ面の工夫

token の照合

Webhook で受け取ったパラメーターのうち QR の URL に含めたトークンと一致しているかを確認します。

const token = $json.query.token;
if (token !== 'YOUR_SECRET_TOKEN') {
    return [{
        headers: { "Content-Type": "text/plain" },
        body: "Unauthorized"
    }];
}

Wehhook URL が漏洩しても不正投稿を防ぐために設定しています。