SimpleBlockEditor開発2 OpenAIデバッグと画像・数式ブロック by Claude

2025年6月28日

はじめに

今回のセッションでは、SimpleBlockEditorプロジェクトの完成度を大幅に向上させるため、OpenAI API連携の修正、画像ブロック機能の実装、数式ブロック機能の基盤構築という3つの重要な開発タスクに取り組みました。前回のレポート作成セッション以降、実用的なリッチテキストエディタとしての機能を着実に充実させることができました。

参考リンク

今回のセッションで参照した主要なリソース：

• Editor.js API Documentation
• MathJax vs KaTeX performance comparison
• @editorjs/image - npm
• KaTeX – The fastest math typesetting library for the web
• EditorJS-LaTeX GitHub Repository
• katex-editorjs GitHub Repository

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

OpenAI API UI更新問題の解決

• DOMの直接操作が原因でAI処理結果がエディタUIに反映されない問題を特定
• Editor.js公式APIを使用したブロック更新方式に変更
• editor.blocks.delete()とeditor.blocks.insert()を組み合わせた安全な更新処理を実装
• 英訳機能の正常動作を確認し、フェーズ2 OpenAI API連携を完全に完了

画像ブロック機能の完全実装

• @editorjs/imageプラグインの統合とカスタムアップローダーの実装
• Base64変換によるバックエンド不要の画像処理システム構築
• 画像ペースト、ドラッグ&ドロップ、URL貼り付けの全機能対応
• MarkdownエクスポートでのBase64画像埋め込み機能実装
• pandocでのHTML変換動作確認による相互運用性の検証

数式ブロック機能の基盤構築

• MathJax vs KaTeX の詳細比較によりKaTeXを選定
• 既存プラグインのセキュリティ評価と独自実装決定
• セキュリティを重視した数式ブロッククラスの実装開始
• KaTeXライブラリの統合と基本的なレンダリング環境構築
• 詳細ログ出力によるデバッグ効率化

戦略的構想の記録

• memo.hyuki.com連携MCPクライアント構想をCLAUDE.mdに記録
• 音声入力・AI処理・画像対応の高機能リッチフロントエンド化計画策定

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

技術的問題の特定と解決

OpenAI API処理は成功していたにも関わらず、エディタUIが更新されない問題について、Editor.js APIドキュメントを調査し、DOMの直接操作ではなく公式APIを使用する必要があることを特定しました。blocks.update()メソッドの調査を通じて、最終的にdelete + insert方式での安全なブロック更新を実現しました。

セキュリティを重視した設計判断

数式ブロック実装において、既存プラグインのセキュリティ評価を実施し、入力サニタイゼーション不足やXSS対策の懸念を特定しました。この分析結果を基に、セキュリティを最優先とした独自実装の方針を決定し、KaTeX直接統合による安全な数式処理の設計を行いました。

実用性検証の重視

画像ブロック機能の実装では、単純な動作確認にとどまらず、pandocでのHTML変換まで検証することで、他のツールチェーンとの相互運用性を確認しました。このような実用性重視のアプローチにより、実際の執筆環境で使える品質を確保しました。

戦略的な将来構想

SimpleBlockEditorをローカルで動作させ、MCPサーバのクライアントとしてmemo.hyuki.comのリッチフロントエンドにする構想をCLAUDE.mdに記録しました。既存資産の最大活用と新機能の相乗効果を狙った戦略的なアイディアとして整理できました。

今後の拡張

• 数式ブロック機能の完全実装と動作検証
• MCPクライアント機能の実装による既存メモサイトとの連携
• 追加ブロックタイプ（引用、箇条書き）の実装
• ブロック並び替え機能による編集体験の向上
• UI/UX改善による音声入力との親和性強化

おわりに

SimpleBlockEditorが実用的なリッチテキストエディタとして大きく成長しました。次は数式機能を完成させて、理想の執筆環境を一緒に作り上げましょうね。