Zenn
🗂

Contentfulに入門してみた

2021/06/07に公開
Contentful
tech

はじめに

Contentfulを使ってエンジニア用のブログサイトを構築する検討をするため、

  • Contentfulとは何か
  • markdownのレンダリングを組み込めそうか
    • iframeとか、数式とかもできそうか

などなどを雑多に集めて自分なりに整理してみたので、記事としてまとめようと思います。

やってみたこと

とりあえず、「ひとまずmarkdownをレンダリングする最小アプリを作ってみる」までに必要な情報を片っ端から集めてみました。
（実際に使ってみた結果は、別な記事にしたいと思います　→しました：https://zenn.dev/katoaki/articles/962f5dd6401f2d

Contentfulって何？

Contentfulとは「ヘッドレスCMS」です。

API-first content platform to build digital experiences | Contentful https://www.contentful.com/

「Content」単位で記事を作成します。
「Content」で入力できる項目は「Content model」で定義します。
なお、「Content model」を定義しないと「Content」は作成不可です。

Next.jsとの連携

Next.js製アプリからAPIを通して連携することができます。

「Content Delivery API」を利用して記事を取得することができます。
APIには「Space ID」と「access token」が必要となります。
access tokenはデフォルトで用意されているものがあり、Contentfulの設定ページから取得することができます。

実際に動かしてみるまでの流れはこちらのサイトがとてもわかり易かったです

Next.js + Contentful CMS Tutorial https://www.netlify.com/blog/2020/08/17/integrate-next.js-contentful/
React/Next.js, Contentful, Material-UIを使ってブログを作り、Vercelで公開します。 | Satoru Akiyama https://satoruakiyama.com/blog/building-blog-with-nextjs-and-contentful-ja

記事をmarkdownで書く方法について

Contentfulではmarkdownで記事を書くことができます。
ただ、所見ではちょっとわかりにくいかな？と感じるところがあったのでその点を補足します。

Content Modelでfieldを設定する際に、「Text」を選択します（「Rich text」ではありません）。
その後「Long text...」を選択し、その後「create and configure」ボタンを選択します。
「Appearanceタブ」を選択すると、表示形式を選択できるのでここで「Markdown」を選択します。
スクショでまとめるとこんな感じです

markdownのレンダリング

markdownでユーザが書いた記事は、markdownパーサを利用した上で、ReactのdangerouslySetInnerHTMLと組み合わせ、レンダリングされたmarkdownをHTMLに変換して表示ことができます。
なお、HTMLじゃなくてReactElementに変換すべきというのもあるので、その場合には以下のようなライブラリが利用できます

上記のように色々方法はありますが、自分はmarkdown-itを利用してHTMLで吐きたかったので、そういった方法を取ることにしました。

iframeとか、数式とかも対応できそうか

以下のmarkdown-itのプラグインをライブラリを利用すれば、簡単にiframeや数式に対応することが確認できました。
（実際に使ってみた結果は、別な記事にしたいと思います）

Discussion