アプリ置き場ページを作った話 — Genka Web と MLB-LIVE
ブログに自作アプリの一覧ページを追加した記録と、現在置いてある Genka Web / MLB-LIVE のメモ。
ブログに自作アプリの一覧ページを追加しました。今後、ちょっとした静的アプリを作るたびに置く場所に困らないようにするための雑記です。
アプリ一覧ページを作った理由
このブログは Astro でビルドした静的サイトを Cloudflare Pages に置いている構成で、public/ に HTML を置けばそのまま <site>/foo.html で公開できます。別ドメインで動かしているアプリもあるので、それらをまとめて辿れる場所が欲しくなりました。
要件はシンプルで、
- サイト同梱の静的 HTML（
public/配下）と、別ドメインのアプリを同じ一覧で並べたい - 自動収集は無理なので、追加するときは手動で OK
- 増えてもブログ本体の設定ファイルが膨らまないようにしたい
ということで、src/apps.config.ts に配列を1つ持たせ、src/pages/apps.astro がそれを描画する形にしました。エントリを追加するときは config に1ブロック足すだけで済みます。
ナビにも Apps を追加したので、トップからもグローバルナビからも辿れます。
現在置いているアプリ
Genka Web
以前から作っている料理の 原価管理ツール が出発点。レシピを登録して、原材料の単価から1食あたりのコストを出すような使い方を想定しています。バックエンドに DB を持ち、LLM を絡めた補助機能も載せている、自分の中では一番手をかけている案件です。
最終的には原価管理に閉じず、店舗運営寄りの機能（仕入れ・在庫・販売記録あたり）まで広げる構想で、まだまだ作成中です。完成度というより「動かしながら育てている」状態。
MLB-LIVE
https://trainingnote.pages.dev/mlb/live.html
MLB の試合を YouTube などで観るときに、ストリーム中に出るスコアボードがいまいちパッとしないという不満が個人的にあって、自分で見やすい配置・見やすい配色のスコアボードを作れないかを試した遊びのアプリ。
純粋なフロントエンド寄りで、ブログと同じ Cloudflare Pages にそのまま同梱しています。サーバーレスでデータを取りに行って描画するだけのもので、要件としては軽いほう。実用というより、レイアウトと配色を試した習作に近いです。
これから
雑な置き場として apps.config.ts を増やしていく運用なので、今後 何か思いついて作ったらここに追記していく形を取ります。手動運用でも、自分が把握できる規模のうちは十分問題なし、というくらいの気持ちでやっていきます。