【自作ブログ】Contentfulで記事を作成しよう
どうも。連載の第３回目です。私も記事を書くことに少し慣れてきました。
今回はContentful側の設定について進めていきます。
下準備が続いてしまいますが、がんばっていきましょう。
Contentfulに記事用のModelを作成する
それでは早速Contentfulに記事を投稿できるようにしていきます。
Contentfulにログインする
ContentfulにはGitHubのアカウントがあれば簡単にログインできます。
また画像だらけの記事になってしまうのもアレなのでここでは省略させていただきますが、トップページから右上の「Log in」ボタンをクリックするとGitHubでログインできる画面になるので、そこからログインしてください。
ブログサイト用のSpaceを作成する
ログインが完了すると「The example project」というSpaceが自動的に作成されていると思います。
ところでSpaceとはなんでしょうか？
公式の説明には以下のように記載されています。
From the simplest perspective spaces house content types, entries, and assets. Practically speaking, however, it is more useful to think of a space as serving a particular purpose. It is not only a collection of content, it’s a collection of content with a certain goal. A space might contain content for a new marketing campaign, for a homepage, for a PIM system, or for anything else.
引用元：What are spaces and organizations?
要約すると、「ある目的を持った複数のコンテンツを管理する空間」といったところでしょうか。
今回の目的はブログの記事を作成することなのでコンテンツとしては「記事」が必要です。
さらには一般的なブログサイトに倣って「カテゴリー」と「タグ」を記事ごとに設定できるようにするので、
- 目的
- ブログの記事投稿
- 必要なコンテンツ
- 記事
- カテゴリー
- タグ
ということになり、これらのコンテンツを管理するSpaceを作成することが目的です。
では、ブログ投稿用のSpaceを作成していきましょう。
ホームページの左上の「The example project」と書かれたロゴをクリックするとメニューが表示されます。
メニュー内の「+ Create space」をクリックします。
次にSpace typeを選択します。無料で使うため一番上の項目を選択します。
続いてSpace名を入力します。任意の名前を入れて「Proceed to confirmation」をクリックします。
あとは入力内容に間違いが無いか確認して「Confirm and create space」をクリックします。
これでSpaceの作成は完了です。次はいよいよ「記事」用のContent modelを作成していきます。
Content modelを作成する
Content modelは「記事」、「カテゴリー」、「タグ」といったものがどのような要素で構成されているかを定義した物です。
まさにModelその物です。
では早速作っていきましょう。
まず画面上部の「Content model」をクリックして作成画面を表示して、「Add content type」ボタンをクリックします。
Content typeの入力画面が表示されるので以下のように入力します。
Content typeの作成が完了すると空のContent modelが作成されるので、右側の「Add field」ボタンをクリックして必要なfieldを追加していきます。
「記事」に必要な項目として、今回は以下のものを追加します。(カテゴリー、タグはあとで追加します)
| Name | description |
|---|---|
| title | 記事のタイトル |
| header-image | 記事のサムネに使う画像 |
| body | 記事の本文 |
| slug | 記事のURL（slug） |
| published-at | 公開日 |
| *category | カテゴリー（あとで追加） |
| *tags | タグ（あとで追加） |
これらはContentfulのSDKを使ってNuxt側で取得する際の項目になります。
それでは一つずつ追加していきましょう。
title
field typeは「Text」を選択します。
Nameに「title」と入力して「Create and configure」ボタンをクリックします。
Field optionsの「This field represents the Entry title」にチェックを入れて「Save」ボタンをクリックします。
これでtitleフィールドの追加が完了しました。
以下、同じように他のフィールドも追加していきましょう。
header-image
| 項目 | 設定値 |
|---|---|
| Field type | Media |
| Name | header-image |
| Field ID | headerImage |
body
記事本文になるのでName/Field ID入力時に「Long text, full-text search」を選択してください。
| 項目 | 設定値 |
|---|---|
| Field type | Text(Long text, full-text search) |
| Name | body |
| Field ID | body |
| Validations | Required fieldにチェック |
slug
| 項目 | 設定値 |
|---|---|
| Field type | Text(Short text, exact search) |
| Name | slug |
| Field ID | slug |
| Validations | Required field、Unique fieldにチェック |
| Appearance | Slug |
published-at
| 項目 | 設定値 |
|---|---|
| Field type | Date and time |
| Name | published-at |
| Field ID | publishedAt |
カテゴリーとタグは後の回で追加していきますので、一旦フィールドの登録はこれで完了です。
以下のようなModelが出来上がりました。最後に右側の「Save」をクリックするのを忘れずに。
テスト用の記事を作る
次回からいよいよブログサイトのコーディングをしていくので、その時の表示用の記事を用意しておきます。
Contentfulの上部メニューの「Content」を選択して「Add Blog Post」をクリックします。
記事作成画面が表示されますので適当に内容を入れて、最後に右側の「Publish」ボタンをクリックします。
※画像はいらすとやさんからお借りしました。
これで記事作成は完了です。お疲れ様でした。
終わりに
今回はContentfulの説明に終始してしまいましたが、次回からはいよいよContentfulに投稿した記事をNuxtで表示するまでをやっていきたいと思います。
なお、今回はテスト用の記事を１つしか用意していないので、記事を表示する際に１つだけしか出てこなくて少し寂しいものになってしまいます。
時間のある方は、できれば１０件ほどテスト記事を用意しておくとテスト時にわかりやすくなると思うので登録しておいてください。
最後に、ブログ更新の告知をしていますのでTwitterのフォローもお願いします！
それではまた次回。