ルーティング: 出力形式とキャッシュ¶
このページでは、ルートで使える出力形式（HTML 以外の JSON / RSS / Atom 出力）と、HTTP キャッシュ制御、CORS、サムネイル（画像リサイズ）、プレビューについて説明します。
このページは ルート設定 の続きです。
出力形式¶
通常のルートは HTML を返しますが、用途に応じて JSON / RSS / Atom 形式での配信に切り替えることもできます。
JSON 出力¶
データバインディングの結果を JSON として返します。スマートフォンアプリ・他システム連携・JavaScript からの非同期取得に利用します。
| 項目 | 説明 | 必須 |
|---|---|---|
| コールバック | JSONP のコールバックパラメータ名 | いいえ |
| バインド名 | 出力対象のバインド名 | いいえ |
| カラム | 出力に含めるフィールド | いいえ |
| ページネーション | ページネーションのオン／オフ | いいえ |
Access-Control-Allow-Origin（CORS ヘッダ）は出力形式に関係なく設定できる共通項目です。CORS（Access-Control-Allow-Origin） を参照してください。
フィード出力（RSS / Atom）¶
ニュース・ブログなどを RSS 2.0 または Atom 1.0 形式で配信できます。
| 項目 | 説明 | 必須 |
|---|---|---|
| フィードタイプ | rss_2.0 または atom_1.0 |
はい |
| タイトル | フィードのタイトル | はい |
| リンク | フィードの URL | はい |
| 著者名 | フィード著者 | いいえ |
| 言語 | フィードの言語 | いいえ |
| 説明 | フィードの説明文 | いいえ |
| バインド名 | エントリに使うバインド | はい |
RSS リーダーに購読してもらうには、サイトの
<head>内に<link rel="alternate" type="application/rss+xml" ...>を追加することが一般的です。
HTTP キャッシュ制御¶
ルートに対する Cache-Control レスポンスヘッダを設定できます。配信効率と更新反映のバランスを調整する用途で使います。
利用できるディレクティブ¶
| ディレクティブ | 説明 |
|---|---|
no-cache |
キャッシュは保持するが、毎回サーバーで再検証 |
no-store |
キャッシュに保存させない |
private |
プライベートキャッシュ（ブラウザ）のみ許可 |
must-revalidate |
有効期限が切れたら必ず再検証 |
max-age |
キャッシュの最大有効期間（秒） |
s-maxage |
共有キャッシュ（CDN 等）の最大有効期間（秒） |
stale-while-revalidate |
期限切れでも再検証中は古いキャッシュを配信 |
cache-busting |
キャッシュバスティング（URL にバージョン番号を含める方式） |
値の組み合わせによっては、CDN とブラウザで挙動が変わることがあります。たとえば
privateを設定すると CDN ではキャッシュされません。CDN を使っている場合はs-maxageを明示的に指定することを推奨します。
よく使う設定例¶
| 用途 | 推奨設定 |
|---|---|
| お知らせなど更新頻度が高いページ | max-age=60, s-maxage=60 |
| 画像・CSS・JS などのアセット | max-age=86400, s-maxage=86400 |
| 管理画面のログイン後ページ | no-store, private |
| 個人情報を含むページ | no-store, no-cache, private |
CORS（Access-Control-Allow-Origin）¶
別のオリジン（ドメイン）から読み込まれるリソースには、Access-Control-Allow-Origin レスポンスヘッダ（CORS ヘッダ）が必要です。ルート設定で許可するオリジンを指定できます。
この項目はルート編集画面の Cache-Control の近くにあり、出力形式に関係なく設定できます。通常出力（HTML）・フィード出力・JSON / JSONP 出力のいずれのルートでも指定できます。以前は JSON / JSONP 出力の設定項目でしたが、出力形式に関係なく設定できる項目に変わりました。これまでに JSON / JSONP 出力の設定として保存した内容はそのまま引き継がれ、設定し直す必要はありません。この場合、同じルートが返す他の出力形式のレスポンスにも CORS ヘッダが付与されるようになります。
設定方法¶
ルート編集画面の Access-Control-Allow-Origin 欄に、許可するオリジンを入力します。1 行に 1 つ記述し、複数のオリジンを許可する場合は改行して並べます。
未入力の場合、そのルートのレスポンスに Access-Control-Allow-Origin は付与されません。
プレビューでは CORS ヘッダは付与されません。設定した内容の確認は公開側で行ってください。
すべてのオリジンを許可する場合は
*を指定します。ただし*を指定すると、すべてのサイトからそのリソースを読み込めるようになります。社内システムからの利用など対象を限定したい場合は、特定のオリジンを明示してください。
主な用途¶
| 用途 | 設定するルート |
|---|---|
Web フォント（.woff2 / .woff / .ttf / .otf / .eot）を別のオリジンのページから読み込む |
フォントファイルを配信するルート |
| JSON を他システムやブラウザの JavaScript から取得する | JSON / JSONP 出力のルート |
| フィードを別のオリジンのページから JavaScript で読み込む | フィード出力のルート |
Web フォントはブラウザの仕様上、別オリジンから読み込む際に CORS ヘッダがないと表示されずにフォールバックフォントに置き換わります。サイトとフォントの配信オリジンが異なる場合は設定が必要です。
サムネイル（画像リサイズ）設定¶
ルートに対して、クエリパラメータ ?_size=N でアクセスされたときに返す画像のリサイズ設定を定義します。元画像 1 つから複数サイズのバリエーションを動的に生成する用途で使います。
設定画面の場所¶
ルート編集画面の右側パネルの サムネイル セクションを開きます。
設定項目¶
| 項目 | 入力形式 | 説明 |
|---|---|---|
| 幅 | 数値 | リサイズ後の幅 |
| 高さ | 数値 | リサイズ後の高さ |
| 単位 | 選択 | 幅・高さの単位 (px / % など) |
| 方式 | 選択 | リサイズアルゴリズム |
| フィット | 選択 | 領域内へのフィット方式 (cover / contain など) |
| オプション | 任意 | 追加オプション |
複数のリサイズ設定を _size=0 / _size=1 のように連番で登録し、?_size=N のクエリでサイズを切り替えてアクセスします。
操作手順¶
- ルート編集画面で対象ルートを開きます。
- 右パネルの サムネイル セクションを展開します。
- 追加 をクリックして新しいサイズ (
_size=N) を作成します。 - 幅・高さ・方式・フィット等を入力します。
- 保存 をクリックします。
SNS シェア用の OGP 画像 (
og:image) や、検索結果向け画像など、用途別の専用スロットはこの画面にはありません。HTML テンプレート側のメタタグ出力で別途指定してください。
プレビュー¶
設定したルートを公開前に確認するには、申請画面のプレビュー URL を利用します。
- 編集中のルートと公開済みのルートを別 URL で確認可能
- 承認者にプレビュー URL を共有して、承認前に内容を確認してもらう運用が一般的
詳しくは 申請 / プレビュー URL を参照してください。
トラブルシューティング¶
| 症状 | 確認ポイント |
|---|---|
| 公開後もページが古い内容のまま | キャッシュの max-age 設定、CDN やブラウザのキャッシュをクリア |
| 別のオリジンからの読み込みが CORS エラーになる | CORS ヘッダ が設定されているか、許可するオリジンが正しいか |
| Web フォントが適用されずフォールバックされる | フォントを配信するルートに CORS ヘッダ が設定されているか |
| RSS リーダーで読み込めない | <link rel="alternate"> がトップページに設置されているか、フィード URL が正しいか |
| サムネイルが指定サイズで返らない | ?_size=N の N が、サムネイル設定で登録した連番に対応しているか |
詳しい対処法は トラブルシューティング を参照してください。