Contentfulのアカウントを作成しよう

BlackJAMでは、記事をはじめとするコンテンツを、Contentfulというサービス上で用意します。データベースの代わりのようなものだと思ってください。 Contentfulトップページの「Try for free」から、Contentfulのアカウントを作成してください。

後ほど、GitHubアカウントとの連携が必要になるので、GitHubアカウントでサインインするのがお薦めです。

Spaceを作成しよう

Contentfulで記事を作成するには、Spaceというものを作成する必要があります。

アカウントが作成できたら、ユーザーページの左上のメニューボタンを押して、サイトバーを表示させてください。

サイドバー上部の「＋Create space」を押すと、Spaceの作成に入ります。「Space Type」は「Free」を選び、「Create an empty Space」を選択して、任意の名前をつけてください。

ContentTypeを作成しよう

Spaceが作成できたら、これから作成していくデータの型（＝記事や著者情報といったデータがどのような項目を含むかを決めるもの）になるContent Typeを作成していきます。

Postタイプを作ろう

Spaceのメインページから「Create a content type」をクリックすると、Content Typeの作成に入ります。はじめに、記事データ用のContent Typeを作りたいので、名前を「Post」としてください。その他の項目は操作しなくて構いませんので、そのまま「Create」を押してください。

続いて、「Post」というタイプのデータがどのような項目（field）を持つかを定めます。まず、記事タイトル用のフィールドとスラッグ（個々の記事を特定するためのID）用のフィールドを作りましょう。

Content Typeのメインページ右の「Add fields」を押すと、そのタイプの持つ項目を追加できます。

タイトルフィールド：「Text」、「Short text」を選び、「Title」と名前をつけます。特に詳細設定の必要はないので、そのまま「Create」を押してください。

スラッグフィールド：「Text」、「Short text」を選び、「Slug」と名前をつけます。今度は、「Create and Configure」を押してください。「Validation」タブにて「Unique field」を選びます（スラッグはIDとして用いるので、重複させないための設定です）。さらに「Apperance」タブにて「Slug」を選んでください（これにより、タイトルを入力すると自動でスラッグが生成されるようになります）。

同様の方法で、残りのフィールドを作っていきます。必要なフィールドと設定方法は以下に正確に従ってください。

フィールド	名前	タイプ
タイトル	Title	Short text
スラッグ	Slug	Short text
日付	Date	Date & time
カテゴリ	Category	Reference (one)
タグ	Tags	Reference (many)
イントロ	Intro	Long text
本文	Content	Long text
サムネイル	Image	Media
おすすめ	Featured	Boolean

最終的に、このようなContent Typeができます。

残りのContent Typeを作ろう

同様にして、著者情報に関するデータ「Auhtor」を作っていきます。

ページ上部の「Content Model」タブへ移り、右側の「Add field」を押すと、新しいContent Typeを作成できます。名前を「Author」とし、フィールドは以下の通りに作成してください。

フィールド	名前	タイプ
名前	Name	Short text
紹介文	shortBio	Long text
アバター	Avatar	Media
Twitterアカウント	twitter	Short text

加えて、カテゴリ（Category）、タグ（Tag）用のTypeを作ります。共に、次の通りにフィールドを作成してください。

フィールド	名前	タイプ
名前	Name	Short text
スラッグ	Slug	Short text

APIキーを取得しよう

以上でContent Typeの作成は完了です。最後に、Nuxt.jsとの連携に必要なAPIキーを作成します。ページ上部の「Apps」タブに移動し、右の「Add API Key」をクリックするだけです。

必要になるのは、「Space ID」と「Content Delivery API - access token」の２つです。

次のパートでは、ContentfulとNuxt.jsプロジェクトを連携させることで、サイトにContentfulのデータを表示できるようにします。