Widget Code-Along 1－冒険の始まり

こんにちは WWDCへようこそ

“Widget Code-Along 1－ 冒険の始まり” iOS System Experienceチームの イジーです ご参加 ありがとうございます 本日の内容を ご説明します この Code-Alongセッションは WWDC 2020の新しいフォーマットです 内容と参加方法をご説明し ウィジェットの コアコンセプトを解説してから 最初のウィジェットを 皆さんと一緒に 構築します それでは 始めましょう Code-Along このセッションは Code-Along方式です これから使用するプロジェクトは デベロッパポータルに用意されています ウィジェットは 皆さんと一緒に 最初から構築します それでは 今からダウンロードを 開始してください その間に いくつかコンセプトを ご説明します ウィジェットとは そもそも何でしょうか？

ウィジェットとは SwiftUIビューです したがって iOS iPadOS macOSの ネイティブビューを 生成する 宣言型コードと 同じです

SwiftUIビューは 時間とともに更新されます 更新の方法とタイミングを このCode-Alongで見ていきます

プロジェクトを ダウンロードできました

今は Code-Alongの初回ですので プロジェクトを開きましょう

ウィジェットに進む前に ビルドと実行をして 内容を確認します “ビルド成功”

“自分の絵文字 パワーパンダ - スパウティ - インテリ” “絵文字レンジャー”アプリケーションです お気に入りの“絵文字レンジャー”を 追跡できます 今あるのは “パワーパンダ” “スパウティ” “インテリ”です 詳しく見てみましょう “パワーパンダについて” 絵文字レンジャーたちは 世界を守っています パワーパンダは回復中ですが もうすぐ終わります

基調講演の “Welcome to WidgetKit”を視聴しましたが― このゲームのウィジェットを 作りたいと思います そのための完璧なビューがすでにあります 左上のステータスの正方形が ウィジェットには理想的です これにしましょう

まずはコードで このビューを見てみましょう

SwiftUIのAvatarViewです SwiftUIが初めての方は ウィジェットから入るのが最適です わずか数行のコードで ウィジェットを生成しています レイアウトはStack構文で表現されており― 余白はSwiftUIが 適切にセットしてくれます また 右側には SwiftUIのプレビューがあります タイプするとリアルタイムに 更新されます もう ウィジェットらしくなっています 完成させていきましょう まず ウィジェットターゲットを 作成します File - New - Targetで widgetを検索します

名前は EmojiRangerWidgetで

終了して―

ターゲットをアクティブにします

ターゲットができました これに先ほどのビューを入れたいので― 必要なファイルを ターゲットに追加していきます

SwiftUIのプレビューは ウィジェットでも使えます

プレビューの作成をクリックすると 自動的にPreviewが挿入され 先ほどのAvatarViewを使えます

ウィジェットの見た目を 詳しく確認するために previewContextの引数に WidgetPreviewContextを使います

いいですね まるで もうウィジェットができたみたい いくつか情報を足せば 完成です

DisplayNameとdescriptionを 入力します

“絵文字レンジャーの詳細”

“お気に入りの絵文字レンジャーを追跡します”

ここで メインのEntryViewを 見てみます

EmojiRangerWidgetEntryViewです 先ほどプレビューした AvatarViewを使います

ここでcharacterを渡さないと いけませんが このcharacterはどこから？ EmojiRangersWidgetEntryViewに すでにエントリがありますので これをエントリに追加します

これで AvatarViewに 直接渡せます

では このエントリはどこから？ エントリは TimelineProviderから来ています ウィジェットのコアエンジンです

WidgetKitに必要なエントリが1つだけなら TimelineProviderはsnapshotを提供します ウィジェットギャラリーなどの場合です 完全なtimelineを提供するのは― ユーザーがすでに 構成済みのウィジェットを デバイスに追加してしている場合です ここでは snapshot用に characterを渡すだけでです

ここでcharacterを渡します

timelineは ユーザーが実際にギャラリーから ウィジェットを追加してから使用されます 今は 完全なtimelineは不要です もう一度 SimpleEntryを使用します

できました ビルドと実行をして確認しましょう

ウィジェットターゲットを ビルドしました ウィジェットは自動的に ホーム画面に追加されています 完全なウィジェットです ただし ちょっと変えたいところが― まず “追加”シートで― “絵文字レンジャーの詳細” このウィジェットのサイズには 小 中 大があります これはよいのですが スペースの 使い方がいまひとつです 今は まだサポートできません supportedFamiliesをセットします

WidgetConfigurationの モディファイアの追加です

もうひとつ お気付きでしょうが テンプレートに PlaceholderViewがあります 我々のウィジェットでは速すぎて見えませんが― WidgetKitがタイムライン上で待機している間は このように表示されます これをAvatarViewにして― SwiftUIのプレビューで どうなるか見てみます AvatarViewにします

PlaceholderViewにエントリがありませんので ここもパンダを渡します

今度は プレビューで―

ここをGroupにして―

PlaceFolderに追加します

同じビューが ２つできました ただし PlaceFolderでは 実際のものでなく 仮のコンテンツを表示したいのですが― 新しいSwiftUI APIで これをすごく簡単にできます isPlaceholderモディファイアです

プレビューで見てみます 完全なウィジェットと プレースホルダーです テキストはグレーの 丸みのある四角形に置換され 画像も自動的に 置換されています

いいですね

最後にもう一度 でき上がったウィジェットを 見ておきましょう

絵文字レンジャーアプリケーションです

ウィジェットギャラリーで サポートされるサイズはひとつ そして ホーム画面に追加できます 完璧です “次のステップ” ウィジェットデザインの アプローチの詳細については “Designing Great Widgets” を ご視聴ください ニルズが SwiftUIをフル活用して 優れたウィジェットを 設計する方法を説明します Code-Alongの次のセクションで また お待ちしています ご視聴ありがとうございました WWDCをお楽しみください