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

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

備考

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

備考

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

Kurocoの設定

コンテンツの作成

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

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

ヒント

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

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

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

API基本設定を行う

続いてAPIの登録をします。
Kurocoの管理画面から[API]->[Default]をクリックします。
[追加]をクリックします。
タイトル、版、ディスクリプションを入力して[追加する]をクリックします。
追加したAPIに遷移しますので、続いて、セキュリティの設定をします。
[セキュリティ]をクリックします。
[Cookie]を選択して[保存する]をクリックします。
注意)
Cookieをセキュリティ用のトークンとして利用する場合、APIドメインとフロントエンドのドメインが違うとサードパティクッキーの問題があり、Safari等で認証が効きません。
フロントエンドとAPIドメインをサブドメイン違いで設定をする必要があるので、独自ドメイン/TLS証明書でAPIドメインを設定し、アカウント設定からAPIドメインを変更ください。
（Chromeでは正常に動作しますので、開発やテストの段階ではまずChromeで構築していただくことをお勧めします。）

CORS設定を行う

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

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

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

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

• GET
• POST

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

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

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

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

下記記載します。

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

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

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

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

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

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

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

フロントエンドの実装

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

ファイル作成

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

Nuxt.js

pages
 - news
   - _slug.vue
   - index.vue 

Next.js

app
 - news
   - [slug]
     - page.jsx
   - page.jsx

一覧ページの作成

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

Nuxt.js

/pages/news/index.vue

loading...

View on GitHub

Next.js

/app/news/page.jsx

loading...

View on GitHub

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

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

詳細ページの作成

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

Nuxt.js

/pages/news/_slug.vue

loading...

View on GitHub

Next.js

/app/news/[slug]/page.jsx

loading...

View on GitHub

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

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

まとめ

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

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

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