みやざダニエルズのIT備忘録

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

By miyazaDaniels on Nov 27, 2022
日向美術館と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プランで使わせてもらっているのでちょっと宣伝しました)

Recent Posts
日向美術館とVuetify

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

Nov 29, 2022
v-cardの中にv-cardを入れたらmarginがはみ出てる?暫定的にdivで調整しました..
日向美術館とmicroCMS

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

Nov 27, 2022
日向美術館で作成したmicroCMSのAPIスキーマの設定方法と設定した内容をご紹介します。
microCMSとVue.jsで子供の作品を展示する

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

Nov 25, 2022
子供の作品を箱にしまい込むだけにせずにウェブに載せてみました。Headless CMSであるmicroCMSを使ってみたら使いやすかったです。
Webで縦書きコンテンツ〜Safariには気を付けろ!〜に助けられた話

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

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

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

Oct 31, 2022
本の情報をオープンにしてくれているOpenBDのAPIを使ってISBNの登録数を見てみました
Lighthouseのユーザー補助を100点にする

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

Oct 25, 2022
Lighthouseのユーザー補助を100点にするためにコントラストの警告を解消しました
世界の片隅で愛を叫ぶLINE Bot

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

Oct 15, 2022
AWS Lambda、API Gatewayを使ってLINE Botで愛を伝えてみました
Google Apps Scriptで勤怠管理システム風なものを作る

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

Oct 14, 2022
Google Apps Scriptで勤怠管理システム風なものを作ってみました。
AstroにGoogleアナリティクス4を導入する

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

Oct 13, 2022
AstroにGoogleアナリティクス4を入れてみました。
© Copyright 2022 by みやざダニエルズのIT備忘録. Built with ♥ by CreativeDesignsGuru.