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

Kurocoを利用したNuxt.jsプロジェクトのセットアップ方法を紹介します。
今回はコンテンツ定義「お知らせ」の一覧と詳細画面をNuxt.jsで表示させます。

Nuxt.jsのインストール

まずはNuxt.jsをインストールします。 Nuxt.jsをインストールするために、vue-cli を利用します。
まずはターミナルで下記実行します。

npm install -g vue-cli

vueコマンドが使えるようになったことで、nuxt/starterテンプレートを使って新しいプロジェクトが作成できるようになりました。
次に下記実行します。

npm init nuxt-app project-name

注意) project-nameにはお好きな名前を入力して下さい。

次に、複数の質問が聞かれるので回答します。今回は下記のように入力しました。

Project name: project-name
Programming language: JavaScript
Package manager: Npm
UI framework: 設定なし
Nuxt.js modules: Axios
Linting tools: 設定なし
Testing framework: 設定なし
Rendering mode: Universal (SSR / SSG)
Deployment target: Static (Static/Jamstack hosting)
Development tools: 設定なし
What is your GitHub username? (ご自身のGitのusername)
Version control system: Git

全ての質問に回答するとproject-name ディレクトリが作成されますので、作成されたディレクトリに移動します。

cd project-name

下記実行し、Nuxt.jsをインストールします。

npm install
npm run dev

これでNuxt.jsがインストールされました。ターミナルには下記のような表示がされます。

上記の場合、http://localhost:3000/ にアクセスすると、下記の画面が表示されます。

axios-moduleインストール

次にAxios Moduleをインストールします。

Axios Moduleについての詳細は Introduction nuxt/axios のページをご参照ください。

下記実行し、axios-moduleをインストールします。

npm install --save @nuxtjs/axios

次に、nuxt.config.jsに下記を追記します。

nuxt.config.js

  modules: [
    '@nuxtjs/axios'
  ],

以上でaxios-moduleのインストールは完了です。

envファイルを利用する

次に、envファイルを作成します。

APIを利用する際に、Vueファイルに直接URLやAPI KEY等を記載してしまうと第３者にみられてしまう可能性があります。
このようなセキュリティリスクを防ぐためにenvファイルを作成し、他者に見られたくない情報はenvファイルに記載するようにします。

.envファイルを作成する

Nuxt.jsインストールディレクトリ直下に .env を作成します。 .env にはKurocoの管理画面のURLを記載します。

.env

BASE_URL = https://example.kuroco.app

注意) example.g.kuroco.app にはご自身のKuroco管理画面にあるAPIドメインをご記入ください。 APIドメインは、Kuroco管理画面の[API]ページより確認できます。

GitHub上でファイル管理する場合、envファイルは.gitignoreにて公開されないようにして下さい。

dotenvをインストールする

Nuxt.jsインストールディレクトリにて下記実行し、dotenvをインストールします。

npm install @nuxtjs/dotenv

nuxt.config.jsへdotenvを追記する

nuxt.config.jsに下記を追記します。

nuxt.config.js

require('dotenv').config();
const { BASE_URL } = process.env;

また、module.exports 内に下記追記します。

nuxt.config.js

  env: {
    BASE_URL
  }

下記のようになります。

以上でNuxt.jsの設定は完了です。

Kurocoの設定

次にKuroco管理画面にログインし、Kurocoの設定を行います。

コンテンツの作成

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

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

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

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

API基本設定を行う

次にAPIの設定を行いますので、Kuroco管理画面より [API] をクリックしてください。

[セキュリティ]をクリックし、「Cookie」を選択します。

注意)
Cookieをセキュリティ用のトークンとして利用する場合、APIドメインとフロントエンドのドメインが違うとサードパティクッキーの問題があり、Safari等で認証が効きません。
フロントエンドとAPIドメインをサブドメイン違いで設定をする必要があるので、独自ドメイン/TLS証明書でAPIドメインを設定し、アカウント設定からAPIドメインを変更ください。
（Chromeでは正常に動作しますので、開発やテストの段階ではまずChromeで構築していただくことをお勧めします。）

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

CORS設定を行う

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

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

http://localhost:3000/

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

GET
POST

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

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

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

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

下記記載します。

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

また、画面中央にある「topics_group_id」にコンテンツ定義「お知らせ」のグループIDを入力してください。

参考) グループIDはコンテンツ定義一覧画面より確認できます。

全て入力したら、画面上部または下部の「Add」をクリックします。

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

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

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

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

以上で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です。下記のように記載します。

index.vue

<template>
  <div>
    <div v-for="n in response.list" :key="n.slug">
      <nuxt-link :to="'/news/'+ n.slug">{{n.ymd}} {{n.subject}}</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
    async asyncData ({ $axios }) {
        try {
            const response = await $axios.$get(process.env.BASE_URL + '/rcms-api/2/news')
            return { response }
        }catch (e) {
            console.log(e.message)
        }
    }
}
</script>

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

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

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

_slug.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 }) {
        try {
            const response = await $axios.$get(process.env.BASE_URL + '/rcms-api/2/newsdetail/' + `${params.slug}`)
            console.log(response);
            return { response }
        }catch (e) {
            console.log(e.message)
        }
    }
}
</script>

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

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

まとめ

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

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

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

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