下書きプレビューの設定をしよう

Technology
2023年09月29日
「画面プレビュー」というmicroCMSの機能を使うと、記事を公開しなくても実際の表示を確認することができます。
表示を確認しながら入稿することができるので、設定しておくと便利です。
プレビュー用のリンクを指定する
画面プレビュー機能は実装済みなので、microCMSの管理画面からプレビュー用のリンクを指定するだけでOKです。
お知らせもコラムも同じ手順なので、ここではお知らせに絞って紹介します。
まず、左側のサイドバーから「お知らせ > API設定 > 画面プレビュー」と進みます。

この画面にある遷移先URLのフォームに画面プレビューのURLを設定します。
本番サイトのURLがあれば
https://xxxx.com/news/post.html?id={CONTENT_ID}&draftKey={DRAFT_KEY}
ローカル環境のURLも指定できます。
※Live Serverを立ち上げた状態でプレビューすることを想定しています。
ローカルサーバーを立ち上げた状態によってはポートが5500ではない場合もあるので、ローカル環境のURLを見てポート番号(5500)を適宜変更してください。
http://127.0.0.1:5500/news/post.html?id={CONTENT_ID}&draftKey={DRAFT_KEY}
ドメインのあとのパスはサイトの構成にもよるので、適宜変更してください!
画面プレビュー機能のファイルについて
お知らせなら/assets/js/modules/get-news-draft.jsに、コラムなら/assets/js/modules/get-column-draft.jsに処理が載っています。
変更したいことがあればのぞいてみてください。