🕶️

次世代のヘッドレスCMS - Strapiの紹介 (日本語画面キャプチャ付)

に公開
API
CMS
headless
contents
tech

オープンソースのCMSではWordpressやDrupalがまだ主流かと思います。しかし、よりシンプルなヘッドレスというCMSが海外で普及し始めています。本記事では、開発者界隈で人気急上昇中のオープンソース・ヘッドレスCMS「Strapi」について、その魅力と基本的な使い方、そして具体的な活用事例までを深掘りして解説します。

概要

Strapiは、Node.js製のオープンソース・ヘッドレスCMSです。ヘッドレスCMSとは、従来のCMSのようにフロントエンド（Webサイトの見た目）とバックエンド（コンテンツ管理機能）が一体化しておらず、バックエンド機能に特化しているのが特徴です。

Strapiを使えば、コンテンツを管理するための使いやすい管理画面と、そのコンテンツを様々なプラットフォーム（Webサイト、モバイルアプリ、IoTデバイスなど）に配信するためのAPIを、驚くほど簡単に構築できます。

Strapi CMSの特徴

Strapiが多くの開発者から支持される理由は、その豊富な機能にあります。

  • カスタマイズ可能なコンテンツタイプ: ブログ記事、商品情報、ユーザープロフィールなど、管理したいコンテンツに合わせて柔軟にデータ構造を設計できます。これらのコンテンツタイプの定義は、データベースではなくコード（ファイル）として管理されるため、バージョン管理が容易で開発ワークフローに統合しやすいのが特徴です。
  • APIの自動生成: コンテンツタイプを作成すると、RESTful APIとGraphQL APIが自動的に生成されます。これにより、フロントエンド開発者はバックエンドを意識することなく、コンテンツの取得・操作に集中できます。
  • 直感的な管理画面: コンテンツの作成、編集、削除などを、洗練されたUIの管理画面から直感的に行えます。
  • 豊富な拡張性: プラグインを追加することで、機能の拡張が容易に行えます。また、独自のプラグインを開発することも可能です。
  • 認証と権限管理: ユーザー登録やログイン機能、役割（ロール）に応じた細かいアクセス制御（パーミッション）が標準で備わっています。
  • 多言語対応: 多言語でのコンテンツ管理に標準で対応しています。
  • 柔軟なデプロイ: 自社のサーバーにデプロイする「セルフホスティング」と、Strapiが提供するクラウドサービス「Strapi Cloud」のいずれかを選択できます。

Strapi CMSの評価

Strapiは世界中の開発者によって支えられており、非常に活発なコミュニティが存在します。GitHubでは現在62万以上のスターを獲得しており、その人気と信頼性の高さが伺えます。

  • マーケットプレイス: コミュニティや公式から提供される豊富なプラグイン（動画サービス連携、サイトマップ生成など）がマーケットプレイスで公開されており、簡単に機能を追加できます。
  • 豊富な学習リソース: 公式ドキュメントはもちろん、ブログ記事やYouTubeチュートリアルも多数存在し、学習コストを低く抑えることができます。

ユースケース

Strapiの柔軟性は、様々なプロジェクトで活用されています。

  • コーポレートサイト/マーケティングサイト: お知らせやブログ、製品情報などを管理し、Next.jsやGatsbyなどの静的サイトジェネレーターと組み合わせて高速なサイトを構築。
  • ECサイト: 商品情報、在庫、顧客レビューなどをStrapiで管理し、ShopifyなどのECプラットフォームと連携。
  • ブログ/メディアサイト: 複数の執筆者による記事の作成、編集、公開ワークフローを管理。
  • モバイルアプリのバックエンド: iOS/Androidアプリで表示するコンテンツやユーザーデータを管理するためのAPIサーバーとして利用。

活用企業

Strapiは世界中の多様な企業で活用されています。

  • IBM
  • Walmart
  • NASA
  • Toyota

操作方法

インストール

ローカル環境へのインストールはシンプルです。

1. 公式クイックスタート（SQLite）でプロジェクトを作成

npx create-strapi@latest my-project --quickstart

2. ディレクトリへ移動

cd my-project

3. 開発モードで起動（ホットリロード付き）

npm run develop          # または  yarn develop

4. 管理ユーザーの作成

管理ユーザーの情報を登録します。
管理ユーザー作成画面

ダッシュボード

ログインするとダッシュボードに転送され、コンテンツの変更日時や公開状況が確認できるようになります。
Strapi 管理ダッシュボードに表示された最近のコンテンツ履歴と下書き／公開件数

管理画面の日本語化

ソースコードを一行編集するだけで、管理画面の一部日本語化が可能です。ユーザー設定画面のInterface Languageから日本語を選びます。
Strapi のユーザープロフィール画面。Interface Language に日本語を選択している状態

ソースコードのsrc/admin/app.tsxにある日本語の言語コード 'ja'と記載されている行のコメントを外します。
app.tsx を編集し、'ja' ロケール行のコメントを解除している箇所をハイライト

日本語カバー率は現在のところごく一部です。これから、Strapi開発者が日本でも増えると、日本語UIも増えてくるかと思います。

コンテンツタイプの定義

Strapi CMSにおけるコンテンツタイプはいくつかの種類があります。

コンテンツタイプ（Content Type）の概念

  • Collection Type（コレクションタイプ）
    ブログ記事や商品リストなど、複数の項目を管理する場合に使用します。一般的なデータベースのテーブルに相当し、APIを通じて複数のエントリーを操作できます。
  • Single Type（シングルタイプ）
    トップページや会社概要など、単一の項目のみを管理する場合に使用します。設定ページのように、常に一つしか存在しないコンテンツに適しています。
  • Component（コンポーネント）
    複数のコンテンツタイプで再利用したい構造を定義する際に使用します。例えば、SEO情報やリッチテキストエディタのブロックなど、共通のフィールド群をコンポーネントとして作成し、様々なコンテンツタイプに組み込むことができます。これにより、コンテンツ構造の再利用性と整合性が向上します。
    Content-Type Builder で Collection Type・Single Type・Component を選択できる新規作成モーダル

なお、作成したコンテンツタイプはDBではなく、コードとして出力されるようになっています。開発者としてはバージョン管理が容易になるため助かりますね。

コンテンツの作成

定義したコンテンツタイプに準じたコンテンツを作成することが可能です。

コンテンツ一覧画面
Article コレクションの一覧ビュー。タイトル、公開ステータス、更新日時の列が並ぶ

コンテンツ作成画面
Article 編集フォーム。タイトル入力欄とリッチテキスト本文エディタ、右側に公開設定パネル

あらかじめ、多言語・翻訳コンテンツを有効化しておけば、右上の言語選択画面からコンテンツ言語の選択・翻訳が可能です。

APIでコンテンツを出力

StrapiはヘッドレスCMSなので、フロント画面で作成したコンテンツを表示する機能はありません。その代わりに、APIでコンテンツを配信します。ベストプラクティスでは、APIキーやJWTを利用して認証後にAPIにアクセスしますが、この例ではシンプルにするため、Articleコンテンツを公開APIとして取得してみます。

設定画面からRoles > Publicを選択し、Article コンテンツタイプの「find」と「findOne」を許可し、Saveボタンを押します。
Roles & Permissions 画面で Public ロールに Article の find / findOne 権限を付与している様子

ブラウザから、http://localhost:1337/api/articles/ にアクセスすると、Articleコンテンツの一覧が表示されます。
ブラウザに表示された /api/articles エンドポイントの JSON レスポンス（記事一覧）

また、ブラウザから、http://localhost:1337/api/articles/ex8phkxahk3xok38gc3fxrrc のように、末尾にdocumentIDを付与すると、特定コンテンツのデータを取得できます。
特定記事 ID で取得した JSON データをブラウザで表示しているシングル記事レスポンス

基本的な使い方は以上です。非常にシンプルで使いやすく、軽量なCMSなので、小規模プロジェクトでも気軽に導入できます。フロントエンドにはGatsbyやNext.jsが利用できるため、CMSのテンプレートに縛られないデザインが可能です。

有償版でできること

Strapi CMSの有償版は2パターン存在します。

セルフホスト&高機能版

Strapi CMSをホスティングするサーバーは自己で用意し、有償版限定の機能を活用できます。
- Releases: 複数エントリをひとまとめにして日時指定で一括公開・取り下げが可能。キャンペーンや大型リリースの調整が楽になる。
- Content History: 各コンテンツの版を自動で履歴保存し、ワンクリックでロールバック。保存期間は 30 日。
- Live Preview: 編集画面とフロントエンドをリアルタイム同期し、「公開前に実画面で確認→即修正」ができる
- Audit Logs: 管理画面や API 操作の詳細ログを保持。保持期間を任意に延長可能（デフォルト 365 日）。
- Review Workflows: 下書き → 査読 → 承認…といった多段階ワークフローを GUI で設計・運用。
- SSO
- Premium Support と SLA が含まれ、専用サポートチャネル経由で優先対応。
- API レート制限、細粒度 RBAC、監査証跡付きの設定変更など、エンタープライズ IT ポリシーに合わせたチューニングが可能。

クラウドサービス (PaaS)

Strapiを同社が構築したサーバーにホスティングして利用します。CMS自体は無償版・有償版に関わらず利用できます。複数環境の提供、バックアップ、SLA等が提供されます。サーバーのパッチ適用やチューニングから解放されるのが利点です。

他のCMSとの比較

WordPress (従来型CMS)

WordPressはテーマとプラグインで手軽にサイトを構築できますが、フロントエンドとバックエンドが原則、密結合しています。一方、StrapiはAPI経由でコンテンツを配信するため、フロントエンドの技術選定が自由で、モダンな開発手法と相性が良いのが特徴です。

vs Drupal (高機能CMS)

DrupalはエンタープライズレベルのWebサイト構築に強みを持つ高機能CMSです。DrupalもヘッドレスCMSとして活用可能ですが、その設定や運用にはStrapiと比較してより深い知識と手間が必要です。Strapiは最初からヘッドレスCMSとして設計されており、APIファーストのアプローチにより、よりシンプルかつ効率的にモダンなフロントエンドとの連携が可能です。

vs Contentful (SaaS型ヘッドレスCMS)

Contentfulは代表的なSaaS型ヘッドレスCMSで、サーバー管理が不要な手軽さが魅力です。対してStrapiはオープンソースであり、自社サーバーに自由にデプロイできる「セルフホスティング」が可能です。これにより、データ主権を自社で保持でき、カスタマイズの自由度も非常に高くなります。

まとめ

テンプレートに縛られない自由なフロントエンド × OSS ならではの拡張性。それが Strapi の最大の武器です。

一方で、オープンソースかつセルフホスティングが可能なため、SaaS型サービスとは異なり、サーバーの運用管理やセキュリティ対策は自身で行う必要があります。また、ヘッドレスCMSの性質上、フロントエンド開発の知識とAPI連携のスキルが別途求められる点も考慮が必要です。しかし、これらの点を踏まえても、以下のようなニーズを持つ開発者にとって非常に魅力的な選択肢となるでしょう。

  • Webサイトやアプリのバックエンドを素早く構築したい
  • フロントエンドは好きな技術を使いたい
  • データの所有権を自社で管理したい
  • 将来的な拡張性も確保したい

このようにお考えの開発者の皆さん、ぜひ一度Strapiを試してみてはいかがでしょうか。

さらに詳しく知るには:

Discussion