LoginSignup
0
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?

Flutter/Dartで〇〇してみた！
Qiita Tech Festa20252025年7月15日まで開催中！
@takutosat

AIが紡ぐ「コミュニティ」—Threads風SNSで焙煎師たちが繋がった瞬間【アプリ開発日誌#5】

Posted at

はじめに

「11,955行のコードが、突然『生きた』瞬間があった。」

前回の記事から1日。PWA対応で「選択と集中」の重要性を学んだ私は、今度は全く異なる挑戦に挑んでいた。コミュニティ機能の実装—焙煎師たちが知識と体験を共有する、Threads風ソーシャルプラットフォームの構築だ。

そして、その過程で体験したのは、単なる技術実装を超えた、**「AIとコミュニティが融合した瞬間」**の感動だった。

なぜ今、コミュニティなのか？

孤独な焙煎師たちの現実

手回し焙煎の世界は、想像以上に孤独だ。

  • 知識の断片化: ネット上の情報は散在し、体系化されていない
  • 経験の共有不足: 失敗談や細かなコツが共有される場がない
  • モチベーション維持困難: 一人で続ける難しさ
  • フィードバック不在: 自分の焙煎が上達しているのか分からない

私のアプリは、AIによる個別アドバイスで一部の課題を解決していた。しかし、人と人との繋がりによる学びと成長は、AIだけでは提供できない価値だった。

Threadsに学ぶ「温かいコミュニティ」設計

Threadsの成功要因を分析し、焙煎コミュニティに最適化した設計を考えた：

Threadsの成功要因:

  • シンプルで直感的なUI
  • リアルタイム性の重視
  • コンテンツ発見の仕組み
  • 温かい交流の促進

焙煎コミュニティへの適用:

  • 焙煎データ統合投稿 - AIアドバイスと実際の焙煎結果を一緒に共有
  • 段階的学習支援 - 初心者から上級者まで楽しめるコンテンツ設計
  • 感覚的表現の可視化 - 「香り」「手応え」など言語化しにくい体験の共有

技術アーキテクチャ：8段階の段階的実装

今回の実装で最も誇らしいのは、複雑な機能を8つの段階に分けて体系的に構築したことだ。

段階1: iOS Native基盤 - 感覚を技術で表現する

// AppDelegate.swift - ハプティックフィードバック統合
class NativeIOSFeatures: NSObject, FlutterPlugin {
    static func provideHapticFeedback(type: HapticFeedbackType) {
        switch type {
        case .success:
            let feedback = UINotificationFeedbackGenerator()
            feedback.notificationOccurred(.success)
        case .light:
            let feedback = UIImpactFeedbackGenerator(style: .light)
            feedback.impactOccurred()
        // 焙煎の「手応え」を指先で感じる革新
        }
    }
}

革新ポイント: 焙煎の成功瞬間を指先で感じる体験設計。Appleのハプティックエンジンにより、デジタルとアナログの境界を曖昧にした。

段階2-3: データ層とコミュニティサービス

// community_service.dart - Firestore リアルタイム同期
class CommunityService {
  static Stream<List<RoastPost>> getRoastPosts() {
    return _firestore
        .collection('roastPosts')
        .orderBy('createdAt', descending: true)
        .snapshots()
        .map((snapshot) => snapshot.docs.map((doc) => 
          RoastPost.fromFirestore(doc.data(), doc.id)
        ).toList());
  }
  
  // 焙煎データと感想を統合した投稿モデル
  static Future<String?> createRoastPost({
    required String content,
    required Map<String, dynamic> roastData, // AI分析結果も含む
    List<String> tags = const [],
  }) async {
    // リアルタイムでコミュニティに共有
  }
}

設計思想: 単なるテキスト投稿ではなく、焙煎データとAI分析結果を統合した投稿システム。データと感情が融合したコンテンツ設計。

段階4-5: UI層 - Threads風UXの焙煎特化

// community_screen.dart - 1,391行の包括的実装
class CommunityScreen extends StatefulWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(children: [
          Icon(Icons.forum, color: AppTheme.fire), // 焙煎テーマカラー
          Text('焙煎コミュニティ'),
        ]),
        bottom: TabBar(
          tabs: [
            Tab(icon: Icon(Icons.home), text: 'フィード'),
            Tab(icon: Icon(Icons.trending_up), text: 'トレンド'),
            Tab(icon: Icon(Icons.search), text: '検索'),
          ],
        ),
      ),
      body: TabBarView(children: [
        _FeedTab(),    // リアルタイムフィード
        _TrendingTab(), // 人気投稿発見
        _SearchTab(),   // タグ検索
      ]),
    );
  }
}

UX革新: Threadsの洗練されたUIに、コーヒー焙煎の温かみのあるテーマカラーを融合。機能性と感情体験の両立。

実装過程で体験した「魔法の瞬間」

瞬間1: リアルタイムコメントが初めて動いた時

// リアルタイムコメントシステム
StreamBuilder<List<RoastComment>>(
  stream: CommunityService.getComments(post.id),
  builder: (context, snapshot) {
    final comments = snapshot.data ?? [];
    return ListView.builder(
      itemCount: comments.length,
      itemBuilder: (context, index) => CommentCard(comments[index]),
    );
  },
)

午後3時47分、シミュレータの画面でコメントがリアルタイムで更新された瞬間—まるで投稿者と読者の間に見えない糸が繋がったような感覚だった。Firestoreの力強さを実感した瞬間でもあった。

瞬間2: ハプティックフィードバックがいいねと連動した時

void _toggleLike() async {
  await CommunityService.toggleLike(widget.post.id);
  
  // iOS最適化: いいねの瞬間に触覚フィードバック
  if (defaultTargetPlatform == TargetPlatform.iOS) {
    await IOSNativeService.provideHapticFeedback(HapticFeedbackType.light);
  }
}

「いいね」ボタンを押した瞬間の、微かな振動。それは単なる機能を超えて、共感と感謝の気持ちを指先で伝える革新的な体験だった。

瞬間3: Firebase Storage問題を「将来への投資」に転換した時

// 画像アップロード機能（将来実装予定）
/* TODO: Firebase Storage有料化により一時的に無効化
 * しかし、335行の完全な実装は保持
 * 将来の有効化が容易になるよう設計
 */
if (_selectedImages.isNotEmpty && mounted) {
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(
      content: Text('画像アップロード機能は将来実装予定です'),
      backgroundColor: Colors.blue,
    ),
  );
}

Firebase Storage有料化という障壁に直面した時、私は挫折ではなく「戦略的判断」を選んだ。完全な機能実装を保持しつつ、ユーザーに将来への期待を与える設計。これは、前回学んだ「選択と集中」の実践でもあった。

コードが語る物語：11,955行の成長記録

$ find ./lib -name "*.dart" -exec wc -l {} + | tail -1
   11,955 total

この数字は、単なるコード量ではない。33個のDartファイルに込められた、AIとコミュニティが融合する物語だ。

アーキテクチャ成熟度：Level 4 (Advanced)

lib/
├── services/         # 10サービス - 各責任の明確化
│   ├── community_service.dart      # 382行 - ソーシャル機能の中枢
│   ├── ios_native_service.dart     # 475行 - Apple感覚体験統合
│   └── image_upload_service.dart   # 335行 - 将来拡張基盤
├── screens/          # 18画面 - 包括的ユーザー体験
└── widgets/          # 再利用可能コンポーネント

設計哲学: 各サービスが単一責任を持ちながら協調する、エンタープライズグレードのアーキテクチャ。

Firebase + AI統合の新境地

Firestoreリアルタイム同期 × Gemini AI

// 投稿作成時にAI分析結果も統合
final roastData = {
  'beanName': 'エチオピア イルガチェフェ',
  'targetRoastLevel': 'シティロースト',
  'aiAdvice': await GeminiService.analyzeFlavor(flavorNotes),
  'totalTime': 1200,
  'finalRoR': 4.5,
};

await CommunityService.createRoastPost(
  content: userContent,
  roastData: roastData, // AI + ユーザーデータの融合
  tags: ['エチオピア', 'シティロースト', '初心者歓迎'],
);

革新: ユーザーの感想とAI分析をリアルタイムで統合し、コミュニティで共有。個人の体験が集合知となる瞬間。

iOS感覚体験の統合

// 焙煎完了時の感動を全感覚で表現
await IOSNativeService.provideHapticFeedback(HapticFeedbackType.success);
await IOSNativeService.scheduleNotification(
  title: '素晴らしい焙煎でした！',
  body: 'コミュニティで体験をシェアしませんか？',
);

開発体験の革命：Claude Codeとの協創

今回の実装で最も印象的だったのは、Claude Codeとの協創体験だった。

Before: 従来の開発フロー

アイデア → 設計 → 実装 → デバッグ → リファクタリング
（各段階で孤独な試行錯誤）

After: Claude Codeとの協創

アイデア ↔ 即座の技術検証 ↔ リアルタイム実装 ↔ 品質向上
（対話による連続的な改善）

具体例:

  • アーキテクチャ設計: 「8段階の実装戦略」を共に策定
  • コード品質: リアルタイムでのベストプラクティス適用
  • 問題解決: Firebase Storage問題を「機会」に転換する発想

技術的ハイライト：実装の核心

1. プラットフォーム最適化の実現

// iOS/Android両対応のプラットフォーム最適化
if (defaultTargetPlatform == TargetPlatform.iOS) {
  await ios.IOSNativeService.provideHapticFeedback(ios.HapticFeedbackType.success);
} else {
  // Android向け代替実装
}

2. エラーハンドリング戦略

try {
  final postId = await CommunityService.createRoastPost(/*...*/);
  // 成功時の感覚フィードバック
  if (defaultTargetPlatform == TargetPlatform.iOS) {
    await IOSNativeService.provideHapticFeedback(HapticFeedbackType.success);
  }
} catch (e) {
  // エラー時も適切なフィードバック
  if (defaultTargetPlatform == TargetPlatform.iOS) {
    await IOSNativeService.provideHapticFeedback(HapticFeedbackType.error);
  }
  // ユーザーフレンドリーなエラーメッセージ
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('投稿エラー: $e')),
  );
}

3. 段階的GitHubプッシュ戦略

従来のアプローチ:

git add .
git commit -m "大きな機能追加"
git push

今回の戦略的アプローチ:

# 8段階の計画的実装
1. iOS基盤構築 → commit → push
2. UX統合 → commit → push  
3. データ層 → commit → push
...（意味のある単位での段階的管理）

効果: 各段階が独立してレビュー可能、ロールバック容易、開発履歴が物語になる。

数値で見る成果

コード品質指標

  • 総ファイル数: 33 Dartファイル
  • 総コード行数: 11,955行
  • 診断結果: エラー0件 ✅
  • 警告: 4件（未使用メソッド - 整理予定）
  • テスト: 全て通過 ✅

アーキテクチャ評価

  • アーキテクチャ成熟度: Level 4 (Advanced)
  • 技術負債レベル: 低（管理可能）
  • スケーラビリティ: 〜10,000ユーザー対応可能
  • プラットフォーム対応: iOS最適化完了、Android互換性確保

機能完成度

  • 基本焙煎機能: 100% ✅
  • AI統合: 95% ✅
  • コミュニティ機能: 90% ✅（画像機能のみ将来実装）
  • iOS最適化: 95% ✅
  • ドキュメント整備: 100% ✅

学びと気づき：技術を超えた価値

1. アーキテクチャ設計の重要性

学び: 「後から拡張しやすい設計」の威力を実感。
具体例: サービス層の明確な分離により、新機能追加が既存コードを破壊せずに実現。

2. ユーザー体験の一貫性

学び: iOS最適化により、「触覚」も含めた総合的UXの重要性を発見。
具体例: ハプティックフィードバックが、単なる機能を「感動体験」に変える瞬間。

3. 技術的制約を「機会」に転換する思考

学び: Firebase Storage有料化を「将来投資」として捉える視点転換。
具体例: 335行の完全実装を保持しつつ、ユーザーに期待感を与える設計。

4. AI協創の可能性

学び: Claude Codeとの協創により、開発効率と品質が飛躍的向上。
具体例: 8段階実装戦略の策定、リアルタイムでの品質改善、アーキテクチャ分析。

未来への展望：次なる挑戦

短期目標（1-2ヶ月）

  1. iOS Native移行準備

    • SwiftUI + Combine frameworkでの再実装計画
    • Core ML統合による画像分析強化

  2. コミュニティ機能完成

    • Firebase Storage有効化（予算確保後）
    • 画像投稿機能フル実装

中期目標（3-6ヶ月）

  1. App Store公開準備

    • Apple Developer登録
    • App Store審査対応

  2. コミュニティエコシステム構築

    • 焙煎レシピ共有機能
    • エキスパートユーザー認証システム

長期目標（6-12ヶ月）

  1. AI機能進化

    • GPT-5統合による高度対話
    • 画像認識精度向上

  2. プラットフォーム拡張

    • watchOS対応（焙煎タイマー）
    • macOS対応（詳細分析）

おわりに：技術と感情が出会う場所

11,955行のコードが語るのは、技術の物語だけではない。

それは、孤独な焙煎師たちが繋がり、AIが人間の感性を増幅し、デジタルが現実の体験を豊かにする—そんな未来への第一歩の記録だ。

Firebase Storage有料化という予期せぬ障壁も、今となっては貴重な学びとなった。技術的制約を創造的に乗り越え、ユーザーに価値を提供し続ける—それこそが、真の開発者としての成長なのかもしれない。

次回は、いよいよiOS Nativeへの移行に挑戦する予定だ。SwiftUIとCombineの世界で、この物語がどう進化するのか—私自身も楽しみでならない。

コーヒーの香りとともに、コードは今日も進化し続ける。

技術スタック

  • Frontend: Flutter (Dart) → iOS Native移行予定
  • Backend: Firebase (Firestore, Auth, Storage)
  • AI: Google Gemini API
  • iOS: Swift Method Channels, Haptic Engine, Local Notifications
  • Architecture: Service Layer Pattern, Repository Pattern
  • Total: 11,955行、33ファイル、8段階実装

プロジェクトリポジトリ

GitHub: coffee-roasting-log-Google-AI-Studio

次回予告: 「SwiftUIが描く焙煎師の新世界—Flutterからの大移行計画」

0
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
Sign upLogin
0
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?