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

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に処理が載っています。

変更したいことがあればのぞいてみてください。