SwiftUIの新機能

SwiftUIの新機能

SwiftUIを利用することで、iPhone、iPad、Mac、Apple Watch、Apple TV向けに、より良く、よりパワフルなAppが構築できます。アウトライン、グリッド、ツールバーなどのインターフェースの改善を含め、SwiftUIの最新機能について学びましょう。Appleでサインインなどの機能を実現するAppleフレームワーク全体に対し、強化されたSwiftUIのサポートを活用しましょう。新しいビジュアルエフェクトやコントロール、スタイルもご紹介します。また、新しいAppやScene APIを使い、SwiftUIだけでAppを作成する方法、コンプリケーションや新しいウィジェットをカスタマイズする方法もお伝えします。このセッションを有効活用するには、ある程度、SwiftUIに親しみがあることが望まれます。初めての方は、"Introduction to SwiftUI"をご覧ください。

リソース
- SwiftUI
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC20
ダウンロード

WWDCへようこそ “SwiftUIの新機能” SwiftUIチームのマット･リケットソンです後半では同僚のテイラーも登場します昨年発表したSwiftUIでは― Appleの全プラットフォームで優れたユーザーインターフェイスの構築が可能に今回 SwiftUIの２回目の大きなリリースをご紹介します
今年は一度では伝えきれないほどたくさんの新機能が追加されましたなるべく多く説明しますが― より詳細なセッションについても同時に案内していきますまずは新たなAppとウィジェットAPIですリストやコレクションの表示に関する改善点にも触れますツールバーやコントロールのためのマルチプラットフォームAPIや― Appをスタイリングする視覚効果についても説明します最後はSwiftUI Appとシステムの統合について話しましょうまずはAppとウィジェットです今回初めてSwiftUIだけで Appをビルドできます UIKit AppKit WatchKitのAppに SwiftUIコードを埋め込む必要はありません見てみましょうこれは“Hello, world!”という SwiftUI Appです “Hello, world!” 見てのとおり100％機能するAppを― コードをビルドして実行できますとても簡潔で― App全体が 140文字に収まっていますでも惑わされてはいけません SwiftUIは宣言型Appのために知的で自動的かつカスタマイズ可能な動作を― シンプルで柔軟なAPIに搭載しています Book Clubで読んだ本を管理するAppを書きましたメインのUIを表すため下にはカスタムビューを書き― 上ではメインウィンドウのコンテンツとしてそのビューを使っていますこれら２つの宣言が類似しているのが分かるでしょうか SwiftUIの新しいApp APIは― ビューコードですでに使用した宣言やステートドリブンパターンをフォローします
どちらも定義はプロトコルに準拠した構造ですプロパティを使いデータの依存関係も宣言できますそのデータをボディのプロパティ内で使えば― Appとビューの双方のため宣言的なUIコンテンツを定義できます
１つ大きく違うのは― Appのボディプロパティのリターンタイプです Appのボディはシーンを返しますこれはAppのUIを象徴する SwiftUIの新コンセプトで― プラットフォームで個別に表示しますシーンの説明とAppやビューとの関係性は別のトークで詳しく話します次に“WindowGroup”という App内のシーンに注目しましょうこれを見れば SwiftUI内のシーンがボックスの外で― 知的でマルチプラットフォームな機能を提供できることが分かります
WindowGroupはiOS Appでは― 単一の全画面ウィンドウを作成し管理しますこのコードはwatchOSでも実行でき― 同様に単一の全画面ウィンドウを管理します watchOSとiOSでは Appの見た目は違いますしかしどちらのプラットフォームでもコアの構造は同じで― １つのApp用の宣言を共有しているのです実際この私のAppは tvOSやiPadでも使えます iPadOSはマルチウィンドウAppをサポートするので― 追加機能をフリーで取得します複数のインスタンスを並べて表示することなどが可能になります
これは複数のウィンドウでもサポートできる macOSにも適用されています “コマンド”と“Ｎ”のショートカットキーで新規ウィンドウを複数作成し― 単一のタブ付きウィンドウに集めることができます
SwiftUIでは新規ウィンドウメニューコマンドのメインメニューへの自動的な追加も可能ですいずれも簡単なAppの宣言で実現できます WindowGroup APIを使いインターフェイスを定義したおかげです
SwiftUIは他のタイプのシーンもサポートし― 複雑なAppをビルドするためビューのように一緒に構築できます例えば macOSで利用可能な新しい“Settings”シーンは― MacのAppに設定ウィンドウを追加しますこれはAppのメニューの標準コマンドを自動的に設定し― ウィンドウが正しいスタイルになるよう処理してくれるシーンです
SwiftUIのシーンAPIは― ドキュメントベースのAppもサポートします私がビルドした描画用のAppも対象です
今年登場したこの“DocumentGroup”シーンは― ドキュメントベースのシーンの編集や保存を自動的に管理してくれますこちらはiOSやiPadOS macOSでサポートされています DocumentGroupが iOSとiPadOSでドキュメントブラウザを自動で表示するのは― 他のメインインターフェイスが提供されていない場合です Macでは新規ドキュメントごとに異なるウィンドウが開かれ― 一般的なアクションが選べるコマンドをメインメニューに自動的に追加します
メニューコマンドといえば SwiftUIでは― 新しいコマンドモディファイアを使用しコマンドを追加することもできますここでは新しい形を作るための “カスタムシェイプメニュー”を追加しました macOSはカスタムメニューをメインメニューの適切なセクションに自動的に追加し― “keyboardShortcut”ビューモディファイアを使い新規ショートカットキーが何かを表示します
コマンドAPIには他にも多くの機能がありますユーザーの視点をベースにしたコマンドもターゲットにできるので― 作業は楽しいはずさらなる情報は参考資料にてご確認を
Appとシーンについてはたくさんの情報がありますトークを用意しているので新たなAPIへの理解に役立ててください今回“App essentials in SwiftUI”では― ビューやシーン Appがどう連携するかを説明します “Document-Based Apps in SwiftUI”では― Appでのドキュメントの開き方や管理方法を掘り下げます
新規Appを構築するため Xcodeの“new project”もアップデートしましたこれはマルチプラットフォーム対応の専用テンプレートを追加して実現しました
マルチプラットフォームコード用に最適化された新規テンプレートは― 共有コード向けに自動でグループを設定しますプラットフォームに特化したコンポーネントやアセットも同様です
私たちが広げたいプロジェクト体験の１つに― AppのLaunch Screenの構成があります今年新しく登場したLaunch Screenの Info.plisキーです標準的なLaunch Screenのコンポーネントをさまざまな組み合わせで宣言できるキーです例えばデフォルトの画像や背景の色トップバーやボトムバーを空にするかなどの宣言です
Launch Screen用に storyboardを使っている場合は― 今後もうまく使えるものなので切り替えの必要はありませんただし新規SwiftUIプロジェクトで storyboardを使用しないのであれば― Launch Screen設定はシンプルな代替手段になりますではiOSとiPadOS macOSで使える新たなウィジェットについて話しましょうウィジェットはSwiftUIでのみビルドされます Appやビューのビルドと同じく― 新規ウィジェットのプロトコルに対してはカスタム構造体を使用します
ウィジェットの型は多種多様ですこちらはお勧めの音楽アルバムを定期的に教えてくれる仕組みですウィジェットは SiriのIntentなど他種のデータでもビルドできます
ウィジェットのビルド方法については多くの説明が必要ですが― スタートしやすいよう他のトークも用意していますお勧めは “Build SwiftUI Views for Widgets”です
ではSwiftUIを使用し― Apple Watchのカスタムコンプリケーションをビルドしてみましょう私が作った週次コーヒー表のようにフルカラーにもビルドできますウォッチフェイス内の外観はクールな青色にカスタマイズしました
詳細は “Build Complications in SwiftUI”でご確認をコンプリケーション作成の経験がなければ― “Creating Complications on Apple Watch” から始めるといいでしょう次にリストとコレクションの表示の改善について話しましょう
多くのAppでリストは重要な要素です大抵ユーザーが利用する主要なインターフェイスを表します今回のリリースで複数の優れた新機能がリストに追加されました特記すべきはアウトラインの新しいサポートです大胆なデータ駆動型コンテンツを簡潔に表すレギュラーリスト子のキーパスをイニシャライザに提供することで― コンテンツの再帰的なアウトラインの構築を可能にしましたこれはmacOSのシステム標準スタイルでデフォルトで表示されます iOSとiPadOSでも同様ですコンテンツ重視のAppでこのアウトラインが― 分裂的なプッシュ＆ポップ･ナビゲーションパターンに代わることを願いますリストとアウトラインの他に― スクロール可能なレイアウトでの複数のコンテンツ表示も一般的ですね例えばグリッドです今年 SwiftUIはグリッドレイアウトの遅延読み込みにサポートを加えますスクロールビューで構成され― コンテンツが滑らかにスクロールします
グリッドはさまざまな構成をサポートする強力なレイアウトです使用可能な空間に合わせて列数を調整し― ご覧のように横向き縦向きに適応します
列の数と各列のサイズパラメータを指定することもできますこのようにどちらの向きでも４列にそろいます SwiftUIはグリッドの水平スクロールもサポートします既存の垂直および水平スタックレイアウトの遅延読み込みバージョンも公開しており― スクロール可能なレイアウトをカスタムし構築できます例えばこの不均整な画像ギャラリー詳しく見てみましょう
すべてのギャラリーコンテンツに遅延垂直スタックを使用しています
switch文には新しいビュービルダーサポートを使用し― スタック内の異なるレイアウトの画像切り替えを簡単にしました例えば上部に大きな画像を１つ表示不均整な３つの画像をグループにし― さらに小さい画像を短い行に遅延読み込み垂直スクロールスタックを組み合わせて作った― シームレスなギャラリーですリストとコレクションは SwiftUIの強力な機能ですここでは一部の機能のみを取り上げました “Stacks, Grids, and Outlines in SwiftUI” で詳細をご覧ください次はツールバーとコントロールについてテイラーが説明しますありがとうマット SwiftUIの新しいDocument Groupやコレクションビューを使えば― Appのモデルに簡単に命を吹き込めます次はSwiftUIの強力なツールバーサポートとコントロールをカスタマイズする方法です全プラットフォームのツールバーと Appにアップデートがあります macOS Big Surの美しいニュールック一新されたiPadシステム体験 watchOSの主要なアクションこれらのために SwiftUIはAPIを新しくしました使用したのは新しいツールバーモディファイアですツールバーItemsはSwiftUIの他の部分と同じビューで構成されていますここではボタンですデフォルトで慣用的な場所に配置されますがツールバーItemsでカスタマイズできます初期のアクションではデフォルト配置ですが― 他の配置も可能です例えば確認とキャンセルのモーダルアクションセマンティックプレースメントの例で― ツールバーItemの役割をSwiftUIが理解し自動的に適切な場所を見つけます別の例はAppでアイテムを目立たせるためのプリンシパル配置ですご覧のように iPadや―
macOSにてツールバーItemsはポジショナル配置で― アイテムの配置をさらにデザイン管理することが可能です特に狭いサイズでは一般的にアイテムは下部のツールバーにあります bottomBar配置ではそれを明確に指定できます
今の例でSwiftUIの新しいラベルビューに気づいたかもしれませんね詳しく見てみましょうこれはタイトルとアイコンを組み合わせた表現で UI要素のラベル付けに使用できますタイトルのローカリゼーションキーとして使用される文字列と― システムイメージ名またはSF SymbolがありますシンボルがmacOSで利用可能なだけでなく― Appで使える新しいものが何百種もあります SF Symbols 2.0の新たな機能強化についての話は尽きませんこのラベルの構成は完全な形のほうが便利で― タイトルとアイコンに任意のビューを使いますその力はセマンティックスからタイトルとアイコンに提供され― 使用場所に基づいて適切に処理されますツールバーの例に戻りましょうツールバーのコンテキストでは― アイコンがボタンのラベルとしてデフォルトで視覚的に示されますアクセシビリティの目的でタイトルも出ますツールバーとコンテキストメニューリストに共通する動作ですこのリストには複数行のラベルが含まれており― タイトルは画像サイズに関係なく完璧にそろいます異なるダイナミックタイプサイズを使うとラベルの力が特に発揮されますこれはレイアウトをデフォルトの大サイズで表示しています超特大に変えるとアイコンとタイトルの両方が自動的に更新され― テキストはうまくリフローしリストの行が増えますアクセシビリティのサイズが大きくなるとさらに専門化されますラベルはテキストの表示量を最大化するためアイコンの下で折り返すよう更新されましたラベル要素のアイコンだけを持つツールバーのような簡潔なコンテキストは― 追加のヘルプやコンテキストの提供がさらに重要です新しいヘルプモディファイアではコントロールが持つ効果の説明を添付でき― それはmacOSのツールチップとして現れます
すばらしいのはこのモディファイアが全プラットフォームで利用できることですアクセシビリティのヒントも提供し― Appにより良いボイスオーバー体験を提供します iPhoneでも同じツールバーItemsで同様の体験ができますプログレスボタン新しい進行状況エントリを記録
宣言型のSwiftUIは全ての人々の App体験を改善します
人々とコントロールの触れ合いにさらなる柔軟性とパワーをもたらすのが― キーボードショートカットモディファイアですこれらはアクセスを容易にする目的でシーンコマンドによく使われます iPadのキーボードショートカットや― マットが示したとおり macOSのメインメニューにもありますキーボードショートカットは画面上の他のコントロールにも使用できます例えばキャンセルやデフォルトのアクションボタンエスケープとリターンキーのキーボードショートカットがありますキーボードからTVリモコン watchOSデジタルクラウンまで― フォーカスは入力内容を App上でルーティングしますデフォルトのフォーカスサポートで― フォーカスの開始点とAppのデフォルトからの変化を制御できます “Build SwiftUI Apps For tvOS”でこのサポートの詳細を説明します SwiftUIを使ってtvOS Appを構築するヒントも話します
App全体で使用できる新しいコントロールも複数ありますまずプログレスビュー時間経過と共に確定と不確定の進行状況を表示するのに使います線形と円形のプログレスビューがあり― 円形は人気の回転スタイルで不確定の進行状況を表します
似ている新コントロールはゲージですゲージは全体的な容量と比較し値のレベルを表すのに使いますこれは円形のwatchOSゲージで記録した私の庭の土壌の酸性度ですゲージは追加オプションでカスタマイズできますトマトはデリケートなので正確なpH値を把握したいところですそこで現在の値のラベルを追加表示しました最小値と最大値のラベルが追加可能です場合によっては画像アイコンも使えますがここではpH値をテキスト表示します
このコードスニペットはSwiftの複数末尾クロージャ構文も際立たせますより複雑になったゲージの表現を自然に進化させたものです全プラットフォームでツールバーを作る表現力豊かな方法であり― ツールバーの内外でコントロールの動作を微調整する手段でもあります次にSwiftUIを楽しく活用するための新しい方法を見てみましょう macOSのBig Surで刷新されたのが― メニューバーの通知センターと新しいコントロールセンターです共にSwiftUIで構築されています各種モジュールの内外で滑らかなアニメーションを実現するため― Appで使用可能な SwiftUIの新機能を使います私のお気に入りのアルバムを集めた UIの例ですアルバムのスクロールグリッドと選択したアルバムの列から成ります選択時アルバムが突然入るのでなくグリッドから流れるように移したいものですマッチド･ジオメトリ･エフェクトを使えば簡単ですこのモディファイアはグリッドと選択したアルバムの双方に適用できます２つのビューをつなぐにはアルバムのアイデンティファイアを用いましょうアイデンティファイアが関連している名前空間も使いますこの場合はビューに対応する名前空間です
これだけで目的のエフェクトが実現しますアルバムが別のセクションへ移る際― SwiftUIが自動的にフレーム補間しシームレスに遷移します
他にもContainerRelativeShapeという新しいツールがあります隣接するシェイプと類似したパスをたどるという新しい機能ですお気に入りアルバムのウィジェットで見てみましょうアルバムのアートワークのクリップはウィジェットと同様に角が丸くなっていますぴったりはまりますねパディングを変えると良さが分かりますオフセットをコンテナのシェイプに合わせるので― ContainerRelativeShapeを使いクリッピングが成功します
オフセットを考慮し自動的に同心性を保つのです
テキスト関連の体験も向上しましたカスタムフォントはDynamic Typeの変更にも自動で対応しますテキスト内にイメージを埋め込めるので― イメージがテキストと一体化して動き Dynamic Typeに反応しますレイアウトなどテキスト以外のメトリクスのカスタムには新しいProperty Wrapperです Dynamic Typeのサイズに合わせ基準値を自動的に変えますアクセシビリティのサイズが大きくなっても反応性の高いカスタムレイアウトが作れるのです詳細は別のトークで話します Appを輝かせる新しいフォントや文字入力機能も紹介しますクリエイティブなカスタムビューを構築する新しいツールもありますスタイリングの改良点はまだありますシステムコントロール画面さえ同じスタイルに統一できますカスタムアクセントカラーを用いると Appが際立ちます今年はmacOSでのアクセントカラーのカスタマイズが可能になり Xcode12のアセットカタログでカスタマイズのサポートも新しくなりましたすべてのプラットフォームで同じ色合いを指定できます App全体にテーマカラーを適用する場合もあれば― 特定のコントロールの色をカスタマイズしたい時もあるでしょう
iPadOSとmacOSのサイバーアイコンは Appの色に連動しますが― listItemTintを使うとカスタマイズ可能ですアイテム別やセクション全体で色を変えられます macOSのサイドバーも同じですシステムのアクセントカラーの変更にモディファイアが適切に反応します
watchOSでも同じモディファイアで標準文字盤の背景色を変えられます同様に他のコントロールにも適用可能です
新たなスタイルカスタム機能でボタンやトグルの色付けが可能になりましたこれはデフォルトの緑色から全体をアクセントカラーに変更しました新しいビューとインタラクションで Appがグレードアップします最後に忘れてはならないのが― システムの機能やサービスの長所を Appに統合する新しい方法です
URLを開く高機能APIが全プラットフォームで利用可能になりました例えば新しいLink ViewでURLを開きリンクをラベル付けしますラベルが付いた視覚要素を作成しデフォルトのブラウザでURLを開きます
さらにユニバーサルリンクから他のAppへ入ることもできますこれはニュースの例
リンクはウィジェット内でも有効です App内に戻るリンクを貼ることも可能です URLをプログラムで開くことが必要な場合もありますその環境でopenURLのアクションを取ると― オプションのコンプリーションハンドラで URLを開けます
特定のビューなので自動的に SwiftUIがウィンドウ上にURLを開きます iPadOS13の更新でSwiftUIはドラッグ＆ドロップによる― 他のAppとのやり取りが可能になりました Appの強化と統合が実現したのです
iOS14とmacOSのBig Surでは APIが新しいフレームワークに構築され― ドラッグされるコンテンツのアイデンティフィアが使うのはUniform Type Identifiersです SwiftUI全体に適用されるので App全体で利用できますカスタムエクスポート･インポートやイントロスペクションに使えます記述を読みやすくしたり適合性を検証することも可能です “Document-Based Apps in SwiftUI”で詳しく説明しますインポートとエクスポートの違いなどです AppleのWebサイトもご覧ください
他のサービスへの統合例の最後は “Appleでサインイン”ボタンですこれも高性能のSwiftUI APIですべてのプラットフォームで利用可能です AuthenticationServicesとSwiftUIをインポートするだけで新しいAPIが得られます新たなフレームワークは不要です SwiftUIのビューやモディファイアを提供するものは他にもありますビデオプレーヤーマップ App Clipオーバーレイ等最新機能を簡単に取り込めます
watchOSも含め完全にマルチプラットフォームなので― １つのプラットフォームで学んだ方法を他に応用できます新しいSwiftUIのシステム機能に― Appを統合し活用する方法をいくつかご紹介しました多くの新機能やAPIがあるので― 冒頭でも述べたとおりすべてを網羅することはできません最後にひと言いくつかの例で見たように言語自体の改良により SwiftUIのコードが改善しました詳しくは“What's New in Swift”をご覧ください switchやif-letのサポートなどシンタックスの改良例を紹介しますコンパイラの診断性能も上がりビルドのエラーを迅速に指摘しますパフォーマンスも向上しましたコードサイズは縮小しコードの完成までの時間は短縮しました改良によりSwiftUIの使用がより楽しめるでしょう今年も新機能を共有できうれしく思います最後になりましたが謝意を皆さんご協力ありがとうございます Feedback Assistantのレポートや SNSコメントも感謝しますチュートリアルに時間を費やしプロトタイプなどを構築してくれた方々皆さんの熱意には頭が下がります今後も共に進化していきましょう

@main
struct HelloWorld: App {
    var body: some Scene {
        WindowGroup {
            Text("Hello, world!").padding()
        }
    }
}

1:56 - Book Club app

@main
struct BookClubApp: App {
    @StateObject private var store = ReadingListStore()

    var body: some Scene {
        WindowGroup {
            ReadingListViewer(store: store)
        }
    }
}

struct ReadingListViewer: View {
    @ObservedObject var store: ReadingListStore

    var body: some View {
        NavigationView {
            List(store.books) { book in
                Text(book.title)
            }
            .navigationTitle("Currently Reading")
        }
    }
}

class ReadingListStore: ObservableObject {
    init() {}

    var books = [
        Book(title: "Book #1", author: "Author #1"),
        Book(title: "Book #2", author: "Author #2"),
        Book(title: "Book #3", author: "Author #3")
    ]
}

struct Book: Identifiable {
    let id = UUID()
    let title: String
    let author: String
}

4:46 - Settings

@main
struct BookClubApp: App {
    @StateObject private var store = ReadingListStore()

    @SceneBuilder var body: some Scene {
        WindowGroup {
            ReadingListViewer(store: store)
        }
        
    #if os(macOS)
        Settings {
            BookClubSettingsView()
        }
    #endif
    }
}

struct BookClubSettingsView: View {
    var body: some View {
        Text("Add your settings UI here.")
            .padding()
    }
}

struct ReadingListViewer: View {
    @ObservedObject var store: ReadingListStore

    var body: some View {
        NavigationView {
            List(store.books) { book in
                Text(book.title)
            }
            .navigationTitle("Currently Reading")
        }
    }
}

class ReadingListStore: ObservableObject {
    init() {}

    var books = [
        Book(title: "Book #1", author: "Author #1"),
        Book(title: "Book #2", author: "Author #2"),
        Book(title: "Book #3", author: "Author #3")
    ]
}

struct Book: Identifiable {
    let id = UUID()
    let title: String
    let author: String
}

5:10 - Document groups

import SwiftUI
import UniformTypeIdentifiers

@main
struct ShapeEditApp: App {
    var body: some Scene {
        DocumentGroup(newDocument: ShapeDocument()) { file in
            DocumentView(document: file.$document)
        }
    }
}

struct DocumentView: View {
    @Binding var document: ShapeDocument
    
    var body: some View {
        Text(document.title)
            .frame(width: 300, height: 200)
    }
}

struct ShapeDocument: Codable {
    var title: String = "Untitled"
}

extension UTType {
    static let shapeEditDocument =
        UTType(exportedAs: "com.example.ShapeEdit.shapes")
}

extension ShapeDocument: FileDocument {
    static var readableContentTypes: [UTType] { [.shapeEditDocument] }
    
    init(fileWrapper: FileWrapper, contentType: UTType) throws {
        let data = fileWrapper.regularFileContents!
        self = try JSONDecoder().decode(Self.self, from: data)
    }

    func write(to fileWrapper: inout FileWrapper, contentType: UTType) throws {
        let data = try JSONEncoder().encode(self)
        fileWrapper = FileWrapper(regularFileWithContents: data)
    }
}

5:49 - Custom Commands

import SwiftUI
import UniformTypeIdentifiers

@main
struct ShapeEditApp: App {
    var body: some Scene {
        DocumentGroup(newDocument: ShapeDocument()) { file in
            DocumentView(document: file.$document)
        }
        .commands {
            CommandMenu("Shapes") {
                Button("Add Shape...", action: addShape)
                    .keyboardShortcut("N")
                Button("Add Text", action: addText)
                    .keyboardShortcut("T")
            }
        }
    }
    
    func addShape() {}
    func addText() {}
}

struct DocumentView: View {
    @Binding var document: ShapeDocument
    
    var body: some View {
        Text(document.title)
            .frame(width: 300, height: 200)
    }
}

struct ShapeDocument: Codable {
    var title: String = "Untitled"
}

extension UTType {
    static let shapeEditDocument =
        UTType(exportedAs: "com.example.ShapeEdit.shapes")
}

extension ShapeDocument: FileDocument {
    static var readableContentTypes: [UTType] { [.shapeEditDocument] }
    
    init(fileWrapper: FileWrapper, contentType: UTType) throws {
        let data = fileWrapper.regularFileContents!
        self = try JSONDecoder().decode(Self.self, from: data)
    }

    func write(to fileWrapper: inout FileWrapper, contentType: UTType) throws {
        let data = try JSONEncoder().encode(self)
        fileWrapper = FileWrapper(regularFileWithContents: data)
    }
}

7:55 - Widgets

import SwiftUI
import WidgetKit

@main
struct RecommendedAlbum: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(
            kind: "RecommendedAlbum",
            provider: Provider(),
            placeholder: PlaceholderView()
        ) { entry in
            AlbumWidgetView(album: entry.album)
        }
        .configurationDisplayName("Recommended Album")
        .description("Your recommendation for the day.")
    }
}

struct AlbumWidgetView: View {
    var album: Album

    var body: some View {
        Text(album.title)
    }
}

struct PlaceholderView: View {
    var body: some View {
        Text("Placeholder View")
    }
}

struct Album {
    var title: String
}

struct Provider: TimelineProvider {
    struct Entry: TimelineEntry {
        var album: Album
        var date: Date
    }

    public func snapshot(with context: Context, completion: @escaping (Entry) -> ()) {
        let entry = Entry(album: Album(title: "Untitled"), date: Date())
        completion(entry)
    }

    public func timeline(with context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [Entry] = []

        // Generate a timeline consisting of five entries an hour apart, starting from the current date.
        let currentDate = Date()
        for hourOffset in 0 ..< 5 {
            let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
            let entry = Entry(album: Album(title: "Untitled #\(hourOffset)"), date: entryDate)
            entries.append(entry)
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }
}

8:31 - Complications using SwiftUI

struct CoffeeHistoryChart: View {
    var body: some View {
        VStack {
            ComplicationHistoryLabel {
                Text("Weekly Coffee")
                    .complicationForeground()
            }
            HistoryChart()
        }
        .complicationChartFont()
    }
}

struct ComplicationHistoryLabel: View { ... }
struct HistoryChart: View { ... }

extension View {
    func complicationChartFont() -> some View { ... }
}

9:22 - Outlines

struct OutlineContentView: View {
    var graphics: [Graphic]
    
    var body: some View {
        List(graphics, children: \.children) { graphic in
            GraphicRow(graphic)
        }
        .listStyle(SidebarListStyle())
    }
}

struct Graphic: Identifiable {
    var id: String
    var name: String
    var icon: Image
    var children: [Graphic]?
}

struct GraphicRow: View {
    var graphic: Graphic
    
    init(_ graphic: Graphic) {
        self.graphic = graphic
    }
    
    var body: some View {
        Label {
            Text(graphic.name)
        } icon: {
            graphic.icon
        }
    }
}

10:09 - Adaptive grids

struct ContentView: View {
    var items: [Item]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 176))]) {
                ForEach(items) { item in
                    ItemView(item: item)
                }
            }
            .padding()
        }
    }
}

struct Item: Identifiable {
    var name: String
    var id = UUID()
    
    var icon: Image {
        Image(systemName: name)
    }
    var color: Color {
        colors[colorIndex % (colors.count - 1)]
    }

    private static var nextColorIndex: Int = 0
    private var colorIndex: Int

    init(name: String) {
        self.name = name

        colorIndex = Self.nextColorIndex
        Self.nextColorIndex += 1
    }
}

struct ItemView: View {
    var item: Item

    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 8, style: .continuous)
                .fill()
                .layoutPriority(1)
                .foregroundColor(item.color)
            item.icon
                .resizable()
                .aspectRatio(contentMode: .fit)
                .padding(.all, 16)
                .foregroundColor(.white)
        }
        .frame(width: 176, height: 110)
    }
}

10:28 - Fixed-column grids

struct ContentView: View {
    var items: [Item]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: Array(repeating: GridItem(), count: 4)]) {
                ForEach(items) { item in
                    ItemView(item: item)
                }
            }
            .padding()
        }
    }
}

struct Item: Identifiable {
    var name: String
    var id = UUID()
    
    var icon: Image {
        Image(systemName: name)
    }
    var color: Color {
        colors[colorIndex % (colors.count - 1)]
    }

    private static var nextColorIndex: Int = 0
    private var colorIndex: Int

    init(name: String) {
        self.name = name

        colorIndex = Self.nextColorIndex
        Self.nextColorIndex += 1
    }
}

struct ItemView: View {
    var item: Item

    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 8, style: .continuous)
                .fill()
                .layoutPriority(1)
                .foregroundColor(item.color)
            item.icon
                .resizable()
                .aspectRatio(contentMode: .fit)
                .padding(.all, 16)
                .foregroundColor(.white)
        }
        .frame(width: 176, height: 110)
    }
}

10:38 - Horizontal grids

struct ContentView: View {
    var items: [Item]

    var body: some View {
        ScrollView(.horizontal) {
            LazyHGrid(rows: [GridItem(.adaptive(minimum: 110))]) {
                ForEach(items) { item in
                    ItemView(item: item)
                }
            }
            .padding()
        }
    }
}

struct Item: Identifiable {
    var name: String
    var id = UUID()
    
    var icon: Image {
        Image(systemName: name)
    }
    var color: Color {
        colors[colorIndex % (colors.count - 1)]
    }

    private static var nextColorIndex: Int = 0
    private var colorIndex: Int

    init(name: String) {
        self.name = name
        colorIndex = Self.nextColorIndex
        Self.nextColorIndex += 1
    }
}

struct ItemView: View {
    var item: Item

    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 8, style: .continuous)
                .fill()
                .layoutPriority(1)
                .foregroundColor(item.color)
            item.icon
                .resizable()
                .aspectRatio(contentMode: .fit)
                .padding(.all, 16)
                .foregroundColor(.white)
        }
        .frame(width: 176, height: 110)
    }
}

10:58 - Lazy stacks

struct WildlifeList: View {
    var rows: [ImageRow]

    var body: some View {
        ScrollView {
            LazyVStack(spacing: 2) {
                ForEach(rows) { row in
                    switch row.content {
                    case let .singleImage(image):
                        SingleImageLayout(image: image)
                    case let .imageGroup(images):
                        ImageGroupLayout(images: images)
                    case let .imageRow(images):
                        ImageRowLayout(images: images)
                    }
                }
            }
        }
    }
}

12:24 - Toolbar modifier

struct ContentView: View {
    var body: some View {
        List {
            Text("Book List")
        }
        .toolbar {
            Button(action: recordProgress) {
                Label("Record Progress", systemImage: "book.circle")
            }
        }
    }

    private func recordProgress() {}
}

12:40 - ToolbarItem

struct ContentView: View {
    var body: some View {
        List {
            Text("Book List")
        }
        .toolbar {
            ToolbarItem(placement: .primaryAction) {
                Button(action: recordProgress) {
                    Label("Record Progress", systemImage: "book.circle")
                }
            }
        }
    }

    private func recordProgress() {}
}

12:47 - Confirmation and cancellation toolbar placements

struct ContentView: View {
    var body: some View {
        Form {
            Slider(value: .constant(0.39))
        }
        .toolbar {
            ToolbarItem(placement: .confirmationAction) {
                Button("Save", action: saveProgress)
            }
            ToolbarItem(placement: .cancellationAction) {
                Button("Cancel", action: dismissSheet)
            }
        }
    }

    private func saveProgress() {}
    private func dismissSheet() {}
}

13:00 - Principal toolbar placement

struct ContentView: View {
    enum ViewMode {
        case details
        case notes
    }

    @State private var viewMode: ViewMode = .details

    var body: some View {
        List {
            Text("Book Detail")
        }
        .toolbar {
            ToolbarItem(placement: .principal) {
                Picker("View", selection: $viewMode) {
                    Text("Details").tag(ViewMode.details)
                    Text("Notes").tag(ViewMode.notes)
                }
            }
        }
    }
}

13:17 - Bottom bar toolbar placement

struct ContentView: View {
    var body: some View {
        List {
            Text("Book Detail")
        }
        .toolbar {
            ToolbarItem {
                Button(action: recordProgress) {
                    Label("Progress", systemImage: "book.circle")
                }
            }
            ToolbarItem(placement: .bottomBar) {
                Button(action: shareBook) {
                    Label("Share", systemImage: "square.and.arrow.up")
                }
            }
        }
    }

    private func recordProgress() {}
    private func shareBook() {}
}

13:38 - Label

Label("Progress", systemImage: "book.circle")

14:06 - Label expanded form

Label {
    Text("Progress")
} icon: {
    Image(systemName: "book.circle")
}

14:24 - Bottom bar toolbar placement

struct ContentView: View {
    var body: some View {
        List {
            Text("Book Detail")
        }
        .toolbar {
            ToolbarItem {
                Button(action: recordProgress) {
                    Label("Progress", systemImage: "book.circle")
                }
            }
            ToolbarItem(placement: .bottomBar) {
                Button(action: shareBook) {
                    Label("Share", systemImage: "square.and.arrow.up")
                }
            }
        }
    }

    private func recordProgress() {}
    private func shareBook() {}
}

14:36 - Context menu Labels

struct ContentView: View {
    var body: some View {
        List {
            Text("Book List Row")
            .contextMenu {
                Button(action: recordProgress) {
                    Label("Progress", systemImage: "book.circle")
                }
                Button(action: addToFavorites) {
                    Label("Add to Favorites", systemImage: "heart")
                }
                Button(action: shareBook) {
                    Label("Share", systemImage: "square.and.arrow.up")
                }
            }
        }
    }

    private func recordProgress() {}
    private func addToFavorites() {}
    private func shareBook() {}
}

14:39 - List Labels

struct ContentView: View {
    var body: some View {
        List {
            Group {
                Label("Introducing SwiftUI", systemImage: "hand.wave")
                Label("SwiftUI Essentials", systemImage: "studentdesk")
                Label("Data Essentials in SwiftUI", systemImage: "flowchart")
                Label("App Essentials in SwiftUI", systemImage: "macwindow.on.rectangle")
            }
            Group {
                Label("Build Document-based apps in SwiftUI", systemImage: "doc")
                Label("Stacks, Grids, and Outlines", systemImage: "list.bullet.rectangle")
                Label("Building Custom Views in SwiftUI", systemImage: "sparkles")
                Label("Build SwiftUI Apps for tvOS", systemImage: "tv")
                Label("Build SwiftUI Views for Widgets", systemImage: "square.grid.2x2.fill")
                Label("Create Complications for Apple Watch", systemImage: "gauge")
                Label("SwiftUI on All Devices", systemImage: "laptopcomputer.and.iphone")
                Label("Integrating SwiftUI", systemImage: "rectangle.connected.to.line.below")
            }
        }
    }
}

15:28 - Help modifier

struct ContentView: View {
    var body: some View {
        Button(action: recordProgress) {
            Label("Progress", systemImage: "book.circle")
        }
        .help("Record new progress entry")
    }

    private func recordProgress() {}
}

16:12 - Keyboard shortcut modifier

@main
struct BookClubApp: App {
    var body: some Scene {
        WindowGroup {
            List {
                Text("Reading List Viewer")
            }
        }
        .commands {
            Button("Previous Book", action: selectPrevious)
                .keyboardShortcut("[")
            Button("Next Book", action: selectNext)
                .keyboardShortcut("]")
        }
    }

    private func selectPreviousBook() {}
    private func selectNextBook() {}
}

16:28 - Cancel and default action keyboard shortcuts

struct ContentView: View {
    var body: some View {
        HStack {
            Button("Cancel", action: dismissSheet)
                .keyboardShortcut(.cancelAction)

            Button("Save", action: saveProgress)
                .keyboardShortcut(.defaultAction)
        }
    }

    private func dismissSheet() {}
    private func saveProgress() {}
}

17:08 - ProgressView

struct ContentView: View {
    var percentComplete: Double

    var body: some View {
        ProgressView("Downloading Photo", value: percentComplete)
    }
}

17:19 - Circular ProgressView

struct ContentView: View {
    var percentComplete: Double

    var body: some View {
        ProgressView("Downloading Photo", value: percentComplete)
            .progressViewStyle(CircularProgressViewStyle())
    }
}

17:25 - Activity indicator ProgressView

struct ContentView: View {
    var body: some View {
        ProgressView()
    }
}

17:32 - Gauge

struct ContentView: View {
    var acidity: Double

    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Label("Soil Acidity", systemImage: "drop.fill")
                .foregroundColor(.green)
        }
    }
}

17:52 - Gauge with current value label

struct ContentView: View {
    var acidity: Double

    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Label("Soil Acidity", systemImage: "drop.fill")
                .foregroundColor(.green)
        } currentValueLabel: {
            Text("\(acidity, specifier: "%.1f")")
        }
    }
}

18:00 - Gauge with minimum and maximum value labels

struct ContentView: View {
    var acidity: Double

    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Label("Soil Acidity", systemImage: "drop.fill")
                .foregroundColor(.green)
        } currentValueLabel: {
            Text("\(acidity, specifier: "%.1f")")
        } minimumValueLabel: {
            Text("3")
        } maximumValueLabel: {
            Text("10")
        }
    }
}

18:57 - Initial Album Picker

struct ContentView: View {
    @State private var selectedAlbumIDs: Set<Album.ID> = []

    var body: some View {
        VStack(spacing: 0) {
            ScrollView {
                albumGrid.padding(.horizontal)
            }

            Divider().zIndex(-1)

            selectedAlbumRow
                .frame(height: AlbumCell.albumSize)
                .padding(.top, 8)
        }
        .buttonStyle(PlainButtonStyle())
    }

    private var albumGrid: some View {
        LazyVGrid(columns: [GridItem(.adaptive(minimum: AlbumCell.albumSize))], spacing: 8) {
           ForEach(unselectedAlbums) { album in
              Button(action: { select(album) }) {
                 AlbumCell(album)
              }
           }
        }
    }

    private var selectedAlbumRow: some View {
        HStack {
            ForEach(selectedAlbums) { album in
                AlbumCell(album)
            }
        }
    }

    private var unselectedAlbums: [Album] {
        Album.allAlbums.filter { !selectedAlbumIDs.contains($0.id) }
    }
    private var selectedAlbums: [Album] {
        Album.allAlbums.filter { selectedAlbumIDs.contains($0.id) }
    }

    private func select(_ album: Album) {
        withAnimation(.spring(response: 0.5)) {
            _ = selectedAlbumIDs.insert(album.id)
        }
    }
}

struct AlbumCell: View {
    static let albumSize: CGFloat = 100

    var album: Album

    init(_ album: Album) {
        self.album = album
    }

    var body: some View {
        album.image
            .frame(width: AlbumCell.albumSize, height: AlbumCell.albumSize)
            .background(Color.pink)
            .cornerRadius(6.0)
    }
}

struct Album: Identifiable {
    static let allAlbums: [Album] = [
        .init(name: "Sample", image: Image(systemName: "music.note")),
        .init(name: "Sample 2", image: Image(systemName: "music.note.list")),
        .init(name: "Sample 3", image: Image(systemName: "music.quarternote.3")),
        .init(name: "Sample 4", image: Image(systemName: "music.mic")),
        .init(name: "Sample 5", image: Image(systemName: "music.note.house")),
        .init(name: "Sample 6", image: Image(systemName: "tv.music.note"))
    ]

    var name: String
    var image: Image

    var id: String { name }
}

19:17 - Matched geometry effect Album Picker

struct ContentView: View {
    @Namespace private var namespace
    @State private var selectedAlbumIDs: Set<Album.ID> = []

    var body: some View {
        VStack(spacing: 0) {
            ScrollView {
                albumGrid.padding(.horizontal)
            }

            Divider().zIndex(-1)

            selectedAlbumRow
                .frame(height: AlbumCell.albumSize)
                .padding(.top, 8)
        }
        .buttonStyle(PlainButtonStyle())
    }

    private var albumGrid: some View {
        LazyVGrid(columns: [GridItem(.adaptive(minimum: AlbumCell.albumSize))], spacing: 8) {
           ForEach(unselectedAlbums) { album in
              Button(action: { select(album) }) {
                 AlbumCell(album)
              }
              .matchedGeometryEffect(id: album.id, in: namespace)
           }
        }
    }

    private var selectedAlbumRow: some View {
        HStack {
            ForEach(selectedAlbums) { album in
                AlbumCell(album)
                .matchedGeometryEffect(id: album.id, in: namespace)
            }
        }
    }

    private var unselectedAlbums: [Album] {
        Album.allAlbums.filter { !selectedAlbumIDs.contains($0.id) }
    }
    private var selectedAlbums: [Album] {
        Album.allAlbums.filter { selectedAlbumIDs.contains($0.id) }
    }

    private func select(_ album: Album) {
        withAnimation(.spring(response: 0.5)) {
            _ = selectedAlbumIDs.insert(album.id)
        }
    }
}

struct AlbumCell: View {
    static let albumSize: CGFloat = 100

    var album: Album

    init(_ album: Album) {
        self.album = album
    }

    var body: some View {
        album.image
            .frame(width: AlbumCell.albumSize, height: AlbumCell.albumSize)
            .background(Color.pink)
            .cornerRadius(6.0)
    }
}

struct Album: Identifiable {
    static let allAlbums: [Album] = [
        .init(name: "Sample", image: Image(systemName: "music.note")),
        .init(name: "Sample 2", image: Image(systemName: "music.note.list")),
        .init(name: "Sample 3", image: Image(systemName: "music.quarternote.3")),
        .init(name: "Sample 4", image: Image(systemName: "music.mic")),
        .init(name: "Sample 5", image: Image(systemName: "music.note.house")),
        .init(name: "Sample 6", image: Image(systemName: "tv.music.note"))
    ]

    var name: String
    var image: Image

    var id: String { name }
}

19:53 - Container Relative Shape

struct AlbumWidgetView: View {
    var album: Album

    var body: some View {
        album.image
            .clipShape(ContainerRelativeShape())
            .padding()
    }
}

struct Album {
    var name: String
    var artist: String
    var image: Image
}

20:34 - Dynamic Type scaling

struct ContentView: View {
    var album: Album
    @ScaledMetric private var padding: CGFloat = 10

    var body: some View {
        VStack {
            Text(album.name)
                .font(.custom("AvenirNext-Bold", size: 30))

            Text("\(Image(systemName: "music.mic")) \(album.artist)")
                .font(.custom("AvenirNext-Bold", size: 17))

        }
        .padding(padding)
        .background(RoundedRectangle(cornerRadius: 16, style: .continuous).fill(Color.purple))
    }
}

struct Album {
    var name: String
    var artist: String
    var image: Image
}

22:08 - Initial Sidebar List

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Label("Menu", systemImage: "list.bullet")

                Label("Favorites", systemImage: "heart")

                Label("Rewards", systemImage: "seal")

                Section(header: Text("Recipes")) {
                    ForEach(1..<4) {
                        Label("Recipes \($0)", systemImage: "book.closed")
                    }
                }
            }
            .listStyle(SidebarListStyle())
        }
    }
}

22:17 - List Item Tint in Sidebars

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Label("Menu", systemImage: "list.bullet")

                Label("Favorites", systemImage: "heart")
                    .listItemTint(.red)

                Label("Rewards", systemImage: "seal")
                    .listItemTint(.purple)

                Section(header: Text("Recipes")) {
                    ForEach(1..<4) {
                        Label("Recipes \($0)", systemImage: "book.closed")
                    }
                }
                .listItemTint(.monochrome)
            }
            .listStyle(SidebarListStyle())
        }
    }
}

22:33 - List Item Tint on watchOS

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Label("Menu", systemImage: "list.bullet")

                Label("Favorites", systemImage: "heart")
                    .listItemTint(.red)

                Label("Rewards", systemImage: "seal")
                    .listItemTint(.purple)

                Section(header: Text("Recipes")) {
                    ForEach(1..<4) {
                        Label("Recipes \($0)", systemImage: "book.closed")
                    }
                }
                .listItemTint(.monochrome)
            }
        }
    }
}

22:46 - SwitchToggleStyle tint

struct ContentView: View {
    @State var order = Order()

    var body: some View {
        Toggle("Send notification when ready", isOn: $order.notifyWhenReady)
            .toggleStyle(SwitchToggleStyle(tint: .accentColor))
    }
}

struct Order {
    var notifyWhenReady = true
}

23:15 - Link

let appleURL = URL(string: "https://developer.apple.com/tutorials/swiftui/")!
let wwdcAnnouncementURL = URL(string: "https://apple.news/AjriX1CWUT-OfjXu_R4QsnA")!

struct ContentView: View {
    var body: some View {
        Form {
            Section {
                Link(destination: apple) {
                    Label("SwiftUI Tutorials", systemImage: "swift")
                }
                Link(destination: wwdcAnnouncementURL) {
                    Label("WWDC 2020 Announcement", systemImage: "chevron.left.slash.chevron.right")
                }
            }
        }
    }
}

23:56 - OpenURL Environment Action

let customPublisher = NotificationCenter.default.publisher(for: .init("CustomURLRequestNotification"))
let apple = URL(string: "https://developer.apple.com/tutorials/swiftui/")!

struct ContentView: View {
    @Environment(\.openURL) private var openURL

    var body: some View {
        Text("OpenURL Environment Action")
            .onReceive(customPublisher) { output in
                if output.userInfo!["shouldOpenURL"] as! Bool {
                    openURL(apple)
                }
            }
    }
}

24:44 - Uniform Type Identifiers

import UniformTypeIdentifiers

extension UTType {
    static let myFileFormat = UTType(exportedAs: "com.example.myfileformat")
}

func introspecContentType(_ fileURL: URL) throws {
    // Get this file's content type.
    let resourceValues = try fileURL.resourceValues(forKeys: [.contentTypeKey])
    if let type = resourceValues.contentType {
        // Get the human presentable description of the type.
        let description = type.localizedDescription

        if type.conforms(to: .myFileFormat) {
            // The file is our app’s format.
        } else if type.conforms(to: .image) {
            // The file is an image.
        }
    }
}

25:16 - Sign in with Apple Button

import AuthenticationServices
import SwiftUI

struct ContentView: View {
    var body: some View {
        SignInWithAppleButton(
            .signUp,
            onRequest: handleRequest,
            onCompletion: handleCompletion
        )
        .signInWithAppleButtonStyle(.black)
    }

    private func handleRequest(request: ASAuthorizationAppleIDRequest) {}
    private func handleCompletion(result: Result<ASAuthorization, Error>) {}
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC20