🙁 👨🏻‍🎨 🛋️ IOS14ウィジェット-機能と制限 🔻 📝 ☀️

今年は、iOS開発者が~~iPhoneのバッテリー~~を消耗してユーザーエクスペリエンスを向上させる興味深い機会がいくつかありますが、その1つが新しいウィジェットです。 OSのリリースバージョンを待っている間、「Wallet」アプリケーションのウィジェットを作成した経験を共有し、Xcodeのベータバージョンでチームが遭遇した機会と制限について説明したいと思います。

定義から始めましょう-ウィジェットは、メインのモバイルアプリケーションを起動せずに関連情報を表示するビューであり、常にユーザーの指先にあります。それらを使用する機能は、iOS 8以降のiOS（Today Extension）にすでに存在しますが、それらを使用する私の純粋に個人的な経験はかなり悲しいです-ウィジェットを備えた特別なデスクトップがそれらに割り当てられていますが、私はまだそこに到達することはめったになく、習慣は発達していません。

その結果、iOS 14では、ウィジェットが復活し、エコシステムに統合され、（理論的には）よりユーザーフレンドリーになりました。

ロイヤルティカードの操作は、ウォレットアプリケーションの主な機能の1つです。今日にウィジェットを追加する可能性についてのユーザーからの提案は、AppStoreのレビューに表示されることがあります。チェックアウト時に、ユーザーはできるだけ早くカードを提示し、割引を受けてビジネスについて逃げ出したいと考えています。これは、タイムスライスが遅れると、非常に非難された外観がキューに表示されるためです。この場合、ウィジェットはカードを開くためのいくつかのユーザーアクションを保存できるため、チェックアウト時の商品の支払いが速くなります。店舗も感謝します-チェックアウト時のキューが少なくなります。

今年、Appleはプレゼンテーションのほぼ直後に予期せずiOSリリースをリリースし、開発者はXcode GMでアプリケーションを完成させる日を残しましたが、iOSチームがXcodeのベータバージョンで独自のバージョンのウィジェットを作成し始めたため、リリースの準備が整いました。 ..。ウィジェットは現在AppStoreでレビューされています。統計によると、デバイスを新しいiOSに更新するのはかなり高速です。ほとんどの場合、ユーザーはどのアプリケーションに既にウィジェットがあるかを確認し、ウィジェットを見つけて満足します。

将来的には、残高、バーコード、パートナーからの最後の未読メッセージ、通知（たとえば、ユーザーがアクションを実行する必要があるなど、カードを確認またはアクティブ化する）など、さらに関連性の高い情報を追加したいと考えています。現時点では、結果は次のようになります。

プロジェクトへのウィジェットの追加

他の同様の追加機能と同様に、ウィジェットはメインプロジェクトの拡張機能として追加されます。追加されると、Xcodeはウィジェットと他のコアクラスのコードを親切に生成しました。これは、最初の興味深い機能が私たちを待っていた場所です-私たちのプロジェクトでは、ファイルの1つでプレフィックスがクラス名に自動的に挿入されたため（はい、同じObj-Cプレフィックス！）、生成されたファイルには挿入されなかったため、このコードはコンパイルされませんでした。言われているように、鍋を燃やすのは神ではありません、明らかに、Apple内の異なるチームは彼らの間で同意しませんでした。彼らがリリースバージョンでそれを修正することを期待しましょう。プロジェクトのプレフィックスをカスタマイズするには、アプリケーションのメインターゲットのファイルインスペクターで、[クラスプレフィックス]フィールドに入力します。

WWDCのニュースをフォローしている人にとって、ウィジェットの実装がSwiftUIを使用してのみ可能であることは周知の事実です。興味深い点は、このようにしてAppleがテクノロジーの更新を強制していることです。メインアプリケーションがUIKitを使用して作成されている場合でも、必要に応じてSwiftUIのみを使用します。一方、これは機能を作成するための新しいフレームワークを試す良い機会です。この場合、プロセスに快適に適合します。状態の変更やナビゲーションはなく、静的UIを宣言するだけです。つまり、Todayの古いウィジェットにはより多くのロジックとアニメーションを含めることができるため、新しいフレームワークとともに、新しい制限も表示されます。

SwiftUIの主な革新の1つは、シミュレーターまたはデバイスで起動せずにプレビューする機能です（プレビュー）。すばらしいことですが、残念ながら、大規模なプロジェクト（私たちの場合は約400K行のコード）では、上位のMacBookでも動作が非常に遅く、デバイスでの実行が高速です。これに代わる方法は、迅速なプロトタイピングのために空のプロジェクトまたは遊び場を用意することです。

専用のXcodeスキーマを使用してデバッグすることもできます。シミュレーターでは、バージョンXcode 12ベータ6でもデバッグが不安定になるため、テストデバイスの1つを寄付し、iOS 14にアップグレードして、テストすることをお勧めします。この部分はリリースバージョンでは期待どおりに機能しないことに注意してください。

インターフェース

ユーザーは、小、中、大の3つのサイズのウィジェットのさまざまなタイプ（WidgetFamily）から選択できます。登録するには、サポートされているものを明示的に指定する必要があります。

struct CardListWidget: Widget {
    public var body: some WidgetConfiguration {
        IntentConfiguration(kind: “CardListWidgetKind”,
                            intent: DynamicMultiSelectionIntent.self,
                            provider: CardListProvider()) { entry in
            CardListEntryView(entry: entry)
        }
        .configurationDisplayName(" ")
        .description(",     ")
        .supportedFamilies([.systemSmall, .systemMedium])
    }
}

私のチームと私は中小に固執することにしました-小さなウィジェットの場合はお気に入りのカードを1枚、中型の場合は4枚表示します。

ウィジェットはコントロールセンターからデスクトップに追加され、ユーザーは必要なタイプを選択し

ます。Assets.xcassets-> AccentColorを使用して、[ウィジェットの追加]ボタンの色をカスタマイズします。ウィジェットの名前にも説明があります（上記のサンプルコード）。

サポートされているビューの数に制限がある場合は、WidgetBundleを使用して拡張できます。

@main
struct WalletBundle: WidgetBundle {
    @WidgetBundleBuilder
    var body: some Widget {
        CardListWidget()
        MySecondWidget()
    }
}

ウィジェットにはある状態のスナップショットが表示されるため、ユーザーとの対話の唯一の可能性は、いくつかの要素またはウィジェット全体をクリックしてメインアプリケーションに切り替えることです。アニメーション、ナビゲーション、または他のビューへの遷移はありません。ただし、メインアプリケーションに深いリンクをドロップすることは可能です。この場合、小さなウィジェットの場合、クリックゾーンは領域全体であり、この場合、widgetURL（_ :)メソッドを使用します。中規模および大規模の場合、ビュークリックが利用可能であり、SwiftUIのリンク構造がこれに役立ちます。

Link(destination: card.url) {
  CardView(card: card)
}

2つのサイズのウィジェットの最終ビューは、次のようになりました。

ウィジェットのインターフェイスを設計する場合、次のルールと要件が役立ちます（Appleガイドラインによる）。

ウィジェットを1つのアイデアと問題に集中させ、アプリケーションのすべての機能を繰り返そうとしないでください。
コンテンツを拡大縮小するだけでなく、サイズに応じてより多くの情報を表示します。
1日を通して変化する可能性のある動的な情報を表示します。完全に静的な情報や毎分変化する情報という形の極端なものは歓迎されません。
ウィジェットは、ユーザーに関連情報を提供する必要があり、アプリケーションを開く別の方法ではありません。

外観はカスタマイズされています。次のステップは、ユーザーに表示するカードとその方法を選択することです。明らかに4枚以上のカードが存在する可能性があります。いくつかのオプションを考えてみましょう。

ユーザーがカードを選択できるようにします。彼ではないにしても、誰がどのカードがより重要かを知っています！
最後に使用したマップを表示します。
たとえば、曜日と曜日、統計に焦点を当てて、よりスマートなアルゴリズムを作成します（ユーザーが平日に家の近くのフルーツショップに行き、週末にハイパーマーケットに行く場合、この瞬間にユーザーを助け、目的のカードを表示できます）

プロトタイプの一部として、ウィジェットで直接パラメーターを構成する機能を同時に試すために、最初のオプションを決定しました。アプリケーション内に特別な画面を作成する必要はありません。しかし、ユーザーは、彼らが言うように、これらの設定を見つけるのに十分な経験がありますか？

カスタムウィジェット設定

設定はインテントを使用して生成されます（こんにちはAndroid開発者）-新しいウィジェットを作成すると、インテントファイルがプロジェクトに自動的に追加されます。コードジェネレータは、SiriKitフレームワークの一部であるINIntentから継承するクラスを準備します。インテントパラメータには、「インテントはウィジェットに適格です」という魔法のオプションが含まれています。いくつかのタイプのパラメーターが使用可能であり、サブタイプをカスタマイズできます。この場合のデータは動的リストであるため、「オプションは動的に提供されます」という項目も設定します。

ウィジェットの種類ごとに、リスト内のアイテムの最大数を設定します（小1の場合、中4の場合）。

このタイプのインテントは、ウィジェットによってデータソースとして使用されます。

次に、構成されたインテントクラスをIntentConfiguration構成に配置する必要があります。

struct CardListWidget: Widget {
    public var body: some WidgetConfiguration {
        IntentConfiguration(kind: WidgetConstants.widgetKind,
                            intent: DynamicMultiSelectionIntent.self,
                            provider: CardListProvider()) { entry in
            CardListEntryView(entry: entry)
        }
        .configurationDisplayName(" ")
        .description(",     .")
        .supportedFamilies([.systemSmall, .systemMedium])
    }
}

ユーザー設定が不要な場合は、StaticConfigurationクラスの形式で、インテントを指定せずに機能する代替手段があります。

タイトルと説明は設定画面で編集できます。

ウィジェットの名前は1行に収まる必要があります。収まらない場合は、切り捨てられます。同時に、追加画面とウィジェット設定の許容長さが異なります。

一部のデバイスの名前の最大長の例：

iPhone 11 Pro Max
28  
21   

iPhone 11 Pro
25  
19   

iPhone SE
24  
19

説明は複数行です。設定のテキストが非常に長い場合は、コンテンツをスクロールできます。しかし、追加画面では、ウィジェットのプレビューが最初に圧縮され、次にレイアウトに何かひどいことが起こります。

また、背景色との値を変更することができますWidgetBackgroundとAccentColorパラメータを-デフォルトでは、彼らはすでにある資産。必要な場合は、ウィジェット設定で名前を変更することができるビルド設定で資産カタログコンパイラー-オプショングループ内のウィジェットの背景色名とグローバルアクセント色名のフィールドを、それぞれ。

リレーションシップ 設定を介して別のパラメーターで選択した値に応じて、一部のパラメーターを非表示（または表示）にすることができます。

パラメータを編集するためのUIは、そのタイプによって異なることに注意してください。たとえば、Booleanを指定すると、UISwitchが表示され、Integerを指定すると、UITextfieldを介した入力、またはUIStepperを介した段階的な変更の2つのオプションを選択できます。

メインアプリケーションとの相互作用。

バンドルは構成されていますが、インテント自体が実際のデータをどこから取得するかを決定する必要があります。この場合のメインアプリケーションとのブリッジは、一般グループ（App Groups）内のファイルです。メインアプリケーションが書き込み、ウィジェットが読み取ります。

一般グループへのURLを取得するには、次のメソッドを使用します。

FileManager.default.containerURL(forSecurityApplicationGroupIdentifier: “group.ru.yourcompany.yourawesomeapp”)

選択用の辞書として設定でユーザーが使用するため、すべての候補を保存します。

次に、オペレーティングシステムは、データが更新されたことを確認する必要があります。これを次のように呼び出します。

WidgetCenter.shared.reloadAllTimelines()
//  WidgetCenter.shared.reloadTimelines(ofKind: "kind")

メソッド呼び出しはウィジェットのコンテンツとタイムライン全体をリロードするため、システムが過負荷にならないように、データが実際に更新されたときに使用してください。

データの更新

ユーザーデバイスのバッテリーを処理するために、Appleは、タイムラインを使用してウィジェット上のデータを更新するメカニズム、つまりスナップショットを生成するメカニズムを考え出しました。開発者は、ビューを直接更新または管理するのではなく、オペレーティングシステムがバックグラウンドでスナップショットをカットするためのスケジュールを提供します。

更新は、次のイベントで行われます。

以前に使用したWidgetCenter.shared.reloadAllTimelines（）を呼び出す
ユーザーがウィジェットをデスクトップに追加したとき
設定を編集する場合。

また、開発者には、タイムラインを更新するための3種類のポリシー（TimelineReloadPolicy）があります

。atEnd-最後のスナップショットを表示した後に更新し

ない-強制呼び出しの場合にのみ更新する

（_：） -一定期間後に更新する。

この場合、メインアプリケーションでカードデータが更新されるまで、システムに1つのスナップショットを作成するように要求するだけで十分です。

struct CardListProvider: IntentTimelineProvider {
    public typealias Intent = DynamicMultiSelectionIntent
    public typealias Entry = CardListEntry

    public func placeholder(in context: Context) -> Self.Entry {
        return CardListEntry(date: Date(), cards: testData)
    }

    public func getSnapshot(for configuration: Self.Intent, in context: Self.Context, completion: @escaping (Self.Entry) -> Void) {
        let entry = CardListEntry(date: Date(), cards: testData)
        completion(entry)
    }

    public func getTimeline(for configuration: Self.Intent, in context: Self.Context, completion: @escaping (Timeline<Self.Entry>) -> Void) {
        let cards: [WidgetCard]? = configuration.cards?.compactMap { card in
            let id = card.identifier
            let storedCards = SharedStorage.widgetRepository.restore()
            return storedCards.first(where: { widgetCard in widgetCard.id == id })
        }

        let entry = CardListEntry(date: Date(), cards: cards ?? [])
        let timeline = Timeline(entries: [entry], policy: .never)
        completion(timeline)
    }
}

struct CardListEntry: TimelineEntry {
    public let date: Date
    public let cards: [WidgetCard]
}

曜日と時間に応じてカードを選択するための自動アルゴリズムを使用する場合は、より柔軟なオプションが役立ちます。

これとは別に、ウィジェットがウィジェットのスタック（スマートスタック）にある場合は、ウィジェットの表示に注意する価値があります。この場合、2つのオプションを使用して優先度を管理できます。SiriSuggestions、またはTimelineEntryRelevanceタイプでTimelineEntryの関連性値を設定することです。TimelineEntryRelevanceは二つのパラメータ含ま：スコア-他のスナップショットに現在のスナップショットの相対的な優先度を、期間は、ウィジェットが関連性を保ち、システムがウィジェットをスタックの最上位に配置できるようになるまでの時間です。

両方の方法、およびウィジェットの構成オプションについては、WWDCセッションで詳細に説明されました。

また、日付と時刻の表示を最新に保つ方法についても話す必要があります。ウィジェットのコンテンツを定期的に更新できないため、テキストコンポーネントにいくつかのスタイルが追加されました。スタイルを使用する場合、ウィジェットが画面に表示されている間、システムはコンポーネントのコンテンツを自動的に更新します。おそらく将来的には、同じアプローチが他のSwiftUIコンポーネントにも拡張されるでしょう。

テキストは次のスタイルをサポートします：

相対-現在の日付と指定された日付の時間差。ここで注目に値するのは、日付が将来指定されている場合、カウントダウンが開始され、その後、ゼロに達した瞬間からの日付が表示されることです。次の2つのスタイルでも同じ動作が行われます。

オフセット-前のものと同様ですが、±の接頭辞の形式で示されます。

タイマー-タイマーのアナログ。

日付-日付表示;

時間-時間表示。

また、間隔を指定するだけで、日付間の時間間隔を表示することができます。

let components = DateComponents(minute: 10, second: 0)
 let futureDate = Calendar.current.date(byAdding: components, to: Date())!
 VStack {
   Text(futureDate, style: .relative)
      .multilineTextAlignment(.center)
   Text(futureDate, style: .offset)
      .multilineTextAlignment(.center)
   Text(futureDate, style: .timer)
      .multilineTextAlignment(.center)
   Text(Date(), style: .date) 
      .multilineTextAlignment(.center)
   Text(Date(), style: .time)
      .multilineTextAlignment(.center)
   Text(Date() ... futureDate)
      .multilineTextAlignment(.center)
}

ウィジェットのプレビュー

初めて表示されると、ウィジェットはプレビューモードで開かれます。このため、プレースホルダー（:)メソッドでTimeLineEntryを返す必要があります。私たちの場合、次のようになります。

func placeholder(in context: Context) -> Self.Entry {
        return CardListEntry(date: Date(), cards: testData)
 }

その後、プレースホルダーパラメータを持つ編集済み（理由:)修飾子がビューに適用されます。この場合、ウィジェットの要素はぼやけて表示されます。未編集の（）修飾子を使用することで、一部の要素からこの効果を取り除くことができます。ドキュメントもの呼び出しと言うで:)プレースホルダ（メソッドが同期していると、結果は違って、可能な限り迅速に返す必要があります完了:)：中（getSnapshotとで（getTimeline：完了:)

丸め要素

ガイドラインでは、要素の丸めをウィジェットの丸めと一致させることをお勧めします。このために、ContainerRelativeShape構造がiOS 14で追加されました。これにより、コンテナーの形状をビューに適用できます。

.clipShape(ContainerRelativeShape())

Objective-Cのサポート

ウィジェットにObjective-Cコードを追加する必要がある場合（たとえば、バーコードイメージの生成をウィジェットに書き込んだ場合）、Objective-Cブリッジヘッダーを追加することにより、すべてが標準的な方法で行われます。私たちが遭遇した唯一の問題は、ビルド時にXcodeが自動生成されたインテントファイルを表示しなくなったため、それらをブリッジヘッダーに追加したことです。

#import "DynamicCardSelectionIntent.h"
#import "CardSelectionIntent.h"
#import "DynamicMultiSelectionIntent.h"

アプリケーションサイズ

テストはXcode12ベータ6で実行されまし

た。ウィジェットなし：61.6 MB

ウィジェットあり：62.2MB

この記事で説明した主なポイントを要約します。

ウィジェットは、実際にSwiftUIの感触をつかむのに最適な方法です。サポートされている最小バージョンがiOS14よりも低い場合でも、それらをプロジェクトに追加します。
WidgetBundleは、使用可能なウィジェットの数を増やすために使用されます。これは、ApolloRedditにあるさまざまなウィジェットの数の良い例です。
IntentConfigurationまたはStaticConfigurationは、カスタム設定が必要ない場合にウィジェット自体にカスタム設定を追加するのに役立ちます。
共有アプリグループ内のファイルシステム上の共有フォルダは、データをメインアプリケーションと同期するのに役立ちます。
開発者は、タイムラインを更新するためのいくつかのポリシーから選択できます（atEnd、never、after（_ :)）。

これに関して、Xcodeのベータ版でウィジェットを開発するという厄介な道は完全であると見なすことができます。あと1つの簡単なステップがあります-AppStoreでレビューを行うことです。

PSウィジェット付きのバージョンはモデレートを通過し、AppStoreからダウンロードできるようになりました。

最後までお読みいただきありがとうございます。提案やコメントをお待ちしております。簡単なアンケートに答えて、ユーザーと開発者の間でウィジェットがどれほど人気があるかを確認してください。

IOS14ウィジェット-機能と制限