まず、Contentfulとは何か?

Contentful公式(英語)にある、キャッチを訳してみると…

CMSがソフトウェアを出荷する途中に入ってはいけません。 Contentfulは、チームがあらゆるデジタル製品のコンテンツにパワーを与えることを可能にするコンテンツインフラストラクチャを提供します。

https://www.contentful.com/

コンテンツインフラ! おお!これだ!(こういうの探してたw)

WordPress(PHP)が好きじゃなくて、JavaScriptだけで構築できるWordPressみたいなCMSを探してたら、Qiitaの記事がヒットして発見〜♪

↓その記事はこちら

次世代Headless CMS「contentful」事始め

上の記事見たら簡単に開始できました!

contentful図解

Contentfulだと何ができて何が嬉しいのか?

【個人的に嬉しい事】

  • APIベースでView側のUIを持たないので、フロント側だけ考えれば良い。
  • APIベースだからインフラ・バックエンド部分をWebやアプリで共有。
  • インフラ・バックエンドは見なくていい。
  • SPAと相性が良さそうだから、SSRできるNuxt.jsなどのフレームワークを存分に活用できそう。
  • WordPressのRestAPI経由だとView側のUIもあるし、PHPが動くサーバー必須だけど、こっちだとNode.jsが動く環境だけ用意すれば動く。
  • APIファースト。SDKが充実していて簡単&楽チン。

【やりたかった事】

  • PHP書きたくない(書けない)
  • JavaScriptだけ書いていたい
  • ブログ作りたい
  • インフラとかDBやらのバックエンドは苦手だから触りたくない
  • ブログだしせっかくならSSRしてSEO効果に期待
  • SPA好き

構築手順

Nuxt.jsのスターターテンプレートも用意されてたので始めてみる。 → Integrate Contentful with Nuxt.js

Nuxt.jsとContentfulでブログ作ってみた

これも↑のQiitaの記事で詳しく書いてあったから超簡単だった!(ありがとうございます。)

API叩く処理とかは、スターターテンプレート見たら一目瞭然でコピペでOK!

分かりにくかったところ

  • コンテンツモデルってなんだ?
  • .contentful.jsonというAPIキーとか書く設定ファイル中の、CTF_PERSON_IDってどこにあるのか?

1. コンテンツモデルとは?

Contentfulではコンテンツモデルといって、コンテンツの構成パーツ(JSONのフィールド)を管理画面から自分で組み立てることができる。つまり、これがAPI叩いた時に返ってくるJSONになる。

コンテンツモデル

各項目のSettingsで必須項目の設定とか解除とかできた。

2. CTF_PERSON_IDの在り処

.contentful.jsonに記述する、PersonIDは、管理画面のContentタブのPerson開いた画面の右上のinfoボタン押すと、Person固有のエントリーIDが書いてあるのでそれでした。

まとめ

以上!超簡単にブログシステム構築できるので、Contentfulオススメ! 別にブログ記事じゃなくてもネットショップの商品管理としても使えそうだと思いました。

こないだ個人的に運営中のECサイトのクレカ決済に、これまたAPIベースな決済サービスのStripeを導入したのでまた記事にしてみよう。

あと、Contentfulの記事作成は、Markdownで書けるので便利でした。↓

Markdownで記事作成の画面

この記事を書いた人

こうへい

マーケティングをアーキテクトする、マーケテクトです。PDCAが趣味です。Web developer && 映像クリエイター.