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 のドキュメントを優先し、上記のリファレンスに加えて、ウェブ検索で最新の Apple Developer ドキュメントを確認してください。