code-changelog

シンプルなHTMLビューア付きコード変更履歴

AIが生成したすべてのコード変更をreviewsフォルダーに記録し、シンプルなHTMLビューアでブラウザーからリアルタイムに確認できるソリューションです。

🎯 主な機能

• ✅ ドキュメントの自動生成：変更のたびにreviewsフォルダーにMDファイルを生成
• ✅ シンプルなHTMLビューア：インストール不要、Pythonだけで動作
• ✅ index.htmlの自動更新：新しいドキュメントを追加すると、ファイル一覧を自動更新
• ✅ リアルタイムサーバー：http://localhost:4000ですぐに確認
• ✅ ダークモードUI：GitHubスタイルの美しいドキュメントサイト
• ✅ ナビゲーション：ファイル一覧を自動生成し、簡単に移動
• ✅ Markdownレンダリング：コードのハイライトとdiff表示
• ✅ 最新のドキュメントを優先：最も新しく作成したドキュメントがデフォルトで表示されます

🚀 クイックスタート

1. 初期設定（初回のみ）

# 설치 불필요! Python만 있으면 OK
python3 create_changelog.py

2. 開発しながら使用

from code_changelog_tracker import CodeChangeLogger

# 로거 생성
logger = CodeChangeLogger("프로젝트명", user_request="요구사항")

# 변경사항 기록
logger.log_file_creation("main.py", "코드", "이유")
logger.save_and_build()  # 저장!

3. ドキュメントサーバーを起動

# reviews 폴더에서 Python 서버 실행
cd reviews
python3 -m http.server 4000

# 브라우저에서 확인
# http://localhost:4000

またはバックグラウンドで実行：

cd reviews && python3 -m http.server 4000 &

📁 プロジェクト構成

your-project/
├── reviews/                    # 문서 루트
│   ├── index.html             # HTML 뷰어 (자동 생성)
│   ├── README.md              # 홈페이지
│   ├── SUMMARY.md             # 네비게이션 (자동 생성)
│   │
│   ├── 20251020_140000.md    # 변경 이력 1
│   ├── 20251020_140530.md    # 변경 이력 2
│   ├── 20251020_141200.md    # 변경 이력 3
│   └── ...
│
├── code_changelog_tracker.py  # 로거 스크립트
└── create_changelog.py         # 변경사항 기록 스크립트

💡 使用シナリオ

シナリオ1：継続的に開発しながらドキュメント化

logger = CodeChangeLogger("로그인 기능")

# 첫 번째 작업
logger.log_file_creation("auth.py", "def login(): pass", "로그인 함수")
logger.save_and_build()
# → reviews/20251020_140000.md 생성
# → index.html 자동 업데이트 (파일 목록에 추가)
# → 기본 페이지가 20251020_140000.md로 변경

# 두 번째 작업
logger.log_file_modification("auth.py", "old", "new", "암호화 추가")
logger.save_and_build()
# → reviews/20251020_140530.md 생성
# → index.html 자동 업데이트 (파일 목록 갱신)
# → 기본 페이지가 20251020_140530.md로 변경

# 세 번째 작업
logger.log_file_creation("test_auth.py", "test code", "테스트")
logger.save_and_build()
# → reviews/20251020_141200.md 생성
# → index.html 자동 업데이트 (파일 목록 갱신)
# → 기본 페이지가 20251020_141200.md로 변경

# 브라우저에서 http://localhost:4000 방문
# → 최신 문서가 자동으로 표시됨!
# → 좌측 네비게이션에서 이전 버전들도 확인 가능

シナリオ2：バックグラウンドサーバーを実行

# 터미널 1: 문서 서버 실행 (계속 켜둠)
cd reviews && python3 -m http.server 4000

# 터미널 2: 개발 작업
python3 your_dev_script.py  # logger.save_and_build() 호출

# 브라우저 새로고침하여 최신 문서 확인!

シナリオ3：チームで共有

# reviews 폴더를 팀원들과 공유
# GitHub Pages, Netlify 등에 배포
# 또는 내부 웹서버에 호스팅

🛠️ 実装コード

code_changelog_tracker.py（メインロガー）

既に生成済みのファイルを使用します。主なメソッド：

• log_file_creation() - ファイルの作成を記録
• log_file_modification() - ファイルの変更を記録
• log_file_deletion() - ファイルの削除を記録
• update_index_html() - index.htmlのファイル一覧を自動更新 ⭐ NEW!
• save_and_build() - 保存＋SUMMARYの更新＋index.htmlの更新

reviews/index.html（HTMLビューア）

自動的に生成・更新されます！ save_and_build()を呼び出すたびに、最新のファイル一覧に更新されます。

提供機能：

• Markdownの自動レンダリング（marked.js）
• ダークモードUI（GitHubスタイル）
• ファイル一覧ナビゲーション（自動更新）
• コードのハイライト
• 最新のドキュメントをデフォルトで表示
• アクティブなリンクをハイライト

📋 簡単な使い方

ステップ1：変更を記録

# create_changelog.py 예시
from code_changelog_tracker import CodeChangeLogger

logger = CodeChangeLogger(
    "Daily Signal App - 회원 가입 기능",
    user_request="이메일/비밀번호 기반 회원 가입 구현"
)

# 파일 생성 기록
logger.log_file_creation(
    "lib/screens/signup_screen.dart",
    "SignUpScreen 코드...",
    "회원 가입 화면 구현"
)

# 파일 수정 기록
logger.log_file_modification(
    "lib/providers/auth_provider.dart",
    "old code",
    "new code",
    "signUp 메서드 추가"
)

# 저장
logger.save_and_build()

ステップ2：サーバーを起動

cd reviews
python3 -m http.server 4000

ステップ3：ブラウザーで確認

http://localhost:4000

🎨 HTMLビューアの特徴

ダークモードUI

• GitHubスタイルのMarkdownレンダリング
• コードブロックのハイライト
• レスポンシブレイアウト

ナビゲーション

• 左側にファイル一覧を自動表示
• 日付・時刻順に並べ替え
• クリックして簡単に移動

Markdownレンダリング

• 見出し、リスト、コードブロックに対応
• Diff表示
• 絵文字に対応

💻 コマンドガイド

サーバーを起動

cd reviews
python3 -m http.server 4000

ポートを変更

python3 -m http.server 3000
python3 -m http.server 8080

バックグラウンドで実行

cd reviews && python3 -m http.server 4000 &

サーバーを終了

# 포그라운드: Ctrl+C
# 백그라운드: 프로세스 ID 찾아서 종료
lsof -ti:4000 | xargs kill -9

🔧 ポート設定

デフォルトのポート：4000

python3 -m http.server 4000
# → http://localhost:4000

別のポートを使用

python3 -m http.server 3000
# → http://localhost:3000

ポートの競合を解決

# 다른 포트 사용
python3 -m http.server 4001

# 또는 기존 프로세스 종료
lsof -ti:4000 | xargs kill -9

🌐 デプロイオプション

GitHub Pages

# reviews 폴더를 gh-pages 브랜치에 푸시
git subtree push --prefix reviews origin gh-pages

Netlify

# Netlify에 reviews 폴더 배포
# Build command: (없음)
# Publish directory: reviews

Vercel

# Vercel에 reviews 폴더 배포
vercel reviews

📝 ベストプラクティス

1. サーバーを常に起動：開発中はサーバーを起動したままにします
2. 小さな単位に分ける：各作業を小さな単位に分けてドキュメント化します
3. 明確なタイトル：プロジェクト名を明確に記載します
4. 定期的にバックアップ：reviewsフォルダーをGitで管理します
5. ブラウザーのブックマーク：http://localhost:4000をブックマークに追加します

🎓 活用例

会員登録機能の実装

logger = CodeChangeLogger(
    "Daily Signal App - 회원 가입",
    user_request="이메일/비밀번호 회원 가입 기능"
)

# CustomTextField 생성
logger.log_file_creation(
    "lib/widgets/custom_text_field.dart",
    "CustomTextField 코드...",
    "재사용 가능한 입력 필드 위젯"
)

# SignUpScreen 생성
logger.log_file_creation(
    "lib/screens/signup_screen.dart",
    "SignUpScreen 코드...",
    "회원 가입 화면 구현"
)

# AuthProvider 수정
logger.log_file_modification(
    "lib/providers/auth_provider.dart",
    "old code",
    "new code with signUp",
    "signUp 메서드 추가"
)

# 저장
logger.save_and_build()

# 서버에서 확인: http://localhost:4000

🚨 トラブルシューティング

ポートがすでに使用中の場合

# 다른 포트 사용
python3 -m http.server 4001

# 또는 프로세스 종료
lsof -ti:4000 | xargs kill -9

ファイルが表示されない場合

# index.html이 있는지 확인
ls reviews/index.html

# 없으면 logger.save_and_build() 호출 시 자동 생성됨

重要：logger.save_and_build()を呼び出すと、index.htmlが自動的に更新されます！

• 新しいMarkdownファイルを追加すると、ファイル一覧が自動更新されます
• 最新のファイルがデフォルトのページに自動設定されます
• ブラウザーを再読み込みするだけで、最新のドキュメントを確認できます

Markdownがレンダリングされない場合

• ブラウザーのキャッシュをクリアします（Cmd+Shift+R / Ctrl+Shift+R）
• サーバーを再起動します
• index.htmlが最新であることを確認します（save_and_build()を再実行）

🎯 メリット

インストール不要

• Node.js、npm、HonKitのインストールは不要です
• Pythonがあればすぐに使用できます
• 依存関係はありません

起動が速い

• 1秒以内にサーバーを起動
• すぐにドキュメントを確認できます

簡単にデプロイ

• reviewsフォルダーをデプロイするだけです
• 静的サイトとしてどこでもホスティングできます

自動更新 ⭐ NEW!

• save_and_build()を呼び出すとindex.htmlが自動更新されます
• 手動編集は不要です
• 常に最新のファイル一覧を維持します
• 最新のドキュメントがデフォルトのページに自動設定されます

📊 比較：HonKit vs Simple HTML

機能	HonKit	Simple HTML
インストール	npm、Node.jsが必要	Pythonのみ必要
ビルド時間	5-10秒	即時
依存関係	多い	なし
カスタマイズ性	高い	中程度
検索機能	あり	ブラウザー検索
デプロイ	_bookフォルダー	reviewsフォルダー

ライセンス

MITライセンス

---

インストール不要！Pythonですぐに実行して、ウェブブラウザーで確認できます！ 🎉