日本語English

Cache-Control Studio

Cache-Control を貼り付けると、ブラウザと CDN がそれぞれ何秒キャッシュするか、使う前に再検証が要るかを示し、no-store と max-age の併用などの矛盾を指摘します。用途に合う書き方も作れます。

端末内で処理・アップロードなしスマホ対応オフライン対応

ファイルや入力内容はお使いの端末（ブラウザ）の中だけで処理され、サーバーへは送信されません。

応答のヘッダー

「Name: value」の行をそのまま貼ります。Cache-Control の値だけ（例: public, max-age=600）を貼っても解析します。

Cache-Control を貼り付けてください。

使い方

  1. 「解析」タブに、応答の Cache-Control の行を貼ります。Expires・Date・Age・Last-Modified・ETag も一緒に貼ると、寿命と残り時間まで計算します。

  2. ブラウザと CDN（共有キャッシュ）のそれぞれについて、扱い・寿命・残り時間を確かめます。

  3. 「矛盾・よくある誤り」の一覧で、no-store と max-age の同時指定などを直します。

  4. 「設定を作る」タブで用途のプリセットを選び、必要な指定を変えると、Cache-Control の値と nginx・Apache・Next.js の設定例ができます。

できること

寿命と残り時間の計算

RFC 9111 §4.2.1 の順に、ブラウザ（非共有キャッシュ）と CDN（共有キャッシュ）の寿命を決めます。共有キャッシュは s-maxage を最初に使い、Age を引いた残り時間を示します。

ディレクティブごとの意味

public・private・no-cache・no-store・must-revalidate・proxy-revalidate・immutable・stale-while-revalidate・stale-if-error などを、ブラウザと CDN で分けて説明します。

矛盾とよくある誤りの指摘

no-store と max-age の併用、public と private の併用、private に s-maxage、Pragma: no-cache を応答に書いた場合、immutable に寿命がない場合などを、理由の RFC と一緒に示します。

用途別の設定例

ハッシュ付きの静的ファイル・HTML・ログイン後の API のプリセットから、Cache-Control の値と nginx・Apache・Next.js の書き方を作ります。

こんなときに

  • Cache-Control の書き方を、ハッシュ付きの静的ファイル・HTML・ログイン後の API の用途ごとに決めたい
  • no-cache と no-store のどちらを使うべきか、違いを確かめたい
  • 画像や JS を 1 年キャッシュしたが更新されない、と感じたときに、寿命と残り時間を計算したい
  • CDN が古い応答を返す理由を、s-maxage と max-age の扱いから確かめたい
  • Cookie 付きの応答が共有キャッシュに入らないか、設定を見直したい

対応形式

入力

応答ヘッダーの「名前: 値」の行（Cache-Control のほか、Expires・Date・Age・Last-Modified・ETag・Vary・Pragma）Cache-Control の値だけ（例: public, max-age=600）

対応状況

機能対応補足
Cache-Control の解析とディレクティブごとの意味対応—
ブラウザと CDN（共有キャッシュ）の寿命・残り時間の計算対応—
矛盾・よくある誤りの指摘対応—
nginx・Apache・Next.js の設定例対応—
URL を入れて実際の応答ヘッダーを取得する非対応ネットワークには接続しません。応答ヘッダーを貼り付けてください
CDN ごとの独自の挙動の再現非対応RFC の規定に基づく判定です。CDN の独自のルールは含みません
ヒューリスティックな鮮度の正確な値一部対応RFC は値を定めていません。目安の 10% を示します

制限・注意事項

  • 寿命の計算は、貼り付けた Date・Age・Expires だけで行います。受信してからの経過時間は含めません。
  • Last-Modified から求める鮮度（ヒューリスティック）は、RFC 9111 §4.2.2 が値を定めていないため、一般的な目安（10%）で示します。
  • 判定は RFC 9111・RFC 8246・RFC 5861 の定義に基づきます。CDN・プロキシ・ブラウザは、独自の規則を加えることがあります。
  • 入力の上限は、2 万字と 200 行までです。
  • 設定例のパスは例です。配信の構成（CDN・プロキシ・フレームワーク）によって、設定する場所が変わります。
  • スマートフォンでも使えますが、長い応答ヘッダーの貼り付けは PC 推奨です。

プライバシーと安全性

貼り付けた応答ヘッダーと設定は、お使いのブラウザの中だけで処理されます。サーバーへ送信・保存されることはありません。

よくある質問

no-cache と no-store の違いは何ですか？
no-cache は保存はするが、使う前に毎回サーバーへ再検証します。no-store は保存そのものをしません。「キャッシュさせない」ために確実なのは no-store です。
immutable とは何ですか？
寿命の間は内容が変わらないことを示し、再読み込みでも再検証の要求を送らないようにする指定です（RFC 8246）。max-age と組み合わせて使い、ファイル名にハッシュを付けたファイルに向きます。
max-age と s-maxage はどう違いますか？
max-age はブラウザと CDN の両方の寿命です。s-maxage は共有キャッシュ（CDN）だけの寿命で、指定があれば max-age より優先されます。ブラウザは s-maxage を使いません。
Cache-Control の書き方の基本は何ですか？
カンマで区切って「公開の範囲（public か private）・保存の可否（no-store）・寿命（max-age=秒）・再検証（no-cache・must-revalidate）」の順に書くのが一般的です。このツールの「設定を作る」で組み立てられます。
stale-while-revalidate と stale-if-error は何をしますか？
どちらも古くなった応答の扱いを広げる指定です（RFC 5861）。stale-while-revalidate は古い応答を先に返しながら裏で更新し、stale-if-error はオリジンの障害時に古い応答を使います。

CSP Studio

CSP のヘッダーや meta タグを貼り付けると、unsafe-inline・unsafe-eval・ワイルドカード・object-src や base-uri の欠落などを重さ（高・中・低）つきで指摘し、改善案を示します。生成と hash 計算もできます。

アップロードなし

nginx Config Studio

リバースプロキシ・SPA・PHP-FPM・HTTP から HTTPS への転送などの設定をフォームから作り、手元の nginx.conf を貼ると構文エラーや見落としやすい点を一覧にします。ブラウザの中だけで動き、nginx は実行しません。

アップロードなし

Cookie / Set-Cookie Studio

Cookie ヘッダーや Set-Cookie を貼り付けると、属性（Expires・Max-Age・Domain・Path・Secure・HttpOnly・SameSite・Partitioned）を表にし、確認したい点を示します。フォームから Set-Cookie ヘッダーと各言語の書き方も作れます。

アップロードなし

CORS Studio

ブラウザが CORS エラーで通さないとき、要求（Origin・メソッド・ヘッダー・認証情報）と応答ヘッダーを入れると、通るか通らないかと理由を、ヘッダーごとに示します。許可する設定の書き方も作れます。

アップロードなし

HTML 構造・見出し・画像・リンク診断

ページの HTML を貼り付けるだけで、SEO とアクセシビリティの基本項目（見出し構成・メタタグ・OGP・画像の alt・リンク・構造化データ）を一覧で確認できます。検索結果と SNS でのおおよその見え方もプレビューします。

アップロードなし

robots.txt テスター

robots.txt を貼り付けると、指定した URL が Googlebot や AI クローラーに「許可」か「ブロック」かと、どの行のルールが効いたかがすぐ分かります。つづりの誤りや Google が無視する命令も指摘します。

アップロードなし

最終更新: