Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
  • 2022.01.03に公開
  • ブログ構築TS
  • 4. Contentfulモデル構築
  • No.2 / 6

今回達成すること

Contentfulへ会員登録し、デフォルト言語の設定、API Keyの発行を行います。

Contentfulへ新規会員登録を行う

下記リンクからContentfulに会員登録を行います。

Sign up for a free Contentful account

1. 会員登録フォームの入力

フォームの質問を適当に答えて「Sign up」ボタンで会員登録を行います。

2022-01-02 15-13-43

会員登録時のCompanyの値は後から変更可

こちらの「Company」は、スペース左上に表示されますが、下記メニューより変更可能です。

Organization settings > Organization information

2022-01-02 18-45-28

2. 登録後の質問に答える

Contentfulをどのように使用するか、CMSの知識をどのくらい有しているかを質問されます。

今回はゼロから手動セットアップを行うため、この質問には何も影響がありません。

画像を見本とし、適当に答えてください。

2022-01-02 15-21-17

3. メール認証を行う

登録したメールアドレスを確認し、メール認証ボタンをクリックします。

受信ボックス

2022-01-02 15-26-46

4. 使用するプランを決定する

リンク先にスペースを作成するボタンが現れるので、「Add a space」をクリックしてください。

2022-01-02 15-29-21

プランを選択する画面へ遷移します。

Communityプランの「Free」を選択し、

2022-01-02 15-30-00

課金対象ではない「Web app only」を選択します。

2022-01-02 15-30-25

右下より、月額$0であることを確認し、「Continue」をクリックします。

2022-01-02 15-31-28

5. 作業スペースを作成する

次の画面遷移先で、スペース名を決定します。好きな名前に変更してください。

スペース名のフォーム下で、

  • ゼロから始めるか(Empty space)
  • サンプルスベースから始めるか(Example space)

を聞かれます。

Empty space(ゼロから始める)」を選択し、「Create space」をクリックしてください。

2022-01-02 15-32-27

6 .スペースの完成

これでContantfulのアカウントと、スペースが作成できました。

Go to my space home」より、スペーストップページへ移動します。

2022-01-02 15-33-02

扱うコンテンツのデフォルト言語を設定する

スペースが扱うコンテンツのデフォルトロケール(言語)を変更します。

Settings > Locales > デフォルトロケールをクリック

2022-01-02 19-14-29

Japaneseに変更し、「Save」ボタンで保存します。

2022-01-02 19-17-20

最終確認画面が出るので、変更前のローケル「en-US」を入力し、「Got it change locale」より先へ進みます。

2022-01-02 19-20-10

複数のロケールを使用したい場合

無料枠では、2つのロケールを扱うことができます。

例えばコンテンツを日本語、英語に対応したい場合は、「Add Locale」より、英語ロケールを新たに追加します。

なお、今回は日本語のみ対応のコンテンツを作成します。

2言語対応のコンテンツ制作については、下記公式ドキュメントをご覧ください。

Adding a locale - Contentful

スペースにアクセスするAPI Keyを発行する

API Keyを発行します。「Add API key」をクリックしてください。

Settings > API keys > Add API key

2022-01-02 20-10-09

API Key の名前を付ける

Nameには、リクエストを行うプラットフォーム or デバイス名を入力します。

サイトならwebsite、アプリならappを付けて、リクエスト元を判別しやすい名前を付けてください。

Save」より保存を行います。

2022-01-02 20-14-26

発行したAPI Keyを控える

作成したAPI Keyをクリックすると、

  • Space ID
  • Delivery API - access token
  • Preview API - access token

が確認できます。

今回の開発に使用するので、3つとも控えておいてください。

2022-01-02 20-24-01

以上で今回の作業は終了です。

次回は?

Contentfulにカテゴリーモデルなどのモデルを作成します。

次回もContentful上の作業となります。

その他Contentfulの主要メニュー

Contentfulの料金確認を行うメニューリンクのご紹介

現在のプラン・制限の使用量を確認する

現在加入のプランの詳細、スペースごとの使用量は、組織メニュー「Subscription」で確認できます。

Organization settings > Subscription

2022-01-02 19-31-04

API リクエスト数を確認する

現在のAPIリクエスト数は、組織メニューの「Usage」より確認できます。

Organization settings > Usage

2022-01-02 19-34-39

スペース名の変更を行う

スペース名の変更、プラン変更は、スペースメニューの「General settings」より可能です。

Settings > General settings

2022-01-02 20-07-34

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築TSの投稿
1
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #01
Nuxt.jsをローカルPCに立ち上げよう
2
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #02
Nuxt.jsプロジェクトをGitHubにPushしよう
3
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #03
nuxt-property-decoratorのインストールとTypeScriptのセットアップ
1
  • Vuetifyセットアップ
  • /
  • #01
TypeScript環境のNuxt.jsにVuetifyを導入しよう
2
  • Vuetifyセットアップ
  • /
  • #02
VuetifyにカスタムCSSを追加してSASS変数を理解しよう
3
  • Vuetifyセットアップ
  • /
  • #03
VuetifyにカスタムSVGアイコンを追加しよう
1
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #01
Netlify CLIをインストールして本番環境のサイトを作成しよう
2
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #02
netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
1
  • Contentfulモデル構築
  • /
  • #01
Contentfulの料金とCommunityプランの無料枠を理解する
2
  • Contentfulモデル構築
  • /
  • #02
Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
3
  • Contentfulモデル構築
  • /
  • #03
Contentful ブログカテゴリーモデルを作成しよう
4
  • Contentfulモデル構築
  • /
  • #04
Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
5
  • Contentfulモデル構築
  • /
  • #05
Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
6
  • Contentfulモデル構築
  • /
  • #06
Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう
1
  • Nuxt.js×Contentfulセットアップ
  • /
  • #01
Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
2
  • Nuxt.js×Contentfulセットアップ
  • /
  • #02
Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう
3
  • Nuxt.js×Contentfulセットアップ
  • /
  • #03
ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
1
  • Vuex×TypeScriptセットアップ
  • /
  • #01
Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
2
  • Vuex×TypeScriptセットアップ
  • /
  • #02
nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
3
  • Vuex×TypeScriptセットアップ
  • /
  • #03
VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう
4
  • Vuex×TypeScriptセットアップ
  • /
  • #04
VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう
1
  • コンテンツページ構築
  • /
  • #01
ブログアプリのページ設計とNuxt.jsの動的ルーティングについて理解しよう
2
  • コンテンツページ構築
  • /
  • #02
カテゴリーのコンテンツページを作成しよう【Nuxt.js×Contentful】
3
  • コンテンツページ構築
  • /
  • #03
カテゴリーに関連付くブログ記事一覧を表示しよう【Nuxt.js×Contentful】
4
  • コンテンツページ構築
  • /
  • #04
injectを使用して共通エラー処理メソッドを作成しよう【Nuxt×TypeScript】
5
  • コンテンツページ構築
  • /
  • #05
NuxtChildを使用してブログ記事ページを作成しよう【Nuxt.js×TypeScript】
6
  • コンテンツページ構築
  • /
  • #06
タグ一覧ページとタグ関連づく記事一覧を表示しよう【Nuxt.js×TypeScript】
7
  • コンテンツページ構築
  • /
  • #07
プライバシーポリシーページを作成しよう【Nuxt.js×TypeScript】
8
  • コンテンツページ構築
  • /
  • #08
@nuxtjs/i18nのインストールとセットアップ。ページタイトルの翻訳化【TypeScript】
1
  • NetlifyFunctionsを使った検索機能
  • /
  • #01
Netlify Functionsを使ってクエリを返す関数を作成しよう【Nuxt.js×TypeScript】
2
  • NetlifyFunctionsを使った検索機能
  • /
  • #02
Netlify Functionsプロジェクトをデプロイしよう【Nuxt.js×TypeScript】
3
  • NetlifyFunctionsを使った検索機能
  • /
  • #03
Nuxt.js × axiosセットアップ Netlify Functionsにリクエストを行う準備をしよう
4
  • NetlifyFunctionsを使った検索機能
  • /
  • #04
オリジン•CORS•プリフライトリクエストを理解する【Nuxt.js×Netlify Functions】
5
  • NetlifyFunctionsを使った検索機能
  • /
  • #05
Netlify Functionsを使ってフォームバリデーション機能を構築しよう【Nuxt.js】
6
  • NetlifyFunctionsを使った検索機能
  • /
  • #06
ツールバーに表示する検索フォームを作成しよう【Nuxt.js×TypeScript】
7
  • NetlifyFunctionsを使った検索機能
  • /
  • #07
検索ページを作成しよう【Vue propsとTypeScriptの書き方 解説】
8
  • NetlifyFunctionsを使った検索機能
  • /
  • #08
Netlify FunctionsからContentfulAPIリクエストを送ろう【Nuxt.js】
9
  • NetlifyFunctionsを使った検索機能
  • /
  • #09
検索ページに「もっと見る」ボタンを実装しよう【Nuxt.js×TypeScript】
1
  • ブログMarkdown対応
  • /
  • #01
@nuxtjs/markdownitのインストールとセットアップ【Nuxt.js×TypeScript】
2
  • ブログMarkdown対応
  • /
  • #02
Nuxt.js×markdown-it 外部リンクを別タブで開くプラグインを追加しよう
3
  • ブログMarkdown対応
  • /
  • #03
Nuxt.js×markdown-it 内部リンクをVueRouterで高速にページ遷移しよう
4
  • ブログMarkdown対応
  • /
  • #04
Nuxt.js×markdown-it アンカーリンクとブログ目次を自動生成しよう
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。