KurocoとNuxt.jsで、コンテンツ一覧ページを作成する

Kurocoを利用したNuxt.jsプロジェクトで、コンテンツ定義「お知らせ」の一覧と詳細画面を表示させる方法を解説します。

備考

このページは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の設定が完了です。

Nuxt.jsにてコンテンツ一覧の表示

実際にKurocoで作成したコンテンツをNuxt.jsで表示します。

Vueファイル作成

先ほど作成したコンテンツをNuxt.jsで表示します。

Nuxtインストールディレクトリに、下記構造にてファイル作成します。
今回はpagesディレクトリ内にnewsディレクトリを作成し、その下に「index.vue」と「_slug.vue」ファイルを作成しました。

pages
 - news
   - _slug.vue
   - index.vue 

index.vueファイルの作成
index.vueファイルは、記事グループ「お知らせ」の一覧を表示させるVueです。 下記のように記載します。

<template>
  <div>
    <p>ニュース一覧ページ</p>
    <div v-for="n in response.list" :key="n.slug">
      <nuxt-link :to="`/news/${n.topics_id}`">
        {{ n.ymd }} {{ n.subject }}
      </nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    return {
      response: await $axios.$get('/rcms-api/4/news'),
    };
  },
};
</script>

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

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

_slug.vueファイルの作成
_slug.vueファイルは、記事グループ「お知らせ」の詳細を表示させるVueです。 下記のように記載します。

<template>
  <div>
    <h1 class="title">{{ response.details.subject }}</h1>
    <div class="post" v-html="response.details.contents"></div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios, params }) {
    return {
      response: await $axios.$get(`/rcms-api/4/newsdetail/${params.slug}`),
    };
  },
};
</script>

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

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

まとめ

以上でKurocoとNuxt.jsのセットアップ方法の説明を終わります。うまく表示されましたでしょうか。
このリファレンスでは下記のことが学べます。

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

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