画面プレビュー
画面プレビューは、管理画面から登録したコンテンツを、公開前にウェブサイトにて確認するための機能です。
プレビューの仕組み
前提として、microCMSはヘッドレスCMSと呼ばれる見た目を持たないCMSになるため、従来型のCMSとはプレビューの仕組みが根本的に異なります。
プレビューを実施するためには、フロントエンド側でmicroCMSから下書き状態のコンテンツを取得し、レンダリングする仕組みを実装する必要があります。
そのためには、コンテンツを一意に特定するためのコンテンツID
や、下書き状態のコンテンツを取得するためのdraftKey
を、URLとしてフロントエンド側に連携する必要があります。
microCMSでは、管理画面のコンテンツ詳細画面から、プレビュー用の動的なURLを設定する処理を、画面プレビュー機能として提供しています。このドキュメントでは、その設定方法について記載します。
画面プレビューの設定方法
1:任意のAPIを選択します。
2:「API設定」を選択します。
3:「画面プレビュー」を選択します。
4:「遷移先URL」欄に連携したいURLを設定し、「変更する」をクリックします。
このような設定をすることで、コンテンツID(CONTENT_ID)
とdraftKey
を動的な値として含めたURLに、コンテンツ詳細画面の画面プレビューボタンからアクセスすることができます。
フロントエンド側では、この値をURLより取得することで、microCMSのAPIにアクセスしてデータを取得することが可能となります。
Information
{CONTENT_ID}
と{DRAFT_KEY}
については、それぞれURL内で1個しか使用することができません。2個目以降は置き換えがされませんので、ご注意ください。
フロントエンドの実装方法
フロントエンドにおける具体的な実装方法については、以下のブログ記事などで解説していますのでご参照ください。
![](https://images.blog.microcms.io/assets/f5d83e38f9374219900ef1b0cc4d85cd/ca79e4a3936341ac73579989bb0f3081/nuxt-jamstack-preview-ogp.png)
- microCMSとNuxtでプレビュー画面を作成する
- https://blog.microcms.io/nuxt-jamstack-preview/
![](https://images.blog.microcms.io/assets/f5d83e38f9374219900ef1b0cc4d85cd/2f6884e3d9c849989a8b7c02628638b8/gatsby-preview-ogp.png)
- microCMSとGatsbyでプレビュー画面を作成する
- https://blog.microcms.io/gatsby-preview/
![](https://images.blog.microcms.io/assets/f5d83e38f9374219900ef1b0cc4d85cd/92c09085ec6243cca78046fa644dd8cd/banner-bg.png?blend-mode=normal&blend-x=78&blend-y=200&blend64=aHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L350ZXh0P3R4dHNpemU9NjQmdz02NzImdHh0Zm9udD1Ob3RvJTIwU2FucyUyMEpQJTIwQmxhY2smdHh0LWNvbG9yPTIxMjE0OSZ0eHQ9QXN0cm8lRTMlODElQThtaWNyb0NNUyVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSU5RiVFNyU5NCVCQiVFOSU5RCVBMiVFMyU4MyU5NyVFMyU4MyVBQyVFMyU4MyU5MyVFMyU4MyVBNSVFMyU4MyVCQyVFMyU4MiU5MiVFNSVBRSU5RiVFOCVBMyU4NSVFMyU4MSU5OSVFMyU4MiU4Qg==)
- AstroとmicroCMSを使った画面プレビューを実装する
- https://blog.microcms.io/astro-preview/