コレクションタイプの作成
まずは、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」を押してみます。（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も便利なので助かります。
GraphQLについては下記公式ページが参考になります。
Queries and Mutations | GraphQLopen_in_new
GraphQLは、ポケモンのAPIなどで試せるようです。ありがてぇー。
おわりに
GUIで簡単に進められましたが、記事を書くためのキャプチャが大変でした。
普段検索して見ている記事は、どれも誰かの労力のおかげなんだなぁ。としみじみ感じます。
Strapiの永続化（デーモン化）は、公開作業の記事で書きます。
次はNuxtでフロントエンド構築です。