ウィジェットに命を吹き込む方法

ウィジェットに命を吹き込む方法

ご自身のアプリやゲームのウィジェットにアニメーションを加えたり、インタラクティブなウィジェットを作成する方法について確認しましょう。エントリのトランジションのアニメーションを調整したり、SwiftUI ButtonとToggleを使ってインタラクティブ性を追加する方法を紹介します。これにより、ホーム画面やロック画面から直接パワフルな体験を提供することができます。

関連する章
- 1:23 - Animations
- 7:45 - Interactivity
リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
WWDC22
- Appインテントの詳細
ダウンロード

♪ ♪
Luca：こんにちは Lucaです SwiftUI Teamのエンジニアです本日は新しいエキサイティングな機能を使ってウィジェットに命を吹き込む方法について説明しますウィジェットは iOSとmacOSのユーザー体験において愛されている機能ですがインタラクティブ機能とアニメーションによって体験がさらに強化されました
インタラクティブ機能によりユーザーはウィジェットのデータを直接操作できアプリで最も重要なアクションを実行する強力なインタラクションを作成できますまたアニメーションはウィジェットに命を吹き込みコンテンツの変化やユーザーのアクションの結果を伝えてくれます新機能にとてもワクワクしていますさっそく始めましょうまずアニメーションとウィジェットの見た目を良くする簡単な方法を説明しますその後ウィジェットにインタラクティブ機能を追加する方法を説明しますアニメーションから始めましょうこの動画では友人のNilsが日中のカフェイン摂取量を記録するために開発したアプリを使いますカフェインの総量と最後に飲んだ飲み物を表示するウィジェットがすでにありますウィジェットを最新のSDKでコンパイルするとウィジェットのコンテンツが変化するたびシステムはデフォルトのアニメーションでエントリ間の変化をアニメーション化しますさらに見た目を良くするためにいくつかの調整を加える予定ですが Xcodeを見る前にウィジェットでアニメーションがどのように機能するかについて簡単にお話します通常のSwiftUIアプリではビューに変更を発生させるためステートを使いますそしてアニメーションは withAnimationのようなモディファイアを使用したステートの変化によって発生しますしかしウィジェットの仕組みは少し異なりますウィジェットはステートを持ちません代わりにエントリで構成されるタイムラインを作成し特定の時間にレンダリングされた異なるビューに対応します SwiftUIはエントリ間の差異を判別し変更がある部分をアニメーション化しますデフォルトではウィジェットは implicitスプリングアニメーションと様々なimplicitコンテンツトランジションを受け取りますが SwiftUIが提供するすべてのトランジションアニメーションコンテンツトランジションAPIを使用してウィジェットのアニメーションをカスタマイズできますすべてのSwiftUIのアニメーションプリミティブの仕組みに関しては「SwiftUIアニメーションの詳細”という素晴らしいトークがありますご覧くださいでは Xcodeを開いてみましょう少し手を加えるだけでウィジェットがカプチーノのラテアートのようにキレイになりますよ新しいXcode Preview APIでのアニメーションの作業の様子をお見せします
これが私のウィジェットを構成するすべてのビューですメインビューには 2つのビューを持つVStackがあります 1つ目はカフェインの総量を表示し 2つ目は今日最後に飲んだ飲み物があればそれを表示しますウィジェットの背景を定義するために containerBackgroundモディファイアを使っていますこれにより MacとiPadで新たにサポートされた場所に表示可能になります通常ウィジェットのアニメーションを見るにはたくさんのエントリを用意し画面に表示されるのを待つ必要がありますしかしそれは手間と時間が掛かります幸い今年導入される新しい Preview APIに素晴らしい解決策があります systemSmallでウィジェットの新しいプレビューを定義しウィジェットを定義するタイプを渡すことができますそして先に定義したエントリを含むタイムラインのレンダリング方法を指定できますキャンバスでそれを行うとタイムラインのプレビューが表示されすべてのエントリを見ることができますご覧くださいプレビューをクリックするとウィジェットがエントリ間のトランジションをアニメーションしている様子が分かりますこれは便利ですですがこれはまだ新しいPreview API機能のほんの一部ですこの新しい強力なAPIについてさらに詳しく知りたい方は「Xcode Previewsによるプログラマティックな UIの構築」をご確認くださいではアニメーションを調整してみましょうまずはカフェイン量のテキストから始めます現在は次の値とクロスフェードしているだけですが値が上がる様子をドラマチックに演出してみますこの場合ビューは変化せずテキストコンテンツだけ変化しますこれをアニメーションさせるにはコンテンツトランジションを使用しますそしてテキストにカフェインの数値を追加しますこのコンテンツトランジションは数値が変化した際に目立たせることで数値の重要性を強調するために作成してあります見た目もよさそうですねでは飲み物を表示するビューに注目します新たに飲み物を飲んだことを強調するトランジションを追加します最初に IDモディファイアを使ってこのビューのIDとレンダリングする特定のログを関連付けますこのログが変化するたびに SwiftUIに対してこれは新しいビューでありトランジションが必要だと通知しますこれでトランジションを指定できますプッシュにしてみましょうどちら側から？下からがいいと思いますこれで手順は分かりましたねプレビューキャンバスに戻りましょう
下からのトランジションはいい感じです最後にもう一つ調整しましょうコーヒーをたくさん飲むと神経が高ぶるのでそれをトランジションのアニメーションカーブに反映させますこれは通常のSwiftUIアプリなのでアニメーションモディファイアを使用してスムーズなスプリングを選択し継続時間を短くしますそのアニメーションをログの値にバインドしますこれでアニメーションがカフェイン摂取量にマッチします内容には満足したのでインタラクティブ機能に目を向けてみますインタラクティブ機能を使ってウィジェットからアクションを実行できます Xcodeで見る前にウィジェットが動作するアーキテクチャについて少し説明しますこれによりインタラクティブ機能のより良いメンタルモデルを作れますウィジェットを作成する際は Widget Extensionを定義しますそれをシステムが検知して独立したプロセスとして実行しますウィジェットは一連のエントリを返すタイムラインプロバイダを定義しますこれは実質的にウィジェットのモデルですウィジェットが表示されている場合システムはWidget Extension プロセスを起動しタイムラインプロバイダにエントリを要求しますこれらのエントリはウィジェットの一部を構成するビュービルダーにフィードバックされエントリに基づく一連のビューを生成するために使用されますその後システムはこれらのビューの表示を生成しディスクにアーカイブします特定のエントリを表示する時システムはアーカイブされたウィジェットの表示をデコードしレンダリングしますここでいったん立ち止まり最後のポイントをもう一度説明しますビューのコードはアーカイブの間だけ実行されますそのビューの別個の表現はシステムプロセスがレンダリングしますしかしデータが静的でない場合エントリを更新したい時もあるでしょうこれはウィジェットに表示されるデータが更新されるたびにアプリでreloadTimelines関数を呼び出すことで可能になりますこれにより先ほど説明したプロセスが繰り返され新しいエントリが再生成されビューのコピーがディスクにアーカイブされますこのアーキテクチャには 3つの重要なポイントがありますまずウィジェットが表示されている時コードは実行されていませんタイムラインエントリを更新することでウィジェットのコンテンツが変更されますこれはインタラクティブなウィジェットにも当てはまります通常ウィジェットの更新はベストエフォートベースで行われますがインタラクションから開始されたリロードは常に発生すると保証されていることが重要な点ですではインタラクティブ機能を追加する方法を見て行きましょうウィジェットの一部をインタラクティブにするために ButtonやToggleのような使い慣れたコントロールを使うことができますただしウィジェットは別のプロセスでレンダリングされるので SwiftUIはプロセス空間でクロージャを実行せずバインドは変更されないことに注意が必要ですそのため Widget Extension によって実行されシステムに呼び出されるアクションを表現する方法が必要です幸いなことに App Intentという解決策がすでにありますアプリのアクションをショートカットやSiriに公開するために使った方もいるでしょうそして同じインテントを使用してウィジェットのアクションを表現できますその核となる AppIntentはシステムによって実行されるアクションをコードで定義できるプロトコルですたとえばここではTodoアプリのTodo項目を切り替えるAppIntentを定義していますインテントではいくつかのパラメータを入力として定義し performと呼ばれる非同期関数を定義しインテントを実行するためのビジネスロジックを定義します App Intentはとても強力で説明したいことがたくさんあります WWDC22と23の「Appインテントの詳細」と「App Intentにおける機能強化の詳細」セッションをぜひご確認ください SwiftUIとAppIntentsの両方をインポートする際 UIからApp Intentを実行する機能をサポートするため ButtonとToggleという新しいイニシャライザが引数としてAppIntentを受けとりこれらのコントロールとやり取りする時にそのインテントを実行しますインタラクティブウィジェットでは AppIntentを使用した ButtonとToggleのみがサポートされています他のコントロールは動作しませんもちろんこれらのイニシャライザはアプリでも動作しますウィジェットとアプリの間で AppIntentロジックを共有できるのが良い点です Xcodeのコーヒートラッカーアプリに戻りインタラクティブ機能を追加してみましょう現在ユーザーはアプリを開いた時だけ新しい飲み物を記録できますがインタラクティブウィジェットはアプリの中で最も重要なアクションを前面に出す促進剤として機能しますこのアプリの場合はもちろん新しい飲み物を記録する機能ですすでに作成したファイルに追加してみましょう最初にやりたいことは新しい飲み物をログに記録する AppIntentに準拠するタイプを定義することです人間が読みやすいタイトルをつけシステムで使用しますそしてエスプレッソをストアに記録し空のintent resultを返すことで実行要件を実装しますここで強調しておきたいことは performは非同期関数なので非同期処理たとえばここでログ書き込みを待っているときにデータベースへの書き込みなどを行う場合はこの関数をフルに活用していただきたいということです performが返ってくるとシステムは直ちにウィジェットのタイムラインのリロードを開始しウィジェットのコンテンツを更新する機会が与えられますそのため performから戻る前に更新されたウィジェットを再読み込みするために必要なすべての情報を永続化しておきましょう飲み物はエスプレッソとハードコードしましたがもちろん特定の飲み物をログに渡せるようにしたいですそのためには @Parameterプロパティラッパーとパラメータを入力するイニシャライザを持つストアドプロパティを追加しますこのプロパティラッパーを使うことが重要ですなぜならこのプロパティラッパーでアノテートされたストアドプロパティのみが永続化され Widget Extensionでインテントが実行された時に利用可能になるからですこのインテントを呼び出すボタンを追加する前にここでApp Intentを使用するエコシステムの重要な利点を説明します先ほど定義したアプリのインテントはショートカットとSiriで利用可能になるためここで定義しておくことでウィジェット以外のユーザー体験にも還元されるのですこれでウィジェットにボタンを追加する準備ができました新しいビューを作成してボタンを追加しましょうこのビューでは AppIntentを受け取るボタンイニシャライザを使い先ほど定義したインテントを渡します Spacerを使ってウィジェットの残りの部分にビューを追加しますすべて完了したのでウィジェット上でどのように動作するかビルドして実行しましょう Widget Extensionのターゲットを直接ビルドすれば Xcodeがウィジェットをホーム画面にインストールしてくれますウィジェットに定義したボタンが実装されましたタップするとエスプレッソがもう一杯記録されますですがウィジェットが可能な限り最高のユーザー体験を提供できるようもう1つ変更します AppIntentが動作を終了するとウィジェットのタイムラインが再読み込みされますこのためアクションから UIが変更されるまでわずかな待ち時間が発生しますしかし Mac上のiPhoneウィジェットはこの遅延がより顕著になる可能性があるのでそれを解決しますたとえばこのウィジェットではカフェインの総量を示す値は更新されたエントリが届くまで更新されません invalidatableContentモディファイアでこのビューをアノテートできますこのウィジェットをiPhoneから Macに追加しましたボタンをタップしてみましょうカフェイン量を示すビューには更新が届くまでその値が無効であることを示すシステムエフェクトが表示されます Buttonの動作と invalidatableContentモディファイアを使用することで待ち時間の見え方を改善する方法を紹介しましたこのモディファイアは慎重に使用してください変更の可能性があるすべてのビューにつける必要はありませんユーザーの予想を裏切らない意味のあるビューに対してこのモディファイアを使う方が良いでしょう Toggleはさらに一歩進んで Widget Extensionとのやり取りを待つことなくインタラクションが発生した時に最適な形でプレゼンテーションを更新しますこれは両方の構成でToggleスタイルをプリレンダリングすることでアーカイブ時に自動的に行われます独自のトグルスタイルを定義する場合はスタイルからisOnプロパティの設定を確認しそれを使用して見た目を切り替えるようにしてください以上でインタラクティブ機能とアニメーションの解説を終わりますアニメーションとインタラクティブ機能によってウィジェットに新しい命を吹き込む機会が生まれウィジェットが新しい場所に配置可能になったことでユーザーがどこにいても小さな楽しいインタラクションを届けることができます新しいXcode Preview APIの助けを借りてウィジェットのアニメーションを調整しアプリの中で最も重要なアクションを見つけウィジェットの中で表面化することでユーザーが必要な時にいつでもどこでも強力なインタラクションを提供しましょうありがとうございました ♪ ♪

3:54 - Usage for the container background modifier
```
.containerBackground(for: .widget) {
    Color.cosmicLatte
}
```

4:22 - Define a preview for the caffeine tracker widget

#Preview(as: WidgetFamily.systemSmall) {
    CaffeineTrackerWidget()
} timeline: {
    CaffeineLogEntry.log1
    CaffeineLogEntry.log2
    CaffeineLogEntry.log3
    CaffeineLogEntry.log4
}

5:41 - Add a numeric text content transition

struct TotalCaffeineView: View {
    let totalCaffeine: Measurement<UnitMass>

    var body: some View {
        VStack(alignment: .leading) {
            Text("Total Caffeine")
                .font(.caption)

            Text(totalCaffeine.formatted())
                .font(.title)
                .minimumScaleFactor(0.8)
                .contentTransition(.numericText(value: totalCaffeine.value))
        }
        .foregroundColor(.espresso)
        .bold()
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

6:21 - Set up transition on LastDrinkView

struct LastDrinkView: View {
    let log: CaffeineLog

    var body: some View {
        VStack(alignment: .leading) {
            Text(log.drink.name)
                .bold()
            Text("\(log.date, format: Self.dateFormatStyle) · \(caffeineAmount)")
        }
        .font(.caption)
        .id(log)
        .transition(.push(from: .bottom))
    }

    var caffeineAmount: String {
        log.drink.caffeine.formatted()
    }

    static var dateFormatStyle = Date.FormatStyle(
        date: .omitted, time: .shortened)
}

7:18 - Configuring animation for the transition

struct LastDrinkView: View {
    let log: CaffeineLog

    var body: some View {
        VStack(alignment: .leading) {
            Text(log.drink.name)
                .bold()
            Text("\(log.date, format: Self.dateFormatStyle) · \(caffeineAmount)")
        }
        .font(.caption)
        .id(log)
        .transition(.push(from: .bottom))
        .animation(.smooth(duration: 1.8), value: log)
    }

    var caffeineAmount: String {
        log.drink.caffeine.formatted()
    }

    static var dateFormatStyle = Date.FormatStyle(
        date: .omitted, time: .shortened)
}

9:18 - Reload the timeline for a widget

WidgetCenter.shared.reloadTimelines(ofKind: "LocationForecast")

13:06 - App intent to log a caffeine drink

import AppIntents

struct LogDrinkIntent: AppIntent {
    static var title: LocalizedStringResource = "Log a drink"
    static var description = IntentDescription("Log a drink and its caffeine amount.")

    @Parameter(title: "Drink", optionsProvider: DrinksOptionsProvider())
    var drink: Drink

    init() {}

    init(drink: Drink) {
        self.drink = drink
    }

    func perform() async throws -> some IntentResult {
        await DrinksLogStore.shared.log(drink: drink)
        return .result()
    }
}

15:10 - Create view to log a new drink

struct LogDrinkView: View {
    var body: some View {
        Button(intent: LogDrinkIntent(drink: .espresso)) {
            Label("Espresso", systemImage: "plus")
                .font(.caption)
        }
        .tint(.espresso)
    }
}

16:28 - Use the invalidatable content modifier

struct TotalCaffeineView: View {
    let totalCaffeine: Measurement<UnitMass>

    var body: some View {
        VStack(alignment: .leading) {
            Text("Total Caffeine")
                .font(.caption)

            Text(totalCaffeine.formatted())
                .font(.title)
                .minimumScaleFactor(0.8)
                .contentTransition(.numericText(value: totalCaffeine.value))
                .invalidatableContent()
        }
        .foregroundColor(.espresso)
        .bold()
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

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

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

関連する章

リソース

関連ビデオ

WWDC23

WWDC22