Strapiで作成したコンテンツをAPI経由で取得する方法

目標

Strapiでコンテンツを登録し、API経由でコンテンツを取得する。

前提

本手順ではStrapiのバージョン4.9.0を使用します。
Strapiを利用するにあたり以下がインストールされていること。

・Node.js (v18以降)
・npm (v6以降)

1. Strapiインストール

1. Strapiをインストールしたい任意のディレクトリに移動します。

$ cd {作業ディレクトリ}

2. Strapiをインストールします。

$ npx create-strapi-app@4.9.0 my-project --quickstart

※–quickstartオプションを指定することでSQLite データベースを利用した構成でインストールされます

3. 「y」を入力し、Enterキーを押します。

Need to install the following packages:
  create-strapi-app@4.9.0
Ok to proceed? (y) y

2. ログインユーザーの作成

1. 以下のURLを入力して初期設定画面へ遷移します。
http://localhost:1337/admin

2. 各項目に任意の値を入力して「Let’s start」をクリックします。

3. ダッシュボードが表示されていることを確認します。

3. コンテンツタイプ（Shop）の作成

Strapiでは、投稿内容や各種データなどを全て「コンテンツタイプ」として扱います。

※「コンテンツタイプ」はイメージとしてデータベースのテーブルに該当します。

ここでは「コンテンツタイプ」として扱う投稿や各種データの持つフィールドを定義していきます。

※イメージとしてデータベースのテーブル定義に該当します。

以降の手順では「コンテンツタイプ」として店(Shop)を定義し、各店舗情報をAPIで取得するまでを解説しています。

1. 左サイドメニューの「Content-Types Builder」を選択し、「Create new collection type」をクリックします。

2. Display nameに「shop」を入力し、「Continue」をクリックします。

3. フィールドの選択画面が表示されることを確認します。「Text」を選択します。

※この画面では作成したコンテンツタイプ（ここでは「shop」）に付加するフィールドの属性を選択します。テキスト、リッチテキスト、数値、真偽値、日付、画像など様々な属性を選択可能です。

4. 「Name」に「name」を入力し、タブの「ADVANCED SETTINGS」をクリックします。

5. 「Required field」と「 Unique field」にチェックを入れ、「Add another Field」をクリックします。

6. 「Text」をクリックします。

※ここでは2つ目のフィールドの属性を設定しています。

7. 「Name」に「description」を入力し、「Finish」をクリックします。

8. 画面右上の「Save」をクリックします。

4. コンテンツタイプ（Category）の作成

前項で作成したコンテンツタイプ（shop）に紐づくカテゴリーを作成します。

1. 左サイドメニューの「Content-Types Builder」を選択し、「Create new collection type」をクリックします。

2. 「Display name」に「category」を入力し、「Continue」をクリックします。

3. 「Text」をクリックします。

4. 「Name」に「name」を入力し、タブの「ADVANCED SETTINGS」をクリックします。

5. 「Required field」と「 Unique field」にチェックを入れ、「Add another Field」をクリックします。

6. 「Relation」をクリックします。

※ここでは2つ目のフィールドの属性を設定しています

7. 中央の6つのアイコンのうち右から2番目を選択し、「Finish」をクリックします。

※ここではshopとcategoryのリレーションとして多対多を定義しています。

8. 画面右上の「Save」をクリックします。

5. コンテンツの追加

コンテンツタイプ（Shop、Category）にデータを追加します。

※イメージとしてデータベースのテーブルにレコード追加が該当します。

1. 左サイドメニューの「Content Manager」を選択します。「COLLECTION TYPES」の「category」をクリックします。画面右上の「Create new entry」をクリックします。

2. 「name」に「Electronics store」を入力し、画面右上の「Save」をクリックします。

3. 左サイドメニューの「Content Manager」を選択します。「COLLECTION TYPES」の「category」をクリックします。「NAME」が「Electronics store」のレコードが1件表示されていることを確認します。

4. 左サイドメニューの「Content Manager」を選択します。「COLLECTION TYPES」の「shop」をクリックします。画面右上の「Create new entry」をクリックします。

5. 「name」に「PC Shop」、「description」に「This Shop deals in laptops.」を入力します。「categories」に「Electronics store」を選択し、画面右上の「Save」をクリックします。

6. 左サイドメニューの「Content Manager」を選択します。「COLLECTION TYPES」の「shop」をクリックします。「NAME」が「PC Shop」のレコードが1件表示されていることを確認します。

6. 権限の設定

「5. コンテンツの追加」でコンテンツタイプ（Shop、Category）に追加したデータをAPI経由で取得するための権限を設定します。

1. 左サイドメニューより「Settings」を選択し、「USERS&PERMISSIONS PLUGIN」欄の「Roles」をクリックします。「NAME」が「Public」のレコードをクリックします。

2. 「Permissions」欄の「Shop」を選択します。「find」と「findOne」にチェックをつけます。

3. 同様に「Permissions」欄の「Category」を選択します。「find」と「findOne」にチェックをつけます。画面右上の「Save」をクリックします。

※ここでは以下の権限を付与しています
find – データの全件取得
findOne – 任意のデータを取得

7. コンテンツの公開

「5. コンテンツの追加」でコンテンツタイプ（Shop、Category）に追加したデータを公開します。公開することによりAPIでデータを取得できるようになります。

1. 左サイドメニューの「Content Manager」を選択します。「COLLECTION TYPES」の「category」をクリックします。「NAME」が「Electronics store」のレコードをクリックします。

2. 画面右上の「Publish」をクリックします。

3. 「Yes,publish」をクリックします。

4. 左サイドメニューの「Content Manager」を選択します。「COLLECTION TYPES」の「category」をクリックします。「STATE」が「Published」になっていることを確認します。

5. 左サイドメニューの「Content Manager」を選択します。「COLLECTION TYPES」の「shop」をクリックします。「NAME」が「PC Shop」のレコードをクリックします。

6. 画面右上の「Publish」をクリックします。

7. 左サイドメニューの「Content Manager」を選択します。「COLLECTION TYPES」の「shop」をクリックします。「STATE」が「Published」になっていることを確認します。

8. コンテンツの取得

「5. コンテンツの追加」でコンテンツタイプ（Shop）に追加したデータをAPI経由で取得します。

1. コンテンツタイプ（Shop）のデータをすべて取得するには以下のURLを入力します。
http://localhost:1337/api/shops?populate=*

※「?populate=*」をつけないとコンテンツタイプ（Shop）に紐づいている「Category」（リレーション）が取得できないので注意。詳細は以下を参照ください。
https://docs.strapi.io/dev-docs/api/rest/populate-select#relations--media-fields

2. コンテンツタイプ（Shop）に追加したデータをすべて取得できていることを確認します。

{
    "data": [
        {
            "id": 1,
            "attributes": {
                "name": "PC Shop",
                "description": "This Shop deals in laptops.",
                "createdAt": "2023-04-24T11:36:11.040Z",
                "updatedAt": "2023-04-24T11:58:13.854Z",
                "publishedAt": "2023-04-24T11:58:13.852Z",
                "categories": {
                    "data": [
                        {
                            "id": 1,
                            "attributes": {
                                "name": "Electronics store",
                                "createdAt": "2023-04-24T11:27:41.849Z",
                                "updatedAt": "2023-04-24T11:56:24.113Z",
                                "publishedAt": "2023-04-24T11:56:24.112Z"
                            }
                        }
                    ]
                }
            }
        }
    ],
    "meta": {
        "pagination": {
            "page": 1,
            "pageSize": 25,
            "pageCount": 1,
            "total": 1
        }
    }
}

3. コンテンツタイプ（Shop）の任意のデータを取得するには以下のURLを入力します。「:id」には任意のIDを指定します。
http://localhost:1337/api/shops/:id?populate=*

4. コンテンツタイプ（Shop）に追加したデータを取得できていることを確認します。

{
    "data": {
        "id": 1,
        "attributes": {
            "name": "PC Shop",
            "description": "This Shop deals in laptops.",
            "createdAt": "2023-04-24T11:36:11.040Z",
            "updatedAt": "2023-04-24T11:58:13.854Z",
            "publishedAt": "2023-04-24T11:58:13.852Z",
            "categories": {
                "data": [
                    {
                        "id": 1,
                        "attributes": {
                            "name": "Electronics store",
                            "createdAt": "2023-04-24T11:27:41.849Z",
                            "updatedAt": "2023-04-24T11:56:24.113Z",
                            "publishedAt": "2023-04-24T11:56:24.112Z"
                        }
                    }
                ]
            }
        }
    },
    "meta": {}
}

※ここではIDには「1」を指定しています。

以上で全ての手順は完了になります