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
440
速習!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
300
Accessibility for Swift Charts
mika1315
0
480
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
Become a Pro
speakerdeck
PRO
29
5.4k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Agile that works and the tools we love
rasmusluckow
329
21k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Code Review Best Practice
trishagee
69
19k
The Cult of Friendly URLs
andyhume
79
6.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Invisible Side of Design
smashingmag
301
51k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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/