$30 off During Our Annual Pro Sale. View Details »

速習!iOS 17 Widgets 対応!

mika
September 26, 2023
180

速習!iOS 17 Widgets 対応!

2023/09/26 potatotips #84

mika

September 26, 2023
Tweet

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