[🛠] ブログ内にダイエット・食事管理アプリのMVPを実装する

✨ GPT-5.6 Solの要約 　

写真を上げるだけで記録は増えるのに、自分でも読まなかった食事記録をブログ内の小さなアプリに変え、自分で使いながら改善するMVPを作った記録。

バージョン1：データは多いのに、読みやすさは最悪

2026年6月20日から、身体の記録と食べたものを残し始めた。

食べ物の写真を上げるだけで、CodexがFatSecretから栄養情報を探し、記録してリンクまで付けてくれる。書くこと自体は難しくなかった。ただし、読みやすさは最悪だった。自分でも読まなかったのだから、ほかの人も読まなかったはずだ。

バージョン2：食事の詳細を折りたたみ、直近7日を追加

2026年7月10日から形式を変えてみた。

食べたものの詳細は開閉機能で隠し、AIが確認するためのアーカイブに変えた。全体の読みやすさも改善し、直近7日の変化まで入れると、ようやく自分へのフィードバックとして機能し始めた。

「実際にこれくらいのカロリーを摂って、その結果、体重がこう変わったのか」。少しずつ見えるようになった。

それでも、一目で把握しにくい感覚は強かった。テキスト中心だからだと思った。どうせCodexに頼めるのなら、ページ内に小さなアプリ風ビューアーを実装してみようと思った。

バージョン3：ブログ内の小さなアプリで、一気に読みやすくなった

そこで今日から、次のように変えた。

欲しい機能をCodexに一つずつ詳しく説明し、フィードバックを続けると、1時間で求めていた水準のものが記事内で動き始めた。

アプリ画面にすると、各時間帯にどんな食事をし、何を食べたのかが一目で分かった。自分で振り返るのもかなり楽になった。以前よく使っていたPillyzeというアプリに、かなり近い感覚だった。

データはfront matterに記録し、Liquidで描画した

見た目はアプリ画面だが、入力用の別アプリまで作ったわけではない。各Daily ReviewのMarkdown上部にあるfront matterへ、body_reviewデータをYAMLで書く。

body_review:
  today:
    exercise:
      aerobic: []
      anaerobic: []
    nutrition:
      complete: true
      meals:
        - type: lunch
          foods:
            - name: 豚肉炒め丼
              calories_kcal: 779
              macros_g:
                carbohydrate: 115.13
                protein: 29.85
                fat: 21.41

本文で毎回HTMLを繰り返す代わりに、Liquidの{% include %}で共有ビューアーを一度だけ呼び出す。

{% include body-review.html review=page.body_review %}

Jekyllのビルド時にpage.body_reviewが_includes/body-review.htmlへ渡され、カード、運動記録、食事タブ、マクロ栄養素グラフが描画される。朝食や夜食のように記録がない時間帯のタブは、最初から作らない。食品ごとのカロリーとマクロ栄養素を入力すれば、食事別・全体の合計と比率もレンダラーが計算する。星評価と食習慣判定は画面が勝手に計算せず、Codexがダイエットの観点から判断した値をfront matterへ直接保存する。

これ以降のDaily Reviewでは、同じUIコードをコピーせず、その日のデータだけを埋めればよい。

MVPをドッグフーディングする

今後も使いながら、不便なところを継続的に改善するつもりだ。将来はWebとアプリが連携する関連サービスを出せるかもしれないとも思った。

これは本格的なアプリ開発に入る前のブログ内MVPであり、一種のドッグフーディング¹だ。時間があるときにCodexとFlutterでネイティブ・Webアプリを少しずつ作り、最終的にはそのデータをブログ内へ埋め込めるようにしたい。

参考資料

1. ドッグフーディングとは、開発中の製品を作り手自身が実際の環境で使い、価値と使いやすさを確かめる方法だ。Microsoft Azure DevOps BlogのLean Product解説でも、MVPをさらに磨く前に開発した製品を自分で使う過程として紹介されている。 ↩