はじめに
JAMStack でサービスを作りたいなと思い、前から気になってたヘッドレス CMS の Contentful を使ってみました。
ブラウザから投稿するのは簡単でしたが、フロントから Contentful へ POST リクエストをする方法がドキュメントを見ても分かりにくかったのでまとめました。
いろんな方法があると思うので、あくまで一例として参考になれば幸いです。
##設定条件
【対象】 Contentful を導入済みで、すでに GET の方法までは確認済みの方。
- contentful-cli を入れる(contentful-cli 導入コマンド確認)
【ゼロから始める場合】以下の設定から始めます。
- Nuxt.js でディレクトリを作る(nuxt パッケージをインストール)
- Contentful を導入する
Contentful の導入から GET まではこちらの記事が参考になります 
(引用：ぐるたかログ「 Nuxt に Contentful を設定する方法。導入からデータ取得までの流れをまとめてみた【スクショあり】」)
POST 用に API キーを作成する
自分専用の POST 用 API キー（トークン）を作成する必要があります。
① Contentful 上で、作成済のスペースのメニューの Settings で API Keys を選択
② Content management tokens を選択し、「 Generate personal token 」ボタンで自分専用のトークンを作成する（トークンはメモしておく
）
##環境 ID ・コンテントタイプ ID を確認（メモする）
環境 ID・・・スペースのメニュー「 Setting 」 → 「 Environments 」 → 「 Environment ID 」
コンテントタイプ ID ・・・スペースのメニュー「 Content 」 → 「 Info 」 → 「 CONTENT TYPE ID 」
.env で変数にして nuxt.config.js に追記する
.env にメモした上記 3 つを追記します。今回自作したトークンは「 CTF_FOR_MY_APP_TOKEN 」としています。
その後、nuxt.config.js ファイルの env 欄に下記のように追記します。
スクリプトにコードを記述
POST 用のページを今回は Nuxt.js で作成しているので、script タグ以下に記述。
フォーム入力のデータは v-model で紐付けをしています。
まずは必要な定数を定義します。
トークンは先程設定した自作トークンの内容です。
const contentful = require('contentful-management')
const client = contentful.createClient({
accessToken: process.env.CTF_FOR_MY_APP_TOKEN
})
フォームのデータ部分も最初は null で入力しておきます。（単語帳として、v-model で紐付け済）
data() {
return {
formData: {
word: null,
meaning: null
}
}
},
POST 用のメソッドを作成
Contentful のスペースにアクセスして、環境 ID を呼び出し新規エントリー（POST 内容）を作成する流れです。
環境 ID なしで最初行いましたが、非推奨ということなので書き換えました。
createEntry する際はコンテントタイプ ID が必要になります。
methods: {
async postWord() {
const mySpace = await client.getSpace(process.env.CTF_SPACE_ID)
const myEnvironment = await mySpace.getEnvironment(
process.env.CTF_ENVIRONMENT_ID
)
const res = await myEnvironment.createEntry(
process.env.CTF_CONTENT_TYPE_ID,
{
fields: {
word: {
'en-US': this.formData.word
},
meaning: {
'en-US': this.formData.meaning
}
}
}
)
await res.publish()
console.log(res)
}
}
注意ポイント
Contentful の仕様上、fields 内に POST する内容を入れていきますが、上記のようにバリデーションを指定してオブジェクト形式にしないとエラーが出てしまうので要注意です。
あと、POST するだけだとドラフトのままなので、 publish() で最後に公開状態に変更しています。
##まとめ
Contentful は POST でリクエストする際のオブジェクトの書き方が特殊で、ドキュメントを参考にしても分かりにくい部分が多いですが、GET で扱う場合はいろんな扱い方が出来そうなので可能性は大きそうです。
仕様に慣れれば使いやすそうなので（もちろん Contentful のサイトから直接投稿するのは簡単です）、他でも使っていきたいと思います 