みなさまこんにちは、Salvador Coffeeの店主です。
ちょっと日にちが空いてしまいましたが、開発日記をまた書きたいと思います。
今回は結構ニッチなのですが、焙煎ログを記録するためのアプリケーション開発！
自分用に開発してたものを、シェアローストで焙煎機を使う若者にも使ってもらえるように大幅に改良したので、今回開発日記にまとめてみようか〜という感じです。
アプリはこちらです。ぜひ使ってみてください〜
プロジェクト概要
自家焙煎コーヒー店「Salvador Coffee」を営む筆者が、既存の焙煎ログアプリや手書きログ、スプレッドシートロガーの限界を感じ、「自分にとって最高に使いやすい、プロ仕様と同等の焙煎DXアプリ」 を自作した開発記録です。
業務用として有名な「Cropster」や「Artisan」は素晴らしいですが、高額だったり、焙煎機にパーツを後付けしてＰＣへ接続することが必須だったりと、小規模な焙煎環境（特に手回し焙煎機や小型機）では導入のハードルがありました。「無料かつプロレベルのデータ分析がしたい」という強欲なニーズを満たすため、TypescriptとSupabaseを駆使して開発しました。
目的：手書き・感覚からの脱却とDX
主な目的は以下の３点です。
- 脱・感覚焙煎: 温度上昇率（RoR）やフェーズごとの時間配分を可視化し、再現性を高める。
- 脱・手書きログ: 焙煎中にペンを持って記録する手間を省き、ワンタップでイベントを記録する。
- 在庫管理の自動化: 焙煎完了と同時に生豆在庫を引き落とし、棚卸しの苦痛から解放される。
主な実装機能
1. リアルタイム・ロースティング・チャート
Rechartsを用いた高機能チャートを実装。
- Bean Temp (豆温度): 手動入力された温度ポイント間を自動補間（Interpolation）し、滑らかな曲線をリアルタイムに描画。
- RoR (Rate of Rise): 1分あたりの温度上昇率を自動計算し、青いラインで表示。焙煎の勢いを可視化。
- Gas & Damper: 火力（kPa/%）と排気（Damper）の操作履歴をステップチャートで記録。
2. フェーズ管理とDTR自動計算
焙煎の3大フェーズ（Drying, Maillard, Development）の比率をリアルタイムバーで表示。
- DTR (Development Time Ratio): 1ハゼ（1st Crack）以降の時間が、全体の何％を占めるかを自動計算。
- Yellow Point自動推定: 中点（Yellow）の入力を忘れても、140℃到達時点で自動的に推定して計算に組み込むロジックを実装。(これは安定せずバグ修正の必要あり)
3. 在庫連動システム
焙煎終了（Drop）ボタンを押すと同時に、使用した生豆の重量をSupabase上の在庫データベースから自動減算。
4. AIチャットアシスタント（Streaming実装）
焙煎に関する疑問やデータをAIに相談できるチャット機能を実装予定。
他プロジェクト「AIサルバさん」の外部APIを連携して実現させることが可能。
技術スタックと実装環境
各レイヤーでモダンな技術選定を行いました。
| Category | Tech Stack | Notes |
|---|---|---|
| Frontend | Next.js 16 (App Router) | Latest features |
| Language | TypeScript | Type safety |
| Styling | Tailwind CSS v4, shadcn/ui | Dark mode optimized |
| Charts | Recharts | ComposedChart for complex viz |
| Backend | Supabase | PostgreSQL, Auth, Edge Functions |
| Deploy | Vercel | CI/CD |
ディレクトリ構造（抜粋）
主要なロジックは hooks に集約し、Viewはコンポーネントに分離しています。
src/
├── app/
│ └── roast/
│ └── page.tsx # Main Page
├── components/
│ └── roast/
│ ├── chart-board.tsx # Recharts rendering
│ ├── control-panel.tsx # Interactive UI (Gas/Damper)
│ └── metrics-panel.tsx # Real-time data display
├── hooks/
│ ├── useRoastingMath.ts # Core logic (DTR, RoR calc)
│ └── useRoastData.ts # Data management & Event log
└── lib/
└── supabase-client.ts # DB connection
工夫した点：Cropsterに肉薄するUI/UXを無料で
「焙煎中」に特化したUIデザイン:
1分1秒を争う焙煎中に操作ミスが起きないよう、主要ボタン（Start, Yellow, 1st Crack, Drop）を巨大化し、色分けを徹底。
暗い焙煎所でも見やすいダークモードを基調としたデザイン。
入力の柔軟性:
プロ用機材のような自動プローブ接続がない環境でも使えるよう、「温度の手動入力」に、RoRによるチャート自動補完機能を実装。手書きログと大差ないロジックながら、データロガーと変わらない動作を実現。
モバイルファースト:
特にタブレットでの操作を最優先。焙煎完了後のログ画像保存には Web Share API を使用し、LINEやSlackへの共有もスムーズに。
在庫データとの連動:
SupaBaseで個別アカウントに紐づいた生豆在庫のデータベースと連携させることで、焙煎すると在庫が減るようになっています。買い付けから販売までに必要な業務をワンストップで実現させました。これ、地味にすごいと思います。
まとめ
「欲しいものがなければ作る」の精神で始まった本プロジェクト。
結果として、月額数万円のプロ用ソフトにも引けを取らない、自分だけの最強のツールが完成しました。
ロースターとして日本一という実績を持つ私のノウハウを個人開発に落とし込むことで生まれる、"痒い所に手が届く" DXの事例として参考になれば幸いです。
🚀 お決まりですが、、、
今回の実装が、どの程度のインプレッションを生むのか？
もっと色々マーケティングとしてやれることはないのか？
運用しながら、答えを見つけていければなと思います。
さて、、、
現在わたしは札幌でコーヒーショップを8年ほど経営しています。
趣味でAIコーディングによる個人開発を行っていますが、今後はどこかで実務経験を積んでフリーランスエンジニアとして、兼業ではありますが活躍したいと考えています。
店を持っているため、未経験SESとしてフルコミットで現場に入ることができず、「実務経験」というニワトリタマゴな問題に、ぶち当たっているところです。
現在のステータス: 独学でPython/TypeScript/React/Next.jsなど開発中。
探している環境:
モダンな技術スタック（TypeScript/React/Next.js/Goなど）に触れられる
未経験者のAIコーディング活用に理解がある
兼業・副業からでも実務経験を積める
もし、「一緒に働いてみないか？」と興味を持っていただける企業様やチームがいらっしゃれば、ぜひお声がけいただけると嬉しいです！
ここまで読んでいただきありがとうございました！
記事にいいねをいただけると励みになります！☕️