Headless CMS の Strapi を試してみた #strapi

はじめに

オハコンバンニチハ、CX事業本部の清田です。

昨今 「Headless CMS」といったワードを聞く機会が増えてきたのではないでしょうか？ はじめて聞いたかも？という方に簡単にHeadless CMSをご説明すると「見た目(View)に関する機能は提供せず、APIを経由してコンテンツ情報を提供するCMS」といったところでしょうか。

Headless CMSというとSaaS提供されている 「Contentful」「GraphCMS」「Micro CMS」を利用するの主流な印象ですが自身でもホスティングし利用できるプロダクトもあります。

そのひとつとして、「Strapi」をご紹介できればと思います。

Strapi とは

Node.js製 の OSSで提供されている Headless CMS です。 公式サイトから紹介文を以下に紹介します。

Design APIs fast, manage content easily. Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable and developer-first.

APIを素早く設計し、コンテンツを簡単に管理。 Strapiは、オープンソースの代表的なヘッドレスCMSです。100% Javascriptで、完全にカスタマイズ可能で、開発者優先です。

本記事を読むより以下のyoutubeをご覧いただくほうが概要つかめるかも(冷汗w)

Strapi Quick Start & Demonstration

お品書き

今回のお品書きとしては、ローカル環境にStrapiをインストールし、コンテンツ情報を定義したのちAPI クライアントを利用して情報を取得するまでをご紹介できればと思います。

実行環境について

Strapiを実行するためには、Node.jsとデータベースの実行環境が必要になります。 公式サイトに記載されている各ソフトウェアのバージョン情報をご紹介します。

Node.js

Software	Minimum version
Node.js	12.x
npm	6.x

Database

Strapiがサポートしているデータベースが以下になります。

Software	Minimum version
SQLite	3
PostgreSQL	10
MySQL	5.6
PostgreSQL	10.1
MongoDB	3.6

• 参考
  • Installing from CLI

インストール

それでは、Strapiアプリケーションをローカル環境で実行してみたいと思います。 --quickstartオプションを指定すると SQLite データベースを利用した構成のアプリケーションがインストールされます。

yarn create strapi-app example-app --quickstart

or

npx create-strapi-app example-app --quickstart

ご紹介したコマンド実行しアプリケーションをインストールします。正常にインストールが実行されると以下のログが表示されます。

success Installed "[email protected]" with binaries:
      - create-strapi-app
Creating a new Strapi application at /xxxxxx/example-app.

Creating a quickstart project.
Creating files.
Dependencies installed successfully.
Your application was created at /xxxxxx/example-app.

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 /xxxxxx/example-app
  yarn develop


> [email protected] build /xxxxxx/example-app
> strapi build "--no-optimization"

Building your admin UI with development configuration ...

✔ Webpack
  Compiled successfully in 20.23s

Running your Strapi application.

> [email protected] develop /xxxxxx/example-app
> strapi develop


 Project information                                                          

┌────────────────────┬──────────────────────────────────────────────────┐
│ Time               │ Tue Jul 07 2020 19:13:53 GMT+0900 (日本標準時)   │
│ Launched in        │ 10511 ms                                         │
│ Environment        │ development                                      │
│ Process PID        │ 11163                                            │
│ Version            │ 3.0.5 (node v14.1.0)                             │
└────────────────────┴──────────────────────────────────────────────────┘

 Actions available                                                            

One more thing...
Create your first administrator ? by going to the administration panel at:

┌─────────────────────────────┐
│ http://localhost:1337/admin │
└─────────────────────────────┘

管理画面へログインする

正常にインストールが完了すると、http://localhost:1337/adminより管理者権限ユーザーでの初回ログイン画面が表示されます。 それでそれではユーザー情報を入力しログインします。

ログインできると以下のダッシュボードページが表示されます。

コンテンツタイプを定義する

Strapiは、CMS用途で利用するプロダクトですのでコンテンツ情報を定義・管理することができます。 サイドメニューのコンテンツタイプビルダメニューを選択します。

デフォルトで「Permission」「Role」「User」といったコンテンツタイプが定義されています。それでは実際に独自のコンテンツ情報を定義してみましょう。今回は記事データとして「article」としてみたいと思います。「Create new collection type」メニューを選択してください。

指定するコンテンツタイプ名を入力し、「続ける」ボタンを選択します。

次にコンテンツ定義に付加するフィールド情報を選択します。基本的なフィールドとして12種類が利用可能で、テキスト、リッチテキスト、日付、画像といったフィールドを複数指定することができます。それでは「Text」フィールドを選択します。

フィールドの名称を指定するペインに移動します。フィールド名を「title」を入力します。ここまでのフローが1フィールド指定するフローになります。引き続き他のフィールドも入力するには「Add another field」を選択します。

再度、フィールド選択が表示されるので次は「Rich text」フィールドを選択します。

フィールド名を「content」を入力し、「終了」を選択します。

「article」コンテンツタイプに、先程設定したフィールドが設定されているのが確認できます。ここまでの設定を「保存」を選択し完了します。

サイドメニューのコレクションタイプエリアに先程定義したArticlesメニューが表示されるので選択します。
※補足: 自動で複数系の表記に変更してくれるみたいです

コンテンツデータを管理する画面が表示されます。「articleを追加」を選択しコンテンツデータを追加してみます。

コンテンツ定義で指定した、「Text」「Rich text」の入力フィールドが表示されているのが確認できます。各フィールドに任意の値を入力し「保存」を選択します。

確認用に複数のコンテンツデータを追加してみました。

APIと疎通してみる

コンテンツデータの作成が済んだので、実際にAPI経由でarticleデータを取得してみたいと思います。 それでは、http://localhost:1337/articlesとブラウザやAPIクライアントでリクエストしてみます。

あれ、403が返ってきてしまいました。この原因としてStrapi側でアクセスに関する制限が設定されているため情報が取得することができません。

管理画面にもどり取得できるように設定してみたいと思います。「ロールと権限」「Public」を選択します。

画面下部の「Article」エリアにある、「find」「findone」を選択することによって、パブリックなアクセスが可能になります。

「find」項目のアクセス方法が以下になります。

「findone」項目のアクセス方法が以下になります。

それでは再度リクエストしてみると以下の用にarticle情報の一覧を取得することができました。

つづいて、[:id]を指定した取得方法も確認してみると、取得できたことが確認できました。

まとめ

Node.js製のHeadless CMS Strapiの概要をご紹介しました。コンテンツデータを柔軟に定義してAPIサーバーとしてすぐ利用できるのをご覧いただけたと思います。実際にCMSとして利用することもできますし、開発時のモックサーバーやPoC案件のAPIサーバー等での利用など利用用途としては幅広いのではないかなと自分が感じております。

ちなみに

昨今注目されている Graphql インターフェースでの利用も可能だったりするので、ニーズに合わせてご利用いただけるのではないかなと。