watchOS 10に向けたアプリのアップデート

watchOS 10の最新機能を活用するために、Apple Watchアプリをアップデートする過程を紹介します。最新のSwiftUI APIを使って、情報を最大限に見やすくしたり、Digital Crownを中心にアプリのナビゲーションを整えるためのCode-Alongを一緒に進めていきましょう。

リソース

関連ビデオ

WWDC23

ダウンロード

♪ ♪

Nina：こんにちは Nina Paripovicです watchOSソフトウェアエンジニアですこのCode-Alongセッションでは watchOS 9 SDKでビルドしたアプリを watchOS 10用にアップデートしますシステム全体の再設計と並行してアプリを美しく見せるために使える新しいデザインの枠組みと SwiftUI APIについて話しますサンプルプロジェクトはこのセッションの関連リソース一覧にリンクされています今すぐダウンロードして一緒にwatchOS 10でビルドしましょう始める前に既存のプロジェクトを見てみましょう今回はBackyard Birdsをアップデートします美しい裏庭を作成・管理し好奇心旺盛な鳥たちを迎え入れるアプリですアプリには裏庭の一覧があります各裏庭の詳細を表示することで活動状況や状態が分かりますエサや水が不足していれば補充出来ます各裏庭にいるすべての鳥たちを見ることができます watchOS 10は Watchアプリに楽しくフレッシュな見た目をもたらしますまだ確認されていない方は「watchOS 10について」と「watchOS 10に向けたアプリのデザインおよび構築方法」でこのセッションで使用するデザインの基本についてご覧くださいでは Xcodeを開いてアプリのアップデートを始めましょう

これが現在watchOS 9で動作している Backyard Birdsアプリです裏庭のリストが表示され詳細に移動できますまず watchOS 10 SDKでビルドしてみましょう

アプリはすでに最高の仕上がりですスクロールすると変化する大きなタイトルやナビゲーションバーの下にあるコンテンツをぼかす新しいマテリアルなど新しいシステム機能が搭載されています裏庭をタップするとセルがアニメーション表示され左上のシステムツールバーボタンのスタイルが自動的に適用されますスクロールして Refillをタップすると新たにぼかしの入った背景マテリアルが表示されます

Backyard Birdsの利用者が最も関心を寄せるのは自分の裏庭の状況です現在はアプリを起動すると最初にリストから裏庭をタップし詳細表示で何が起きているかを確認しています watchOS 10では NavigationSplitViewを使ってアプリの構造を変更することでより簡単に確認できるようになりますこれで自分の裏庭の詳細表示に直接アクセスできるようになり友人の庭を訪問したい時は一覧に戻ることができるようになります詳細ビューがアプリで最も重要な部分であるため NavigationSplitViewを実装することで強調することができます

NavigationSplitViewはこのようにソース一覧と詳細の結びつきが強い場合に最適です起動時に直接詳細を表示することで集中できる一方ソース一覧から他の庭に切り替えることも簡単です

iOSとiPadOSのBackyard Birdsではすでに使用しています NavigationSplitViewは私たちのアプリにぴったりです

ContentViewでNavigationStackを NavigationSplitViewに入れ替えます次に navigationDestinationの内容を NavigationSplitViewに移動します最後に watchOS 10で利用可能な新しいリスト選択APIを使用して NavigationSplitViewで表示する詳細ビューの管理を行いますまず NavigationStackを NavigationSplitViewに置き換えます

NavigationSplitViewのルートにある Backyard Listはそのままにします navigationDestination モディファイアを削除し BackyardViewを詳細ビュービルダーに移動します selectedBackyardはオプショナルのため必ずアンラップしてフォールバックビューを用意します

最後に selectionバインドを受け取るリストイニシャライザを使いますリストのselectionパラメータに値を指定すると selectionバインドによって NavigationSplitView内でどの詳細ビューを表示するかが決まります

良いですねデフォルトで選択した庭の詳細ビューが表示されるようになりました起動時に詳細を表示するので navigationTitleを削除しますソース一覧ボタンを使って残りの裏庭を見ることができます詳細ビューに戻ると美しいフルスクリーンアニメーションが表示されます現在 backyardビューはスクロール可能な長いリストになっていますリストはすでに3つの異なるセクションに分かれておりそれぞれ異なる機能を備えています Todayビュー　Habitatビュー Visitorsビューです代わりにTabViewを使い各セクションにタブを作成することでアプリの視覚的な分かりやすさを向上できます

TabViewがコンテンツをフルスクリーンビューに分割し各タブに明確な目的を持たせることができます Digital Crownの機能は維持してビューの素早いスクロールを可能にします新しい縦型ベージスタイルでは TabViewを使ってこれを実現できますタブ間を素早く移動したり 1つのタブ内でスクロールもできます

Xcodeに戻って TabViewを詳細ビューで使うように更新します

BackyardViewでは各セクションをそれぞれのビューに移動し ListをTabViewに置き換えます TabViewの各ページはスクリーン全体を占めるので SectionとDividerは必要ありませんセクションヘッダを navigationTitlesとして追加します

最後に tabViewStyleモディファイアを使って verticalPageを指定しますあと少しですページをめくるとビューが各タブに収まっています全ての鳥を簡単に表示するために VisitorViewをリスト化できます

TabViewが子リストビューに 1つのタブを指定していますリスト画面の高さを超える場合ビューはスクロール可能になります

縦長のTabView内にスクロール可能なコンテンツがある場合可能な限り最後のタブに配置しましょう

またエサと水のレベルを簡単に区別できるように Habitatビューを2つのタブに分けます

そこで TabViewに収まる独自のゲージを作りました

TabViewの中にエサと水のインスタンスを作成し HabitatViewを新しいGaugeViewに置き換えます

いい感じです後は補充機能を追加するだけですそこでツールバーを使います watchOS 10ではツールバーの配置オプションが一新されすべての画面サイズに対応可能になりました新しいボトムバーの配置はコントロールのために最適な場所ですこの配置オプションを利用してボトムバーにRefillボタンを追加します

HabitatGaugeViewに戻りツールバーを追加し ToolbarGroupを使ってボトムバーの位置を指定します Spacerを使ってボタンをツールバーの末尾に追加します

スペースが広がり Habitatの概要に集中しやすくなりました TabViewをナビゲーションする際により分かりやすくしたいですさらに裏庭のエサや水が少ない場合に気が付きやすくします背景にグラデーションを適用してこれを実現します各タブのタイトルも便利ですがカラーにすることで一目で見やすくなり詳細表示のどこにいるかが明確になりますエサや水が不足している場合に裏庭の状態を強調できますシステムグラデーションはフォアグラウンドの要素とのコントラストを保ちながらステータスを伝えられる良い方法です ContainerBackgroundモディファイアとグラデーションを使って実現しますまず元の背景を削除します BackyardViewに現在のエサと水の量に基づいて基づいて背景色を決定する関数を追加します量が少ないと背景が赤くなり補充が必要であることを知らせます役に立つcomputed変数も追加しておきますこの算出プロパティを containerBackgroundモディファイアに渡します

このモディファイアは ContainerBackgroundPlacementと同様グラデーションを渡す ShapeStyleを受け取りますここでは TabView用に指定します

また背景が変わった時にゲージの色も変えます同じく算出した色の変数を渡します

containerBackgroundモディファイアを TabView内の他のビューに適用しアプリのアクセントカラーを使います

スクロールするとグラデーションがフォアグラウンドの要素とうまく対比しているのが分かりますまたツールバーボタンをタップすると背景のグラデーションが変化します

最後の仕上げとしてマテリアルを生かして重要な情報を強調しますマテリアルはプラットフォームに関係なく利用可能ですが watchOS 10で新たに追加されました

フォアグラウンドと背景の要素を区別し視覚的な華やかさを加える良い方法です画面上の情報を表面化したり強調することができますアプリ内にマテリアルやバイブランスを使える場所があります見てみましょうまず裏庭のタイトルの背景の影をマテリアルを使った背景に置き換えますセルの背景はカラフルですがマテリアルを追加するとタイトルを見やすくできます

あまり気にすることが無い各裏庭を訪れた鳥の数はサマリービューで確認できます裏庭の詳細ビューに移動せずにリストビューで見ることができると良いですね別のオーバーレイを追加し数字の背景にマテリアルを設定します watchOSアプリは暗い背景を使う傾向があるのでマテリアルはデフォルトでダーク系になっています裏庭は明るくカラフルなのでライト系に切り替えます

これでBackyard Birdsアプリが watchOS 10向けにアップデートされました

大きな変更点をおさらいしましょう NavigationSplitViewをリストに追加しましたそしてリストを Vertical TabViewに変更しました裏庭ごとにツールバーに機能を追加し美しいグラデーションを追加しました最後に役に立つ情報を表面化するためマテリアルを使いましたご参加ありがとうございました今年はApple Watchにとって大きな年ですぜひ多くのセッションをご覧になってください Backyard Birdsについて詳しくは「Apple Watchのスマートスタック向けウィジェットの構築」をご確認くださいみなさんのアプリがwatchOS 10で輝くアップデートをお待ちしています

4:02 - NavigationSplitView

NavigationSplitView {
    List(backyardsData.backyards, selection: $selectedBackyard) { backyard in
        BackyardCell(backyard: backyard)
    }
    .listStyle(.carousel)
} detail: {
    if let selectedBackyard {
        BackyardView(backyard: selectedBackyard)
    } else {
        BackyardUnavailableView()
    }
}

6:18 - Vertical TabView

TabView {
    TodayView()
        .navigationTitle("Today")
    HabitatGaugeView(level: $waterLevel, habitatType: .water, tintColor: .blue)
        .navigationTitle("Water")
    HabitatGaugeView(level: $foodLevel, habitatType: .food, tintColor: .green)
        .navigationTitle("Food")
    List {
        VisitorView()
            .navigationTitle("Visitors")
    }
}
.tabViewStyle(.verticalPage)

8:37 - Add refill button to Toolbar

.toolbar {
    ToolbarItemGroup(placement: .bottomBar) {
        Spacer()
        Button {
            level = Int(min(100, Double(level) + 5))
        } label: {
            Label("Add", systemImage: "plus")
        }
    }
}

9:48 - HabitatGaugeView background color function and variables

func backgroundColor(_ level: Int, for type: HabitatType) -> Color {
    let color: Color = type == .food ? .green : .blue
    return level < 40 ? .red : color
}

var waterColor: Color {
    backgroundColor(waterLevel, for: .water)
}

var foodColor: Color {
    backgroundColor(foodLevel, for: .food)
}

10:10 - .containerBackground within TabView

TabView {
    TodayView()
        .navigationTitle("Today")
        .containerBackground(Color.accentColor.gradient, for: .tabView)
    HabitatGaugeView(level: $waterLevel, habitatType: .water, tintColor: waterColor)
        .navigationTitle("Water")
        .containerBackground(waterColor.gradient, for: .tabView)
    HabitatGaugeView(level: $foodLevel, habitatType: .food, tintColor: foodColor)
        .navigationTitle("Food")
        .containerBackground(foodColor.gradient, for: .tabView)
    List {
        VisitorView()
            .navigationTitle("Visitors")
            .containerBackground(Color.accentColor.gradient, for: .tabView)
    }
}
.tabViewStyle(.verticalPage)
.environmentObject(backyard)
.navigationTitle(backyard.displayName)

11:38 - Add material to the backyard name

.foregroundStyle(.secondary)
.background(Material.ultraThin, in: RoundedRectangle(cornerRadius: 7))

12:15 - Visitor score overlay with materials

.overlay(alignment: .topTrailing) {
    Text("\(backyard.visitorScore)")
        .frame(width: 25, height: 25)
        .foregroundStyle(.secondary)
        .background(.ultraThinMaterial, in: .circle)
        .padding(.top, 5)
}

12:20 - Light materials
```
.environment(\.colorScheme, .light)
```

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

watchOS 10に向けたアプリのアップデート

関連する章

リソース

関連ビデオ

WWDC23