Blogブログ

headlessCMS

strapi

2022.11.28

headless cmsのstrapi解説|10分でヘッドレスCMS完了!

今回は革命的なheadless cmsのstrapiを解説します。

こんにちは山本です。

先日nuxt3の解説を書きましたが、
ブログを書くのが面倒にならないうちに、
headless cmsのstrapiの解説もしておきます。

公式はここです。
クラスメソッドさんも解説しています。見てはいませんがたぶんこのブログよりも詳しく解説してます。

yarnが入ってる方はデスクトップから下記のコマンドを実行しましょう。

cd
cd Desktop
mkdir headless
yarn create strapi-app study-strapi --quickstart

すると、

これを実行してしばらく待ちましょう。
するとですね。。
恐るべきことにいきなりブラウザが立ち上がりこの画面が出てきます。

そして、会員登録をしましょう。

会員登録をするとこのような画面をなります。

あれ?開発関係ないの?GUIなの? って思いましたよね。

まぁもうちょっと見てみましょう。

これをクリックしましょう。

すると。。

ここに
Pluralはクエリで一覧で取得するときのパラメータ名でblogs
Singlar はクエリで単数のデータを取得するときのパラメータ名blog
Display nameは単に表示名なのでblogs
と入力しましょうか。

そしたら次はGUIに従って
なんとブログテーブルのカラムを追加できるんです。
試しに
title
body
image

を追加してみます。

同じような感じで、

tagsも作ってみましょう。
id
name
だけでいいです。

ではリレーションを作ってみます。

blogsに新しくカラムを追加するように

ここをクリックし、
下の方にあるrelationをクリックします。
すると。。

このようにリレーションをGUIで設定できるんですね。

ちょっとこれを初めてみた時は本当に驚きました
saveを押すのを忘れないでください。

そして、次に画面左のsettingをクリックしましょう。
roles public editの順にクリックしてください

すると

なんとなくわかりますよね。

これもうAPIの設定をGUIでやっちゃってるんですよ。

これを見た時もマジでビビりました。

Tagsも設定しちゃいましょう。

APIのURIはどこに?

それはここです。

そうです。
ttp://localhost:1337/api/blogs

ということです。

初めてこれをみた時はマジでビビりました。

ではアクセスしてみると。。

すごくないですか?

そしてこのようにブログを普通に書いていけるんですよね。

そうすると、

APIで取得できるというわけです。

とんでもなく便利な無料サービスがありましたね。

このようなサイトで解説されています。
どのサイトもこのブログよりは詳しいでしょう。