Strapiを使ってみる

ヘッドレスCMSのStrapiを使ってみます。

インストール

今回はローカル環境にStrapiをインストールして使ってみます。
ターミナルでプロジェクトフォルダを作成したいディレクトリまで移動して、下記を実行します。

npx create-strapi-app プロジェクト名 --quickstart

注意点として、StrapiはNode.jsのLTSバージョンのみをサポートしているようなので、Node.jsは12.x(推奨は14.x)、npmは6.xのバージョンが必要になるようです(記事作成時点)。

インストールが無事完了すると、ブラウザでログイン画面が表示されます。
もしくは http://localhost:1337/admin にアクセスでログイン画面が確認できます。

管理者のアカウントを作成して、ログインします。

これで管理画面が使用できるようになりました。

コンテンツタイプの作成

次にコンテンツタイプ を作成します。
左メニューの プラグイン > Content-Types Builder を選択します。

Create new collection type を選択します。

Display nameにコンテンツタイプ の名前を入力します。
今回はinfoと入力します。
(実際はnewsで登録進めていますが、最終的に名前をinfoに変更しないと保存できないということがあったので、以降のキャプチャはnewsとなっています。)

使用する入力フィールドを選択します。
今回はシンプルにタイトル(Text)と本文(Rich Text)を使ってみます。
まずTextを選択します。

Nameにtitleと入力して、右上の高度な設定をクリックします。

ここではデフォルト値や必須などの設定が行えます。
今回は必須フィールドにチェックを入れておきます。
次に本文の設定をしたいので、Add another fieldをクリックします。

入力フィールドの選択画面に戻りました。
本文で使用するRich Textを選択します。

Nameにcontentsと入力して、終了をクリックします。

右上の保存をクリックします。

エラーが出ずにコンテンツタイプが作成されればOKです。

コンテンツの追加

今追加したコンテンツタイプ にコンテンツを追加してみます。
左メニューの コレクションタイプ > Infos を選択します。

右上の Infosを追加 をクリックします。

タイトルと本文を入力して、保存をクリックします。

保存のみだと下書き状態になるので、公開する場合はPublishをクリックします。

これでコンテンツの追加ができました。

役割と権限の設定

デフォルトだとAPIにリクエストできない状態になっているので、リクエストできるように権限を変更してみます。
左メニューの 一般 > 設定 を選択します。

USERS & PERMISSIONS PLUGIN > ロールと権限 を選択します。

Publicを選択します。

下にスクロールして、権限の項目にある APPLICATION > INFO の find と findone にチェックを入れます。

これでAPIにリクエストできるようになりました。

確認

一通り作業が完了したので、登録したデータを取得できるか試してみます。
記事一覧(find)は/infos、記事個別(findone)は/infos/idで取得できます。

http://localhost:1337/infos にアクセスすると、以下のようなjsonが確認できました。

[{"id":1,"title":"ニュースA","contents":"ニュースAの内容です。","published_at":"XXXXXXXX","created_at":"XXXXXXXX","updated_at":"XXXXXXXX"}]

http://localhost:1337/infos/1 の場合は以下のようなjsonになります。

{"id":1,"title":"ニュースA","contents":"ニュースAの内容です。","published_at":"XXXXXXXX","created_at":"XXXXXXXX","updated_at":"XXXXXXXX"}