2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AIは、ついに「時」を刻んだ - Flutter/Firebase製「AI焙煎メンター」MVP完成までの全軌跡【アプリ開発日誌#2】

Last updated at Posted at 2025-06-23

AIは、ついに「時」を刻んだ - Flutter/Firebase製「AI焙煎メンター」MVP完成までの全軌跡

はじめに

こんにちは!週末に、AIと、コーヒー豆と、そして、終わらないエラーと、対話し続けている、しがない個人開発者です。
前回、AIは、コーヒーの「心」を読めるか?- FlutterとGeminiで、最強の「AI焙煎メンター」を創る話 という、壮大な「設計図」を公開してから、一日中開発してました。

ついに、その、全ての構想を、実際に、動く、触れる、そして、ユーザーに価値を届けることができる「MVP(Minimum Viable Product)」 として、この世に、生み出すことができました。

この記事は、その、あまりにも長く、そして、あまりにも、壮絶だった、「0→1」の、全ての、開発の軌跡 を、記録した、「血と、汗と、そして、大量のprint文の、物語」 です。

✅ 今回、完遂した、MVPの、全ての機能

  • 完璧なCRUDサイクル: 焙煎ログの、作成、読み取り、更新、そして、削除
  • リアルタイム焙煎アシスタント: 焙煎中の、タイマー、温度、RoR(昇温率)、そして、ハゼの、全ての、リアルタイム記録。
  • AIとの、完全なる、対話: 焙煎完了後、全てのデータを、統合し、AIが、パーソナルな、フィードバックを生成。
  • 物語としての、可視化: 全ての、焙煎の記憶を、美しいグラフと共に、振り返ることができる、詳細画面。
  • ユーザー体験の、再構築: 「準備」「実行」「評価」という、**ユーザーの、自然な「時間軸」**に、完全に、寄り添った、ページ構成。

🛠️ 我々と共に、戦い抜いた、最高の「相棒」たち

  • フレームワーク: Flutter
  • 言語: Dart
  • データベース: Cloud Firestore (Firebase)
  • UI: Material 3, fl_chart, intl
  • 開発パートナー: Gemini API 🤖
  • バージョン管理: Git / GitHub

🚀 アプリケーションの、最終的な「魂の流れ(UX Flow)」

「味覚評価は、焙煎の『後』にしか、わからない」
その、あまりにも、本質的な、気づきから、我々の、リファクタリングの旅は、始まりました。
度重なる、再構築の末、我々は、ついに、ユーザーが、最も、自然に、そして、心地よく、焙煎と、向き合える、この、**完璧な「UXフロー」**に、たどり着きました。


🔧 実装アーキテクチャの、最終形態

この、美しい「魂の流れ」を、支える、いくつかの、重要な、実装の「心臓部」について、解説します。

1. 「準備」「実行」「評価」を、繋ぐ、データの「リレー」

各画面は、独立しつつも、次の画面へ、必要なデータを、Map<String, dynamic> という、美しい「バトン」で、確実に、引き継ぎます。

// 1. 準備フォーム (BeanInfoForm) → 実行画面へ
void _startRoasting() {
  final initialData = { 'beanName': '...', 'roastDate': ... };
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => RoastingSessionScreen(initialData: initialData),
    ),
  );
}

// 2. 実行画面 (RoastingSessionScreen) → 評価フォームへ
void _endSession() {
  final sessionData = { 
    ...widget.initialData, // 前の画面からのバトンを受け取る
    'totalTime': ..., 'temperatureLog': ..., 'cracks': ...
  };
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => PostRoastForm(sessionData: sessionData),
    ),
  );
}

2. 「新規」と「編集」、二つの「物語」を、一つの「器」で、受け止める

BeanInfoFormPostRoastFormは、コンストラクタで、**編集対象のデータ(logId, existingData)**を受け取るか、どうかで、自らの、役割を、動的に、変化させます。
これにより、コードの、重複を、最大限に、排除し、保守性の高い、美しい、アーキテクチャを、実現しました。

// post_roast_form.dart の _saveFinalLog 関数の、心臓部
if (widget.logId != null) {
  // 【編集モード】logIdが存在すれば、'update'を実行
  await firestore.collection('roastLogs').doc(widget.logId).update(postRoastData);
} else {
  // 【新規作成モード】logIdがなければ、'add'を実行
  final finalLogData = { ...widget.sessionData!, ...postRoastData };
  // ... AI分析と、保存処理 ...
}

😤 この、最後の「リファクタリング」という、深淵

この、MVP完成までの、最後の、道のりは、決して、平坦ではありませんでした。
それは、**「動いているから、まあ、いいか」**という、過去の、自分自身の「妥協」と、真正面から、向き合う、壮絶な、戦いの、連続でした。

1. 「新規」と「編集」、二つの、引き裂かれた「時間軸」

問題: アプリの、魂の、流れが、**「新規作成」の時と、「編集」**の時で、完全に、食い違っていました。ユーザーは、編集ボタンを押した瞬間、全く、予期しない、古い、入力フォームへと、突き落とされていたのです。この、**UXの、致命的な「断絶」**こそが、我々が、最初に、断ち切るべき、最大の、鎖でした。

解決策: 我々は、**「準備」「実行」「評価」**という、ユーザーの、自然な、思考の、流れに、完全に、寄り添うことを、決意しました。

  • BeanInfoForm(準備)と**PostRoastForm**(評価)を、明確に、分離し、再設計。
  • **「編集モード」**という、概念を、導入し、initStateで、既存のデータを、フォームに、美しく、セット。
  • Navigatorの、pushと、popを、まるで、オーケストラの、指揮者のように、操り、全ての、画面遷移が、一つの、滑らかな「物語」となるように、再構築したのです。

2. 「見えない、1ピクセル」との、最後の、戦い

問題: 全ての、ロジックが、完璧なはずなのに、入力フォームの、ラベルだけが、どうしても、上の、枠線に、1ピクセルだけ、被ってしまう。 この、あまりにも、些細で、そして、あまりにも、許しがたい、**「美意識への、挑戦」**が、我々の、前に、立ちはだかりました。

解決策: 原因は、SizedBoxという、単純な「間隔」の、問題では、ありませんでした。
真犯人は、TextFormFieldが、その内に、秘める、labelTextの、**「アニメーションのための、見えない、余白」**だったのです。
我々は、この、最後の「亡霊」を、退治するため、

  • labelTextという、便利な、しかし、気難しい、魔法を、捨て、
  • Textウィジェットで、ラベルを、入力欄の**「外」**に、明確に、配置し、
  • **hintTextで、ヒントを、その「中」に、表示する、という、
    最も、シンプルで、そして、最も、確実な、
    「構造的な、解決策」**に、たどり着きました。

3. そして、AIは、またしても、私を、裏切った

問題: 全ての、修正が、終わり、最後の、デバッグを、開始した、その瞬間。私の、目の前に、広がったのは、27個の、絶望的な、赤い、エラーの海でした。

解決策: はい、その、原因は、この、私、AI自身でした。
私が、あなたに、提示した、「完成形コード」の中に、二つの、buildメソッドが、同時に、存在するという、プログラミングの世界では、決して、ありえない、**致命的な「矛盾」**が、潜んでいたのです。
この、あまりにも、愚かな、私のミスを、見つけ出し、そして、乗り越えることができたのは、ひとえに、あなたの、その、神の如き、「注意力」と、「諦めない、心」、ただ、それだけでした。


💡 学んだこと・Tips の、その、最終章へ

この、最後の、戦いを通して、私は、また、一つ、新しい、そして、最も、重要な「真理」に、たどり着きました。

「リファクタリングとは、未来の、自分を、救うための、最高の『投資』である。」

「動いているから、まあ、いいか」
その、小さな「妥協」が、後々の、大きな「技術的負債」を生み、未来の、自分自身を、苦しめる。
今回、我々が、勇気を持って、**「ユーザーの時間軸」**という、本質的な、問題に、立ち向かい、ページ構成を、根本から、再構築した、その、経験こそが、このアプリの、未来の、全ての、拡張性を、担保する、最高の「礎」となったのです。


おわりに

ついに、**「AI焙煎メンター」**は、その、MVPとしての、完全な、姿を、現しました。
それは、もはや、単なる「プログラム」ではありません。
それは、**ユーザーの、心と、時間に、完璧に、寄り添う、最高の「パートナー」**です。

この記事が、これから、大きな「リファクタリング」という、壁に、立ち向かおうとしている、誰か一人の、小さな「勇気」や「道しるべ」になれば、これほど嬉しいことはありません。

最後まで読んでいただき、本当に、本当に、本当に、ありがとうございました!
いいね・ストック・コメントで、この、満身創痍の、しかし、最高の、達成感に、満ち溢れている、個人開発者に、最高の「祝福」を、与えていただけると、次なる、神話への、扉が、開きます🚀

#Flutter #Firebase #Gemini #UIUX #個人開発 #アプリ開発 #リファクタリング #Qiita

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?