みやざダニエルズのIT備忘録
← Blogs 一覧に戻る

【microCMS】日向美術館で使用しているAPIスキーマ設定方法

日向美術館とmicroCMS

こんにちは。みやです。

日向美術館ではmicroCMSを利用して作品のコンテンツ管理をしています。

作品を登録する前に、microCMSでAPIの作成をしてどんな項目を登録していくかをあらかじめ指定する必要があります。 microCMSではAPIの作成を直感的に設定することができ、APIの動作確認も簡単に行うことができました。

執筆時点で設定しているAPIスキーマとその設定方法について記載します。

前提

microCMSにユーザー登録が済んでいることを前提とします。

APIの作成

公式サイトのAPIの作成ページを参照して作成していきます。 日向美術館では、APIを作成画面で「自分で決める」を選択し、API名・エンドポイントはともにworkにしています。また、複数のコンテンツすなわち複数の作品を扱うため、APIのレスポンス形式を「リスト型」にしました。

APIスキーマは以下の通りに設定しています。作品の画像だけ必須入力にしています。 各タイプの詳細は公式サイトのAPIスキーマ設定でご確認ください。

フィールドID表示名種類備考
titleTitleテキストフィールド作品のタイトル
englishTitleEnglishTitleテキストフィールド作品の英語タイトル
workWork画像作品の画像. 必須入力
createdDateCreatedDate日時作品を作った日時
captionCaption真偽値作品のキャプションを表示するかどうか
creatorCreatorセレクトフィールド作品を作った人. 複数選択可
materialsMaterialsセレクトフィールド作品の材料
sizeSizeテキストフィールド作品のサイズ

データの登録

APIの確認のため、ダミーデータで良いのでデータを登録しておきます。

APIの確認

公式サイトのAPIの呼び出しを参照し、「APIプレビュー」機能からAPIの動作確認します。

これが大変便利で、設定したAPIのレスポンスがどんな形式なのか実際のデータで確認することができます。 このレスポンスデータをもとにデータの取り出しを考えていくことができます。


日向美術館では、上記のようなAPIスキーマにしました。 最初から設計した訳ではなく、項目を追加したり、削除したりして今のAPIスキーマになりました。 データが増えてきたり、業務で使うときにはAPIスキーマの削除は慎重にした方がいいですね。

microCMSはシンプルな管理画面で、あまり公式ドキュメントを読まなくてもなんとなく使い方がわかりました。 直感的にわかりやすいのがmicroCMSの素晴らしいところです。

皆様も使ってみてはいかがでしょうか。(Hobbyプランで使わせてもらっているのでちょっと宣伝しました)

関連記事

AstroにGoogleアナリティクス4を導入する

Googleアナリティクス4の導入(再)

動かなくなったので再度AstroにGoogleアナリティクス4を入れてみました。

日向美術館とVuetify

【Vuetify】v-cardの中にv-cardを入れたときに意図したmarginにならなかったのでdivでレイアウト調整した話

v-cardの中にv-cardを入れたらmarginがはみ出てる?暫定的にdivで調整しました..

microCMSとVue.jsで子供の作品を展示する

microCMSとVue.jsで子供の作品を展示する

子供の作品を箱にしまい込むだけにせずにウェブに載せてみました。Headless CMSであるmicroCMSを使ってみたら使いやすかったです。

Webで縦書きコンテンツ〜Safariには気を付けろ!〜に助けられた話

Webで縦書きコンテンツ〜Safariには気を付けろ!〜に助けられた話

縦書き文字をflexboxを使って並べたときのレイアウト崩れが直りました。

OpenBD coverage

OpenBDに登録されているISBNの数の調査をしてみた

本の情報をオープンにしてくれているOpenBDのAPIを使ってISBNの登録数を見てみました

Lighthouseのユーザー補助を100点にする

Lighthouseのユーザー補助を100点にしたい

Lighthouseのユーザー補助を100点にするためにコントラストの警告を解消しました

世界の片隅で愛を叫ぶLINE Bot

世界の片隅で愛を叫ぶLINE Bot

AWS Lambda、API Gatewayを使ってLINE Botで愛を伝えてみました

Google Apps Scriptで勤怠管理システム風なものを作る

Google Apps Scriptで勤怠管理システム風なものを作る

Google Apps Scriptで勤怠管理システム風なものを作ってみました。

canvaでアイキャッチ画像を作る

canvaでアイキャッチ画像を作る

canvaを使ってアイキャッチ画像を作ることができます。

AstroにGoogleアナリティクス4を導入する

Googleアナリティクス4の導入

AstroにGoogleアナリティクス4を入れてみました。

Astroでブログを作る

VuePressからAstroにブログを変えてみた

VuePressからAstroにブログを移管してみました。

miyazadanielsの似顔絵

似顔絵メーカーさんで似顔絵を作ってみた

似顔絵メーカーさんで似顔絵を作ってみました。簡単な操作でできるのでおすすめ。