swiftui-liquid-glass

SwiftUI Liquid Glass

概要

このスキルは、iOS 26 以降の Liquid Glass API に完全に準拠した SwiftUI の機能を構築またはレビューするために使用します。ネイティブ API（glassEffect、GlassEffectContainer、グラスボタンスタイル）と Apple のデザインガイダンスを優先します。使用方法の一貫性を保ち、必要に応じて操作可能にし、パフォーマンスにも配慮してください。

ワークフローの判断ツリー

依頼に合った手順を選択してください。

1) 既存の機能をレビューする

• Liquid Glass を使用すべき場所と、使用すべきでない場所を確認します。
• モディファイアの正しい順序、シェイプの使用方法、コンテナの配置を検証します。
• iOS 26 以降への対応と、妥当なフォールバックを確認します。

2) Liquid Glass を使用して機能を改善する

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

3) Liquid Glass を使用して新しい機能を実装する

• まずグラスのサーフェスとインタラクションを設計します（シェイプ、視覚的な強さ、グループ化）。
• レイアウト／外観のモディファイアの後に、グラスのモディファイアを追加します。
• アニメーションに伴ってビュー階層が変化する場合にのみ、モーフィングトランジションを追加します。

基本ガイドライン

• カスタムブラーよりもネイティブの Liquid Glass API を優先します。
• 複数のグラス要素が共存する場合は、GlassEffectContainer を使用します。
• .glassEffect(...) はレイアウトと外観のモディファイアの後に適用します。
• タッチ／ポインターに反応する要素には .interactive() を使用します。
• 一貫した外観になるよう、関連する要素間でシェイプを統一します。
• #available(iOS 26, *) で利用可能かどうかを判定し、グラスを使用しないフォールバックを用意します。

レビューチェックリスト

• 利用可能性：フォールバック UI とともに #available(iOS 26, *) がある。
• 構成：複数のグラスビューが 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 のドキュメントを優先してください。