SwiftDataと連携したWidgetを 作ってみた iOSアプリ開発グループ 中山 龍 2025年2月28日 mobile.stmn #10

自己紹介 中山 龍 (なかやま りゅう) ● 株式会社kubell ○ 新卒2年目のiOSエンジニア(22) ○ 「Chatwork」アプリの開発を担当 ● 愛知県在住 ○ @ryu_develop mobile.stmnは#8まですべて登壇させて いただいていたが、#9が忘年会と被った ため皆勤賞が途絶えてしまいました

注意事項 ● 本スライドの内容や登場するコードは趣味で作成しているものであ り、業務で扱っているプログラム・プロダクト・開発環境とは一切 関係ありません ● 「試しに触ってみた」という趣旨の紹介であり、必ずしもベストプ ラクティスを紹介しているわけではありません ● スライド・GitHubに掲載しているコードも完璧な動作を保証するも のではありません

目指す成果物

最終的な成果物 5 ● iOSのWidget ● SwiftDataでアプリ本体とデータを共有することができる ● WidgetのViewの中でSwiftDataを使うことができる アプリ本体 Widget

Widgetとは？

Widgetとは ● ホーム画面やロック画面に配置することができるアプリの機能 ● 最新の情報を一目で簡単に確認したり、アプリを開かずに操作することができる 7 Widgetを配置したホーム画面 Widget追加時の画面 参考: iPhoneでウィジェットを追加する/編集する/削除する

Widgetとは 〜ざっくり実装方法〜 1. iOSアプリを作成する 2. アプリにWidget Extensionを追加する 3. Widgetの見た目や処理を実装する(SwiftUI) 8 Widget Extensionを追加するときの画面

Widgetとは 〜ざっくり実装方法〜 1. iOSアプリを作成する 2. アプリにWidget Extensionを追加する 3. Widgetの見た目や処理を実装する(SwiftUI) 9 Widget Extensionを追加するときの画面 Widgetはアプリ本体ではなく、 Extensionの実装なので、通常のま まではアプリ本体の SwiftDataにはアクセスできない ↓

Widgetとは 〜ざっくり実装方法〜 1. iOSアプリを作成する 2. アプリにWidget Extensionを追加する 3. Widgetの見た目や処理を実装する(SwiftUI) 10 Widget Extensionを追加するときの画面 Widgetはアプリ本体ではなく、Extensionの実装なので、通常の ままではアプリ本体のSwiftDataにはアクセスできない ↓ WidgetからSwiftDataにアクセスできるようにし、アプリと データを共有したWidgetを作成する

Widget Extensionからアプリの SwiftDataにアクセスできるようにする

App Groupsの設定

App Groupsとは ● 同じ開発者によって開発されたアプリ同士やExtension間でデータ共有を可能にする仕組 み ● Capabilities(アプリが特定の機能やサービスにアクセスするための許可設定)の一種 ● App Groupsを設定することで、アプリ本体とWidget Extension間でデータの共有が可能 になる 13

App Groupsを設定してみる(アプリ本体) Xcode上でxcodeprojファイル ↓ TARGETSでアプリ本体 ↓ Signing & Capabilities ↓ + Capability ↓ App Groupsを選択 14 1.アプリ本体に設定をする 追加された “App Groups” の欄で「+」を選択 ↓ ↓ 任意の名前を入力し「OK」を選択

App Groupsを設定してみる(Widget側) Xcode上でxcodeprojファイル ↓ TARGETSでWidget ↓ Signing & Capabilities ↓ + Capability ↓ App Groupsを選択 15 2.Widgetに設定をする 追加された “App Groups” の欄で「+」を選択 ↓ ↓ アプリ本体に設定したものと同じ名前を入力し 「OK」を選択

@ModelのTarget Membership設定

@ModelのTarget Membership設定 @Modelを定義しているファイルの Target Membership にWidgetExtensionを追加する - Target Membership: ファイルがどのターゲット(App, Extension ...)に属するかを決めるもの 17

実際にWidget Extension内で SwiftDataを使う

Widget内でSwiftDataを使う 〜.modelContainer〜 19 Widgetのbody内のViewに対して .modelContainer を付与する - import SwiftData も忘れずにしましょう SwiftDataItemWidget.swift - SwiftDataItemWidget

Widget内でSwiftDataを使う 〜@Query〜 20 SwiftDataItemWidget.swift - SwiftDataItemWidgetEntryView 通常と同じようにView内で @Queryを使用して [Item] を取り出し、View内で利用する

Widget内でSwiftDataを使う 〜@Query〜 21 SwiftDataItemWidget.swift - SwiftDataItemWidgetEntryView 通常と同じようにView内で @Queryを使用して [Item] を取り出し、View内で利用する 🎉 Widget内でSwiftDataが使えるようになりました 🎉

注意点

注意点 23 Widget内でSwiftDataの値を使うことはできるようになりましたが、アプリ側で値を更新しても、それ に合わせてWidgetが更新されるわけではありません - SwiftDataの値は変わってもWidgetの表示の更新は起きていないため - WidgetCenter.shared.reloadAllTimelines() を使用することで、Widgetのタイムラインの再読込 を指示することができる - Widgetを更新することに関しては気にすべき点もあるので注意すること - ウィジェットを最新の状態に維持 - > ウィジェットを再読み込みすると、追加のネットワーク接続や処理が必要になるため、システムのリソース が消費され、バッテリーが消耗します。このようなパフォーマンスへの影響を軽減し、バッテリーの駆動時間 を一日中維持するには、リクエストする更新の頻度と回数を必要な分だけに制限します。 - > ユーザーが頻繁に確認するウィジェットの場合、通常、1日単位のバジェットに40〜70回の更新が 含まれます

働くをもっと楽しく、創造的に 24