Contentfulの料金とCommunityプランの無料枠を理解する
  • 2022.01.02に公開
  • ブログ構築TS
  • 4. Contentfulモデル構築
  • No.1 / 6

今回達成すること

Contentfulの料金と、無料プランの制限について解説します。

Contentfulとは

Contentfulとは、ヘッドレスコンテンツ管理システム(CMS)です。

今回は、ブログカテゴリーや記事などのコンテンツを管理するために使用します。

従来のCMS、WordPressなどとは違い、記事やカテゴリー一覧などのUIは用意されていません。

Contentfulは、APIリクエストでコンテンツを取得する前提のサービスとなっており、UIは自分自身で用意します。

このAPIでコンテンツを取得する前提が、ヘッドレスと呼ばれる所以です。

Contentfulの料金プラン

Contentfulプランは3つあります。

  1. Community(無料)
  2. Team(US $489)
  3. Enterprise(要相談)

料金の詳細: Contentful Pricing

今回作成するブログでは、Communityプランを使用し無料の範囲で運用します。

そこで、Contentfulの無料プランを使用するにあたって、最低限知っておくべき無料枠を押さえておきましょう。

下記は全て2022年1月現在の情報です。

ユーザー

コンテンツを管理するユーザーです。

無料枠の共有ユーザーは5人までです。

ロール(権限)

ユーザー毎に管理者、編集者などの権限を管理することができます。

無料枠のロールは2つ、管理者と編集者のみです。

有料プランのロール数を確認する: Contentful Pricing

スペース

コンテンツを管理する場所です。

Webアプリで言うところのデータベースです。

無料枠は、1つのスペースを作成することができます。

2019年のContentfullは、無料プランでも2つのスペースを作成できましたが、2022年1月現在では1つのスペース制限となりました。

参考: Technical Limits | Contentful

コンテンツタイプ

コンテンツタイプはコンテンツモデルと同意語です。

コンテンツにどのような値を持たせるかを設定するモデルデータです。

Webアプリで言うところのテーブル + モデルの役割を担います。

例えばブログの場合、

  • カテゴリー
  • 記事
  • タグ

などのコンテンツタイプを作成し、このルールに沿ってそれぞれのコンテンツを作成します。

無料枠は、48個のコンテンツタイプを保有することができます。

レコード

Contentfulに保有できるコンテンツ数です。

無料枠は、25,000データを保管することができます。

レコード数の実例

例えばこの「独学プログラマ」は、Contentfulの無料枠で運用されています。

  • 記事数 150本
  • ビデオ記事 100本

上記250本の記事に関連付くカテゴリーや画像を含むと、現在の保存レコード総数は1,100データ程度です。

個人ブログや小規模なECサイトは、十分に無料の範囲で運用可能です。

2022-01-01 21-51-49

APIリクエスト

無料プランのAPIリクエスト回数は、200万回/月となります。

200万回を越えると、プランによって対応が変わります。

  • Community(無料)プランの場合、追加請求されず、次の月までパフォーマス低下の可能性
  • Teamプランの場合は、$5/1,000,000 APIリクエスト/月で請求

この値は、登録日時から1月毎にカウント、リセットを繰り返します。

app.contentful.com > Organization settings > usage

2022-01-02 11-56-47

本番環境のAPIリクエスト数

今回構築するブログでは、% yarn generateコマンド実行時にContentfulにAPIリクエストを投げ、全てのコンテンツを取得し、サーバサイドでHTML生成するを方法を採用します。

ですので、APIリクエスト数はブログPV数に影響しません。

しかし、middlewareなどを使用してクライアントサイドからContentfulにAPIを投げる場合は、PV数に影響するので注意が必要です。

APIリクエスト数の確認

本番環境のAPIリクエスト数を確認するには、「CDA Requests」のタブを確認します。

CDM = Content Delivery API

Doc: Content Delivery API - Contentful

app.contentful.com > Organization settings > usage > CDA Requests

2022-01-02 12-34-23

開発環境のAPIリクエスト数

開発環境では、公開前の下書き記事を表示し、ローカルでレイアウトを確認する必要があります。

この時Contentfulに投げるコンテンツAPIリクエストは、本番環境と違うURLとなります。

  • 本番環境 APIリクエスト先(Publish Only) ... https://cdn.contentful.com

  • 開発環境 APIリクエスト先(Draft + Publish) ... https://preview.contentful.com

APIリクエスト数の確認

開発環境時のAPIリクエスト数を確認するには、「CPA Requests」のタブを確認します。

CPA = Content Preview API

Doc: Preview API - Contentful

app.contentful.com > Organization settings > usage > CPA Requests

2022-01-02 12-17-23

CMA Requestsって?

コンテンツマネジメントAPIの略で、アカウント設定の操作や、コンテンツタイプの作成・更新を行うAPIです。

これは、プログラムでAPIをリクエストするのみならず、ブラウザ上のContentful操作でもリクエスト数がカウントされます。

多数のユーザーが、頻繁にContentfulのアカウントにアクセスするような場合は、チェックをしておいた方が良いでしょう。

まとめ

Contentfulの料金について、これだけ知っておけば課金に不安なく使用できると思います。

その他プランによる細かい制限は、Contentfulが用意している料金ページをご確認ください。

次回から

Contentfulに会員登録を行い、スペースの作成とContentfulの初期設定を行います。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築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制作のご依頼は下記メールアドレスまでお送りください。