DocMate
1. プロダクト概要どんな「本当に欲しい」に着目したかWeb開発者が日常的に感じている課題は、「APIの使い方を理解するまでの距離の長さ」です。 MDNなどの公式ドキュメントは信頼できる情報源ですが、
といった負担が存在します。 DocMateは、「ドキュメントを読むこと」そのものではなく、 “必要な情報を、いまの開発文脈の中で、すぐ理解し試したい” という開発者の本質的なニーズに着目しました。 どんなアプローチで「本当に欲しい」を実現しましたか？DocMateは、MDNドキュメントを起点として、
という一連の流れをエディタ内で完結させました。 これにより、開発者はブラウザを開くことなく、 理解 → 検証 → 実装 の流れを途切れずに進めることができます。 2. プロダクトの機能🔍 Explain（シンボル単位の解説）エディタ上でクラス名やメソッド名を右クリックすることで、関連するドキュメントを検索し、
を表示します。 📄 Explain File（ファイル構造の理解）Explorer上でファイルを右クリックすると、
をAIが解析し、全体像を短時間で把握できる形で提示します。 🧪 Interactive Examples（実行可能サンプル）生成されたサンプルコードはWebview内で編集・実行可能です。
など、言語に応じた実行方法を自動で切り替えます。 ⚡ キャッシュ機構一度取得したドキュメントはURL単位でキャッシュされ、 再表示時は高速に結果を表示します。 3. 使い方・デモ基本的な使い方▶ シンボルを解説する
▶ ファイル構造を理解する
動作イメージ
4. 技術面でのこだわり📘 ドキュメント解析パイプラインDocMateは単なるAI要約ツールではなく、
という段階的な処理パイプラインを構築しています。
🤖 Geminiとの構造化連携Geminiには自然文ではなく、
というJSON形式での出力を強制しています。 これにより、
が可能になっています。 さらに、AI出力にありがちな
を補正する独自パーサを実装し、安定した動作を実現しました。 🧪 Webview Sandbox実行基盤DocMateではWebview内に独自のsandbox環境を構築しています。
これにより、説明文の中に含まれるサンプルコードを その場で編集・実行できる体験を提供しています。 🔁 フォールバック設計Gemini APIが直接利用できない場合でも、
できる設計を採用しています。 これにより、API制限やネットワーク環境に依存しない 柔軟な運用が可能です。 5. UI/UX面でのこだわり🧭 学習の流れを崩さない情報設計DocMateの画面構成は、開発者の思考順序に合わせて設計されています。
これにより、ブラウザとエディタを行き来する必要がなくなります。 🎨 VS Codeネイティブな見た目WebviewではVS Codeのテーマ変数を使用し、
でも違和感なく溶け込むUIを実現しました。 🧪 “読む”から“触る”への転換サンプルコードは静的な表示ではなく、
を備えています。 これにより、ドキュメントが「読むもの」から 「試しながら理解するもの」へと変化します。 6. 将来の展望🧱 AIによるドキュメント自動生成現在は外部ドキュメントの理解支援が中心ですが、 将来的には以下の機能を追加予定です。
🌍 対応ソースの拡張今後は、
など、複数の知識ソースへ対応する予定です。 🧠 プロジェクト理解の高度化将来的には、
など、より高度なAI開発支援ツールへの進化を目指しています。 |