Ayame ファミリーのデザイン¶
ayame-diff と ayame-editor は、
各製品固有のレイアウトを保ちながら、同じビジュアルファミリーを共有します。
editor は執筆面、diff は比較の設定・結果ビューであるため、画面構造は意図的に
結合していません。
GUI がネイティブのローカルサーバーを使う理由¶
GUI は、CLI と同じネイティブ Go 実行ファイルをブラウザで操作する表示層です。
gui は認証付きの loopback サーバーを起動し、serve は明示したアドレスで同じ
UI を提供します。入力はローカルプロセスが処理し、ayame-diff のサービスへ
アップロードしません。
この境界は意図的な設計です。
| 能力 | ネイティブのローカルプロセス | ブラウザだけで配布する場合の境界 |
|---|---|---|
| パスアクセス | ユーザーが指定した OS のパスを直接開く | 通常はユーザーが選択した、または以前に許可したハンドルから始まり、対応はブラウザごとに異なる |
| 外部編集 | ファイル由来の 2-way / 3-way 入力を監視し、別エディターでの保存後に再比較する | ページ外で発生した任意の変更を監視する可搬なブラウザ API はない |
| 巨大入力 | CSV/TSV を分割し、明示したメモリ予算の下で外部ソートの run を --temp-dir へ spill する |
ブラウザのメモリと、ブラウザ管理ストレージの容量・永続化規則に制約される |
| デスクトップ運用 | 1つのバイナリが CLI、ファイルマネージャー登録、スクリプト、Git のカスタムツールを提供する | 起動とファイルシステム連携は、ブラウザ・OS固有の受け渡しに依存する |
| 結果の一貫性 | CLI コマンドと GUI ハンドラーが同じ内部比較・マージパッケージを呼ぶ | 別配布の Web 実装では、意図してエンジンを共有または検証しない限り差異が生じ得る |
ここでいう「ブラウザだけ」は配布境界であり、WebAssembly ではこれらを絶対に実装 できないという主張ではありません。ユーザー許可によるファイルハンドルや origin-private storage などのブラウザ API で、表の一部は実現できます。 ayame-diff は、直接パス、可搬な外部変更検知、ディスクを使う処理、OS 統合を 任意のブラウザ機能ではなく製品の基本要件とするため、ネイティブ境界を選びます。
このローカル権限はセキュリティ境界も定めます。loopback モードは起動ごとの
API token を使い、Host header を固定します。loopback 以外の待ち受けには
--allow-remote が必要です。その URL を持つ人はプロセスから見えるパスを
読み書きできる可能性があるためです。詳細は GUI のセキュリティ説明と
ファイルマネージャー・Git 連携を参照してください。
共有トークン¶
埋め込み GUI の標準値は internal/server/web/tokens.css にあります。これは
editor の crates/ayame-cli/web/style.css にある次のトークンをレビューして
複製したものです。
- アイリス系の中性色と紫のアクセント
- UI と等幅フォントのスタック
- 10 ピクセルのパネル角丸、境界線、立体表現
- ライト・ダーク配色
- 追加、削除、変更、移動の意味色
コントロールは同じトークン語彙を使います。diff 固有色は意味を保ち、色覚多様性に 配慮した選択肢も維持します。日本語と英語のラベルは、両アプリで短く直接的な製品 用語を使います。
姉妹アイコン¶
両製品は同じアヤメのシルエットを使います。ayame-diff は認識しやすいファミリー
マークを変えず、比較を表す緑と赤の対になった葉脈を追加します。SVG ソースは
internal/server/web/favicon.svg です。配布用のラスター画像と各プラットフォームの
アイコンは、決定的なコード実装から生成します。
同期方針¶
トークン同期は自動ではなく意図的に行います。一方のプロジェクトが共有パレット、 タイポグラフィ、角丸、主要コントロールのスタイルを変更した場合、レビュー担当者は 姉妹プロジェクトを確認し、意図的な差異をこの文書へ記録します。製品レイアウトと diff/editor 専用の意味色は一致させる必要がありません。これにより、独立してリリース するリポジトリ間のビルド時依存を避けます。