はじめに
個人のナレッジベースを活用したAIコンテンツ管理システムの第一工期（2025年2月1日〜2月4日）が完了しました。本記事では、4日間の開発過程とその成果、そして得られた教訓を共有します。
プロジェクト概要
目標
- LINEからのデータ収集基盤構築
- RAGシステムによるデータ分析基盤の確立
- はてなブログとの同期機能の実装
技術スタック
Frontend: Alpine.js + htmx
Backend: FastAPI
Storage: NASサーバー
AI: RAGシステム
外部連携: LINE Webhook, はてなブログAPI
開発経過
Day 1: フレームワーク選定の混乱
- Gradio → Streamlit → Flask と迷走
- 結果的にAlpine.js + htmxの軽量構成に決定
- FastAPIでバックエンド構築開始
Day 2: LINE Webhook API完成
# データ構造の確立
{
"type": "text|image",
"content": "コンテンツ",
"timestamp": "ISO8601形式",
"message_id": "一意のID"
}
Day 3: RAGシステム構築
- テキスト分析/検索機能の実装
- モデルのアップロード管理
- プロンプト生成システムの基盤作成
Day 4: はてなブログ連携
- API連携の実装
- 同期機能のテスト
- 実運用テストの準備
開発環境・ツールの選定
開発効率に大きく影響を与えた開発環境の選定過程についても共有します。
AI開発支援ツールの比較
-
Claude 3 (Anthropic) + デスクトップアプリ - ⭐⭐⭐⭐⭐
- 月額$20
- コードのファイル添付が容易
- 高精度なコード生成・デバッグ支援
- 実装の方向性の議論が可能
- 結論: 費用対効果が最も高い
-
Cursor Pro - ⭐⭐⭐⭐
- 月額$20
- 優れたコード補完
- GitHubとの連携が便利
- Claude 3との相性が良い
- 結論: 実装フェーズで非常に効果的
-
Cline + Gemini - ⭐⭐
- トークン制限による制約
- 長いコンテキストで破綻
- 結論: 実用的な開発には不向き
-
その他試行したツール
- o3-mini on Cursor: 画像認識機能の制限、性能不足
- VS Code + DeepSeek-R: 実用レベルに達せず
- ollama + continue: 応答速度が実用的でない
得られた知見
-
コスト vs パフォーマンス
- 月額$40程度（Claude 3 + Cursor Pro）の投資で大幅な開発効率向上
- 無料/低コストツールは開発速度に影響
-
重要な機能要件
- ファイル添付のしやすさ
- コンテキスト維持の安定性
- 応答速度
- コード補完の精度
-
使い分けのポイント
- 設計フェーズ: Claude 3
- 実装フェーズ: Cursor Pro
- デバッグ: 両者の組み合わせ
フレームワーク選定の変遷
試行錯誤の過程を時系列で見ていきましょう。
1. Gradio
最初の選択。AIアプリケーションのUIとして人気のフレームワーク。
with gr.Blocks() as demo:
message_list = gr.Dataframe(...)
selected_message = gr.Textbox(...)
generate_button = gr.Button(...)
問題点:
- 複雑なUIの実装が困難
- データの双方向バインディングが制限的
- カスタマイズ性が低い
2. Vue.js + FastAPI
次に選んだのは、モダンなWeb開発スタック。
const app = Vue.createApp({
data() {
return {
messages: [],
selectedMessage: null
}
},
methods: {
async fetchMessages() {
// API通信処理
}
}
})
問題点:
- オーバースペック
- 開発/デプロイの複雑さ
- メンテナンスコストの懸念
3. 最終解決策：Alpine.js + htmx
最終的に落ち着いた構成。必要最小限の機能を提供。
<div x-data="messageApp()" x-init="init()">
<div class="message-list">
<template x-for="msg in messages" :key="msg.id">
<div class="message-item"
@click="selectMessage(msg.id)">
<span x-text="formatDate(msg.timestamp)"></span>
<span x-text="msg.content"></span>
</div>
</template>
</div>
</div>
function messageApp() {
return {
messages: [],
selectedGroup: [],
async refreshMessages() {
const response = await fetch('/files');
// シンプルなデータ処理
}
}
}
なぜAlpine.js + htmxが適していたのか
-
軽量性
- Alpine.js: 約15KB
- htmx: 約14KB
- Vue/Reactと比較して大幅に軽量
-
シンプルな学習曲線
- 直感的なディレクティブ
- HTMLベースの設計
- 最小限のJavaScript
-
プログレッシブエンハンスメント
- 基本機能はHTML/CSSで実現
- JavaScriptは機能強化として追加
-
高いメンテナンス性
- コードの見通しが良い
- 依存関係が少ない
- デバッグが容易
実装のポイント
1. データフローの整理
// シンプルなデータ管理
async refreshMessages() {
const files = await response.json();
const messageGroups = new Map();
// 単純な処理フロー
}
2. エラーハンドリング
try {
const response = await fetch('/files');
if (!response.ok) throw new Error('API Error');
// 処理
} catch (error) {
this.error = error.message;
}
3. UI/UXの最適化
<!-- Progressive Enhancement -->
<button
@click="refreshMessages()"
:disabled="loading"
class="refresh-btn">
<span x-text="loading ? '更新中...' : '更新'"></span>
</button>
得られた教訓
-
シンプルに始める
- 必要最小限の機能から開始
- 段階的な機能追加
- オーバーエンジニアリングを避ける
-
適切なツールの選択
- プロジェクトの規模に合わせた選定
- 学習コストの考慮
- メンテナンス性の重視
-
プロトタイピングの重要性
- 早期のフィードバック
- 要件の明確化
- リスクの早期発見
まとめ
4日間という短期間で、基本的なシステム基盤を構築できました。特に以下の点が成功要因だったと考えています：
- 軽量なフレームワークの採用
- シンプルな設計方針の徹底
- 明確なスコープ設定
次工程では、この基盤を活用しながら、より高度な機能を段階的に追加していく予定です。
フレームワークの選定において、「より軽量で単純な解決策」を選ぶことの重要性を学びました。特にAIを組み込んだシステムでは、フロントエンドの複雑さを最小限に抑えることで、全体の見通しが良くなり、開発効率が向上しました。
参考資料
- FastAPI Documentation
- Alpine.js公式ドキュメント
- htmx公式ドキュメント
- はてなブログ API Documentation