liquid-glass

Liquid Glass

概要

このスキルを使うと、カスタムの装飾を最小限に抑えながら、macOS の SwiftUI アプリを最新の macOS デザインシステムに対応させられます。まず、標準的なアプリ構成、ツールバー、検索の配置、シート、コントロールを整え、その後、アプリに独自の表面表現が必要な箇所にのみカスタムの Liquid Glass を追加します。

独自のぼかし、不透明な背景、カスタムのツールバーやサイドバーの外観よりも、システム提供のガラス表現や適応型マテリアルを優先してください。エフェクトを追加する前に、既存の UI に余分な塗りつぶし、スクリーン、クリッピングがないか確認してください。

ワークフロー

1. 関連するシーンまたはルートビューを読み、構造パターンを特定します。 NavigationSplitView、TabView、シートの表示、詳細／インスペクタ のレイアウト、ツールバー、カスタムのフローティングコントロールなどが該当します。
2. 製品上の明確な必要性がない限り、システムのシート、サイドバー、 ツールバーの背後にあるカスタム背景や暗くするレイヤーを取り除きます。こうしたレイヤーは Liquid Glass を見えにくくし、自動スクロールエッジエフェクトを妨げることがあります。
3. まず、標準的な SwiftUI の構成とコントロールを更新します。
4. 標準コントロールでは対応できないアプリ固有の UI にのみ、カスタムの glassEffect 表面を 追加します。
5. ガラス表現のグループ化、トランジション、アイコンの扱い、前景のアクティブ状態が視覚的に 調和し、ポインタとキーボードでも引き続き使いやすいことを確認します。
6. UI の変更が SwiftPM の GUI アプリの起動動作にも影響する場合は、 build-run-debug を使って、実行ファイルをそのまま起動するのではなく、フォアグラウンドの .app バンドルとして アプリを実行します。

アプリの構成

• 階層に基づく macOS のレイアウトには NavigationSplitView を優先します。サイドバーには 独自の塗りつぶしを重ねず、システムの Liquid Glass マテリアルを使います。
• フローティングサイドバーに隣接するヒーローアートワークや大きなメディアには、 backgroundExtensionEffect を使います。これにより、被写体をクリッピングせずに、ビジュアルを セーフエリアの外側まで広げられます。
• インスペクタは現在の選択項目と視覚的に関連付け、確認対象のコンテンツよりも重厚なカスタム背景を 与えないようにします。
• アプリでタブを使う場合、永続的な最上位セクションには TabView を使い続け、 各タブのローカルなナビゲーション状態を維持します。
• iPhone 専用のタブバー最小化やアクセサリの動作を Mac アプリに強制しないでください。 macOS では、従来型の上部ツールバーとネイティブなタブや検索の配置を優先します。
• シートでフロストガラス風のマテリアルを再現する目的だけで presentationBackground を使っている場合は、 取り除き、新しいシステムマテリアルに任せることを検討します。
• ツールバーボタンから視覚的にシートへ移動するようなトランジションを実現するには、表示元のアイテムを ナビゲーションズームトランジションの起点にし、シートのコンテンツを遷移先として指定します。

ツールバー

• ツールバーの項目は、フローティングの Liquid Glass 表面上に描画され、自動的にグループ化されるものと 考えてください。
• グループ化を示すには ToolbarSpacer を使います。
  • 固定スペースは、関連するアクションを個別のグループに分けるために使います。
  • 可変スペースは、先頭のアクションを末尾のグループから離すために使います。
• 項目を共有のガラス背景なしで単独表示したい場合（たとえば、プロフィールやアバターの項目）には、 sharedBackgroundVisibility を使います。
• 通知やステータスを示すには、ツールバー項目のコンテンツに badge を追加します。
• より多くのツールバーでアイコンがモノクロ表示されることを想定してください。tint は、 純粋な装飾ではなく、主要なアクションやアラート状態など、意味を伝える場合にのみ使います。
• ツールバーの下のコンテンツに余計な暗転、ぼかし、カスタム背景レイヤーがある場合は、 新しい自動スクロールエッジエフェクトを評価する前に取り除きます。
• フローティング要素が多い密度の高いウィンドウでは、カスタムのバー背景を作るのではなく、 scrollEdgeEffectStyle を使ってコンテンツのスクロールエッジ処理を調整します。

検索

• 分割ビュー階層全体に適用する検索フィールドには、1つのカラムだけでなく、NavigationSplitView に searchable を付けます。
• 検索が補助的で、コンパクトな操作部が適している場合は、ツールバーボタンと別個のフィールドを 手作業で作るのではなく、searchToolbarBehavior を使用します。
• 複数のタブがあるアプリで専用の検索ページを設ける場合は、1つのタブに検索ロールを割り当て、 TabView に searchable を配置します。
• 検索フィールドがツールバーの上部右側にある場合は、アプリのコンテンツの大部分を検索で見つけられる ようにします。
• iPad と Mac では、専用の検索タブに、下部の検索バーではなく、ブラウズ候補の上に中央揃えの フィールドが表示されることを想定してください。

コントロール

• カスタムのガラスコンポーネントを作る前に、標準の SwiftUI コントロールを優先します。
• 大きめのサイズでは、枠線付きボタンの形状はデフォルトでカプセル状になります。macOS では、 ミニ／小／中サイズのコントロールは、密度の高いレイアウトに適した角丸長方形の形状を保ちます。
• ボタンの形状を明示する必要がある場合は、buttonBorderShape を使用します。
• インスペクタやポップオーバーでは密度を保つために controlSize を使用し、特大サイズは とりわけ目立たせる必要があるアクションに限ります。
• 半透明のボタン背景を手作業で再現するのではなく、主要なアクションにはシステムのガラススタイルと 強調ガラススタイルのボタンを使用します。
• 離散値を取るスライダーでは、step を渡して目盛りを自動表示するか、ticks クロージャで 具体的な目盛りを指定します。
• 基準値を中心に左右へ広がるスライダーには、neutralValue を設定します。
• メニュー項目には Label または標準のコントロール初期化子を使い、プラットフォームを問わず アイコンが先頭側に一貫して配置されるようにします。
• シート、カード、ウィンドウの角と同心円状に揃える必要があるカスタムシェイプには、角丸の半径を 推測するのではなく、containerConcentric の角設定を使った同心円状の長方形シェイプを使用します。

カスタムの Liquid Glass

• カスタムのガラス面には glassEffect を使用します。デフォルトの形状はカプセル状で、下にある コンテンツが変化しても、テキストの前景色は自動的に鮮やかで読みやすい状態に保たれます。
• カプセル形状が適さない場合は、glassEffect に明示的なシェイプを渡します。
• ステータスや行動喚起など、色に意味がある場合にのみ tint を追加します。
• カスタムコントロールやインタラクティブな要素を含むコンテナには glassEffect(... .interactive()) を使用し、システムのガラスと同様にスケール、バウンス、 きらめきが生じるようにします。
• 近接するカスタムのガラス要素は、1つの GlassEffectContainer で囲みます。これは単なる整理ではなく、 見た目を正しく保つためのルールです。別々のコンテナ同士は互いのガラスをサンプリングできず、 屈折に一貫性がなくなることがあります。
• 折りたたみ状態と展開状態の間でガラス要素を変形させる場合は、ローカルな @Namespace とともに glassEffectID を使用します。

レビューチェックリスト

• カスタムガラスを追加する前に、標準の構造とコントロールを先に更新しました。
• システムのマテリアルと競合する不透明な背景、暗いスクリーン、カスタムのツールバー／シートの塗りつぶしは、 意図的に必要な場合を除いて削除しました。
• 意図した検索範囲に対して、searchable を適切なコンテナ階層に付けました。
• ツールバーのグループ化には、場当たり的に作った装飾ではなく、ToolbarSpacer、 sharedBackgroundVisibility、badge を使用しました。
• アイコンの色合いには、装飾ではなく意味を持たせています。
• 近くに配置するカスタムのガラス要素は、同じ GlassEffectContainer を共有しています。
• ガラスの変形トランジションには、名前空間と安定した識別子を使って glassEffectID を使用しています。
• 結果のテストに使用する SwiftPM の GUI アプリは、実行ファイルを直接起動せず、.app バンドルとして 起動します。

ガードレール

• 標準の SwiftUI API ですでに最新の macOS の動作が提供されている場合、システムのサイドバー、ツールバー、シート、コントロールを一から再構築しないでください。
• 古いバージョンで必要だったという理由だけで、NavigationSplitView のサイドバー、システムツールバー、シートの背後に不透明なカスタム背景を適用しないでください。
• 関連するガラス要素を複数の GlassEffectContainer に分散させないでください。
• 見た目に変化をつけることだけを目的に、すべてのアイコンやガラス面に色を付けないでください。
• iPhone のタブや検索の動作が macOS に適していると思い込まないでください。デスクトップ向けのツールバー、分割ビュー、インスペクタの配置を優先してください。
• Liquid Glass の動作を確認する際、GUI の SwiftPM アプリを単なる実行可能ファイルとして起動したままにしないでください。フォアグラウンドでのアクティベーションがないと、デザイン上の問題がレンダリングの問題に見えることがあります。

他のスキルを使う場合

• 主な質問が Liquid Glass 固有の処理ではなく、シーンのアーキテクチャ、サイドバーと詳細のレイアウト、コマンド、または設定に関する場合は、swiftui-patterns を使用してください。
• 主な問題がファイル構成、状態の所有権、デザイン変更前の大規模なビューの切り出しである場合は、view-refactor を使用してください。
• ウィンドウ、パネル、レスポンダーチェーン、または AppKit 限定のコントロール動作が必要なデザインには、appkit-interop を使用してください。
• 視覚的な更新後にアプリを起動、検証、またはログを確認する必要がある場合は、build-run-debug を使用してください。