お仕事で関わりのある、まだ駆け出しエンジニアの人からヘッドレスCMSを使いたいけど 日本語の解説が全然なくて辛いという相談を受けました。

私もヘッドレスCMSをなんか使おうかなと思ってましたし 丁度いいのでその人が使いたがっている「Strapi」というヘッドレスCMSを使ってみようと思います。

目標はブログシステムの構築。

ブログはWordpressでいいとは思うんですが、いかんせん無駄な機能が多すぎるので 更新はローカルでできる必要最低限のブログ機能がほしいなと思っていたのでそれを目標にしてみます。

なにはともあれ、とりあえず入門をしてみようかなと思います。

今回やる環境は

この環境で行います。

ラズパイnode.jsの導入に関しては前に書いた記事である

「ラズパイ4にRaspbianOS Liteの導入＆初期設定～SSHログインまで」

を参照してください。

それではStrapiに入門してみましょう。

nuxtでnpxを使ってインストールするとエラーが出たけど動いたという状態になったので 恐らくStrapiでもnpxで入れるとエラーが出そうな予感がします。

権限周りのエラーなので後で「npm install --unsafe-perm」で回避してみようかと思います。

それでは公式のQuickStartにならってインストールしてみましょう。

sudo npx create-strapi-app my-project --quickstart

案の定エラーがでましたが、なにやら諦めないでくださいというエラーがでました。

Oh, it seems that you encountered errors while installing dependencies in your project.
Don't give up, your project was created correctly.
Fix the issues mentioned in the installation errors and try to run the following command:

cd /home/[ユーザー名]/strapi/my-project && npm install

どうやら作ったディレクトリに移動してnpm installをしろって出てますね。

もとからやるつもりだったのでとりあえずやってみましょう。

cd my-project
sudo npm install  --unsafe-perm

二度手間になると面倒なので初っ端から--unsafe-permオプションを付けました。

……今度は問題なくインストールができたようです。

ちょろちょろ警告は出ていますが問題が出るまでは放置で進みましょう。

早速起動できなかった

と思いましたが起動したらエラーがでたのでちょっと見てみると どうやら「sqlite3」が正常にインストールされていないようでした。

node_modulesを見るとちゃんとあるのですが、もう一度インストールしてみます。

sudo npm install sqlite3 --unsafe-perm

--unsafe-permを入れないとパーミッションエラーがでましたのでつけています。

何やら長いインストールが終わってから

sudo npm run develop

で無事動いてくれました。

Strapiを起動して中身を見てみる

デフォルトの設定でサーバーのホストを「0.0.0.0」にしてくれているので

sudo npm run develop

で起動すると「192.168.0.11:1337」アクセスできるようになります。

IPは自分の設定しているIPに置き換えてみてください。

管理者を作る

公式にそってまずは管理者のIDを作りましょう。

「192.168.0.11:1337/admin」にアクセスすると会員登録画面みたいなのが表示されます。

最初から日本語とは素晴らしいですね！

姓名、アドレス、パスワード、チェックを入れて登録すると、 管理画面的な所に飛ばされます。

正直なにしたらいいかよくわかりませんね。

どうやらコードを組まずにブラウザ側でAPIが作ることができるとかなんとか……

とりあえず公式チュートリアルに沿っていきましょう。

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

公式チュートリアルのとおりにコンテンツタイプを作ろうとすると どうもコンソール側で400エラーが発生して保存ができないので、 一旦開発サーバーを止めてビルドしなおしてみることにしました。

もしかするとsqlite3をちゃんとインストールしてないときにdevelopコマンドでなにか構築されたままだったのかもしれません。

恐らく保存がうまくできなかったのでしょう。

とりあえず

sudo npm run build

でビルドだけためしてみました。

ちょっと時間がかかるのでまって「successfully」が出たので再び

sudo npm run develop

で起動してコンテンツタイプを作り直したら無事保存できました。

コンテンツタイプが作成できずにエラーが発生する人は一度再ビルドを試してみてください。

問題なさそうならチュートリアル通りにテキストとリッチテキストのフィールドを作ります。

カテゴリを作成する

次にカテゴリを作りましょう。

先ほどと同じ用にコンテンツタイプの「Create new Collection type」を選択して Categoryというものを作っていきます。

作り方はレストランタイプと同じで大丈夫です。

とりあえずテキストフィールドを作って必須とユニークな設定しておきましょう。

カテゴリなのでとりあえずカテゴリ名を指定できればいいでしょう。

ブログ的に言えばもう1つフィールドを設けてURLの一部となるスラッグのフィールドがあればよさそうですが 今回は公式チュートリアルにならってカテゴリ名だけにしておきます。

関連付けを行う

作成できたら次は「Add another field」で項目を追加する時に 「Relation」を追加します。

その時に右側のプルダウンで最初に作ったレストランを選び その後にMany to Manyの関係を選んで終了を選んで終わります。

これで関連付けは終わりました。

意味は恐らくデータベースの関連付けみたいなものなんじゃないでしょうか。

恐らくNoSQLでのリレーションの設定担ってるんだと思います。

コレクションタイプの名前がCategoriesとRestaurantsになっているとおもいます。

正直ここまでだとどうなってるのかよくわからないので次に進みましょう。

レストランコンテンツタイプに追加

サイドバーからレストランを選択肢、画面が切り替わったら右にある「Restaurantを追加」で追加します。

Create an entry という画面になるので レストラン名と概要を入れて保存をしてみます。

ブログの記事を作るみたいな感覚ですね。

保存が終わったら画面は切り替わらないでそのままなので、 一度サイドバーからレストランを選んで先程追加したものが入っているかみてみましょう。

データベースみたいに追加されてたらOKです。

カテゴリコンテンツタイプに追加

カテゴリにも同じように追加してみましょう。

追加画面の右のサイドバーに「アイテムを追加する」というプルダウンがあるので そこを選択すると先程作ったレストランがあります。

Wordpressをやったことがある人はすぐわかると思いますが、 記事でカテゴリを選択するときのような感じですね。

これはカテゴリ側で記事を選んでいるような感じなのでちょっと違和感がありますね。

とりあえず進めてみましょう。

カテゴリにチェーン店とか適当に名付けてみて 先程作ったレストランを選択して保存してみます。

その後、サイドバーからレストランの方に行くと ちゃんとカテゴリ関連付けされているようです。

公式の方はなんか追加しろって書いてますが、どうやら自動的に設定されているので大丈夫でしょう。

バージョンの違いかなんかでしょうかね。

役割と権限を設定する

次にユーザーの設定とか編集権限とかの設定をします。

サイドバーの「設定」を選択して画面移動が終わったら 左側にある「Users & Permissions plugin 」の下の「ロールと権限」を選択します。

恐らくデフォルトだと「Authenticated」「Public」の２つのロールがあります。

前者はログイン済の人、後者はそれ以外の人って感じですね。

今回は「Public」を選択してください。

画面が移動したら編集画面になっていると思うのでスクロールしていくと 権限（ルートにバインドされたアクションのみが以下にリストされています）っていうところの下に 先程作ったコンテンツタイプが元になったチェックするところがいっぱいあると思います。

レストランとカテゴリの「findone」にチェックを入れて保存します。

この時点での私の認識は、findoneとは恐らくその単一ページを見られる権限なのかなと思ってます。

チェックを入れると右側に単一記事のURLっぽいのがあるのがわかると思います。

ただの「find」の場合はブログでいうカテゴリの記事一覧みたいなやつじゃないでしょうか。

ブログ的に言うとログインしてくても単一記事を見られるようにする状態に設定したという感じですね。

コンテンツを公開する

まだ作成した段階で公開していないので、公開してみましょう。

デフォルトだと作成するとWordpressでいう下書き状態のままになっているらしいです。

恐らく設定で変えられそうな気がしますが、そこはまた今度やりましょう。

とりあえずコンテンツの公開設定をしてみます。

サイドバーからカテゴリを選択して作ったカテゴリのStateがドラフトになっているのがわかると思います。

作ったカテゴリをクリックして編集画面にいって右上にある「Publish」を選択して 確認画面があるのでYesを選択して公開できます。

レストラン側も忘れずに同じように公開してみましょう。

コンテンツタイプのAPIを使用する

権限は設定してURLにアクセスできるようにしていたのと、 先程の公開をしたことで作成したコンテンツにアクセスできるようになっています。

IPは自分のものに置き換えてアクセスしてみてください。

json形式で表示されたと思います。

いわゆるAPIを叩いて設定した記事をjsonを取得するような感じのことができるわけですね。

後はこれをフロントエンド、VueとかReactを使ってこのURLを叩いて取得して表示とかすれば Node.jsオンリーでブログシステムのようなものが作れるようになるわけです。

後は組み合わせ次第でショッピングサイトとかも作れそうですね。

ただ、セキュリティとか色々考慮しないといけないので お金が絡むようなコンテンツにするときはかなりしっかりとセキュリティを考えないといけません。

なので正直ヘッドレスCMSはブログとかそういう軽いものに使うべきかなと思います。

ショッピングサイトなんかはセキュリティがデフォルトでしっかりしてる LaravelとかPHPのフレームワークを使ったほうがいいなという感想でした。

今回イラスト用のブログを作ろうと思って脱Wordpressの軽いブログシステムを作ろうと Strapiを使ってみました。

ブラウザで色々作られるのは確かに便利ですが、正直な所コードを書いて作るほうが好きですね。

ただ1から全部作ってると時間が足りないのでヘッドレスCMSの力を使って 工数削減に励もうかなと思ってます。

ちょっと自分で触って作ってみてこれはいいものだ！ってなったらまた講座を作ってみようと思います。

それでは。