ヘッドレスCMSの Contentful と Vue.js を用いて記事を取得するまでの流れです。
この記事では Vue.js でやってますが、Nuxt.js の方が楽なのでおすすめです。
どちらかというと、Contentful を使うまでの設定についてのまとめです。
Contentful の準備
※管理画面からもできるので、「Vue.jsで使う準備」まですっ飛ばしてください。
- Space の作成
- Content Model の作成
- API Key の作成
Contentful CLI のインストール
macなら
brew install contentful-cli
windows or macなら
yarn global add contentful-cliログインする
contentful loginキーを貼り付けると、~/.contentfulrc.jsonが作成される。contentful logoutするとキーが削除される。
space を作る
contentful space create --name 'スペース名'Contentful のウェブサイトからも作成できます。
スペースを作ったら、WordPressでいうところの「投稿タイプ」を管理画面の Content Model から作成します。
space を選択する
contentful space useどのスペースを使うか聞かれるので選びます。
アクセストークン作成
contentful space accesstoken create --name トークン名登録したトークンは管理画面の Settings -> API Key から確認できます。
vue.js で使う準備
Contentful を追加
vue createなどで既にプロジェクトを作成していることが前提とします
プロジェクトディレクトリにて、contentful を追加
yarn add contentfulプラグインの作成
./plugins/contentful.js
const contentful = require('contentful')
// use default environment config for convenience
// these will be set via `env` property in nuxt.config.js
const config = {
space: process.env.CTF_SPACE_ID,
accessToken: process.env.CTF_CDA_ACCESS_TOKEN
}
// export `createClient` to use it in page components
module.exports = {
createClient () {
return contentful.createClient(config)
}
}公式のリファレンスだと Nuxt.js での使用方法なので、少し書き換えます。
Vue.js の環境変数はVUE_APP_の接頭辞が必要なので、加えておきます。
space: process.env.CTF_SPACE_ID,
accessToken: process.env.CTF_CDA_ACCESS_TOKEN
↓
space: process.env.VUE_APP_CTF_SPACE_ID,
accessToken: process.env.VUE_APP_CTF_CDA_ACCESS_TOKEN/.env.local
ローカルでのみ使用する環境変数ファイルです。
Contentful 管理画面の Settings -> API Key から確認できます。
これごとサーバーにあげてしまうと、トークンがバレてしまうので注意。
VUE_APP_CTF_SPACE_ID=<スペースID>
VUE_APP_CTF_CDA_ACCESS_TOKEN=<アクセストークン>記事の取得
Contentful の方で適当に記事を投稿したら、実際に取得してみます。
/src/main.js
とりあえず<記事ID>に欲しい記事のIDを指定。
記事の編集画面のURLがhttps://app.contentful.com/spaces/<スペースID>/entries/<記事ID>
となっているので、URL末尾を貼り付けます。
<template>
<div id="app">
<section v-if="post">
<h1>{{ post.fields.title }}</h1>
<div>{{ post.fields.content }}</div>
</section>
</div>
</template>
<script>
import { createClient } from "@/plugins/contentful";
export default {
name: "App",
data() {
return {
post: null
};
},
async mounted() {
await createClient()
.getEntry({
entry_id: "<記事ID>"
})
.then(post => {
this.post = post;
});
}
};
</script>起動
yarn serveこれで表示できれば成功。
これだけでは使い物になりませんが、一覧ページや詳細ページの作成はまたいずれ。