Monacaアプリへのコンテンツ配信を効率化！おすすめのヘッドレスCMS 7選

ここ数年で聞かれるようになったのがヘッドレスCMSという言葉です。本記事では、ヘッドレスCMSとは何かを紹介し、主立ったヘッドレスCMSサービスの紹介、そしてMonacaアプリの中でどう使えば良いかを解説します。

ヘッドレスCMSとは

まず、CMSとは「Content Management System」の略で、コンテンツを管理するためのシステムのことです。有名なところではWordPressやDrupalなどのオープンソースCMSがあったり、企業向けにはSitecoreやAdobe Experience Managerなどがあります。

従来のCMSで管理するコンテンツは主にWebサイト向けでした。そのため、コンテンツの管理と表示が一体化していても特に問題ありませんでした。しかし、最近ではモバイルアプリやデジタルサイネージ、IoTデバイスなど、Webサイト以外のデバイスにもコンテンツを配信するニーズが出てきました。このような場合、従来のCMSではプラグインや拡張によって対応するのが一般的でした。

そうした中で生まれたのがヘッドレスCMSです。ヘッドレスCMSではコンテンツの管理機能だけを提供し、表示部分は利用者が開発します。これにより、コンテンツ表示の自由度が高まり、カスタマイズも容易になります。

従来のCMSとヘッドレスCMSの違い

従来のCMSはコンテンツの管理と表示が一体化しているのが一般的です。そのため、管理画面の中でテーマ管理機能があったり、HTMLを記述して表示方法を制御します。一方、ヘッドレスCMSではコンテンツの管理機能だけを提供し、そのコンテンツはAPIによって配信します。一般的にコンテンツはJSON形式で配信され、表示をどうするかはクライアント側で制御します。

また、従来のCMSでは対象をWebサイト向けとするケースがほとんどでした。ヘッドレスCMSではWebサイトでの利用はもちろんのこと、モバイルアプリやIoTなど幅広く利用できます。管理画面を変更すれば、多数のクライアントの表示コンテンツを差し替えられるのが大きなメリットです。

逆にヘッドレスCMSではクライアント側の画面や表示機能を持っていないため、ちょっとしたWebサイトを作るのには工数が大きく感じてしまうでしょう。また、WordPressやDrupalなどでは機能拡張としてJSON APIを提供するプラグインがあるため、ヘッドレスCMSと同じような使い方もできます。

主要なヘッドレスCMS

ヘッドレスCMSは国内外に多数のサービスがあります。ここでは、主要なヘッドレスCMSサービスを紹介します。

microCMS

国産のヘッドレスCMSです。APIアクセス数や転送量での課金がないので、定額で利用できるのが便利です。また、日本語のドキュメントが充実しているので、日本語での利用がしやすいです。

主な機能はコンテンツの設計と配信、マネジメントAPI、画像API、権限管理などがあります。JavaScript SDKに加えて、iOSやAndroid向けのSDKも提供されています。バックエンド向けにはPHP、Go、Ruby SDKがあります。

microCMS｜APIベースの日本製ヘッドレスCMS

Newt

Newtも国産のヘッドレスCMSです。管理画面でのコンテンツ表示が綺麗で、ギャラリービューなどさまざまな表示方法が提供されています。

Appという単位でコンテンツと管理者を管理できます。App単位で管理することで、効率的なコンテンツ管理を実現します。

JavaScript SDKが提供されています。

コンテンツ管理の新しいスタンダード | ヘッドレスCMS「Newt」

Kuroco(クロコ)

Kurocoは国産のヘッドレスCMS、特に企業での利用が多いサービスになります。機能が豊富で、かつカスタマイズも多彩なサービスとなっています。

料金体系は、利用するリソースと利用量による従量課金となっています。月1,100円までは無料利用できます。

JavaScript SDKが提供されています。

Kuroco(クロコ) | 導入実績5000社以上の国産エンタープライズ・ヘッドレスCMS

Contentful

Contentfulはグローバルで最も有名なヘッドレスCMSの一つです。コンテンツのビジュアル設計ができ、さらにAIによるサジェスト機能もあります。

CDNによる高速なコンテンツ配信、マーケターなど技術者ではない方にとっても使いやすいUIなどが特徴です。マーケットプレイスには連携できるサービスが多数あります。

SDKは多彩で、JavaScript、PHP、Android、iOS、Java、Python、Ruby、.NETなどがあります。

Where content drives business momentum | Contentful

Strapi

StrapiはNode.js製のオープンソースのヘッドレスCMSです。データベースはMongoDB、PostgreSQL、SQLite、MySQLに対応しています。

APIはRESTfulとGraphQLが利用できます。オープンソースなので自分でホストできますが、Strapi Cloudというクラウドサービスもあります。

SDKはJavaScriptが提供されています。

Strapi - Open source Node.js Headless CMS 🚀

Sanity

SanityはヘッドレスCMSの中でも、特にリアルタイム編集とコラボレーションに焦点を当てたサービスになります。

Sanity UIというReact向けのUIコンポーネント集が提供されており、カスタマイズも容易です。また、Sanity自体はGraphQLにも対応しています。

Sanity: The Composable Content Cloud

Storyblok

Storyblokは、コンテンツのビジュアル設計ができるヘッドレスCMSです。コンテンツのプレビューがリアルタイムでできるのが特徴です。実際に表示している画面の中で、コンテンツを編集できるので、デザイナーやマーケターにとっても使いやすいです。

コンテンツブロックという単位でコンテンツを管理でき、コンテンツの再利用がしやすくなっています。

SDKはJavaScriptが提供されています。

Headless CMS: The way to modern content | Storyblok

ヘッドレスCMSを利用するメリットと向き不向き

ヘッドレスCMSを利用することで、コンテンツの自由度と再利用性が高まります。特にWebとモバイルアプリなど、複数の環境に対してサービスを提供している場合はメリットが大きいでしょう。

ヘッドレスCMSを利用しない場合、コンテンツの更新を都度エンジニアなどの専門部署に依頼する必要があります。ヘッドレスCMSを利用することで、運営担当者が自分でコンテンツ配信をコントロールできます。これは開発部門にとっても負担が減るメリットがあるでしょう。

コンテンツの更新が頻繁に行われるアプリやWebサイトの場合、ヘッドレスCMSを導入するメリットが大きいと言えるでしょう。ただし、表示に際してのカスタマイズが多い場合は、ヘッドレスCMSを利用することで開発工数が増える可能性があります。文字列の長さなども注意が必要です。

ヘッドレスCMSは一般的にクラウドサービスで提供され、インターネット接続が必須です。そのため、オフライン利用が多いアプリの場合、最新コンテンツがうまく配信されません。もちろん、どのようなアプリであってもコンテンツのキャッシュ機能を用意する必要があるでしょう。ネットワーク速度を重視するアプリの場合も、ヘッドレスCMS導入による表示速度低下が発生しないか、注意が必要です。

Monacaでの利用

今回はmicroCMSを例に、MonacaアプリでヘッドレスCMSを利用する方法を紹介します。

microCMSの設定

今回はお知らせを使ってみます。これはmicroCMSが用意してくれているものです。お知らせはリスト型のコンテンツになります。

Monacaアプリでの利用

今回はReact + Framework7のプロジェクトをベースとしています。

まずSDKをインストールします。

npm install microcms-js-sdk

幾つかの画面でmicroCMSを利用することを想定し、 src/js/microcms.js を作成し、以下のようなコードを書きます。

// microCMS
import { createClient } from "microcms-js-sdk"; //ES6

// Initialize Client SDK.
const client = createClient({
    serviceDomain: "YOUR_DOMAIN",
    apiKey: "YOUR_API_KEY",
    retry: true,
});

export default client;

YOUR_DOMAIN はmicroCMSの管理画面のサブドメインです。例えば https://your-domain.microcms.io の場合、 your-domain がサブドメインになります。 YOUR_API_KEY はmicroCMSの管理画面で取得できるAPIキーです。

お知らせの一覧を取得する

まず上記ファイルをインポートします。

import client from "../js/microcms";

画面を表示したタイミングで、お知らせの一覧を取得します。 res.contents の中にお知らせの一覧が入っています。

const [information, setInformation] = useState(null);
useEffect(() => {
    getInformation();
}, []);

const getInformation = async () => {
    const res = await client.get({
        endpoint: "news",
    });
    setInformation(res.contents[0]);
};

上記コードで、 information にお知らせの一覧が入ります。これを画面に表示するなどして利用します。