自前のブログ作り⑦ ー Strapiでコンテンツデータを定義して、GraphQLのAPIサーバーをたてる

schedule Published
published_with_changes Updated
Category folderMake
format_list_bulleted Contents

前回Strapiをインストールして管理画面にアクセスできるようになりました。
早速ログインしてコンテンツデータを定義していきます。管理画面での操作なので簡単です。

ついに、今時の「Headless CMS」とご対面です。

コレクションタイプの作成

まずは、Strapiを起動してログインします。

Strapi 管理画面

左メニューのPLUGINSにある「 Content-Types Builder」に進み、展開されたメニューのCOLLECTION TYPESの下にある青いテキスト「+ Create new collection type」をクリックします。

Strapi コンテンツタイプ作成画面

コレクションタイプ名を入力するモーダル画面が出てきます。

コンテンツタイプ設定画面

モーダル画面の右側にあるタブで、ADVANCED SETTING(高度な設定)にも切り替えられます。

Strapi コンテンツタイプ設定画面-高度な設定

高度な設定をする知識もないので、今回はBASE SETTINGで進めます。
まずは、記事のデータを作りたいので「article」と入力しました。
ちなみに入力は小文字で単数形にしました。Strapiが勝手に頭文字を大文字にしたり、複数のデータの場合に、複数系で表示するようです。

入力後、右下の「Continue」をクリックすると、フィールドの選択画面が表示されます。

Strapi フィールドタイプ選択画面

まずは記事タイトルのフィールドが欲しかったので、「Text」を選びます。
選択後、テキストフィールドの設定画面に切り替わります。

Strapi テキストフィールド設定画面

フィールドの設定も、モーダル画面の右側にあるタブで、ADVANCED SETTING(高度な設定)にも切り替えられます。

Strapi テキストフィールド設定画面-高度な設定

今回もBASE SETTINGで進めます。
フィールド名に「title」と入力し「Short text」を選択しました。
「Short text」は、255文字まで入力できるようです。

右下に、「Finish」と「+ Add another field」のボタンがあります。
今回は「Finish」を押してみます。(Finishを選んだ後でもフィールドの追加は行えます。)

コレクションタイプに、先ほど設定したテキストフィールドが1つ追加されています。
この時点では、作ったコレクションタイプは保存されていません。右上の「Save」ボタンを押して保存します。

Strapi コレクションタイプ詳細画面

Strapi 待機画面

処理完了後、Strapiサーバーがリスタートします。これで、コレクションタイプの作成完了です。
ブラウザ画面が待機画面から変わらない場合、ターミナルのデバッグログを見ましょう。 処理が完了していて問題なさそうなら、ブラウザを更新すれば表示されます。

今回の紹介では1つのフィールドだけですが、適宜必要なフィールドを追加しました。
各フィールドについては、下記公式ページに分かりやすく纏められています。
Fields for Content Types - Strapi User Guideopen_in_new

リレーションフィールド

リレーションフィールドの場合は、リレーションする別のコレクションタイプがないと設定できないので、 コレクションタイプを作成した後に追加します。

このブログの場合は、記事に1つのカテゴリーと複数のタグキーワードを要件としているので、カテゴリーとタグのコレクションタイプを作ってから、リレーションフィールドを追加します。
リレーションフィールドは、対応するコレクションタイプにもフィールドが追加されます。

Strapi リレーションフィールド追加-カテゴリー

Strapi リレーションフィールド追加-タグキーワード

タグキーワードは散らかりやすいので、タグを分類して管理するコレクションタイプも作りました。
全部で4つのコレクションタイプにフィールドを追加しました。

  • 記事
  • カテゴリー
  • タグキーワード
  • タグ分類(管理用)
コレクションタイプの作成は終了です。

APIを公開する(権限の設定)

権限の設定がされていないので、まだAPIは公開されていません。
左メニューのGENELALにある「 Settings」に進み、展開されたメニューのUSERS & PERMISSIONS PLUGINの「Roles」から設定に進みます。

Strapi 権限設定画面

設定したブログのデータで見られて困るものはないので、「Public」を選択してみます。

Strapi 権限設定画面

各APIの役割については、下記公式ページにあります。
Backend customization - Strapi Developer Documentationopen_in_new

GETしか使用しないので、試しに「count」「findone」「find」をチェックします。
それぞれチェックすると、各エンドポイントが表示されます。
右上の「Save」を押して保存すれば、設定終了です。

テストの記事データを登録して、各エンドポイント(今回の例では3つ)にアクセスすると、データを取得できるのが確認できました。

GraphQLを導入する

Strapiは公式プラグインで簡単にGraphQLを導入することができます。
左メニューのGENERALにある「 Marketplace」に進みます。

Strapi マーケットプレイス

すぐに見つかるのでダウンロード&インストールします。
他にもコミュニティのプラグインがあるようで、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でフロントエンド構築です。