14-2 係を店先に置く（widget）
新しい係を雇うときは、本部に届け出て、名札と合鍵を受け取ります。名札は見られてもよいですが、合鍵は見せてはいけません。
そのうえで立ち位置を決めます。お客さんが申込書を書く記入台のすぐ横です。いま読んでいるこのサイト（Cloudflare Lab）でも同じ順で進めます。
Learning goals
この節でできるようになること
- sitekey と secret key の違いを言える
- ダッシュボードで係を作る経路を言える
- ページに置く 2 行の意味を説明できる
- 見え方の三種類と練習用の key を言える
1. 名札と合鍵
Section titled “1. 名札と合鍵”係を雇うと、名札と合鍵が 1 組で渡されます。
Cloudflare では、名札を sitekey、合鍵を secret key と呼びます。公式は、sitekey を HTML に置く公開の識別子、secret key をサーバーが token を確かめる非公開の資格情報だと説明しています。組は widget ごとに 1 つです。
ダッシュボードで作る経路も公式にあります。Turnstile のページで Add widget を選び、Widget name・Hostname management（使う店名）・Widget mode（見え方）を埋めて Create を選ぶと、名札と合鍵が表示されます。
名札は店先、合鍵は金庫。置き場所が正反対です。
つまり、sitekey は出すもの、secret key は出さないものです。
2. ページに 2 行置く
Section titled “2. ページに 2 行置く”記入台の横に立ってもらうには、二つ要ります。係を呼ぶ呼び鈴と、立ち位置を示す足形です。
Cloudflare では、呼び鈴が公式の script、足形が cf-turnstile の印を付けた div です。公式はこの置き方を implicit rendering と呼び、読み込み時に HTML の中の印を自動で探して widget を描くと説明しています。
次の 2 行は「係を呼ぶ」と「ここに立つ」の命令です。読めなくても大丈夫です。
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script><div class="cf-turnstile" data-sitekey="<YOUR-SITE-KEY>"></div>この 2 行で、記入台の横に係が立ちます。課題が解けると cf-turnstile-response という見えない入力欄が作られ、他の入力とともにサーバーへ送られます。
この 2 行を紙に書いておくと、開店と同時に係がその位置に立ちます。
つまり、ページ側の仕事は「呼ぶ」と「置く」の 2 行だけです。
3. 見え方の三種類
Section titled “3. 見え方の三種類”同じ係でも、目立つ立ち方と気づかれない立ち方があります。手間と見た目は引き換えです。
公式は、widget の見え方に Managed・Non-Interactive・Invisible の三つがあると説明しています。Managed（推奨）は、訪問者の危険度に応じて対話なしの課題かチェックボックスかを自動で選びます。読み取る画像や文字は出ません。
Non-Interactive は、読み込み中の印は見えますが操作は求められません。Invisible は、widget も印も見えないまま背後で課題が走ります。
上から順に、時々お客さんの手を借りる係、見えているだけの係、姿の見えない係です。
つまり、迷ったら公式の推奨する Managed を選びます。
4. 練習用の key
Section titled “4. 練習用の key”開店前の練習で、本物の係に本気で見分けさせたくはありません。「必ず通す」「必ず止める」と決まった係が要ります。
Cloudflare には、そのための sitekey と secret key が用意されています。公式はこれを dummy の key と呼び、自動テストでも結果がぶれないためのものだと説明しています。sitekey の 1x00000000000000000000AA を付けた係は、必ず通します。
secret key 側にも、常に通るもの・常に失敗するもの・使用済みの誤りを返すものがあります。公式は、本番の secret key が dummy の token を拒否すると明記しています。
練習用の名札を付けた係は、決まった答えしか返しません。
つまり、練習と本番で key を差し替えれば、本物の課題を出さずに試せます。
Cloudflare Lab での使われ方
Section titled “Cloudflare Lab での使われ方”ここで紹介した手順が、いま読んでいる Cloudflare Lab でどう使われるかを見ます。
Cloudflare Lab は、書き込みの入口を足す段階で widget を 1 つ作り、見え方は Managed、Hostname management には公開している店名だけを登録する予定です。実測は後で追記します。
つまずきやすいところ
Section titled “つまずきやすいところ”この節のまとめ
Section titled “この節のまとめ”- widget を作ると、sitekey と secret key が 1 組で発行されます。
- ページには script と
cf-turnstileのdivの 2 行を置きます。 - 見え方は Managed・Non-Interactive・Invisible の三つです。
この節で出てきた言葉を、つながりの順に並べると次のようになります。
図のラベル: ダッシュボードで作る Add widget / 表に出す名札 sitekey / 金庫にしまう合鍵 secret key / ページに置く 2 行 script と div / 見え方を選ぶ Managed など三種類 / 練習用の key dummy / サーバー側の確認
次の節では、係が渡した通行証を本社で確かめる手順を見ます。
この節のチェック
© 2026 osdse