はじめに
MicroCMSを使って、プロ野球12球団のマスコットさんにいつどこで会えるのかがまとまったサイトを趣味で作成しました。
今年1月くらいから真面目に開発するようになり、月間最大7万PVのサイトに成長しました。
私の専門は広報やマーケで、頑張れば簡単なコードは書ける、程度のレベルです。（AIの普及でそれなりのものならよくわからんけど作れるになった層です）
作った動機はこんな感じでした
- 球団マスコットいう文化をどうにかして残したい
- どこでどのように活動していたかのアーカイブを残したい
- どこで会えるかチーム問わずまとまっていたら自分が便利
- 需要はあるはずなので、誰かが広告つけて飯の種にする前に無料でストレスなく使えるものを公開したい
必要な要件はこんな感じでした
- マスコットさんごとのプロフィールを表示する
- イベントを、マスコットさんごと/全体でカレンダー表示する
- 場所を管理する（将来的な地図機能のため）
- 年間1000件程度のスケジュールをわかりやすく管理できる
- 編集が容易
- SEOがそれなりに強い
などです。
最終的には、本業で使っていて記事編集の経験があったMicroCMSの親和性が高いと感じたので、採用しました。
結果的には大正解で、コンテンツ参照によって、効率的にサイト内のデータを管理できるほか、フレームワークにSveltekitを採用したことで、最小限のコーディングでSEOに強いサイトを構築することができました。
この記事では、データの構成やデプロイについて書いてみようと思います。
コンテンツ
スケジュール・プロフィールの2つのAPIを軸に構成しています。
スケジュール
核となるのは「スケジュール」です。全てのイベントを登録します。イベントごとに、場所・参加マスコットが別のAPIから紐づけられます。
イベントごとにページを持っていて、カレンダーなどから飛ぶと、参加マスコットや関連URL、開始時刻などを確認できるようにしています。
スケジュール（schedule）
├── イベント名
├── 日付・時刻
├── 開催場所[Spot]
├── 参加マスコット[Mascot]
├── 詳細説明
└── 関連URL
カレンダーの例
イベントページの例
プロフィール
どのマスコットさんが参加するかがわからないと意味がありませんので、こちらも当然あります。
各マスコットさんのページ（sveltekitでいうところのprofile/[id]のページ）は、プロフィール紹介とマスコットさんごとのスケジュールページとなっていて、お目当てのマスコットさんがいる場合に便利です。人気マスコットさんだと、月に1万回以上表示されたりもします。
マスコット（mascot）
├── 基本情報（名前、ニックネーム、背番号）
├── 所属チーム
├── デビュー年
├── 紹介文
├── 画像（メイン・サブ）
└── SNSリンク（Twitter、Instagram、ブログ）
マスコットさんのページの例
（チーム）
こちらも同様で、マスコットさんごとではなく、チームごとで閲覧できるようになっています。同じチームのマスコットさんをまとめて確認できるようになリマス。
チームのページの例
（コラムやレポート）
写真レポートや、マスコットさんに関するコラムを書いています。こちらも、マスコットさんやスケジュールにつなげることで、回遊性を高めています。
コラムの例
「コンテンツ参照」による連関
microCMSのあるコンテンツから別のコンテンツを参照（リンク）できるコンテンツ参照機能が複雑すぎないことで、RDBを構築しなくてもAPIとして扱いやすく、有効活用しています。
1. スケジュール × マスコット
スケジュール
└── 出演マスコット（複数選択可）
├── マスコットA
├── マスコットB
└── マスコットC
スケジュールにマスコットを紐づけることで、
スケジュールページで
- 「このイベントには○○と△△が出演」と表示
- マスコット名をクリックするとプロフィールへ遷移
プロフィールページで
- 「このマスコットの今後の出演予定」を自動表示
- 過去の出演履歴も確認可能
となっています。
2. マスコット × チーム
チーム（team）
├── チーム名
├── チーム説明
└── 所属マスコット（複数参照）
├── メインマスコット
├── サブマスコット
└── ...
チームからマスコットを参照することで
- チームページで「所属マスコット一覧」を表示
- マスコット同士が「チームメイト」として関連付けられる
- チーム単位でのスケジュール集約
といったことが可能になります。
3. スケジュール × 場所
スポット（spot）
├── 場所名
├── 住所
├── 緯度・経度
├── カテゴリ（球場、商業施設など）
└── 関連URL
開催場所を独立したコンテンツとして管理し、スケジュールから参照します。地図は、私が位置情報に関する企業に所属していることもあり、地図のスタイルをこだわってしまっていて未実装です。
これにより：
- 同じ場所で開催されるイベントを横断検索
- 地図表示との連携が容易に
- 「この球場でのイベント一覧」
といった切り口が可能になります。
4. コラム/レポート × マスコット × スケジュール
ブログ記事（コラム）にも関連マスコットを設定できます。
コラム（column）
├── タイトル
├── 本文
├── カテゴリ
├── 関連マスコット（複数参照）
└── 関連イベント（複数参照）
マスコットプロフィールページで
- 「このマスコットに関する記事」を自動表示
- イベントレポートや紹介記事がまとまる
コラムページで
- 記事に登場するマスコットへのリンク
- 「この記事を読んだ人は、このマスコットにも興味があるかも」
コラムはマスコットさんの遠征まとめなどがかなり読まれるので、ここで関連記事や関連マスコットさんを恣意的に操作することで、読んで欲しい記事への誘導なども可能になってくると考えています。（未実装）
図にしてみるとこんな感じです
データフローをClaudeに作ってもらうとこんな感じ
大層な構造になってしまったので、月額5,390円のTeamプランが手放せなくなりました。事実、繁忙期（？）には、20GBを超えることもあるので、ちょうどいいっちゃちょうどいいですが、趣味の個人開発に重課金という感じです。
こんな機能があったら嬉しいな
双方向のコンテンツ参照
microCMSのコンテンツ参照は「一方向」ですが、これが双方向だと嬉しいなーと思ったりします。プロフィールページで出演スケジュールを表示するときは、こちら側には参照していないので、参照しているものをフィルタリングして取得しています。これ自体は特に困らないのですが、被参照の数（TotalCount）とかをAPIで引っ張ってこられたら便利だなーと思ってます。
// スケジュールAPIをフィルタリングして取得
const schedules = await getScheduleList({
filters: `mascot[contains]${mascotId}`
});
MicroCMSを使って良かったこと
数日に一回、細かい更新をしていくので、機能が過剰だったり動作がもっさりなものは困ります。ヘッドレスなCMSというのが非常に性に合っていました。
今はAIも普及していて質問できる相手もいますし、Sveltekitを使えばCMSのデータの形に合わせてデータの数だけ勝手にページを構築してくれてそこまで難しく考えずにページを作成できますし、過去よく使われていたCMSに比べると相当満足度が高いです。
技術スタック
こんな感じです
- CMS: microCMS
- フロントエンド: SvelteKit
- ホスティング: Cloudflare Workers
- SDK: microcms-js-sdk
GitHubに上げればCloudflare上でデプロイはなんとかなる、という感じが非常に助かっています。
最初は、公式のチュートリアルを参考に、Sveltekitで構築してCloudflare Pagesでデプロイできるようになりました。徐々に勉強して自分でWorkers移行などはなんとかしました
あとは、Cloudflare Workersでサブリクエストの項目を見ると、参照先のURLが4XX返ってくるとわかるので、イベントのURLなどですでにNot Foundになったものなどを気づいたときに削除するといったことができるようになって非常に助かっています。
サブリクエストの例
公開用途だけなので、大量のデータをRDBなしで管理できて現状はとても満足しています。皆様もぜひ快適な推し活ライフをー。