導入
ある日、NemotronというローカルLLMの処理速度に感動したエンジニアのnemotoronさんは、「クラウドにデータを送らずとも、自分のローカルデータをAIが活用するアプリ」を考案しました。最初は単純な5つの個別アプリをFlaskとHTMLで作成しましたが、ユーザーから「アイデアがしょぼい」との指摘。そこで開発方針を一変させた経緯を、実際の開発過程を交えてお伝えします。
本文
初期のアイデア：秘密データを活かす個別アプリ
最初に考案したのは、Nemotronのローカル処理を活かした5つのアプリでした：
- 秘密日記AI（感情分析）
- パスワード強度AI
- 機密文書要約
- 無限ネーミング
- 個人情報マスカー
これらのアプリは「単一HTMLファイル＋vLLMのOpenAI互換API」で構築。クラウド経由不要の点が最大の強みでしたが、ユーザーからは「他にないアイデアを」との要望が。そこで注目したのが、手元にあった874MBのClaude Code履歴データです。
開発方針の転換：ローカルデータを活用した新提案
「自分の開発履歴をAIが分析・活用する」というコンセプトに転換しました。具体的には：
- Claude Codeのセッション履歴を分析し、ブログ記事やプロジェクト振り返りを自動生成
- ローカルファイルを対象にしたQ&A機能
- gitコミット履歴を開発ストーリーに変換
この方向性で5つのアプリを再設計。ただし、Flask＋5個のHTMLファイルでは管理が煩雑になるため、Flutter Webで1アプリに統合することを決定。
Flutter導入の壁：sudoパスワード問題
Flutterのインストールで一悶着がありました。コマンドでsudoが必要でしたが、ユーザーID「1604105」というパスワードが原因でエラー。通常は/usr/local/flutterにインストールしますが、権限の問題で失敗。代替案として：
- ホームディレクトリ
/home/user/flutterに直接展開 -
flutter doctorで環境確認 - インストール後は
export PATHでパスを通す
このプロセスでようやくFlutter 3.41.2を正常にセットアップ。スマホ対応のレスポンシブUIも実現可能な点が決定的でした。
技術的実装：FlaskバックエンドとFlutterフロントエンドの連携
Flutterアプリの構成は以下の通り：
- Flask APIサーバー：Claude Code履歴データを処理（874MBのJSONLファイルをメモリ読み込み）
-
Flutterフロントエンド：5画面を1つのアプリに統合
- タブ切り替えによるナビゲーション
- スマホ最適化されたレスポンシブレイアウト
実装ポイントは「Flutter Webビルド済みファイルをAPIサーバーに配信する機能」。これにより、1コマンドで全てが動作するよう設計。ビルドスクリプトの詳細はこちら（※架空リンク）で公開中。
完成：5つの機能を1アプリに統合
最終的には、以下の5つの機能が1アプリ内で動作：
- Claude Code→ブログ記事：セッション履歴から自動生成
- プロジェクト振り返りAI：全セッションを横断分析
- ローカルファイルQ&A：機密ファイルでも安全に質問可能
- コード→クイズ生成：手元のソースコードで理解度テスト
- Git→開発ストーリー：コミット履歴を物語化
FlaskのAPIサーバーとFlutterのフロントエンドを連携させることで、クラウド依存を完全に排除。特に874MBの大容量データをローカルで処理できる点が最大の強みです。
まとめ
「アイデアの質」と「技術的実装の難易度」のバランスが開発成功の鍵でした。Flutterの導入で一時的に壁に直面しましたが、sudo不要のインストール方法を発見し、最終的にはFlutter WebとFlaskのシームレスな連携を実現。クラウド不要のローカル開発環境を、スマホでも使いやすいUIで提供することに成功しました。
今後の課題は、さらに大容量データ（例：10GBのログファイル）を処理するための最適化。ローカルLLMとFlutterを組み合わせる際は、必ず「データ量」と「インストール方法」の2点を事前に確認してください。他のエンジニアの皆様の開発に役立てば幸いです！
元記事: media.patentllm.org