SwiftUI Liquid Glass

概要

iOS 26+ Liquid Glass API と完全に整合した SwiftUI 機能を構築またはレビューするには、このスキルを使用します。ネイティブ API (glassEffect, GlassEffectContainer, glass ボタンスタイル) と Apple デザインガイダンスを優先します。使用方法を一貫性のあるもの、必要に応じてインタラクティブなもの、パフォーマンスを考慮したものにします。

ワークフロー決定木

リクエストに合致するパスを選択します:

1) 既存機能のレビュー

• Liquid Glass を使用すべき場所と使用すべきではない場所を検査します。
• 正しい修飾子の順序、シェイプの使用方法、コンテナの配置を検証します。
• iOS 26+ の可用性処理と合理的なフォールバックを確認します。

2) Liquid Glass を使用した機能の改善

• ガラス処理の対象となるコンポーネント (サーフェス、チップ、ボタン、カード) を特定します。
• 複数のガラス要素が表示される場合は GlassEffectContainer を使用するようにリファクタリングします。
• タップまたはフォーカス可能な要素に対してのみインタラクティブなガラスを導入します。

3) Liquid Glass を使用した新機能の実装

• ガラスのサーフェスとインタラクション (シェイプ、視認性、グループ化) をまず設計します。
• レイアウト/外観修飾子の後でガラス修飾子を追加します。
• ビューの階層がアニメーションで変わる場合にのみモーフィングトランジションを追加します。

コアガイドライン

• カスタムブラーより、ネイティブ Liquid Glass API を優先します。
• 複数のガラス要素が共存する場合は GlassEffectContainer を使用します。
• レイアウトと視覚修飾子の後に .glassEffect(...) を適用します。
• タッチ/ポインター入力に応答する要素には .interactive() を使用します。
• 関連要素全体でシェイプを一貫させて、統一的な外観を実現します。
• #available(iOS 26, *) でゲートして、ガラス以外のフォールバックを用意します。

レビューチェックリスト

• 可用性: #available(iOS 26, *) がフォールバック UI と共に存在する。
• 構成: 複数のガラスビューが GlassEffectContainer でラップされている。
• 修飾子の順序: glassEffect がレイアウト/外観修飾子の後に適用されている。
• インタラクティビティ: interactive() がユーザーインタラクションが存在する場所にのみ使用されている。
• トランジション: @Namespace を使用した glassEffectID がモーフィングに使用されている。
• 一貫性: シェイプ、ティント、スペーシングが機能全体で整合している。

実装チェックリスト

• 対象要素と望ましいガラスの視認性を定義します。
• グループ化されたガラス要素を GlassEffectContainer でラップしてスペーシングを調整します。
• 必要に応じて .glassEffect(.regular.tint(...).interactive(), in: .rect(cornerRadius: ...)) を使用します。
• アクションに対して .buttonStyle(.glass) / .buttonStyle(.glassProminent) を使用します。
• 階層が変わる場合は、glassEffectID を使用してモーフィングトランジションを追加します。
• 以前の iOS バージョンのために、フォールバックマテリアルとビジュアルを用意します。

クイックスニペット

これらのパターンを直接使用してシェイプ/ティント/スペーシングを調整します。

if #available(iOS 26, *) {
    Text("Hello")
        .padding()
        .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16))
} else {
    Text("Hello")
        .padding()
        .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
}

GlassEffectContainer(spacing: 24) {
    HStack(spacing: 24) {
        Image(systemName: "scribble.variable")
            .frame(width: 72, height: 72)
            .font(.system(size: 32))
            .glassEffect()
        Image(systemName: "eraser.fill")
            .frame(width: 72, height: 72)
            .font(.system(size: 32))
            .glassEffect()
    }
}

Button("Confirm") { }
    .buttonStyle(.glassProminent)

リソース

• リファレンスガイド: references/liquid-glass.md
• 最新の API 詳細については Apple ドキュメントを優先します。