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

コンテンツ一覧/詳細ページを作成する

Kurocoを利用したプロジェクトで、コンテンツ定義「お知らせ」の一覧と詳細画面を表示させる方法を解説します。
本チュートリアルではフロントエンドのコードとして、Nuxt.jsとNext.jsを紹介します。

備考

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

備考

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

Kurocoの設定​

コンテンツの作成​

まずはKuroco管理画面でコンテンツを作成します。
コンテンツ定義を作成するページを参考に、コンテンツ定義「お知らせ」を作成してください。

「本文の入力方法」はWYSIWYGをチェックしてください。
Image from Gyazo

ヒント

作成した/利用するコンテンツの閲覧制限/編集制限は、「選択なし」を設定してください。
閲覧制限/編集制限については、こちらを参考にしてください。

次に、作成したコンテンツ定義「お知らせ」より、コンテンツを作成してください。
今回は下記のように作成しました。

Image from Gyazo 以上でコンテンツ作成は完了です。

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

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

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

次に先ほど作成したコンテンツ「お知らせ」を取得するエンドポイントを作成します。
今回は、「お知らせ一覧」と「お知らせ詳細」の２つのエンドポイントを作成します。

まずはお知らせ一覧のエンドポイントを作成します。
[新しいエンドポイントの追加] をクリックします。

Image from Gyazo 下記記載します。

  • パス：news
  • カテゴリー：コンテンツ
  • モデル：Topics
  • オペレーション：list

Image from Gyazo また、基本設定にある「topics_group_id」にコンテンツ定義「お知らせ」のグループIDを入力してください。
Image from Gyazo 参考) グループIDはコンテンツ定義一覧画面より確認できます。
Image from Gyazo 全て入力したら、画面上部または下部の「追加する」をクリックします。

Image from Gyazo 以上で「お知らせ一覧」のエンドポイント作成完了です。

次に「お知らせ詳細」のエンドポイントを作成します。 一覧の時と同様に、[新しいエンドポイントの追加] をクリックし、下記記載します。

  • パス：newsdetail
  • カテゴリー：コンテンツ
  • モデル：Topics
  • オペレーション：details
  • topics_group_id：任意のグループID

Image from Gyazo Image from Gyazo 全て入力したら「追加する」をクリックします。

以上でKurocoの設定が完了です。

フロントエンドの実装​

実際にKurocoで作成したコンテンツをフロントエンドで表示します。

ファイル作成​

フロントエンドのフレームワークをインストールしたディレクトリに、下記構造にてファイル作成します。
今回は/news/、/news/slugのディレクトリ名でページが表示できるようにファイルを作成しました。

pages
 - news
   - _slug.vue
   - index.vue

一覧ページの作成​

一覧ページは以下のように記載します。

/pages/news/index.vue
loading...

注意) /rcms-api/4/newsの箇所は、Kuroco管理画面に記載のパスをご記入ください。

Image from Gyazo 上記保存し、http://localhost:3000/newsにアクセスすると下記のような画面が表示されます。

Image from Gyazo

詳細ページの作成​

詳細ページは以下のように記載します。

/pages/news/_slug.vue
loading...

注意) /rcms-api/4/newsdetail/ の箇所は、Kuroco管理画面に記載のパスをご記入ください。

Image from Gyazo 上記保存し、お知らせ一覧画面のタイトルをクリック、すると下記のように詳細画面が表示されます。

Image from Gyazo

まとめ​

以上でKurocoでお知らせ一覧/詳細ページを実装する説明を終わります。うまく表示されましたでしょうか。
このリファレンスでは下記のことが学べます。

  • KurocoのAPI設定
  • Nuxt.js/Next.jsでKurocoコンテンツの表示

こちらを応用し、ご自身のサイトを構築してみて下さい。

サポート

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

フォームから問い合わせをする
Slackコミュニティに参加する