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
速習!iOS 17 Widgets 対応!
Search
mika
September 26, 2023
0
420
速習!iOS 17 Widgets 対応!
2023/09/26 potatotips #84
mika
September 26, 2023
Tweet
Share
More Decks by mika
See All by mika
iOS 18 新機能対応
mika1315
0
140
Accessibility for Swift Charts
mika1315
0
390
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
How to Ace a Technical Interview
jacobian
276
23k
A Philosophy of Restraint
colly
203
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Music & Morning Musume
bryan
46
6.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
520
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Done Done
chrislema
182
16k
Transcript
速習!iOS 17 Widgets 対応! Mika Ito potatotips #84 2023/09/26
iOS 17 からの Widgets のアップデート 2 • Widgets の置ける場所が増えた! ◦
Mac のデスクトップ (macOS app を持ってなくても使⽤できる) ◦ iPad のロック画⾯ ◦ iPhone の StandBy モード ◦ Apple Watch の Smart Stack • インタラクティブ Widgets
iOS 17 からの Widgets のアップデート 3 • Widgets の置ける場所が増えた! ←
今回はこちらの話!💁 ◦ Mac のデスクトップ (macOS app を持ってなくても使⽤できる) ◦ iPad のロック画⾯ ◦ iPhone の StandBy モード ◦ Apple Watch の Smart Stack • インタラクティブ Widgets
iOS 17 の新機能枠でフィーチャー 🎉 4 ⽇経電⼦版が App Store でフィーチャーされました! •
StandBy 対応 • watchOS 10 対応 • (既存 Widgets の改善)
新しい場所への展開⽅法 5 • 必須の対応 1. content margins への移⾏ 2. removable
background の適⽤ • より最適化するには 1. レイアウトを動的に適応させる 2. vibrant rendering への準備
必須の対応 ① ~ content margins への移⾏~ 6 • ⾃動で余⽩が付くようになった •
今までは⼿動で padding をつける必要があったが、これが不要になっ た https://developer.apple.com/videos/play/wwdc2023/10027/
必須の対応 ① ~ content margins への移⾏~ 7 Xcode 14 Xcode
15 ⽇経電⼦版の場合 だと...
必須の対応 ① ~ content margins への移⾏~ 8 Xcode 14 Xcode
15 .containerBackground() を追加する!
必須の対応 ② ~ removable background の考慮 ~ 9 .containerBackground() は
.background() とは違うの? • 置く場所によって背景を消してくれたり表⽰してくれたりする • 背景なしの例:StandBy, iPad のロック画⾯, watch の complication 背景あり 背景なし
より最適化するには ① ~レイアウトを動的に適応させる~ 10 StandBy 対応 ( & iPad のロック画⾯)
StandBy とは? • iPhone を充電した状態で横にすると出現する • キッチンやベッドルーム、デスクに置く想定 • 遠くから⾒た時にも読みやすいデザイン • 黒い背景にシームレスにブレンドされるように 背景⾊を使わない。 → StandBy の時はレイアウトを変えたい! https://developer.apple.com/jp/design/human-interface-guidelines/widgets
より最適化するには ① ~レイアウトを動的に適応させる~ 11 StandBy 対応 ( & iPad のロック画⾯)
showWidgetBackgorund == true showWidgetBackgorund == false
より最適化するには ② ~ vibrant rendering への準備~ 12 • Widgets の外観は、表⽰されるコンテキストに応じて変わる
◦ どのような外観でも、特徴的で映えるデザインにするべき ◦ 特に注意しなければいけないのは、バイブラントな外観 https://developer.apple.com/jp/design/human-interface-guidelines/widgets フルカラー バイブラント
より最適化するには ② ~ vibrant rendering への準備~ 13 バイブラントレンダリングモード時は • 画像、数字、テキストなどのコンテンツは不透明度100%にする
◦ でないと、背景に溶け込みすぎてしまう • ⽬⽴たせるコンテンツに⽩または明るいグレイを、副次的な要素には 暗いグレイスケール値を使⽤する
より最適化するには ② ~ vibrant rendering への準備~ 14 バイブラントレンダリングモードの時にはデザインを変えてしまいたい! renderingMode ==
.fullColor renderingMode == .vibrant
より最適化するには ~⽇経電⼦版 の StandBy 対応 ( & iPad のロック画⾯) ~
15 • ⽂字を⼤きく • 背景画像は使⽤しない (Night mode の時に⾚くなるので不適切と判断) • ⽬⽴たせたいアプリ名と⾒出しは⽩⽂字 既存 small widget StandBy (通常時) StandBy (Night mode) iPad ロック画⾯ バイブラント
まとめ 16 • content margins, removable background への対応は必須!! • よりこだわりたい⼈は...
◦ StandBy ⽤、watch の Smart Stack ⽤にデザインを⽤意したり ◦ vibrant rendering のときもコンテンツが鮮明に⾒えるようにデザ インを考慮したり • Apple は Widgets を推している!? iOS 17 の Widgets の Update に対応していきましょう!💪
Thank you for your attention! 17 企業 Widgets も使ってください!😉 https://www.nikkei.com/article/DGXZQOFM253FD0V20C23A8000000/