プレビュー
プレビューは、まだ公開していないコンテンツを公開前に確認するための機能です。非公開の状態のまま、コンテンツの内容や、実際のサイト上での見え方を確認できます。
プレビューの種類
コンテンツの編集画面から、次の2種類のプレビューを利用できます。
- JSONでプレビュー
- 保存された最新のコンテンツデータをJSON形式で確認します
- Preview APIで取得したときと同じ形式のデータで、フィールドの値が実際にどのような形式で返るかを確認できます
- プレビューURLを設定していなくても利用できます
- サイトでプレビュー
- 編集中のコンテンツを、実際のサイト上の表示で確認します
- 利用するには、モデルにプレビューURLを設定しておく必要があります
サイトでのプレビュー設定
サイトでプレビューを利用するには、モデルごとにプレビューを設定します。設定は、モデル設定の「プレビュー設定」から行います。
プレビューの設定には、次の2つの方式があります。
- サイト上でプレビュー
- プレビューURLを設定し、そのURLを開いて編集中のコンテンツを確認します
- プレビューを使わない
- サイトでのプレビューを行いません
プレビューURL
「サイト上でプレビュー」を選んだ場合は、プレビュー先のURLを設定します。
プレビューURLには、テンプレート構文を使ってコンテンツのフィールド値を埋め込めます。{content.フィールド名} の形式で記述すると、その部分がコンテンツの値に置き換わります。これにより、コンテンツごとに異なるページのURLを組み立てられます。
例えば、slug フィールドを持つコンテンツのプレビューURLは、次のように設定します。
https://example.com/{content.slug}slug が post-1 のコンテンツをプレビューすると、https://example.com/post-1 が開きます。テンプレート構文に対応する値が存在しない場合、その部分は空文字に置き換えられます。
フロントエンドでの実装
サイトでプレビューを行うには、設定したプレビューURLのページ側で、Preview APIを使って下書きのコンテンツを取得する実装が必要です。
- プレビューURLにコンテンツを特定できる値（
slugやid）を埋め込む - プレビュー用のページで、その値を元にPreview APIから公開前のコンテンツを取得する
- 取得した内容を画面に表示する
Preview APIの認証やリクエストの詳細は、CDN API・Preview APIのセクションを参照してください。
管理画面での操作
プレビューは、コンテンツの編集画面から実行します。
- コンテンツ編集画面の右上にある「…」マークを選択します
- 「プレビュー」から「JSONでプレビュー」または「サイトでプレビュー」を選択します
- 「サイトでプレビュー」では、プレビューURLを別タブで開きます。「URLをコピー」を選ぶと、プレビューURLをコピーできます
