strapiを使ってみた

# 概要
HeadlessCMSを自前で用意するため、オープンソースのstrapiを利用してみました。
構築からコンテンツ登録までの手順をご紹介します。

# 環境構築
### strapiインストール＆プロジェクト作成
[本家ドキュメント](https://strapi.io/documentation/3.0.0-beta.x/getting-started/quick-start-tutorial.html#_1-install-strapi-and-create-a-project)に従い、構築します。

```bash
yarn create strapi-app my-strapi-cms --quickstart
```
しばらく待っているだけで何もせず、ユーザー登録画面起動:smiley:
<img width="336" alt="01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/54ddd028-41d8-27b8-9b14-43544aad6c20.png">

Adminのユーザー情報を入力して`[Ready to strapi]`でスタートします。

`--quickstart`を指定した場合、DBは`SQLite`が選択され、
一緒にインストールされます。その他のDBは以下が選択可能です。

* SQLite
* MongoDB
* MySQL and MariaDB
* PostgreSQL

DBを指定する場合の手順は[こちら](https://strapi.io/documentation/3.0.0-beta.x/guides/databases.html)
予めDBのインストールが必要です。

### ユーザー登録
ユーザを登録します。
<img width="480" alt="03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/96a6fe90-615e-cedb-d0c9-2735a627954e.png">

* **CONTENT TYPES**の下にある**ユーザー**をクリック
* **Userを追加**をクリック
* `Username`,`Email`,`Password `を入力
* **Confirmed**は`ON`を選択
* **Role**は`Authenticated`を選択
* **保存**をクリック

# コンテンツタイプの作成
「Restaurant」というコンテンツを登録します。
<img width="480" alt="04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/68e9fb88-d6da-8c9c-b52e-2e8f02d62958.png">

* **CONTENT TYPES**の下にある**コンテンツタイプ作成**をクリック
* `Create new content-type`をクリック
* **Display Name**に`restaurant`と入力し**続ける**をクリック

<img width="480" alt="05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/3c9c39ec-ad0d-bfc3-dba8-17f519d99cbe.png">
<img width="480" alt="06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/67a9606b-9c2d-e389-404e-de0e47f39255.png">
<img width="474" alt="07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/addf917e-7bca-07c5-a56a-88cc0e6d45f9.png">

* `Text`を選択
* 基本設定タブで**Name**に`name`を入力
* 高度な設定タブで**Required field**をチェック
* 高度な設定タブで**Unique field**をチェック
* `+Add another field`をクリック

上記を切り返し、複数フィールドを設定します。
最後に**Finish**をクリックします。
<img width="480" alt="08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/cf2aac6c-fc63-559a-61fc-e29a458364b2.png">

**保存**をクリックでコンテンツタイプの作成完了です。
<img width="480" alt="08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/7503dd6a-355b-2e61-c128-350c9caf1ce9.png">


# リレーションの作成
コンテンツタイプにリレーションを組むことができます。
以下の内容の「Category」というコンテンツを登録します。

* **Display Name**：`category`
* **Text**：**Name**:`name`
* **Required field**をチェック
* **Unique field**をチェック

リレーションを張るためのfieldを追加します。
<img width="480" alt="09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/6da9bfa4-b553-6500-d364-40cc7bcc12b1.png">

* `Relation`を選択
* `Restaurant`を選択
* 多対多を選択

# コンポーネントの作成
フィールドに指定できるコンポーネントを作成できます。
<img width="480" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/19da9453-33f8-b055-b578-5b5071103e7c.png">

* `Create new content-type`をクリック
* **Name**に`hours_of_operation`
* **category**に`hours`
* **続ける**をクリック

<img width="480" alt="11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/6ebf043e-b7f8-d845-c91a-b16532464369.png">

* **Text**：**Name**:`day_interval`
* **Required field**をチェック

上記の手順で複数項目を設定し、**保存**します。

**Hours_of_operation**を**Restaurant**に割り当てるため、
**Restaurant**の`+ Add another field`で以下を追加します。
<img width="480" alt="12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/5ae26a96-d618-5fe8-b8fc-4702d5bb95f2.png">
<img width="480" alt="13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/8654d9af-4719-b496-fe1d-bf5d08b74eb7.png">
<img width="480" alt="14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/76e0620a-1dcd-8f41-b2f1-0d06ce6ffe6d.png">


* `Use an existing component`を選択
* **Name**に`restaurant_hours`を入力
* **Select a component**は`hours_of_operation`を選択
* `Repeatable component`を選択
* **Finish**をクリック

<img width="480" alt="15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/e8f209c4-26d2-1312-da3f-03c0d7db7fd2.png">

* **保存**をクリック

※`Configure the view`からコンテンツ登録時の画面レイアウトの編集ができます。
<img width="576" alt="16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/eee67d2c-98b8-d766-5547-fc1e23ad76cf.png">

コンテンツ登録の準備が整いました！

# コンテンツ登録
**CONTENT TYPES**の下にある**Restaurant**からコンテンツを登録できます。
<img width="480" alt="17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/019b515e-e25e-f11f-1b3b-0a9379b5e9e2.png">

# コンテンツ公開
デフォルトでは限定公開のため、公開設定が必要です。

* **ロールと権限**を選択
* `Public`を選択
* 「Restaurant」、「category」の`find `,`findone`をチェックします。
<img width="480" alt="18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/cf2e195d-391a-8f33-400c-6219573bc25d.png">


# APIでアクセス
`http://localhost:1337/restaurants`にアクセスするとJSONが取得できます。
<img width="478" alt="19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/4bbade70-a20f-cdf6-781a-984d4062b5ef.png">


以上でHeadlessCMSの準備完了です！

# まとめ
簡単に構築できるうえ、リレーション、コンポーネントも組み合わせることで
単純なデータ構造だけではなく、様々なデータ構造に対応できるため、汎用性が高いと感じました。

フロントエンドと組み合わせてCMSライフにどんどん活用したいと思います。:blush:

# 参考
[strapi](https://strapi.io/)
[WordPress以外の選択肢！HeadlessCMS「Strapi」を試す](https://access-jp.co.jp/blogs/development/214)
[超簡単にAPIが作れる？Headless CMS “strapi” を触ってみる](https://www.hivelocity.co.jp/blog/45845/)
[【strapi】HeadlessCMSのstrapiを触ってみた](https://kodak.hatenablog.com/entry/2019/05/04/100112)