2023/09/26 potatotips #84
速習!iOS 17 Widgets 対応!Mika Itopotatotips #84 2023/09/26
View Slide
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 への移⾏~7Xcode 14 Xcode 15⽇経電⼦版の場合だと...
必須の対応 ① ~ content margins への移⾏~8Xcode 14 Xcode 15.containerBackground() を追加する!
必須の対応 ② ~ removable background の考慮 ~9.containerBackground() は .background() とは違うの?● 置く場所によって背景を消してくれたり表⽰してくれたりする● 背景なしの例:StandBy, iPad のロック画⾯, watch の complication背景あり 背景なし
より最適化するには ① ~レイアウトを動的に適応させる~10StandBy 対応 ( & iPad のロック画⾯)StandBy とは?● iPhone を充電した状態で横にすると出現する● キッチンやベッドルーム、デスクに置く想定● 遠くから⾒た時にも読みやすいデザイン● 黒い背景にシームレスにブレンドされるように背景⾊を使わない。→ StandBy の時はレイアウトを変えたい!https://developer.apple.com/jp/design/human-interface-guidelines/widgets
より最適化するには ① ~レイアウトを動的に適応させる~11StandBy 対応 ( & 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/