## 概要 ウィンドウ背後のコンテンツ（デスクトップ壁紙や他アプリ）にブラー（すりガラス）効果を適用し、モダンな外観を実現する。 ## 背景 - 元の要望: [electron-vibrancy](https://github.com/0x61726b/electron-vibrancy) の導入 - electron-vibrancy は最終更新が古く（Electron 1.6.8時代）、現在の Electron 39 ではmacOS向けにビルトイン `vibrancy` オプションが存在する - Windows向けは別途ネイティブライブラリが必要 ## 対応方針 ### macOS - Electron標準の `BrowserWindow` の `vibrancy` オプションを使用 - ネイティブの `NSVisualEffectView` ベースでGPUアクセラレーション済み、パフォーマンス影響ほぼなし - マテリアル種別: `appearance-based`, `light`, `dark`, `titlebar`, `selection`, `menu`, `popover`, `sidebar`, `medium-light`, `ultra-dark` ### Windows - [glasstron](https://github.com/AryToNeX/glasstron) を採用候補とする - `acrylic`（Windows 10 1803+）/ `blurbehind` 両対応 - BrowserWindow拡張型で導入が比較的容易 - 他候補（`electron-vibrancy`, `windows10-fluently-vibrancy`）は最終更新が古く不採用 - DWM（Desktop Window Manager）のコンポジション機能を使用するためGPU処理 ## 設定プロパティ（案） ``` coderm.window.vibrancy (string, default: "none") ``` | 値 | 説明 | |---|---| | `"none"` | 効果無効（デフォルト） | | `"auto"` | テーマに追従 | | `"light"` | ライト系マテリアル | | `"dark"` | ダーク系マテリアル | ## 懸念事項 - **`transparent: true` が必要**: Electronのレンダリングパイプラインに影響する可能性あり - macOS: ネイティブウィンドウシャドウが表示されなくなる制限あり - Windows: リサイズ時の再描画コスト増、スナップ機能への影響（glasstron内部でハック処理あり） - **パフォーマンス**: blur計算自体は軽い（GPU処理）だが、Chromiumの中間レイヤーを通るためWezTerm等のネイティブアプリよりはオーバーヘッドあり - **設定変更時の再起動要否**: 要検討 ## 参考リンク - [元要望ライブラリ](https://github.com/0x61726b/electron-vibrancy) - [Windows向け採用候補: glasstron](https://github.com/AryToNeX/glasstron) - [Electron公式: Custom Window Styles](https://www.electronjs.org/docs/latest/tutorial/custom-window-styles) - [Electron Vibrancy API (#7898)](https://github.com/electron/electron/pull/7898)
概要
ウィンドウ背後のコンテンツ（デスクトップ壁紙や他アプリ）にブラー（すりガラス）効果を適用し、モダンな外観を実現する。
背景
vibrancyオプションが存在する対応方針
macOS
BrowserWindowのvibrancyオプションを使用NSVisualEffectViewベースでGPUアクセラレーション済み、パフォーマンス影響ほぼなしappearance-based,light,dark,titlebar,selection,menu,popover,sidebar,medium-light,ultra-darkWindows
acrylic（Windows 10 1803+）/blurbehind両対応electron-vibrancy,windows10-fluently-vibrancy）は最終更新が古く不採用設定プロパティ（案）
"none""auto""light""dark"懸念事項
transparent: trueが必要: Electronのレンダリングパイプラインに影響する可能性あり参考リンク