Contentfulに入門してみる

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

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

https://blog.chick-p.work/blog/contentful-nextjs-blog/

# ContentfullとJAMStackについて
以下の記事がたいへん参考になります。

https://anken-hyouban.com/blog/2021/12/17/contentful/

https://blog.gini.co.jp/what-is-jamstack/


# 1. Contentfullにアカウント登録
公式ページからアカウントを登録します

https://www.contentful.com/

登録が完了したら、以下画面が表示されます。
![スクリーンショット 2023-02-26 16.01.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434874/b0c75e04-94bd-f9a1-552d-26dd8c9ae599.png)

# 2. APIキーの取得
Backend（Next.jsなど）で使用するAPIキーを発行・取得します。
スクリーンショットの赤枠をクリックし、APIキー作成画面まで遷移しましょう。
![スクリーンショット 2023-02-26 16.03.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434874/b8558193-86e6-6546-a06e-126092fb4ca9.png)
![スクリーンショット 2023-02-26 16.04.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434874/188cc073-c49a-4268-3e2c-3a19095c6fa8.png)
Description(説明文)の入力が必要になりますので、ここを適当に埋めたあと、右上の「Save」をクリックします。
![スクリーンショット 2023-02-26 16.07.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434874/56f2314c-d580-d4c2-d3c1-20b2f22c7ef8.png)
Saveしたあと、`Space ID`と`Content Delivery API`を控えます。

# 3. Content Modelの定義
続いて、ブログのコンテンツを決定するためのモデルを定義していきます。
以下の赤枠クリックして画面遷移しましょう。
![スクリーンショット 2023-02-26 16.15.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434874/f5745877-503f-17d8-69ce-74bb1fc781f6.png)
「Create new content type」で`Name`項目を入力し、`Create`をクリックします。
この時、Api Identifierを控えておきます。
![スクリーンショット 2023-02-26 16.16.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434874/0feb5141-91a7-3a01-6360-9445cceeab0c.png)
続いて、フィールドを追加していきます。以下のような構成です。

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

それでは早速フィールドを追加していきます。例としてtitleフィールドを追加してみます。
`Add field`をクリックします。
![スクリーンショット 2023-02-26 16.21.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434874/1319be18-6684-3b4c-1f62-b296c421b9bc.png)

フィールドの形式を聞かれるので、「Text」をクリックします。
![スクリーンショット 2023-02-26 16.21.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434874/cb68813b-b39d-73e8-4df1-dbc9e6ef60ca.png)

Name欄に「title」を入力したあと、`Create`をクリックします。
![スクリーンショット 2023-02-26 16.23.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434874/93e4107e-bb57-2062-c479-5bbf19d2bd6e.png)

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

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

最後に`Save`をクリックしてフィールドを保存します。
![スクリーンショット 2023-02-26 16.24.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434874/a755e5b6-77eb-b391-8d08-9f53e2a40430.png)

# 4. ブログの作成
いよいよブログ記事を作成していきます。
以下のスクリーンショットの赤枠をクリックして画面遷移しましょう。
![スクリーンショット 2023-02-26 16.38.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434874/5c566a72-1042-67e0-8653-38ddb9d11a0d.png)

`title`、`slug`、`content`を入力したあと、`Publish`をクリックして公開設定にします。
![スクリーンショット 2023-02-26 16.55.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434874/43126fa0-2234-45ca-cae8-083d1a51540c.png)

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

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