コレクションタイプの作成
まずは、Strapiを起動して管理画面にログインする。
左メニューのPLUGINSにある「 Content-Types Builder」に進み、展開されたメニューのCOLLECTION TYPESの下にある青いテキスト「+ Create new collection type」をクリック。
コレクションタイプ名を入力するモーダル画面が出てくる。
モーダル画面の右側にあるタブで、ADVANCED SETTING（高度な設定）にも切り替えられる。
高度な設定をする知識もないので、今回はBASE SETTINGで進めていく。
まずは、記事のデータを作りたいので「article」と入力。
ちなみに入力は小文字で単数形にした。Strapiで頭文字を大文字にしたり、複数のデータの場合は複数系で表示するようなので。
入力後、右下の「Continue」をクリックすると、フィールドの選択画面が表示される。
まずは記事タイトルのフィールドが欲しかったので、「Text」を選びます。
選択後、テキストフィールドの設定画面に切り替わります。
フィールドの設定も、モーダル画面の右側にあるタブで、ADVANCED SETTING（高度な設定）にも切り替えられます。
今回もBASE SETTINGで進めます。
フィールド名に「title」と入力し「Short text」を選択した。
「Short text」は、255文字まで入力できる。
右下に、「Finish」と「+ Add another field」のボタンがある。
今回は「Finish」を押して完了する。（完了後もフィールドの追加はできる。）
コレクションタイプをみると、先ほど設定したテキストフィールドが1つ追加されているが、この時点ではコレクションタイプは保存されていない。右上の「Save」ボタンを押して保存する。
保存処理完了後、Strapiサーバーがリスタートする。これで、コレクションタイプの作成が完了した。
ブラウザ画面が待機画面から変わらなかったので、ターミナルのデバッグログを確認する。
処理が完了していて問題なさそうなのでブラウザを更新すれば表示された。
今回の紹介では1つのフィールドだが、適宜記事ページに必要なフィールドを追加した。
各フィールドについては、下記公式ページに分かりやすく纏められている。
Fields for Content Types - Strapi User Guideopen_in_new
リレーションフィールド
リレーションフィールドの場合は、リレーションする別のコレクションタイプがないと設定できないので、 コレクションタイプを作成した後に追加する。
このブログは、記事に1つのカテゴリーと複数のタグキーワードを要件としているので、カテゴリーとタグキーワードのコレクションタイプを作成後、記事にリレーションフィールドを追加した。
リレーションフィールドは、対応するコレクションタイプを操作しなくてもフィールドが追加される。
タグキーワードは散らかりやすいので、タグを分類して管理するコレクションタイプも作っておいた。
全部で下記4つのコレクションタイプに、それぞれ必要なフィールドを追加した。
- 記事
- カテゴリー
- タグキーワード
- タグ分類（管理用）
APIを公開する（権限の設定）
権限の設定がされていないので、まだAPIは公開されていない。
左メニューのGENELALにある「 Settings」に進み、展開されたメニューのUSERS & PERMISSIONS PLUGINの「Roles」から設定に進む。
設定したブログのデータで見られて困るものはないので、「Public」を選択する。
各APIの役割については、下記公式ページで確認できる。
Backend customization - Strapi Developer Documentationopen_in_new
GETしか使用しないので、試しに「count」「findone」「find」をチェックする。
それぞれチェックすると、各エンドポイントが表示される。
右上の「Save」を押して保存する。
テストの記事データを登録して、各エンドポイント（今回の例では3つ）にアクセスすると、データの取得を確認できた。
GraphQLを導入する
Strapiは公式プラグインで簡単にGraphQLを導入することができる。
左メニューのGENERALにある「 Marketplace」に進む。
すぐに見つかるのでダウンロード＆インストールする。
他にもコミュニティのプラグインがあるようで、GitHubのAwesome Strapiopen_in_newで確認できる。
導入が完了したら、デプロイしたURLに/graphqlを付けたものがエンドポイントとなる。
GraphQLはエンドポイントが1つだけで、GETの場合はqueryを使って欲しい情報だけを取得できるようになる。
エンドポイントにアクセスすると「GraphQL Playground」が開く。試しに1つ目の記事のタイトルを取得してみる。
簡単に取得できた。右側のタブにあるDOCSやSCHEMAを確認しながらqueryを楽に書ける。
GraphQLについては下記公式ページを参考にした。
Queries and Mutations | GraphQLopen_in_new
GraphQLは、ポケモンのAPIなどで試せる。ありがたい。
おわりに
GUIで簡単に進められたが、記事用のキャプチャが一番の労力を使った。
普段検索して見ている記事は、どれも誰かの労力のおかげなんだなぁ。としみじみ実感。
Strapiの永続化（デーモン化）は、公開作業でやります。
次はNuxtでフロントエンド構築です。