---
title: コンテンツ一覧ページにページネーションを実装する
description: 本チュートリアルではコンテンツ一覧/詳細ページを作成するで作成したコンテンツ一覧ページにページネーションを実装する方法を説明します。
---

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

コンテンツの数が多い場合、コンテンツ一覧を複数のページに分割するページネーションの実装が必要になる場合があります。    
Kurocoのトピックスリストのエンドポイントは、レスポンスに記事数・現在のページ・ページ数の合計 などが含まれるため、フロント側でページ数の計算をすることなくページネーションの実装が可能です。  

本チュートリアルでは[コンテンツ一覧/詳細ページを作成する](/ja/docs/tutorials/integrate-kuroco-with-nuxt/)で作成したコンテンツ一覧ページ(お知らせ一覧)にページネーションを実装する方法を説明します。

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

:::info
本チュートリアルでは以下のバージョンでコードを書いています。  
Nuxt2: v2.15.8  
Nuxt3: v3.8.0  
:::

## APIの設定
APIの登録内容は[コンテンツ一覧/詳細ページを作成する](/ja/docs/tutorials/integrate-kuroco-with-nuxt/)と同じです。  
こちらで作成したAPIをそのまま利用する場合は[Kurocoで1ページ当たりの表示数を設定する](#kurocoで1ページ当たりの表示数を設定する)に進んでください。  

### 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/958f09b0a556a3516d3638c1353b5130.png)

追加したAPIに遷移しますので、続いて、セキュリティの設定をします。  
[セキュリティ]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ec763d0832bd03f97f4df47763b86dca.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/c31ec737110c5ddda6ee20e3a221d342.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)

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

### エンドポイントを設定する
次にエンドポイントを作成します。今回は下記エンドポイントを作成します。  

- お知らせ一覧エンドポイント
- お知らせ詳細エンドポイント

#### お知らせ一覧
お知らせ一覧エンドポイントを下記設定にて作成します。

|項目|設定内容|
| :--- | :--- |
|パス|news|
|カテゴリー|コンテンツ|
|モデル|Topics|
|オペレーション|list|
|topics_group_id|お知らせを登録しているコンテンツ定義ID|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/fda2309fde8090f4c1d2ff65fe0be0df.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a02e75811a76d820b62732e1b67c36e2.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/91afaa79ca6ef04075cf78098ad8275f.png)

設定完了後、「追加する」をクリックします。

#### お知らせ詳細 
お知らせ詳細エンドポイントを下記設定にて作成します。

|項目|設定内容|
| :--- | :--- |
|パス|newsdetail|
|カテゴリー|コンテンツ|
|モデル|Topics|
|オペレーション|details|
|topics_group_id|お知らせを登録しているコンテンツ定義ID|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/95ebb0e4019f4af4cafd028a93a35f23.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a02e75811a76d820b62732e1b67c36e2.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/91afaa79ca6ef04075cf78098ad8275f.png)

設定完了後、「追加する」をクリックします。

## Kurocoで1ページ当たりの表示数を設定する
1ページ当たりのコンテンツ表示数は固定になるため、Kurocoの管理画面側でパラメータの設定をします。 
エンドポイントに表示するページの情報をパラメータとして渡すことで、各ページのレスポンスを得ていきます。  

お知らせ一覧のエンドポイントを作成したAPIのページに遷移します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/052548ae1fe3eba592d0b01de25d79ce.png)

お知らせ一覧のエンドポイント(今回の場合は `/rcms-api/7/news`)の[更新]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/57810fe317946b11b136a4c9e376d5b2.png)

エンドポイントの設定画面が開くので、基本設定の`cnt`に1ページ当たりの表示数を入力します。今回は`4`と入力し[更新]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/03c946b780be0a213db4e3a7a2c84a4c.png)

## Swagger UIで各ページの情報が取得できることを確認する
次にエンドポイントからのレスポンスを確認します。  
「お知らせ一覧」のエンドポイントを作成したAPIのページに遷移します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/052548ae1fe3eba592d0b01de25d79ce.png)

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


「お知らせ一覧」のエンドポイントの[Try it out]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/1e7db8be87b58432b75892f64a994c3e.png)

`pageID`に1を入力します。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/299a5abf624e63bc0fe7dbe475a549df.png)
[Execute]をクリックします。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/91b50a53ccfd747a2c6f242c7ca34458.png)
レスポンスを確認すると1ページ目の4件のリストと、`pageInfo`の情報が確認できます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/28e446849d1eb0926f9b16035b3626c3.png)

同様に`pageID`にページ数を入力して[Execute]をクリックすると、各ページのリストと、`pageInfo`のレスポンスが得られます。  
こちらを利用してフロントでページネーションを実装してきます。  

## 現在のページ情報をパラメータで指定する
現在のページの情報をパラメータに追加し、各ページに対応するレスポンスを得ます。  
以下の内容でファイルを作成します。  
今回は`/news_paginated/`、`/news_paginated/slug/`のディレクトリ名でページが表示できるようにファイルを作成しました。 

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

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

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

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

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

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

</TabItem>
</Tabs>

:::caution
`/rcms-api/7/news`、`/rcms-api/7/newsdetail`の部分はご自身のエンドポイントのURLに変更してください。<br/>
以下同様に、ソースコード内のエンドポイントURLはご自身のエンドポイントURLに変更をお願いします。
:::

クエリパラメータに`?page=2`を追加すると、表示されるお知らせの一覧が変更されることを確認できます。  

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

## ページ遷移のためのリンクを表示する
次にページを遷移するためのリンク部分を作成します。  
エンドポイントからのレスポンスの`pageInfo`に現在のページ数や最終ページの情報が含まれるので、こちらを利用します。  
ここでは簡単な例として`index.vue`ファイルを以下のように修正します。  
また、リンクの記述部分は流用できるよう`components`フォルダに`Pagenator.vue`のファイルを作成し、こちらに記述します。  

`index.vue`に以下の記述を追加します。

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

```diff title="/pages/news_paginated/index.vue"
      </nuxt-link>
    </div>
+    <Pagenator v-bind="{ ...response.pageInfo }" />
  </div>
</template>
```

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

```diff title="/pages/news_paginated/index.vue"
      </nuxt-link>
    </div>
+    <Pagenator v-bind="{ ...response.pageInfo }" @page-update="updatePage" />
  </div>
</template>
```

</TabItem>
</Tabs>

`/components/Pagenator.vue`を下記のように作成します。  

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

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

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

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

</TabItem>
</Tabs>

各ページへのリンクが追加できました。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/12280b097e535b22910a5c8b497aeaf4.png)

以上で、KurocoとNuxt.jsで、コンテンツ一覧ページにページネーションを実装する方法の説明を終わります。
