メインコンテンツまでスキップ

プレビュー画面を構築する

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

備考

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

備考

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

プレビューとは

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

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

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

Image (fetched from Gyazo) この機能は初期状態では動作せず、 各種設定とフロントエンド側のコーディングが必要となります。

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

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

コンテンツ定義編集 画面の[プレビューの対象とするページのURL]に、 プレビューする画面のURLを設定します。

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

Image from Gyazo

下記のうちどちらかのURLが プレビューを確認するボタンのリンク先に設定されます。

  • 相対パスを指定された場合は、[フロントエンドドメイン] + 相対パス のURL
  • プロトコルを含んだURLが指定された場合は、そのURL

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

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

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

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

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

設定の確認

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

コンテンツ編集画面の、 [プレビューを確認する]ボタンをクリックします。

Image from Gyazo

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

Image from Gyazo

プレビュー用のAPIを作成する

API基本設定を行う

続いてAPIの登録をします。
Kurocoの管理画面から[API]->[Default]をクリックします。
Image from Gyazo

[追加]をクリックします。
Image from Gyazo

タイトル、版、ディスクリプションを入力して[追加する]をクリックします。
Image from Gyazo

追加したAPIに遷移しますので、続いて、セキュリティの設定をします。
[セキュリティ]をクリックします。
Image from Gyazo

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

CORS設定を行う

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

Image from Gyazo

CORS_ALLOW_ORIGINSの [Add Origin] をクリックし、下記を追加します。

  • http://localhost:3000/
  • フロントエンドドメイン

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

  • GET
  • POST
  • OPTIONS

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

Image from Gyazo

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

エンドポイントを設定する

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

ヒント

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

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

Image from Gyazo Image from Gyazo

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

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

/pages/news_preview/index.vue
loading...
注意

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

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

Image from Gyazo


サポート

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。