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に下記を追記します。
modules: [
'@nuxtjs/axios'
],
以上でaxios-moduleのインストールは完了です。
envファイルを利用する
次に、envファイルを作成します。
APIを利用する際に、Vueファイルに直接URLやAPI KEY等を記載してしまうと第3者にみられてしまう可能性があります。
このようなセキュリティリスクを防ぐためにenvファイルを作成し、他者に見られたくない情報はenvファイルに記載するようにします。
.envファイルを作成する
Nuxt.jsインストールディレクトリ直下に .env
を作成します。
.env にはKurocoの管理画面のURLを記載します。
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に下記を追記します。
require('dotenv').config();
const { BASE_URL } = process.env;
また、module.exports
内に下記追記します。
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] をクリックします。
エンドポイントを設定する
次に先ほど作成したコンテンツ「お知らせ」を取得するエンドポイントを作成します。
今回は、「お知らせ一覧」と「お知らせ詳細」の2つのエンドポイントを作成します。
まずはお知らせ一覧のエンドポイントを作成します。
[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です。 下記のように記載します。
<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です。 下記のように記載します。
<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コンテンツの表示
こちらを応用し、ご自身のサイトを構築してみて下さい。