---
title: プレビュー画面を構築する
category: フロントエンド
description: Kurocoを利用したプロジェクトで、プレビューの利用方法を紹介します。本チュートリアルではフロントエンドのコードとして、Nuxt.jsとNext.jsの2種類を紹介します。
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

Kurocoを利用したプロジェクトで、プレビューの利用方法を紹介します。  
本チュートリアルではフロントエンドのコードとして、Nuxt.jsとNext.jsの2種類を紹介します。

:::info
本チュートリアルでは以下のバージョンでコードを書いています。  
Nuxt2: v2.15.8  
Nuxt3: v3.8.0  
Next.js: v13.4.12 (Using App Router)
:::

:::info
このページはKurocoでのプロジェクトが構築済みであることを前提としています。    
まだ構築していない場合は、下記のチュートリアルを参照してください。  
Nuxt.js：[Kurocoビギナーズガイド](/ja/docs/tutorials/beginners-guide/)  
:::

## プレビューとは

コンテンツのプレビューを行う機能です。

コンテンツを作成/編集する際に、
コンテンツの内容を更新することなく、
ひとまずWEBページ上での作成/編集後の画面を確認したいときに便利な機能です。

[コンテンツ編集](/ja/docs/management/content-structure-topics/)の[プレビューを確認する]ボタンでプレビューでき、
[更新する/途中保存する]ボタンによるコンテンツの変更をしていない場合でも、
即時で編集している内容をプレビューできます。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/75499043371ee8cf6273a1dfd4abf99f.jpg)
この機能は初期状態では動作せず、
各種設定とフロントエンド側のコーディングが必要となります。

この記事では、Kurocoのプレビューをフロントエンドで表示するための手順を紹介します。

## プレビューする画面のURLを設定する

[コンテンツ定義編集](/ja/docs/management/content-structure-topics-group/)
画面の[プレビューの対象とするページのURL]に、
プレビューする画面のURLを設定します。

ここでは`http://localhost:3000/news_preview`画面へリンクするように設定します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdfa79d59a963ac623ee13567c9893c0.png)

下記のうちどちらかのURLが
`プレビューを確認する`ボタンのリンク先に設定されます。
- 相対パスを指定された場合は、[フロントエンドドメイン] + 相対パス のURL
- プロトコルを含んだURLが指定された場合は、そのURL

リンクには、
新規に生成されたワンタイムトークンを含んだ
URLクエリパラメータが付加されます。

`${URL}?preview_token=aaaAAA000999&validUntil=1234567890`

### 絶対パス、相対パスについて

画像の例では絶対パスを指定していますが、
相対パスを指定した場合
例えば[フロントエンドドメイン]が下記の画像の通りで  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/02b31850268804b0710212658308d01c.png)  
`プレビューの対象とするページのURL`が下記の画像のとき  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/df197dd33d942ee9190b805d339d713b.png)  
リンク先のURLは
`https://kuroco-dev.web.app/sub/feed/preview/?preview_token=aaaAAA000999&validUntil=1234567890`
となります。

[フロントエンドドメイン]は、[アカウント設定](/ja/docs/management/account/)で確認/変更ができます。

### 設定の確認

実際にプレビューボタンのリンク先が設定したURLとなっているかを確認します。

[コンテンツ編集](/ja/docs/management/content-structure-topics/)画面の、
[プレビューを確認する]ボタンをクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/690836d6c1381d127ee689e3a3a2c690.jpg)

`http://localhost:3000/news_preview?preview_token=...`
となっていることが確認できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/71eaa489156347b700299f6032c0e122.png)

## プレビュー用のAPIを作成する
### API基本設定を行う
続いてAPIの登録をします。  
Kurocoの管理画面から[API]->[Default]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/d5a0c3aacbb47a0e6c9fb95819d14622.png)

[追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/aa425815fa52294d9cac473ad30f8128.png)

タイトル、版、ディスクリプションを入力して[追加する]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/47504529d5421cba9a97fabfc37529b6.png)

追加したAPIに遷移しますので、続いて、セキュリティの設定をします。  
[セキュリティ]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ae15c4586461b9fa56be21f86e4a84f3.png)

[Cookie]を選択して[保存する]をクリックします。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/6dcf2c3d012ebf03155f8926f0695379.png)
注意)  
Cookieをセキュリティ用のトークンとして利用する場合、APIドメインとフロントエンドのドメインが違うとサードパティクッキーの問題があり、Safari等で認証が効きません。  
フロントエンドとAPIドメインをサブドメイン違いで設定をする必要があるので、[独自ドメイン/TLS証明書](/ja/docs/management/custom-domain-tls-certificate/)でAPIドメインを設定し、[アカウント設定](/ja/docs/management/account/)からAPIドメインを変更ください。  
（Chromeでは正常に動作しますので、開発やテストの段階ではまずChromeで構築していただくことをお勧めします。）

### CORS設定を行う
[CORSを設定する] をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/cb98a278523926012fce2b3cffded320.png)

CORS_ALLOW_ORIGINSの [Add Origin] をクリックし、下記を追加します。
- `http://localhost:3000/`
- フロントエンドドメイン

CORS_ALLOW_METHODSの [Add Method] をクリックし、下記を追加します。
- GET  
- POST
- OPTIONS

CORS_ALLOW_CREDENTIALSの[Allow Credentials]にチェックが入っていることを確認します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6fab130c21608aa66875a721a0c13cd5.png)

問題なければ [保存する] をクリックします。

### エンドポイントを設定する
以下の内容で、プレビュー用のコンテンツデータを取得するエンドポイントを作成します。

:::tip
ワンタイムトークンが発行されるため、APIリクエスト制限はNoneを指定してください。  
topics_group_idには、ご自身のコンテンツ定義のIDを記入してください。
:::

| 設定項目 | 設定 | |
| :--- | :--- | :--- |
| パス | **news/preview** ||
| | 有効/無効 | 有効 |
| モデル | カテゴリー | コンテンツ |
| | モデル | Topics |
| | オペレーション | preview |
| 認証 | **None** ||
| topics_group_id | **10** |  |

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d1a44cd6d1d2afa1f591251750cc5ef7.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/640f812fb9c69847e35b057ea21ef483.png)

## フロントエンドの追加をする

プレビューを表示するためのページを追加します。 
今回はnews_previewのディレクトリ名でページが表示できるように以下のファイルを作成します。

<Tabs>
<TabItem value="Nuxt2" label="Nuxt2" default>

```markup reference title="/pages/news_preview/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/news_preview.vue
```

</TabItem>
<TabItem value="Nuxt3" label="Nuxt3" default>

```markup reference title="/pages/news_preview/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/news_preview.vue
```

</TabItem>
<TabItem value="Next.js" label="Next.js">

```jsx reference title="/app/news_preview/page.jsx"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nextjs/news_preview.jsx
```

</TabItem>
</Tabs>

:::caution
`/rcms-api/6/news/preview`の部分はご自身のエンドポイントのURLに変更してください。  
:::

最後に動作の確認をします。  
[プレビューを確認する]ボタンをクリックすることで、
保存前の編集中コンテンツを取得できるようになりました。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/63c49a4bff9cb5df720a2b96179796b9.gif)