Contentfulに入門してみる

はじめに

Contentfullにアカウント登録して記事を登録するまでの記録です。
自分の簡易的なブログが欲しくなったので、流行り?のJAMStack構成で作ってみるかと思ったのがきっかけです。

なお、全て以下のブログを参照させていただいています。感謝🙏

ContentfullとJAMStackについて

以下の記事がたいへん参考になります。

1. Contentfullにアカウント登録

公式ページからアカウントを登録します

登録が完了したら、以下画面が表示されます。

2. APIキーの取得

Backend（Next.jsなど）で使用するAPIキーを発行・取得します。
スクリーンショットの赤枠をクリックし、APIキー作成画面まで遷移しましょう。


Description(説明文)の入力が必要になりますので、ここを適当に埋めたあと、右上の「Save」をクリックします。

Saveしたあと、Space IDとContent Delivery APIを控えます。

3. Content Modelの定義

続いて、ブログのコンテンツを決定するためのモデルを定義していきます。
以下の赤枠クリックして画面遷移しましょう。

「Create new content type」でName項目を入力し、Createをクリックします。
この時、Api Identifierを控えておきます。

続いて、フィールドを追加していきます。以下のような構成です。

Name	Field	説明
title	Text	ブログタイトル
slug	Text	ブログのURLパス
content	Rich text	ブログ本文（URLリンクやメディアの埋め込みが可能）

それでは早速フィールドを追加していきます。例としてtitleフィールドを追加してみます。
Add fieldをクリックします。

フィールドの形式を聞かれるので、「Text」をクリックします。

Name欄に「title」を入力したあと、Createをクリックします。

これでtitleフィールドが追加できました。このようにして残りのslugフィールドとcontentフィールドを追加していきます。

※contentフィールドはRich Textを選択してください！

最後にSaveをクリックしてフィールドを保存します。

4. ブログの作成

いよいよブログ記事を作成していきます。
以下のスクリーンショットの赤枠をクリックして画面遷移しましょう。

title、slug、contentを入力したあと、Publishをクリックして公開設定にします。

以上で投稿作業は終わりです。
これで終わりだと「じゃあどこで投稿したブログを見れるの？」となってしまいますね。これはContentfullがヘッドレスCMSだから仕方ない話です……。

次の記事ではNext.jsを使用して作成したブログ記事を表示させる処理を行っていきたいと思います。