🧁 はじめに
ZoomなどのWebhook通知の内容を確認したいとき、開発者ならローカルサーバを立てたり、ngrokでトンネリングしたりできますが、ノンエンジニアやSales Engineerの方でももっと簡単に使える仕組みが欲しい…！
そんな声に応えるべく、今回は Glitch を使って数分でWebhookビューアを立ち上げられる方法をご紹介します（画像はイメージです）✨
🚀 Glitch ってなに？
Glitch は、Node.jsベースのアプリをブラウザだけで作成・ホスト・公開できる無料サービスです。
GitHubなしでも使え、Remix機能で誰でも簡単に自分専用アプリをコピーして使えるのが大きな特徴です！
- 🌐 ブラウザだけで完結
インストール不要で、どこでもすぐに開発・動作確認が可能です。 - ⚡ Remix機能で一瞬コピー
テンプレートから「Remix」ボタンを押すだけで、自分専用のアプリが作れます。 - 🔐 環境変数もGUIで設定OK
.envタブからSecret Tokenなどを安全に設定できます。 - 🌈 URLが固定でWebhookに最適
プロジェクト名が変わらなければエンドポイントはずっと同じです。 - 🆓 無料プランでも十分使える
アクセスがないとスリープはしますが、PoCやWebhook確認にはぴったり！
🌐 完成イメージ
- 固定URLでWebhookを受信
- WebSocket経由でフロントに表示
- Zoom Webhookのsummary_completedなどを即座に確認可能
実際の動作イメージ（Zoomから通知が飛んでくると画面がリアルタイムに反応）
準備手順（3〜5分）
1. テンプレートをRemix！
👇 以下のリンクからテンプレートを開いて「Remix」ボタンをクリックするだけで自分専用環境ができます。
必ず Remix して使ってね！
以下で設定する環境変数を直接入力しちゃうと公開されちゃうかも...。
2. Webhook Only Appの作成
ここではWebhook Only Appを使っていますが、これ以外にGeneral AppタイプやServer-to-Server OAuth Appタイプも選択可能です。いずれもWebhookを設定することができるので確認してみてください。
- Zoom Marketplaceで新規アプリ → [Webhook Only App] を選択
- "Feature" タブで受け取りたいイベントを追加
（例：scheduler.scheduled_event_createdやmeeting.summary_completed、phone.recording_completedなどなど） - "Event Notification Endpoint URL" に以下のようなGlitchのプロジェクトURLを設定
👉http://{remix後のプロジェクト名}.glitch.me+/webhookを設定
（例：https://green-michael-wood.glitch.me/webhook） - "Secret Token" をコピー（あとで署名検証に使います）
- アプリをActivate（有効化）
3. 環境変数（.env）を設定
左上の「🔧 Tools → .env」から以下のように環境変数を設定します。
これを選択して、2でコピーしたSecret Tokenを貼り付けます。
ここまでくると、自動的にビルドが更新されて動き出すはず！画面下の 📝 LOGS 部分をクリックすると、動き出した様子が見れます！
✅ 動作確認方法
ZoomのWebhookイベントが発火すると、画面上に内容がリアルタイム表示されます。
動作確認用に、以下のようなcurlコマンドで手動テストも可能：
curl -X POST https://your-project-name.glitch.me/webhook \
-H "Content-Type: application/json" \
-d '{"event":"test.webhook","payload":{"message":"hello"}}'
📝 LOGS を見ると送信した内容が表示され、その下に 🙅♂️ Signature invalid. というエラーが表示されていればOKです！
🎁 Webページを確認
ここまでうまくいっているようであれば、画面下の 🔎 PREVIEW から、
👯♀️ Preview in a new window をクリックすると、別ウィンドウで画面が立ち上がると思います。画面に ✅ WebSocket Connected が表示されていればOK。ここに表示されているURLは固定なので、これから先 Webhook の受信を確かめたいときは、受け取りたい Webhook イベントを Marketplace の設定から追加して、この URL にアクセスすればいつでもチェックできるはず。
✨ このテンプレの特徴
| 特徴 | 内容 |
|---|---|
| ✅ 無料・インストール不要 | ブラウザだけで完結（Glitch無料枠） |
| ✅ No GitHub | Git連携不要！誰でもRemixして自分専用にできる |
| ✅ 永続URL | 固定のWebhook受信エンドポイントを提供 |
| ✅ 即時UI反映 | WebSocket連携で通知を即画面表示 |
| ✅ Noコーディング | 非エンジニアでもWebhook動作確認が容易に |
🙋♂️ よくあるトラブルと対処
| 症状 | 原因・対策 |
|---|---|
| Webhook通知が届かない |
.envの SECRET_TOKEN が空かも。再確認！ |
| WebSocketで画面が更新されない |
index.html 側のJSにエラーがあるかも。開発者ツールでログ確認！ |
| Nodeバージョンエラー |
package.json に "node": "16.x" が入ってるかチェック！ |
このRemixで作成したWebアプリは、あくまでWebhook受信のテスト用です。このままサービスに流用しないでください。またクレデンシャル（Webhook Subscription IDなど）は安全な場所に保持しサービス運用できるよう、ご留意ください。
🎁 応用編
- 受信データをJSON形式でログ保存する
- Slack通知と連携して社内チャンネルに流す
- Webhookの履歴をFirestoreやSheetsに蓄積
など、簡易PoCから本格運用まで応用可能です！
🙌 おわりに
Zoom Webhookなどの「通知がどんな形式で届くか確認したい」というニーズに対して、Glitchを使えば誰でも1人1サーバ構成でPoCが可能です。
チーム内で簡易受信確認ツールを探している方に、ぜひこのテンプレートをご活用ください！
📎 おまけ：プロジェクト構成（抜粋）
📦/
├── public/index.html ← 表示UI
├── index.js ← Express + WebSocket + Webhook受信
├── .env ← Secret Token設定
└── package.json ← Node.js構成 & エンジン指定
💬 最後に
Zoom Webhookの仕組みを使えば、手軽に通知Botが作れます。例えばSlackへのバイパスやスプシへの転記なども簡単にできるようになるので、日々の業務通知をちょっとだけ「楽しく」するのにもピッタリです💖