本日もローカルデスクトップマインドマップエディタ「枝見 Zhijian」の磨き上げを続けています。
枝見は C# + Avalonia をベースにした Markdown-first のマインドマップエディタです。複雑なプロジェクト管理システムではなく、アウトライン作成、機能設計の整理、記事構成の整理といった頻出シナリオに焦点を当て、アウトライン、Markdown、マインドマップの3つのビューを同じツリーに結び付けています。
プロジェクトリポジトリ：https://github.com/dotnet9/Zhijian。
今回のスクリーンショットとGIFは現在のインターフェースで再作成し、プログラム起動時にデフォルトで読み込まれる取扱説明書を使用して、ファイル一覧、ミニマップ、ズーム、キャンバスドラッグ、階層調整を重点的に表示しています。
起動するとすぐに取扱説明書
新しいバージョンでは、起動時にプログラムと一緒に出力される 使用手册.md がデフォルトで読み込まれます。このドキュメント自体が多階層のマインドマップになっており、最初の画面でファイル一覧、アウトライン、マインドマップの連動効果を確認できます。ユーザーがゼロから始める必要がある場合は、「新規作成」で中心テーマのみの空白のマインドマップを作成することもできます。
マインドマップの2階層ノードも単調な灰色ではなくなりました。新規作成またはインポート後、2階層ノードにはより目立つ自動強調色が使用されます。メモ文字は灰色の前景色とやや大きめのフォントサイズでタイトルと区別されますが、背景ブロックは追加されず、視覚的な負担が軽減されています。
ファイルメニューを製品ワークフローに補完
タイトルバーの「ファイル」メニューは、インポート/エクスポートの入り口だけでなく、完全なファイルワークフローになりました。macOSではメニューショートカットが ⌘ で表示・応答し、Windows/Linuxでは引き続き Ctrl を使用するため、Macユーザーがシステム慣習に合わないショートカットキーを見ることはありません。
- 新規作成：空白のマインドマップを作成します。
- 新規ウィンドウ：新しいエディタプロセスを開きます。
- 開く：ファイルダイアログでMarkdown、OPML、XMindなどのサポート形式を選択し、そのファイルを左側のファイル一覧に追加します。
- フォルダを開く：フォルダ内のサポートされているマインドマップファイルをスキャンし、左側のファイル一覧を切り替えます。
- 最近使ったファイルを開く：最近操作したファイルを記録します。
- 保存、名前を付けて保存、ファイルの場所を開く、閉じる：日常的な編集に必要なクローズドループを補完します。
タイトルバーメニューを実際のワークフローに沿って整理
メニューは「ファイル」と「バージョン情報」だけではなくなりました。タイトルバーはファイル、編集、テーマ、言語、ヘルプ、バージョン情報のグループに整理され、メニュー項目にはアイコンが付き、よく使う操作にはショートカットキーが表示されます。
「編集」メニューには、元に戻す、やり直し、兄弟を追加、子を追加、昇格、降格、上に移動、下に移動、削除、および「Markdownとしてコピー」があります。コピー後はシステムクリップボードに書き込まれ、デスクトップグローバル通知が表示されます。
テーマはタイトルバーのToggleSwitchではなく、「テーマ」メニューに独立して配置され、今後さらに多くのテーマを拡張しやすくなります。言語メニューは Lang.Avalonia.Json を使用し、現在は中国語（簡体字）、中国語（繁体字）、英語、日本語のリソースを提供しています。
「ヘルプ」メニューには問題報告、要件提出、PR提出、GitHubリポジトリへのリンクがあります。「バージョン情報」メニューにはウェブサイト、更新履歴、謝辞、バージョン情報ウィンドウへのリンクがあります。
初回起動時の新規ユーザーガイドは今回改めて整理されました。ファイルのステップではタイトルバーのファイルメニューを直接ハイライトし、左側パネル全体を覆うことはなくなりました。以降のステップでは、アウトライン編集エリア、Markdown切り替え、マインドマップキャンバス、ミニマッププレビュー、ズーム、ステータスバーナビゲーションを順に指し示します。ガイドには「スキップ」ボタンが用意されており、ソフトウェアを開いたばかりのユーザーはいつでもガイドを終了できます。
ガイドを表示するかどうか、デフォルト言語、最近使用したファイルの数、履歴ステップ数、および recent-files.json、new-user-tour.seen といった実行状態のファイル名は、src/Zhijian/App.config に集中管理されています。実行時は ApplicationSettings が .NET コンパイル後の Zhijian.dll.config を読み取り、設定が破損している場合はデフォルト値にフォールバックして起動に影響を与えません。
単一ファイルを開くと、左側の「ファイル」タブにそのファイルがリストされ、後で切り替えやすくなります。フォルダを開くと、ディレクトリ内のMarkdown、OPML、XMindドキュメントが一覧表示されます。ファイルを選択すると自動的に「アウトライン」に戻り、現在のマインドマップ構造が表示されます。
閉じるかファイルを切り替える前に未保存の変更がある場合は、保存確認が表示されます。最近使用したファイルの記録はプログラムディレクトリに保存され、よく使うドキュメントに毎回移動する必要がありません。
アウトラインとマインドマップ、両方とも使いやすく
アウトラインビューとマインドマップビューは同じ MindMapNode ツリーを共有しているため、どちらかの側でタイトル、メモ、親子関係を編集すると、もう一方の側も同期して更新されます。
よく使う構造操作が両方のビューのメニューに追加されました：
- 子ノードの追加、兄弟ノードの追加。
- 親ノードへの昇格、子ノードへの降格。
- 上に移動、下に移動。
- メモ、削除。
キーボードによるノード作成のパスも再整理されました。Enter で兄弟を追加、Tab または Shift+Tab で階層を調整し、フォーカスは新しいノードの入力ボックスに戻ります。
アウトラインの丸ボタンメニューとドラッグは同じエントリを共有しており、短押しでメニューを開き、移動が閾値を超えた場合のみドラッグに入るため、メニューとドラッグがイベントを取り合うことはありません。
メモ入力も細かい処理が行われています。ノードにメモが既にある場合、またはユーザーが明示的に「メモ」を選択した場合のみ、メモ入力ボックスが表示されます。空のメモはフォーカスを失うと自動的に折りたたまれます。マインドマップノードでは、メモとタイトルが同じテキスト揃えで描画されるようになり、短いテキストのノードでも再度クリックして入力を続けることができます。
マインドマップノードがフォーカスを取得すると、フローティングツールバーが表示され、メモの追加やノードの削除を直接行えます。
マインドマップ側でもドラッグによる親子階層の調整がサポートされ、ノード中央にドラッグすると子ノードになり、上下の端にドラッグすると兄弟の順序が調整されます。
ミニマップ、ズーム、キャンバスドラッグ
マインドマップの面積が大きくなると、ユーザーが最も必要とするのは「今、全体のどの部分を見ているか」です。ミニマップは、固定された模式図ではなく、実際のノード座標と現在のビューポートに基づいて描画されます。ミニマップをクリックすると、対応する領域に移動できます。
ズーム、中心テーマへの位置合わせ、キャンバスドラッグも、実際のウィンドウで再検証されています。
中央の区切りバーのドラッグによる幅調整も、明確な GridSplitter の動作に変更され、スクリーンショットで検証済みですが、この種のGIFは読みやすさにあまり貢献しないため、ドキュメントでは重点的にデモしていません。
バージョン情報、更新履歴、謝辞
タイトルバーの「バージョン情報」メニューには以下が含まれます：
- ウェブサイトを開く：https://codewf.com
- 更新履歴：プログラムに同梱された更新履歴ファイルを独立したデスクトップウィンドウで表示し、
CodeWF.Markdown.Lite.Themesを使用してレンダリングします。 - バージョン情報：ソフトウェア名、概要、バージョン番号、更新日時、作者、連絡先、リポジリアドレス、NuGetパッケージアドレスを表示します。
- 謝辞：このプロジェクトが使用し、恩恵を受けているオープンソースプロジェクトをリストし、リンクから直接ジャンプできます。
枝見は、これらの優れたオープンソースプラットフォームとプロジェクトに感謝します：
新しいアプリで CodeWF.MindView を再利用する方法
自分のAvaloniaアプリケーションでマインドマップ機能を再利用したい場合は、枝見アプリ全体を直接コピーするのではなく、優先的に CodeWF.MindView を参照してください。
CodeWF.MindView には現在以下が含まれています：
MindMapNode：共有ノードモデル。タイトル、メモ、色、座標、子ノードを含みます。MindMapEditor：マインドマップのメイン編集コントロール。基本的なノード作成、削除、昇格・降格、兄弟間移動、ドラッグ移動、自動レイアウトを内蔵。MindMapMiniMap：実際のノード座標に基づくミニマップコントロール。MindMapDocumentCodec：Markdown、OPML、XMind のエンコード/デコード。IMindMapEditorController：オプションのホストインターフェース。アンドゥ履歴、未保存状態、ビジネス制約を組み込む必要がある場合に実装します。IMindMapFileService：ファイルの開く、保存、最近使ったファイル、フォルダ読み込み、未保存通知などのアプリケーションレベルのファイルサービス契約。
新しいアプリでは、コントロールライブラリとテーマライブラリを参照できます：
<ItemGroup>
<ProjectReference Include="..\CodeWF.MindView\CodeWF.MindView.csproj" />
<ProjectReference Include="..\CodeWF.MindView.Themes\CodeWF.MindView.Themes.csproj" />
</ItemGroup>
App.axaml でテーマを登録します：
<Application
xmlns="https://github.com/avaloniaui"
xmlns:mindThemes="using:CodeWF.MindView.Themes">
<Application.Styles>
<mindThemes:MindViewThemes />
</Application.Styles>
</Application>
ページ内にマインドマップコントロールを直接配置します。通常の接続では、ノードコレクションと現在の選択をバインドするだけで済みます：
<UserControl
xmlns="https://github.com/avaloniaui"
xmlns:mind="https://codewf.com">
<mind:MindMapEditor
Roots="{Binding Roots}"
SelectedNode="{Binding SelectedNode, Mode=TwoWay}" />
</UserControl>
ホストのViewModelが ObservableCollection<MindMapNode> を提供すれば、すぐに動作します。コントロールライブラリは表示、編集、ドラッグプレビュー、ミニマップ、基本的なノード操作を担当し、アプリケーションが自身のドキュメント状態、アンドゥ履歴、ファイルメニュー、ビジネスルールを管理する場合は、IMindMapEditorController を実装して Controller をバインドします。
アプリケーションが枝見のようなアウトラインビュー、ファイルメニュー、タイトルバー、Markdownパネルを必要とする場合は、src/Zhijian を参考にしてください。OutlineEditor やデスクトップウィンドウはアプリケーションレイヤーのコードであり、CodeWF.MindView はAvaloniaのみに依存するため、他のプロジェクトで再利用しやすくなっています。
リポジトリとリリース
- リポジリアドレス：https://github.com/dotnet9/Zhijian
- リリースアドレス：https://github.com/dotnet9/Zhijian/releases/tag/V12.0.3
今回の検証
今回の作業はコードを変更してコンパイルが通るかを確認するだけではありません。ドキュメントのスクリーンショット/GIFを再生成し、デフォルトで読み込まれる取扱説明書を使用して以下の操作をカバーしました：
- 起動時にデフォルトで取扱説明書が読み込まれること、および個別に開いたファイルが左側のファイル一覧に表示されることを確認。
- ファイルメニューとバージョン情報メニューを開き、タイトルバーメニューがクリック可能で、右側に不自然な矢印がないことを確認。
- 編集、テーマ、言語、ヘルプメニューを開き、メニュー、アイコン、ショートカットキー、分類が正常であることを確認。
- ダーク/ライトテーマを切り替え、さまざまなテーマでテキストとメニューが判読可能であることを確認。
- 英語に言語を切り替え、タイトルバーメニュー、タブ、ステータスバーのテキストが更新されることを確認。
- Markdownとしてコピーを使用し、クリップボードコマンドが実行され、デスクトップグローバル通知が表示されることを確認。
- 初回起動マークをリセットし、新規ユーザーガイドが実際のウィンドウに従って表示されることを確認。
- ガイドの「スキップ」をクリックし、ガイドが直ちに閉じられ、既読状態が書き込まれることを確認。
- フォルダを開き、「ファイル/アウトライン」タブが切り替わり、ファイルが読み込まれることを確認。
- アウトラインとマインドマップでノードメニューを開き、よく使う構造操作がすべて揃っていることを確認。
- 短いテキストノードとメモを編集し、再度フォーカスを取得でき、タイトル/メモの配置が正しいことを確認。
- macOS で
⌘ + L、⌘ + マウスホイールを使用し、中心テーマの位置合わせとズームが Mac のショートカット習慣に従っていることを確認。 - ミニマップを開き、マインドマップをズームし、キャンバスをドラッグ。
- ViewModel を介して新規作成、兄弟追加、子追加、削除、昇格、降格、メモ、Markdown同期をシミュレート。
- 左右の区切りバーをドラッグし、アウトラインとマインドマップの幅が実際に調整されることを確認。
最終ビルドコマンド：
dotnet build Zhijian.slnx
ビルド結果は警告0、エラー0です。
私にとって、枝見で最も重要なのは機能を詰め込むことではなく、頻出操作がすべて使いやすいことです。開けばすぐに空白のドキュメント、メニュー項目が実際のニーズに直接合致し、ノード作成後のフォーカスが正しい位置にあり、メモが視覚を邪魔せず、ズームとミニマップでユーザーが方向を再確認できること。これらの細部がしっかりしていれば、ユーザーは構造整理にこのツールを使い続けてくれるでしょう。