Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SwiftDataと連携したWidgetを作ってみた
Search
Ryu-nakayama
February 28, 2025
Programming
230
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
SwiftDataと連携したWidgetを作ってみた
mobile.stmn#10の登壇資料です
Ryu-nakayama
February 28, 2025
More Decks by Ryu-nakayama
See All by Ryu-nakayama
AIに「任せない」という選択
ryunakayama
0
0
iOS機能開発のAI環境と起きた変化
ryunakayama
0
240
日本だけで解禁されているアプリ起動の方法
ryunakayama
0
430
iOSアプリでフロントエンドと仲良くする
ryunakayama
0
160
「ジェン文字」使ってますか?
ryunakayama
0
83
Health Kit × Foundation Models でAIコーチを作ってみた
ryunakayama
0
360
iOSの画面の状態のアレコレを調査してみた
ryunakayama
0
110
作文ツール(Writing Tools)をアプリから制御する
ryunakayama
0
67
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
320
Other Decks in Programming
See All in Programming
AIエージェントで 変わるAndroid開発環境
takahirom
2
740
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
kanaru0928
0
130
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
tomohisa
0
690
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計|Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
tomohisa
0
120
『コードを書く以外の』エンジニアリング〜課金基盤移行プロジェクト推進のためのTips4選
yuriko1211
0
550
「寝てても仕事が進む」Claude Codeで組む第二の脳
tomoyafujita2016
0
190
React本体のコードリーディング
high_g_engineer
0
110
テーブルをDELETEした
yuzneri
0
120
jsmini JavaScript Engine を作ってみた話
yosuke_furukawa
PRO
0
260
OpenSpecのproposalにbrainstormingを持たせてみた
tigertora7571
1
140
Go言語とトイモデルで学ぶTransformerの気持ち / fukuokago23-transformer
monochromegane
0
150
生成AI導入の「期待外れ」を乗り越える ー 開発フロー改革が目指す、真の組織変革
starfish719
0
2.7k
Featured
See All Featured
Balancing Empowerment & Direction
lara
6
1.2k
Building AI with AI
inesmontani
PRO
1
1.1k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
230
My Coaching Mixtape
mlcsv
0
180
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
540
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
450
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.2k
Ruling the World: When Life Gets Gamed
codingconduct
0
290
Automating Front-end Workflow
addyosmani
1370
210k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
400
How GitHub (no longer) Works
holman
316
150k
Transcript
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