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

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

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

:::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/)  
:::

## Kurocoの設定
### コンテンツの作成
まずはKuroco管理画面でコンテンツを作成します。  
[コンテンツ定義を作成する](/ja/docs/tutorials/adding-a-topics/)ページを参考に、コンテンツ定義「お知らせ」を作成してください。 

「本文の入力方法」はWYSIWYGをチェックしてください。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/4805adb8844b1fea28e104622b4c01eb.png)
:::tip
作成した/利用するコンテンツの閲覧制限/編集制限は、「選択なし」を設定してください。  
閲覧制限/編集制限については、[こちら](/ja/docs/management/content-structure-topics-group/#詳細設定)を参考にしてください。
:::

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ae67e6f93d596b60bc7a63b6170185d7.png)
以上でコンテンツ作成は完了です。  

### API基本設定を行う
続いてAPIの登録をします。  
Kurocoの管理画面から[API]->[Default]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/4d7ef47c9d0738cd5098b94292fce296.png)
[追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ef2bcacd07dd7f3cd0c40c84c172adc7.png)
タイトル、版、ディスクリプションを入力して[追加する]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/2a2e698ab7eb8c30fe9a36d8a0261197.png)
追加したAPIに遷移しますので、続いて、セキュリティの設定をします。  
[セキュリティ]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/d04bb87a4ba10a6c4b880eebcbd5bb86.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/50afffbe729d7ba6f16fab9b68a0bd9a.png)
CORS_ALLOW_ORIGINSの [Add Origin] をクリックし、下記を追加します。
- `http://localhost:3000/`
- フロントエンドドメイン

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c5d8e6972c8e08cd8b9cd271f3568f72.png)
問題なければ [保存する] をクリックします。

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

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

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6f0109322da45dd0e95744b5e95ac235.png)
下記記載します。
- パス：news
- カテゴリー：コンテンツ
- モデル：Topics
- オペレーション：list

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6eb9c78fc92400a1a27f11b09e6d521d.png)
また、基本設定にある「topics_group_id」にコンテンツ定義「お知らせ」のグループIDを入力してください。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/e8d81395bb2f4b2591a6e49e42194ba1.jpg)
参考) グループIDはコンテンツ定義一覧画面より確認できます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/e2943721f7311f069b683ab3a6589217.png)
全て入力したら、画面上部または下部の「追加する」をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/62be9272f7d5dbb96c64556db6c85cbd.png)
以上で「お知らせ一覧」のエンドポイント作成完了です。

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

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ef073b308ed5ba13eb3217c650731229.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/1225101529053e46760eedfe1808624b.png)
全て入力したら「追加する」をクリックします。

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


## フロントエンドの実装

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

### ファイル作成

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

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

```
pages
 - news
   - _slug.vue
   - index.vue 
```

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

```
pages
 - news
   - [slug].vue
   - index.vue 
```

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

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

</TabItem>
</Tabs>

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

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

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

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

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

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

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

</TabItem>
</Tabs>

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b2ae827a91b1617876dc4724deff9ae9.png)
上記保存し、`http://localhost:3000/news`にアクセスすると下記のような画面が表示されます。

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

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

<Tabs>
<TabItem value="Nuxt.2" label="Nuxt.2" default>

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

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

```markup reference title="/pages/news/[slug].vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/news_details.vue
```

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

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

</TabItem>
</Tabs>

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/87fc99efae91526e9ce8814cbd22e05b.png)
上記保存し、お知らせ一覧画面のタイトルをクリック、すると下記のように詳細画面が表示されます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6ffe471b014934535d6536a330947a70.png)
## まとめ
以上でKurocoでお知らせ一覧/詳細ページを実装する説明を終わります。うまく表示されましたでしょうか。  
このリファレンスでは下記のことが学べます。

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

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