WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Build a SwiftUI app with the new design system

Build a SwiftUI app with the new design system

SwiftUIDesign
元の動画を見る

Highlight

本セッションは Code-along 形式の実践的セッションです。開発者と一緒に、Liquid Glass という新デザインシステムに対応した SwiftUI アプリをゼロから構築していきます。設計理念よりも実装の手順に重点を置いています。

コア内容

毎年 WWDC の後、チームの誰かが既存の SwiftUI アプリを新版システムのビジュアル言語へアップグレードするタスクを割り当てられることがあります。ここ数年、このようなアップグレードは多数の色の変更、間隔の調整、Human Interface Guidelines の読み直しを意味しており、作業量は多いが達成感は低いものでした。2025年の Liquid Glass デザインシステムは開発者にとってよりフレンドリーです―大部分の標準コントロールは新しい外観を自動的に獲得しますが、アプリを完全に一貫したレベルに調整するには、新しく追加された modifier とマテリアルのルールを理解する必要があります。

このセッションはアップグレードプロセスを Code-along 形式に分解します。説明しながらコードを書いていきます。普通の SwiftUI アプリから出発し、新デザインシステムの重要な機能を段階的に導入します―ナビゲーション構造、ツールバー、コントロール、カスタムビューのガラスマテリアル適応、クロスプラットフォームの一貫性などです。付属リソースには完全な Landmarks サンプルプロジェクトが含まれており、各ステップで何が変更されたかを对照しながら確認できます。このセッションが解決する課題は「ドキュメントが分散しており、どこから手をつければよいかわからない」ことです。一つの完全なアプリですべての要点を順序立ててつなげ、開発者が一回通りで自分のプロジェクトに再現できるようにします。

詳細内容

本セッションの付属公式リソースは、開発者がこの Code-along に沿って作業する際の主要な参照資料です。三つのリソースがそれぞれ役割を果たします：

  • 『Adopting Liquid Glass』：技術総論。新しいデザイン言語がアプリ全体の構造に与える影響を明確に説明します。
  • 『Applying Liquid Glass to custom views』：カスタムビューがどのように新しいマテリアルを適用するか、ハードコードされた色の問題を回避する方法を説明します。
  • 『Landmarks: Building an app with Liquid Glass』：完全にダウンロード可能なサンプルプロジェクト。Code-along の最終成果物に対応します。

Code-along の推奨アプローチは、まずサンプルプロジェクトを実行し、ビデオの各セグションのタイムスタンプに対応するコード位置を参照しながら、Apple のエンジニアがその瞬間に変更した行を確認することです。この「ビデオを見る→コードを参照する→自分のアプリで再現する」というループは、単にドキュメントを読むだけよりもはるかに効率的です。

本セッションはデザインとプロセスの実演に重点を置いているため、技術 API の詳細は姉妹セッション 323（Build a SwiftUI app with the new design）に集中しています。そこでは28の公式コードスニペットが提供されており、Segmented Picker、Inspector、Tab bar の折りたたみ、カスタムガラスマテリアルなどの典型的なシナリオをカバーしています。402を「ガイド」、323を「API マニュアル」として組み合わせて参照することをお勧めします。

コアインサイト

  • 何をするか：既存の SwiftUI アプリを Xcode 26 で再ビルドし、どのビューが自動的に新しい外観を獲得し、どれが手動での適応が必要かを記録する
    • なぜ価値があるか：Liquid Glass 効果の 90% は標準コントロールに対して無料で適用されるため、まずデフォルトの結果を見ることで大量の手直し時間を節約できる
    • どのように始めるか：feature branch を作成し、Xcode のバージョンと deployment target のみを置き換え、ビジネスコードは変更せずにスクリーンショットを比較する
  • 何をするか：セマンティックカラー監査リストを作成し、プロジェクト内のすべてのハードコードされた Color(red:green:blue:) を .primary / .secondary / .tint などのセマンティックカラーに変更する
    • なぜ価値があるか：Clear や Tinted などの新しい外観では、ハードコードされた色のコントラストは保証されない。セマンティックカラーはシステムによって自動的に調整される
    • どのように始めるか：Xcode の検索ルールを使用してすべての Color(red:、UIColor(red: を一致させ、ビューごとに分類して、一度に一つのスクリーンを置き換える
  • 何をするか：PR テンプレートに「6つの外観モードのスクリーンショット」チェック項目を追加し、Light/Dark/Clear light/Clear dark/Tinted light/Tinted dark をカバーする
    • なぜ価値があるか：Liquid Glass の視覚効果は外観の切り替えに敏感であり、単一のモードが通ってもすべてのモードが通るとは限らない
    • どのように始めるか：SwiftUI Preview の preferredColorScheme と外観切り替え API を使用して PreviewProvider テンプレートを作成し、チームで再利用する
  • 何をするか：Landmarks サンプルプロジェクトに沿って章ごとに一度やり直し、各章に対応する modifier とリソースをチーム wiki に記録する
    • なぜ価値があるか：サンプルプロジェクトは複数のセッションに分散している API を完全なアプリにつなげており、初心者にとって最速の入門方法
    • どのように始めるか：Apple のドキュメントから Landmarks プロジェクトをダウンロードし、Code-along の章の順序に従ってビデオと照らし合わせながら段階的に再現する

関連セッション

コメント

GitHub Issues · utterances