Zoom Webhookをいつでもテスト！Glitch x Node.jsで爆速デプロイ

# 【Glitch終了→Fly.io移行ガイド】（2025/05/26追記）

本記事のサンプルは[Fly.io](https://fly.io/)で**ほぼそのまま動きます！**
Express＋ws（WebSocket）構成OK。しかも無料枠あり✨

## 🏃‍♂️ 最短Fly.io移行手順

1. [Fly.io公式](https://fly.io/)でアカウント作成（GitHubアカウントOR Googleアカウント）
2. `brew install flyctl` or `curl -L https://fly.io/install.sh | sh`
3. コードフォルダで`flyctl launch`（CLI上で質問に答えるだけ）
4. 必要なら`.env`や`flyctl secrets set`で環境変数
5. `flyctl deploy`
6. `https://<アプリ名>.fly.dev/` で公開＆WebhookもOK

**Express＋WebSocket＋publicディレクトリ対応なので、Glitchで動いていたアプリを“ほぼ無修正”でお引越しできます！**

わからない点はコメントで質問ください🙌

# 🧁 はじめに

ZoomなどのWebhook通知の内容を確認したいとき、開発者ならローカルサーバを立てたり、ngrokでトンネリングしたりできますが、ノンエンジニアやSales Engineerの方でももっと簡単に使える仕組みが欲しい…！

![head.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/6f2254af-9a11-4591-81ec-defd17695305.png)

そんな声に応えるべく、今回は Glitch を使って数分でWebhookビューアを立ち上げられる方法をご紹介します（画像はイメージです）✨

# 🚀 Glitch ってなに？

[Glitch](https://glitch.com/) は、Node.jsベースのアプリをブラウザだけで作成・ホスト・公開できる無料サービスです。
GitHubなしでも使え、Remix機能で誰でも簡単に自分専用アプリをコピーして使えるのが大きな特徴です！

- 🌐 ブラウザだけで完結
　インストール不要で、どこでもすぐに開発・動作確認が可能です。
- ⚡ Remix機能で一瞬コピー
　テンプレートから「Remix」ボタンを押すだけで、自分専用のアプリが作れます。
- 🔐 環境変数もGUIで設定OK
　.envタブからSecret Tokenなどを安全に設定できます。
- 🌈 URLが固定でWebhookに最適
　プロジェクト名が変わらなければエンドポイントはずっと同じです。
- 🆓 無料プランでも十分使える
　アクセスがないとスリープはしますが、PoCやWebhook確認にはぴったり！

# 🌐 完成イメージ
- 固定URLでWebhookを受信
- WebSocket経由でフロントに表示
- Zoom Webhookのsummary_completedなどを即座に確認可能

![Screenshot 2025-05-02 at 10.38.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/25b79443-af90-4d9b-8ba6-5a79a59ad5fa.png)
実際の動作イメージ（Zoomから通知が飛んでくると画面がリアルタイムに反応）

# 準備手順（3〜5分）
## 1. テンプレートをRemix！
👇 以下のリンクからテンプレートを開いて「Remix」ボタンをクリックするだけで自分専用環境ができます。

https://glitch.com/edit/#!/saber-sore-wood

::: note warn
必ず `Remix` して使ってね！
以下で設定する環境変数を直接入力しちゃうと公開されちゃうかも...。
:::

## 2. Webhook Only Appの作成
ここではWebhook Only Appを使っていますが、これ以外にGeneral AppタイプやServer-to-Server OAuth Appタイプも選択可能です。いずれもWebhookを設定することができるので確認してみてください。

1. Zoom Marketplaceで新規アプリ → [Webhook Only App] を選択
2. "Feature" タブで受け取りたいイベントを追加
（例：`scheduler.scheduled_event_created` や`meeting.summary_completed`、 `phone.recording_completed`などなど）
3. "Event Notification Endpoint URL" に以下のようなGlitchのプロジェクトURLを設定
👉 `http://{remix後のプロジェクト名}.glitch.me` + `/webhook` を設定
（例： `https://green-michael-wood.glitch.me/webhook` ）
4. "Secret Token" をコピー（あとで署名検証に使います）
5. アプリをActivate（有効化）


## 3. 環境変数（.env）を設定
左上の「🔧 Tools → .env」から以下のように環境変数を設定します。
![Screenshot 2025-05-02 at 10.47.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/b0c49a86-758b-4791-ae6f-9489d611d2f2.png)

これを選択して、2でコピーしたSecret Tokenを貼り付けます。

![Screenshot 2025-05-02 at 10.48.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/1aa7ff8b-bbc5-4e44-9a41-f9502f53cd6d.png)

ここまでくると、自動的にビルドが更新されて動き出すはず！画面下の 📝 LOGS 部分をクリックすると、動き出した様子が見れます！

# ✅ 動作確認方法
ZoomのWebhookイベントが発火すると、画面上に内容がリアルタイム表示されます。
動作確認用に、以下のようなcurlコマンドで手動テストも可能：

```bash
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 から、
 
 ![Screenshot 2025-05-02 at 11.06.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/dd7c4b7e-1b07-4f8b-a13e-8c40cbfcc4c6.png)

👯‍♀️ Preview in a new window をクリックすると、別ウィンドウで画面が立ち上がると思います。画面に `✅ WebSocket Connected` が表示されていればOK。ここに表示されているURLは固定なので、これから先 Webhook の受信を確かめたいときは、受け取りたい Webhook イベントを Marketplace の設定から追加して、この URL にアクセスすればいつでもチェックできるはず。

![Screenshot 2025-05-02 at 11.09.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/c98796f3-2167-4114-ac85-18d3c343d024.png)

# ✨ このテンプレの特徴
| 特徴 | 内容 |
|------|------|
| ✅ 無料・インストール不要 | ブラウザだけで完結（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"` が入ってるかチェック！ |

:::note warn
この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へのバイパスやスプシへの転記なども簡単にできるようになるので、日々の業務通知をちょっとだけ「楽しく」するのにもピッタリです💖