速習！iOS 17 Widgets 対応！

2023/09/26 potatotips #84

Transcript

1. 速習！iOS 17 Widgets 対応！
   Mika Ito
   potatotips #84 2023/09/26
   

   View Slide

2. iOS 17 からの Widgets のアップデート
   2
   ● Widgets の置ける場所が増えた！
   ○ Mac のデスクトップ (macOS app を持ってなくても使⽤できる)
   ○ iPad のロック画⾯
   ○ iPhone の StandBy モード
   ○ Apple Watch の Smart Stack
   ● インタラクティブ Widgets
   

   View Slide

3. iOS 17 からの Widgets のアップデート
   3
   ● Widgets の置ける場所が増えた！ ← 今回はこちらの話！💁
   ○ Mac のデスクトップ (macOS app を持ってなくても使⽤できる)
   ○ iPad のロック画⾯
   ○ iPhone の StandBy モード
   ○ Apple Watch の Smart Stack
   ● インタラクティブ Widgets
   

   View Slide

4. iOS 17 の新機能枠でフィーチャー 🎉
   4
   ⽇経電⼦版が App Store でフィーチャーされました！
   ● StandBy 対応
   ● watchOS 10 対応
   ● (既存 Widgets の改善)
   

   View Slide

5. 新しい場所への展開⽅法
   5
   ● 必須の対応
   1. content margins への移⾏
   2. removable background の適⽤
   ● より最適化するには
   1. レイアウトを動的に適応させる
   2. vibrant rendering への準備
   

   View Slide

6. 必須の対応 ① ~ content margins への移⾏~
   6
   ● ⾃動で余⽩が付くようになった
   ● 今までは⼿動で padding をつける必要があったが、これが不要になっ
   た
   https://developer.apple.com/videos/play/wwdc2023/10027/
   

   View Slide

7. 必須の対応 ① ~ content margins への移⾏~
   7
   Xcode 14 Xcode 15
   ⽇経電⼦版の場合
   だと...
   

   View Slide

8. 必須の対応 ① ~ content margins への移⾏~
   8
   Xcode 14 Xcode 15
   .containerBackground() を追加する！
   

   View Slide

9. 必須の対応 ② ~ removable background の考慮 ~
   9
   .containerBackground() は .background() とは違うの？
   ● 置く場所によって背景を消してくれたり表⽰してくれたりする
   ● 背景なしの例：StandBy, iPad のロック画⾯, watch の complication
   背景あり 背景なし
   

   View Slide

10. より最適化するには ① ~レイアウトを動的に適応させる~
    10
    StandBy 対応 ( & iPad のロック画⾯)
    StandBy とは？
    ● iPhone を充電した状態で横にすると出現する
    ● キッチンやベッドルーム、デスクに置く想定
    ● 遠くから⾒た時にも読みやすいデザイン
    ● 黒い背景にシームレスにブレンドされるように
    背景⾊を使わない。
    → StandBy の時はレイアウトを変えたい！
    https://developer.apple.com/jp/design/human-interface-guidelines/widgets
    

    View Slide

11. より最適化するには ① ~レイアウトを動的に適応させる~
    11
    StandBy 対応 ( & iPad のロック画⾯)
    showWidgetBackgorund == true showWidgetBackgorund == false
    

    View Slide

12. より最適化するには ② ~ vibrant rendering への準備~
    12
    ● Widgets の外観は、表⽰されるコンテキストに応じて変わる
    ○ どのような外観でも、特徴的で映えるデザインにするべき
    ○ 特に注意しなければいけないのは、バイブラントな外観
    https://developer.apple.com/jp/design/human-interface-guidelines/widgets
    フルカラー バイブラント
    

    View Slide

13. より最適化するには ② ~ vibrant rendering への準備~
    13
    バイブラントレンダリングモード時は
    ● 画像、数字、テキストなどのコンテンツは不透明度100％にする
    ○ でないと、背景に溶け込みすぎてしまう
    ● ⽬⽴たせるコンテンツに⽩または明るいグレイを、副次的な要素には
    暗いグレイスケール値を使⽤する
    

    View Slide

14. より最適化するには ② ~ vibrant rendering への準備~
    14
    バイブラントレンダリングモードの時にはデザインを変えてしまいたい！
    renderingMode == .fullColor renderingMode == .vibrant
    

    View Slide

15. より最適化するには ~⽇経電⼦版 の StandBy 対応
                          ( & iPad のロック画⾯) ~
    15
    ● ⽂字を⼤きく
    ● 背景画像は使⽤しない (Night mode の時に⾚くなるので不適切と判断)
    ● ⽬⽴たせたいアプリ名と⾒出しは⽩⽂字
    既存 small widget StandBy (通常時) StandBy (Night mode) iPad ロック画⾯
    バイブラント
    

    View Slide

16. まとめ
    16
    ● content margins, removable background への対応は必須！！
    ● よりこだわりたい⼈は...
    ○ StandBy ⽤、watch の Smart Stack ⽤にデザインを⽤意したり
    ○ vibrant rendering のときもコンテンツが鮮明に⾒えるようにデザ
    インを考慮したり
    ● Apple は Widgets を推している！？
    iOS 17 の Widgets の Update に対応していきましょう！💪
    

    View Slide

17. Thank you for your attention!
    17
    企業 Widgets も使ってください！😉
    https://www.nikkei.com/article/DGXZQOFM253FD0V20C23A8000000/
    

    View Slide