プログラミングできなくてもブラウザで簡単にAPIを作成できるOSSのHeadless CMS「Strapi」の機能と使い方

モダンなWEBサイト制作・WEBシステム開発では、いわゆるJamstackと呼ばれるアーキテクチャを採用することが増えています。

このようなアーキテクチャを採用する場合はFirebaseのようなmBaaSを利用したり、自身でAPIを開発したり、データを永続的に保存するための方法が必要です。

APIを開発する場合、LaravelやCakePHPなどのフレームワークを利用して開発することも可能ですが、少なくない工数が発生します。

Strapiはオープンソースで開発されているHeadless CMSで、初期設定さえエンジニアが行えば誰でも管理画面を通じてGUIでAPIを作成できます。

strapi.io

この記事ではStrapiのインストールと基本的な使い方について紹介します。

Headless CMSとは

ユーザーに表示するための画面がないCMSをHeadless CMSといいます。

WordPressなどのCMSでは、サイトへの訪問者にはテーマで設定したページデザインで表示されますが、Headless CMSはユーザーに表示するためのページデザインは提供しません。コンテンツの管理およびコンテンツのAPIだけを提供します。

画面がないと不便と思う方もいらっしゃいますが、管理しているコンテンツをWEBだけでなくスマホアプリやデスクトップアプリなどでも表示したい場合、最初からStrapiのようなHeadless CMSで管理することで、コンテンツを一元的に管理でき、API開発にかかる工数も削減できるメリットがあります。

コードを記述せずにデータの構造を定義するだけでAPIを作成できるので、プロトタイピングやモックアップの作成、DXにおけるノーコード・ローコード開発にも向いています。

Strapiとは

オープンソースで開発されているNode.js製のHeadless CMSです。

strapi.io

次のようなことができます。

• コンテンツの管理
• 役割ごとに権限を設定
• APIの提供
• プラグインによる機能の拡張
• CMSのカスタマイズ

インストール方法

それでは早速インストール方法を説明します。

strapi.io

公式ガイドではいくつかの方法が紹介されていますが、環境によってはエラーが発生する場合があるため、この記事では別の方法でインストールします。

前提

この記事では次のソフトウェアが事前にインストールされている前提で説明します。

ソフトウェア	バージョン
Node.js	14.x
npm	6.x
yarn	1.22.x

strapiコマンドをインストール

以下のコマンドでグローバルにstrapiコマンドをインストールします。

yarn global add strapi

Strapiプロジェクトを作成

以下のコマンドでStrapiプロジェクトを作成します。

strapi new --no-run --dbclient=mysql --dbhost=localhost --dbport=3306 --dbname=database --dbusername=root --dbpassword=password strapi

※データベースの接続情報はconfig/database.jsに保存されます。このファイルはデフォルトではバージョン管理の対象に含まれるため、上記コマンドを実行する際に実際の接続情報を指定しないことをおすすめます。

実行が完了すると、次のようなメッセージが表示されます。

Creating a new Strapi application at /var/www/playground/strapi.

Creating a project from the database CLI arguments.
Creating files.
Dependencies installed successfully.

Your application was created at /var/www/playground/strapi.

Available commands in your project:

  yarn develop
  Start Strapi in watch mode.

  yarn start
  Start Strapi without watch mode.

  yarn build
  Build Strapi admin panel.

  yarn strapi
  Display all available commands.

You can start by doing:

  cd /var/www/playground/strapi
  yarn develop

環境変数を設定する

データベースの接続情報や公開URLなどは環境（開発環境/ステージング環境/本番環境）などによって変わることが多いです。

Strapiではそのような場合に設定を簡単に変更できるように、.envによる環境変数の設定に対応しています。

環境変数を設定するには、プロジェクトのルートディレクトリに移動し、.env.exampleをコピーして.envファイルを作成します。

cd ./strapi
cp .env.example .env

作成した.envファイルを編集し、次のように変数を設定します。

HOST=0.0.0.0
PORT=1337
DATABASE_HOST=mysql
DATABASE_PORT=3306
DATABASE_NAME=strapi
DATABASE_USERNAME=root
DATABASE_PASSWORD=root
PUBLIC_URL=http://strapi.playground.test
IS_PROXIED=true

※データベースの接続情報や公開URLなどは適宜ご自身の環境にあわせて変更してください

その他、環境変数で設定可能な値と内容についてはドキュメントをご確認ください。

strapi.io

Strapiを起動する

以上でStrapiを起動する準備ができましたので、次のコマンドで起動してみます。

yarn develop

※本番環境でStrapiを起動する場合はyarn startコマンドを実行します。

ブラウザでhttp://localhost:1337にアクセスすると、welcomeページが表示されます。

welcomeページのガイドに従って最初のユーザーを作成します。

基本的な操作

コンテンツタイプを作成する

WordPressにおける投稿タイプのように、管理するコンテンツのタイプを作成します。

ダッシュボードではこのような画面が表示されます。

メニューから「Content-Types Builder」 を選択します。

「Content-Types Builder」ではコンテンツタイプを管理できます。

「Create new collection type」を選択します。

コレクションの情報を入力するモーダルウィンドウが表示されます。

基本設定

Display name

コンテンツタイプの表示名を入力します。英語で複数形で入力するのをおすすめします。

例: 管理するコンテンツが本であればbooksを入力します。

高度な設定

Draft/publish system

下書き機能を利用する場合、ONにします。

Collection name

システム内で利用するコンテンツタイプの識別子です。APIのURIとデータベースにテーブル名に影響します。

「Display name」を英語で複数形で入力している場合、何も入力しなくても問題ありません。

各項目を入力して、「続ける」をクリックします。

コレクションのフィールドを入力するモーダルウィンドウが表示されます。

「Text」を選択してみます。

基本設定

Name

フィールド名を入力します。

Types

フィールドに入力する内容が短い文字列の場合は「Short text」、長い文字列の場合は「Long text」を選択します。

255文字以内なら「Short text」、255文字より多ければ「Long text」がおすすめです。

高度な設定

• 入力形式
• 必須
• 最小
• 最大

など、追加のフィールド情報を指定できます。

「Add another field」をクリックして、同様に「Rich text」で本文を入力するフィールドも追加します。

追加したら、「終了」をクリックします。

フィールドを追加したら、「保存」をクリックします。

コンテンツタイプを追加するとStrapiが再起動します。

少し待って画面を更新すると、作成したコンテンツタイプがメニューに表示されます。

コンテンツを作成する

メニューをクリックして、「Postsを追加」をクリックします。

各フィールドを入力し、「保存」をクリックします。

保存すると、右上の「Publish」ボタンが有効になります。

「Publish」をクリックすると作成したPostが公開されます。

ロールと権限を設定する

コンテンツタイプを追加したら、アクセス権を設定する必要があります。

メニューから［設定 > ロールと権限］を選択し、「Public」の右側のえんぴつのアイコンをクリックします。

Postsのアクションにすべてチェックを入れ、「Save」をクリックします。

APIを確認

http://localhost:1337/postsにアクセスすると、作成したPostsのデータがJSONで取得できていることがわかります。

[
  {
    "id": 2,
    "title": "タイトル",
    "content": "本文.........本文本文",
    "published_at": "2021-02-04T06:41:43.000Z",
    "created_at": "2021-02-04T06:41:37.000Z",
    "updated_at": "2021-02-04T06:41:43.000Z"
  }
]

※ブラウザに表示されるJSONは整形はされません、見やすくするために執筆時に整形しています。

基本的な操作方法は以上です。

まとめ

オープンソースのHeadless CMS「Strapi」について紹介しました。

標準でインストールされているプラグインを利用することでwebhookの設定も可能なため、Laravelなどのフレームワークと組み合わせれば様々な機能が実現できます。

APIの開発が必要になった場合はぜひ利用を検討してみてください。