ヘッドレスCMSのstrapiとは?開発環境や使い方などを解説

2024.06.03
フロントエンド開発
Wakka Inc. メディア編集部
ヘッドレスCMSのstrapiとは?開発環境や使い方などを解説
SHARE ON
  • FaceBook
  • Twitter
  • LINE
  • Note

こんにちは。Wakka Inc.メディア編集部です。

昨今、企業がWebサイトを作成する際にヘッドレスCMSを使用するケースが増えています。
なかでも、strapiはリーズナブルに使用できるヘッドレスCMSとして、多くの企業に注目されています。

しかし、「strapiの使い方がよくわからない」「strapiが普通のヘッドレスCMSとどう違うのか」と感じる方もいるのではないでしょうか。

本記事では、strapiについて解説します。
strapiの使い方や開発環境に加え、使用する際のメリットや注意点などもお伝えするので、ぜひ参考にしてください。

目次

ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。

独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。

【基礎知識】ヘッドレスCMSのstrapiとは

最初に、strapiの特徴や開発環境について解説します。
また、ヘッドレスCMSについても解説するので、参考にしてください。

ヘッドレスCMSとは

ヘッドレスCMSとは、通常のCMSと違ってフロントエンドを持たず、コンテンツ管理に特化しているCMSです。
フロントエンドを持たないことで、ヘッドレスCMSはスピーディーなレスポンスや高いカスタマイズ性を実現しています。

また、フロントエンドをAPI経由で自由に操作できるため、パソコンだけでなくスマートフォンやスマートウォッチなど、さまざまなデバイスに対応できる点もメリットです。

近年はデバイスの多様化もあり、WebサイトをヘッドレスCMSで作成する企業が増えています。
他方で、ヘッドレスCMSはカスタマイズの自由度が高い分、専門的な知識がないと操作が難しい傾向があります。

ヘッドレスCMSについては以下の記事でも解説しています。

strapiの特徴

strapiはSelf-Hosted型(セルフホスト型)のヘッドレスCMSです。

Self-Hosted型とは自社でサーバーやデータベースを用意して使用するタイプのヘッドレスCMSです。
サーバーやデータベースを準備しなければならないため、コストや手間はかかりますが、その分高い拡張性があります。

加えて、strapiはオープンソースで公開されており、自由にダウンロードして利用できる点が魅力です。
そのため、使いやすいヘッドレスCMSとして、多くの企業から注目を集めています。

strapiの開発環境

strapiを導入する際は、下記の開発環境を整える必要があります。

  • Node LTS(v16 / v18 / v20)
  • パッケージマネージャー(指定なし):npm(v6以上) / yarn
  • データベース
  • Python(データベースにSQLiteを使用する場合)

参照:strapi公式サイト

なお、strapiを導入する際、データベースは以下のバージョンか確認しましょう。

データベースの種類最低限のバージョン推奨されているバージョン
MySQL5.7.88.0
MariaDB10.310.6
PostgreSQL11.014.0
SQLite33
参照:strapi公式ドキュメント

strapiで開発する3つのメリット

strapiで開発すると、以下のようなメリットを得られます。

  • 無料で使用できる
  • 導入に手間がかからない
  • カスタマイズ性が高い

メリットを知っておけば、strapiを導入する意義を理解できます。

無料で利用できる

strapiはオープンソースで公開されているため、無料で利用できるヘッドレスCMSです。

一般的にヘッドレスCMSは有償のものが多いうえに、自社でデータベースやサーバーを用意しなければなりません。
そのため、コストが高くなりやすい傾向があります。

しかし、strapiなら無料で利用できるため、開発に要するコストを削減できます。

なお、strapiにはSaaS型もありますが、こちらは有料です。
オープンソースで公開されているSelf-Hosted型とは異なるため注意しましょう。

ただし、SaaS型でもインストール自体は無料です。

導入に手間がかからない

strapiは導入に手間がかからない点もメリットです。
オープンソースで公開されているので手軽にインストールできるうえに、Node.js環境があれば開発できます

さらに、クイックスタートが搭載されているため、コマンドを1行入力するだけでシステムのセットアップが完了します。
管理画面へのアクセスも簡単にでき、直感的に操作できるのでコンテンツの管理もスムーズです。

クイックスタートを活用すれば、余計な手間がかからないため、スピーディーな開発が可能です。

カスタマイズ性が高い

ヘッドレスCMSであるため、strapiはカスタマイズ性が高く、自由に開発できます。
JavaScriptベースのstrapiは対応できるフロントエンドの種類が多く、フレームワーク・プラグイン・ミドルウェアの選択肢も豊富です。

加えて、API(Application Programming Interface)も自由にカスタマイズできます。
strapiのようなヘッドレスCMSなら、独自性が高いWebサイトを製作できるでしょう。

個性的なデザインや独自の機能を導入したい際にも、strapiがおすすめです。
外部からサイト開発を発注されている際にも、対応できるニーズの幅を広げられます。

strapiで開発する際の2つの注意点

strapiはメリットが多いヘッドレスCMSですが、導入する際は2つの注意点に留意しなければなりません。
strapiの注意点は以下の通りです。

  • 専門知識が必要
  • 情報や資料が少ない

あらかじめ注意点を知っておけば、導入や運用がスムーズになります。
strapiによる開発を失敗しないためにも、正確に把握しましょう。

専門知識が必要

strapiは利用するにあたって、専門知識が必要です。

元々ヘッドレスCMSはユーザー自身でフロントヘッドを自在にカスタマイズできる仕様です。
自由度が高い分、ユーザーにはノウハウやスキルが求められます。

strapiも同様であり、専門知識がなければ使いこなせません。
CMS自体はもちろん、サーバーやデータベースに対する知識がないとstrapiを導入しても使いこなせないリスクが高まります。

情報や資料が少ない

strapiは情報や資料が少ない点にも注意しなければなりません。

元々strapiは公式サイトやマニュアルが英語で記載されており、日本語の資料が少ない傾向があります。
そのため、資料を手に入れても精読に時間を要します。

また、strapiは開発者や高度なスキルを持つユーザー向けのヘッドレスCMSであり、WordPressほど一般的なものではありません。
WordPressのようにユーザーが集まったコミュニティも少ないため、情報が集めにくい点も注意が必要です。

設定や利用方法で困った際に解決策を見つけにくいため、strapiを導入する際はあらかじめ相談できる専門家をキープしておきましょう。

strapiの使い方

本章ではstrapiの使い方について解説します。
実際にstrapiを利用する際の参考にしてください。

Node.jsとnpmをインストール

まずは開発環境を整えましょう。

strapiを利用するうえでNode.jsとnpmのインストールは不可欠です。

Node.jsとnpmのインストールに必要なコマンドは以下の通りです。

sudo apt update

sudo apt install nodejs npm

sudo npm -g install n

sudo n stable

sudo apt purge nodejs npm

sudo apt autoremove

コマンドを入力するとバージョンが表示されるため、推奨されているバージョンと合致するか確認しましょう。

strapiをインストール

開発環境が整ったら、strapiをインストールします。
strapiのインストールに必要なコマンドは以下の通りです。

npx create-strapi-app example –quickstart

なお、quickstartはSQLiteのデータベースをインストールした際に使用するオプションです。
exampleの部分は任意で入力してください。

管理アカウントの作成

インストールが完了すれば、管理アカウントを作成できます。
strapiをインストールすると自動でアカウント作成画面が表示されるため、そのままアカウント情報を入力しましょう。

もしアカウント作成画面が開けない場合は、http://localhost:1337/adminにアクセスすると作成画面に遷移できます

アカウントを作成すれば、セットアップは完了です。

コンテンツを作成

コンテンツを作成する際は、最初に左側のメニューにある「コンテンツタイプ」を設定します。
コンテンツタイプはテーブル名と同じものであり、英語版だと「Create new collection type」と表示されます。

コンテンツタイプを設定したら、次にフィールド(カラムと同じもの)を設定し、内容を保存しましょう。

なお、フィールドはコンテンツの作成において必要なものに合わせて設定できます。
テキストはもちろん、カテゴリやURLなどの細かい設定が可能です。

権限の設定

コンテンツを作成後、APIを導入する際にはまず権限設定をしなければなりません。

メニューにある設定から「ロールと権限」をクリックした後、「Public」にチェックを入れましょう。
「Public」以外にも作業に合わせた権限があるので、それぞれ必要に応じてチェックを入れます。

権限を選んだ後は、必ず保存しましょう。

APIの設定

権限を設定すれば、APIの設定が可能になります。

権限の設定で「Public」にチェックを入れた後に、「find」や「findone」を選ぶと、リクエストに応じたAPIの取得が可能です。

なお、APIのURLは選択したフィールドによって変わります。

完了

APIの設定が完了すれば、基本的な作業は終了です。
入力したデータが適切に表示されているか、必ず確認しましょう。

また、フロントエンドのデザインや、作成したいコンテンツによっては、さまざまなプラグインやツールを別途インストールする必要があります。

ヘッドレスCMSのstrapiで快適な開発を実現しよう

strapiは拡張性が高いヘッドレスCMSのなかでも、オープンソースで公開されているためリーズナブルに使用できる点が特徴です。
開発環境のハードルが低いうえに、クイックスタートを活用すれば導入にも手間がかからないため、スムーズに開発したい方に適しています。

しかし、strapiは運用する際に専門知識が必要なうえ、情報や資料が少ない点に注意しなければなりません。
strapiを使用する際はあらかじめ使い方をチェックしておきましょう。

また、専門家からアドバイスを得られるようにすると、利用しやすくなります。

この記事を書いた人
Wakka Inc. メディア編集部
  • ホーム
  • ブログ
  • ヘッドレスCMSのstrapiとは?開発環境や使い方などを解説