ブログ構築 4. Contentfulのセットアップ #02
2019年10月12日に更新

【画像で説明】Contentfulの使い方。初期設定と各メニューについて学ぶ

今回達成すること

今回は、

  1. Contentfulへ新規会員登録を行い、
  2. スペースを作成して
  3. スペース全体の言語設定

を行います。

またContentfulのメニューについても説明していきます。

ここでContentfulの使い方をざっと学んでおきましょう。

Contentfulの無料枠については、こちらの記事に書きましたので料金が不安な方は先にご覧ください。
Contentfulの無料範囲を実際の利用状況と比較して具体的に説明する

まずは新規会員登録

まずは下のURLから、Contentfulに新規会員登録をしましょう。

https://www.contentful.com/sign-up/

Google、もしくはGithubのアカウントでも登録可能です。

下記はメールアドレスで登録する場合の入力項目です。

  • First Name

    名前を入力します。

  • Lats Name

    苗字を入力します。

  • Company

    会社名を入力します。無ければ何でもOK!!

  • プラットホーム

    プログラミング言語を選択する場所です。

    今回はNuxtjsなので、Javascriptを選択しましょう。

  • パスワード

    英語と数字を組み合わせた8文字以上のパスワードを指定してください。

それでは、メールとパスワードを入力してSign Upをクリックして会員登録しましょう。

2019-08-28 14-32-10

どのようにコンテンツを使用しますか?

「How do you usually work with content?」と聞かれますので、左のExplore content modelingをクリックします。

2019-08-28 14-52-48

最初にスペースを作成しよう

さて、ログイン画面に移行しましたので、最初にスペースを作成しましょう。

このスペースというものは、ブログ記事やカテゴリーのコンテンツ、画像や動画などのメディアを管理・作成する一プロジェクトのことです。

まず、メニュー左上のプロジェクト名をクリックし、出てきたメニュー内の+ create spaceのリンクをクリックします。

2019-08-28 15-07-28

1. Space Type

Freeを選択します。

2019-08-28 15-10-20

2. Space details

スペースの詳細設定です。

Space nameには、好きなスペース名を入力してください。

  • Create an empty space

    空っぽのスペースを作成します。

  • Create an example space

    サンプルコンテンツが自動で作成されます。

今回は空っぽのスペースCreate an empty spaceを選択しました。

入力が完了したら、Proceed to confirmationをクリックします。

2019-08-28 15-12-05

3. Confirmation

最終確認ページです。

Configrm and create spaceをクリックして完了です。

スペース全体の設定をしよう

続いてはスペース全体の設定を行います。

ヘッダーメニューのSettingsから移動してください。

Locales

デフォルト言語の設定です。

初期は英語になっているので、日本語に変更してSaveボタンで保存します。

2019-08-28 18-24-42

「すでに作成したコンテンツが壊れる可能性があります。」と注意が出てきますが、何もコンテンツを作成していないので心配ありません。

テキストフィールドに変更前の言語「en-US」を入力してGot it change localeボタンをクリックしてください。

2019-08-28 18-33-37

以上でスペース設定は完了です。

Contentfulのヘッダーメニューについて学ぶ

ここからはヘッダーメニューの説明をしていきます。

Content model

どんな形のデータが入るか、コンテンツの大枠を設計するメニューになります。

例えば、

  • blogPostと言うモデル内に
    • タイトルのTextデータ
    • 記事内容のTextデータ
    • 公開日の日付データ

が入る。

と言う感じで、自分で一から設計していきます。

Content

作成したモデルから、投稿するコンテンツを管理・作成するメニューになります。

実際にブログ記事を書くのもこのメニューとなります。

Media

画像や動画などのファイルを管理するメニューになります。

記事に画像を埋め込む場合は、ここにアップロードした画像のURLを取得して記事に表示します。

Settingsメニュー

ここにはAPIを取得するIDが表示されるメニューもあるので、ざっと目を通しておいてください。

Extensions

UIパッケージを導入した場合に表示されます。

今回は一からNuxtで作成するので利用しませんが、いろんなパッケージが用意されているようですね。

https://www.contentful.com/developers/docs/extensibility/ui-extensions/examples/

Space settings(重要)

スペースIDが表示されます。

NuxtでContantfulのAPIを取得する際に必要です。

Environments

gitで言うブランチのようなもので、サイトのバージョンを切り替える際に利用します。

Contentfulではデフォルトで「master」と言う名の環境が用意され、これが主環境となります。

コンテンツやメディアなどは「master」のデータがコピーされ、言語やUIを切り替える際に利用するよう。。

今回は利用しませんが使い方は色々あるようです。↓

https://www.contentful.com/developers/docs/concepts/domain-model/

API keys(重要)

Delivery APIPreview APIが表示されます。

2つのAPI Keyは、

  • Delivery APIは公開コンテンツを取得する
  • Preview APIはアーカイブ以外の下書きを含めたコンテンツを取得する

ために利用します。

今回構築するブログでは、開発環境のみで下書きを表示するため双方のAPI keyを利用します。

Webhooks

例えばContentfulで記事を公開したタイミングでNetlifyに自動でデプロイをする場合などに利用します。

Netlifyでは、高速化のためデプロイしたデータがキャッシュされます。

このキャッシュによってContentfulで記事を公開しても、すぐに本番環境に反映されません。

そこでキャッシュをクリアしてデプロイし直す必要があります。

手動でもできるのですが、自動でするのが便利だよね!ってことでこの機能を活用します。

フックするタイミングは、「公開したとき」「非公開にしたとき」「削除したとき」など詳細設定が可能です。

2019-08-28 22-52-32

Webhooksの設定は、Contentful API取得後に行いますので、その時に説明します。

Webhook - Netlify

Webhooks - Contentful

Content Preview

主に、本番環境で下書き記事がどう見えているか表示する場合に利用します。

今回は開発環境のみに下書きを表示するのでこの機能は使いませんが、下書きを第三者に共有して承認をもらう場合に活用しそうですね。

その場合、Nuxt側で特定の人しかアクセスできないページを作成するなどの少々込み入った設定が必要です。

Content Preview - Contentful

Usage(重要)

スペースの現在の利用状況です。

無料枠で収まっているかを確認することができます。

画面の詳細はこちらの記事に画像付きで書きました。

Contentfulの無料範囲を実際の利用状況と比較して具体的に説明する

チーム全体の無料枠の利用状況確認ページは?

チーム単位でも無料枠の制限があります。

  1. 左上スペース名をクリックすると、
  2. 出てくるメニュー、Organization settingsをクリック、
  3. そして、ヘッダーメニューUsageより

確認が取れます。

終わりに

さて今回はContentfulの準備と、各メニューについて学んでいきました。

スペースIDやAPI keysは、NuxtでContentful APIを取得する際に利用しますので、表示されるメニューを覚えておくと良いでしょう。

次回はブログの記事のモデルを作成していきます。

それではまた!

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
ブログ構築
1. 今回作るアプリケーション
#01
Nuxt.jsとContentfulで作るマイブログ
今日のTweet
スポンサー広告