swiftui-liquid-glass

SwiftUI Liquid Glass

帰属：@Dimillian の Dimillian/Skills からコピー（2025-12-31）。

概要

このスキルは、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, *) で利用可能性を判定し、ガラス効果を使わないフォールバックを用意します。

レビューチェックリスト

• 利用可能性：#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 のドキュメントを優先してください。