はじめてのフック箱

Webhook（ウェブフック）という言葉を初めて聞いた人でも、このページを読めばフック箱で何ができて、どう使えばいいかが分かります。登録なし・無料で、3分ほどで試せます。

フック箱ってなに？

まず「Webhook」とは

いろいろなサービスには、「何かが起きたら、あなたのサーバーに知らせる」機能があります。これが Webhook です。

LINE の公式アカウントに誰かがメッセージを送ったら、あなたのプログラムに知らせる
ネットショップで商品が売れたら、在庫を管理するシステムに知らせる
GitHub で誰かがプルリクエストを出したら、チャットに知らせる

知らせる方法は、あらかじめ登録しておいた URL へ、サービス側からデータを送りつける（HTTP のリクエストを送る）というものです。たとえるなら、サービスから届く手紙で、あなたは「この住所に送ってください」と宛先の URL を渡しておく、という関係です。

困るのは「何が届いたのか見えない」こと

Webhook を受け取るプログラムを作るとき、多くの人がつまずくのが次のような点です。

そもそも本当に届いているのか分からない
届いた手紙の中身がどんな形なのか、説明書だけではよく分からない
受け取るプログラムがまだ無いので、試しようがない

フック箱は「ためしに受け取って中を見る箱」

フック箱は、Webhook を受け取るための仮の郵便受けです。ボタンを1つ押すと、あなた専用の受け取り用 URL ができます。それをサービスに「宛先」として登録すると、届いた手紙（リクエスト）が画面にそのまま並び、中身を開いて読めます。

自分でサーバーを用意したり、プログラムを書いたりする必要はありません。「何がどんな形で届くのか」を先に知ってから、本番のプログラムを作れます。

受信用 URL を発行してみる →

こんなときに便利

LINE bot を作り始めたとき：メッセージやスタンプが送られたとき、どんな形のデータが届くのかを先に見られます。
決済（Stripe など）を組み込むとき：支払いが済んだ通知の中身や、テスト環境の通知かどうかを確かめられます。
ノーコードツールや業務システムの連携：kintone や、Webhook を送れるツールの設定が正しいか、実際に送って確かめられます。
自分で作ったプログラムの送信テスト：自作のスクリプトや IoT 機器が、ちゃんとデータを送れているかを見られます。
「届かない」原因を切り分けたいとき：フック箱には届くのに自分のサーバーには届かないなら、問題は自分のサーバー側にある、と分かります。

3分で試してみる

サービスに登録しなくても、自分のパソコンから試しに送って、届く様子を見られます。

トップページで「受信用 URL を発行する」を押します。受信箱の画面が開き、上に https://hookbako.fourgetkun.com/h/… という受け取り用 URL が表示されます。
受信箱の画面の URL（アドレスバーの URL）は、ブックマークしておきます。後でこの画面に戻るための鍵が入っています。
次のどれかで、受け取り用 URL にデータを送ってみます（受け取り用URL の部分を、自分の URL に置き換えます）。

Mac・Linux（ターミナル）

curl -X POST '受け取り用URL/hello' \
  -H 'Content-Type: application/json' \
  -d '{"message":"hello"}'

受信箱の画面に、試しに送るためのコマンドがすでに表示されているので、それをコピーして貼り付けるのが一番簡単です。

Windows（PowerShell）

Invoke-RestMethod -Method Post -Uri '受け取り用URL/hello' -ContentType 'application/json' -Body '{"message":"hello"}'

古い Windows PowerShell から日本語を送ると、文字が「?」に化けることがあります。まずは英数字で試すのがおすすめです。

ブラウザだけで試す

フック箱の受信箱の画面を開いたまま、ブラウザの開発者ツール（F12 キー）を開き、「コンソール」に次を貼り付けて Enter を押します。

fetch('受け取り用URL/hello', { method: 'POST', body: JSON.stringify({ message: 'hello' }) })

ほかのサイトのページで同じことをすると、そのサイトの制限で送れなかったり、コンソールに赤いエラー（CORS）が出たりします。ほかのサイトから送りたいときは、受信箱のメニューの「返す応答を設定」で「ブラウザからの送信を許す（CORS）」をオンにします。

送ると、受信箱の画面の左に、届いたものがその場で1件増えます。

画面の見方

フック箱の受信箱の画面。左に届いたリクエストの一覧、右に本文・署名の検証・ヘッダー・送り直しのカードが並んでいる — 受信箱の画面（LINE・GitHub・フォームから届いた例）

受信トレイ（左）: 届いたリクエストが新しい順に並びます。LINE や Stripe など、送り元が分かるものは名前と「何が起きたか」が表示されます。
見出し（右上）: 選んだリクエストの概要です。届いた時刻、送り元の IP アドレス、大きさなどが並びます。
このリクエストについて: 何のイベントか、次に何をすればよいかを日本語で説明します。メモも書けます。
本文: 届いたデータの中身です。「整形」で読みやすく、「TypeScript」で型定義に変換して表示できます。
署名の検証: 送り元のサービスから本当に届いたものかを確かめます（使い方は署名検証のガイド）。
ヘッダーとクエリ: データに付いてきた付帯情報です。送り元のサービス名や、署名などが入っています。
手元へ送り直す: 同じリクエストを、自分のパソコンで動かしているプログラムに送るためのコマンドです。

知っておくと便利な使い方

パスを変えて、送り元を分ける

受け取り用 URL の後ろには、好きなパスを付けられます。…/h/あなたのID/line、…/h/あなたのID/stripe のように分けて登録すると、1つの受信箱で複数のサービスを試しても、どこから来たか一目で分かります。

検索で絞り込む

上の検索欄に provider:line（LINE から届いたものだけ）、method:POST、path:/stripe のように入れると絞り込めます。普通の言葉を入れると、本文の中も探します。

返事の内容を変えて、送り元の動きを試す

受信箱のメニューの「返す応答を設定」で、送り元に返す返事を変えられます。たとえば返事を 500（エラー）にすると、送り直しの仕組みがあるサービス（Stripe など）は「届かなかった」と判断して、時間をおいて送り直してきます。送り直しの動きを確かめたいときに便利です。

届いたデータから、プログラムの型を作る

本文の「TypeScript」を押すと、届いた JSON から TypeScript の型定義を作ります。本番のプログラムを書き始めるときに、そのまま貼り付けて使えます。

自分のプログラムに同じデータを送る

「手元へ送り直す」の送り先を、自分のパソコンで動かしているプログラム（例：http://localhost:3000）にして、表示された curl コマンドを実行すると、本物と同じデータで動作を試せます。

キーボードで操作する

j で次、k で前のリクエストへ移ります。/ で検索欄に移ります。

名前とメモで整理する

受信箱には名前を付けられます（例：「LINE bot 開発」）。気になったリクエストにはメモを残しておくと、後で見返すときに便利です。

気をつけること

受信箱の画面の URL は人に教えない。鍵が入っていて、知っている人は誰でも中身を見られます。
パスワードや個人情報は送らない。フック箱はテストのための道具です。本物の顧客データなどは送らないでください。
7日で消えます。受信箱は作ってから7日で、中身ごと自動的に削除されます。残しておきたいものは、メニューの「全部を書き出す」で保存します。
保存は最新の100件まで。それより古いものは順に消えます。1つの受信箱で受け取れるのは合計1,000件までです。

用語ミニ辞典

Webhook（ウェブフック）: 何かが起きたとき、サービスが決められた URL へデータを送って知らせる仕組み。
エンドポイント: データの送り先になる URL のこと。フック箱の「受け取り用 URL」がこれにあたります。
リクエスト: 送られてきた1回分のデータ。フック箱の一覧の1行が1つのリクエストです。
ヘッダー: リクエストに付いてくる付帯情報。どのサービスから来たか、どんな形式のデータかなどが書かれています。
本文（ボディ）: リクエストの中身そのもの。多くは JSON という形式で書かれています。
JSON（ジェイソン）: {"name":"山田"} のように、項目と値の組で書くデータの形式。
ステータスコード: 受け取った側が返す番号。200 は「受け取りました」、500 は「エラーが起きました」という意味です。
署名・シークレット: 本物のサービスから届いたことを確かめるための仕組みと、そのための合言葉。合言葉を知っている送り元しか、正しい署名を作れません。

次に読む

署名の検証や、LINE・Stripe・GitHub などサービスごとの確かめ方は、Webhook署名検証のやり方にまとめています。

フック箱を使ってみる →