LoginSignup
11
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ssc-riosato(佐藤 理央)inSSC R&D

【2025年版】ヘッドレスCMS StrapiのセットアップとCKEditor5プラグインの導入

Last updated at Posted at 2025-09-29

今回はオープンソースのヘッドレスCMS Strapi の入門として、インストール等のセットアップを行っていきます。またリッチテキストエディタとしてCKEditor5プラグインも導入していきます。

はじめに

ヘッドレスCMSとは

ヘッドレスCMSは、WordPressに代表される従来のモノリシックCMSとは異なり、コンテンツ管理機能（バックエンド）とコンテンツ表示機能（フロントエンド）を完全に分離したアーキテクチャを採用しています。

モノリシックCMS（WordPress）の構成

ヘッドレスCMSの構成

上の図のように、ヘッドレスCMSはコンテンツ管理とコンテンツ提供を行うAPIサーバーの役割のみを守備範囲としており、フロントエンド部分は持ちません。ヘッドレスCMSを採用する場合、フロントエンド部分は別途実装が必要になります。

しかしこの分離アーキテクチャによって、WordPressのような従来のモノリシックCMSと比較して以下のメリットが得られます。

  • 技術選択の自由度: React、Vue.js、Next.jsなど好みのフレームワークでフロントエンドを構築できます
  • マルチプラットフォーム対応: WebサイトだけでなくモバイルアプリやIoTデバイスなど複数のクライアントから同一のAPIを利用可能です
  • パフォーマンスと運用面: フロントエンドをCDNで配信したり、それぞれのレイヤーを独立してスケールできるため、高いパフォーマンスと柔軟な運用を実現できます
  • セキュリティの強化: フロントエンドとバックエンドが分離されているため攻撃対象領域が限定され、WordPressでよく見られるプラグインの脆弱性やテーマの脆弱性による攻撃を回避できます。またAPI経由でのデータアクセスにより、より細かな権限制御とアクセス管理が可能になります

Strapiとは

Strapiは「API creation made simple, secure and fast（シンプル、セキュア、高速なAPI作成）」をコンセプトとするオープンソースのヘッドレスCMSです。Node.jsで構築されており、開発者が直感的にAPIを作成し、コンテンツを管理できるよう設計されています。

Strapiの主要な特徴

1. 完全なデータ制御
  • セルフホスト可能。または専用クラウド環境（Strapi Cloud）も利用できる。完全な所有権を維持
  • ベンダーロックインのリスクがなく、いつでもデータを移行可能
2. データベースの柔軟性
  • PostgreSQL、MySQL、MariaDB、SQLiteなど主要なSQLデータベースに対応
  • プロジェクトの規模や要件に応じてデータベースを選択可能
3. 高度なカスタマイゼーション
  • REST APIとGraphQL APIの両方を標準サポート
  • カスタムルートやミドルウェアの実装が容易
  • プラグインシステムによる機能拡張
4. スケーラビリティ
  • AWS、Netlify、Heroku等の主要クラウドプラットフォームでの展開に対応
  • マイクロサービスアーキテクチャとの親和性が高い
5. 開発者フレンドリー
  • 直感的な管理画面（Strapi Admin）
  • 豊富なドキュメントとアクティブなコミュニティ
  • TypeScriptサポートとモダンなJavaScript開発環境

インストール

事前準備

環境

  • OS: macOS Sonoma 14.7.8
  • CPU: Apple M2 Pro

ランタイムであるNode.jsが必要です。npm以外のパッケージマネージャーを使う人はpnpmやyarnも準備してください。今回はpnpmを使っていきます。

  • Node.js (必須)
    • LTS版しか対応していないので注意(ActiveかMaintenanceのみ)
      • 2025-09時点では20か22のみ
    • 今回は22.19.0を使用
  • pnpm (任意)
    • npmやyarnでも問題ない
    • 今回は10.16.1を使用

Strapiのインストール

まずは親フォルダ内でpnpm create strapiを実行します。プロジェクト名はmy-strapi-projectにしました。いくつか質問されますが、以下のように回答しました。

pnpm create strapi

? What is the name of your project? my-strapi-project

🚀 Welcome to Strapi! Ready to bring your project to life?

? Please log in or sign up. Skip
? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? Yes
? Start with Typescript? Yes
? Install dependencies with pnpm? Yes
? Initialize a git repository? Yes
? Participate in anonymous A/B testing (to improve Strapi)? No

ここで、DBの初期化コマンド(Seed)が実行されますが、pnpm環境では、ライブラリのpostinstallがデフォルトでブロックされるため、エラーが発生する可能性があります。これは次のステップで解決します。

Strapiプロジェクトの初期設定

プロジェクトルートに移動し、pnpmのpostinstallを許可します。そうするとSeedが成功します。

cd my-strapi-project

pnpm approve-builds
# aを押してEnterですべて許可する

pnpm seed:example
# Seedが成功する

Strapi管理画面の起動

管理画面サーバーを起動します。

pnpm dev

localhost:1337 にアクセスすると管理者を初期登録する画面が表示されます。以下のように登録しました。

strapi_reg_admin.jpg

これでStrapiのバックエンド部分の構築が完了です。ちなみに今回使用しているStrapiのバージョンは5.23.5です。

Strapiでは、コンテンツの型を定義し、その定義に沿ってコンテンツを追加、編集、削除します。

コンテンツ型の定義は左メニューのContent-Type Builderで行います。

content_type_builder.png

またコンテンツ管理は左メニューのContent Managerで行います。

content_manager.png

デフォルトリッチテキストエディタの問題点

リッチテキストエディタとは、フォントの種類や色、サイズ、太字、斜体、下線、画像、ハイパーリンクなど、さまざまな書式設定を適用できるテキスト形式で記述できるエディタです。

StrapiでのContent-Type Builderでは、コンテンツ型のフィールドの一種としてRich Textというものを選択できます。たとえば、Restaurantというコンテンツ型にDescriptionというRich Textフィールドを追加します。

resuaurant_before.png

この内容で型を定義し、Content Managerで新しいRestaurant型のコンテンツを作成します。

日本語入力がおかしい

コンテンツ作成画面で、Descriptionフィールドにテキストを日本語で入力すると次のような現象になります。

rich_text_bug.gif

日本語文字を入力してEnterを押して改行すると同じ行が重複して入力されてしまいます。別の場所に入力した文字をコピー&ペーストすれば発生しませんが、これではあまりにも使い勝手が悪いです。

Strapi標準のリッチテキストエディタは内部的にSlate.jsを使用しており、IMEとの相性が悪いようです。(#2368,#2944,#1710,#2149など)

ちなみに筆者の環境ではGoogleの日本語入力IMEを使っています。

CKEditor5プラグイン

そこで代替ツールを探します。いくつかあるようですが、CKEditor5というプラグインがよく使用されるようなので、これを使っていきます。

Strapi用のCKEditorプラグインは複数ありますが、今回は以下のプラグインを使用します。

プラグインのインストール

以下のようにパッケージマネージャでインストールするだけです。インストール後、ビルドが必要なのでビルドし直します。

pnpm install @_sh/strapi-plugin-ckeditor

pnpm build

Content-Type Builderを開いて、新しいフィールドを追加する画面でCUSTOMタブを選択すると表示されていると思います。

rich_text_after.png

PresetのところはDefault HTML editorを選択します。

Content Managerを開いて入力すると今度は正常に入力できました。

ckeditor_input.png

まとめ

今回はヘッドレスCMS Strapiのセットアップから、CKEditor5プラグインの導入まで一通り実施しました。

Strapiの導入で得られるメリット

  • 技術選択の自由度: フロントエンドは好みのフレームワークで構築可能
  • マルチプラットフォーム対応: WebサイトだけでなくモバイルアプリやIoTデバイスからも同一APIを利用
  • 高いパフォーマンス: CDN配信や独立したスケーリングによる柔軟な運用
  • 強化されたセキュリティ: 分離アーキテクチャによる攻撃対象領域の限定

日本語環境でのリッチテキストエディタ問題の解決

Strapiデフォルトのリッチテキストエディタ（Slate.js）は日本語IMEとの相性が悪く、改行時に文字が重複する不具合がありました。CKEditor5プラグイン（@_sh/strapi-plugin-ckeditor）を導入することで、この問題を解決し、日本語環境でも快適にリッチテキスト編集が可能になりました。

11
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?