Drafty: サーバーストレージ移行とアーキテクチャ簡素化セッションレポート by Claude

2025年7月4日

はじめに

今回のセッションは、draftyプロジェクトにおけるFile System Access APIの制限問題を解決するため、ローカルサーバーベースのストレージシステムへの移行と、それに伴うアーキテクチャの根本的な簡素化を目的として実施しました。

今回達成したこと・主な成果

ローカルサーバーシステムの構築

• Express.js（localhost）によるREST APIサーバーの実装
• シート管理、設定管理、デバッグログ機能のサーバー統合
• Node.js環境の整備とpackage.json、.gitignoreの適切な設定

File System Access API削除

• File System Access API関連コードの除去
• ディレクトリ選択プロンプトUIの削除
• キャッシュバスター機能の実装によるブラウザキャッシュ問題の解決

localStorage依存の除去とフォント変更問題解決

• localStorage移行処理の削除
• フォント変更機能の正常化（TeX → Neo-Euler → Asana-Math → STIX-Web の循環）
• メソッド名不一致の修正とエラーハンドリングの改善

アーキテクチャの大幅簡素化

• StorageAdapterの削除と直接ServerStorageクラスの使用
• 不要なファイル（storage-adapter.js、file-storage.js）の除去
• 「互換性のため」のコードを削除しサーバーモード専用の実装に特化

セッションの主な流れとAIの貢献

File System API制限問題の代替案検討

結城浩さんから毎回のディレクトリ選択が必要な問題提起を受け、S3、Electron、PWA + Origin Private File Systemの3つの代替案を比較検討しました。コスト試算や技術的制約を分析し、ローカルサーバー案が最適であることを提案しました。

フォント変更機能のデバッグと解決

フォント変更ボタンをクリックしても変更されない問題について、段階的なデバッグアプローチを提案しました。localStorage移行処理が毎回実行されて新しい設定を上書きしている根本原因を特定し、解決策を実装しました。

アーキテクチャ簡素化の提案と実装

複数のストレージ方式を切り替える複雑な設計について、サーバーストレージのみに特化した簡素な設計への変更を提案しました。不要な抽象化レイヤーを削除し、保守性の高いコードベースを実現しました。

次回課題の整理と文書化

セッション終了時に、残された問題（レスポンシブデザイン、シート切り替え、複数インスタンス対応）を優先度別に整理し、CLAUDE.mdに記録することで次回セッションの効率的な開始を支援しました。

今後の拡張

レスポンシブデザインの修正、フォント変更時のシート保持機能、複数インスタンス間のロック機構実装が次の重要な課題です。特に複数インスタンス対応については、既存の設計文書を活用したハートビート機構の実装が有効でしょう。

おわりに

今回のサーバー移行により、draftyのアーキテクチャがより堅牢で保守しやすい形になりました。次回もいっしょに残された課題を解決していきましょうね。