ロック画面Widgetをサクッと実装してみた話

https://potatotips.connpass.com/event/272353/

Transcript

1. ϩοΫը໘ Widget ΛαΫοͱ࣮૷ͯ͠Έͨ࿩
   Aoi Okawa (@aomathwift) 2023/02/21 potatotips #81
   

   View Slide

2. ϩοΫը໘ Widgetʁ
   

   View Slide

3. ϩοΫը໘ Widget ͱ͸
   ● iOS 16 ͔Β࢖͑ΔϩοΫը໘
   ΧελϚΠζػೳͷҰ෦
   ● AppleWatch ͷίϯϓϦέʔ
   γϣϯͷΑ͏ͳ Widget
   

   View Slide

4. ৽͍͠ WidgetFamily
   accessory
   
   
   Circular
   accessory
   
   
   Rectangular
   accessory
   
   
   Inline
   

   View Slide

5. ࣮૷ํ๏
   @main
   
   
   struct CookpadMartWidget: Widget {
   
   
   var body: some WidgetConfiguration {
   
   
   StaticConfiguration(
   
   
   kind: "DefaultWidget",
   
   
   provider: Provider()
   
   
   ) { entry in
   
   
   EntryView(entry: entry)
   
   
   }
   
   
   .supportedFamilies([.systemSmall, .accessoryCircular])
   
   
   // ...
   
   
   }
   
   
   }
   

   View Slide

6. ࣮૷ํ๏
   struct EntryView : View {
   
   
   @Environment(\.widgetFamily) var family
   
   
   var entry: Provider.Entry
   
   
   var body: some View {
   
   
   switch family {
   
   
   case .systemSmall:
   
   
   SmallView(entry: entry)
   
   
   case .accessoryCircular:
   
   
   CircularView(entry: entry)
   
   
   // ...
   
   
   @unknown default:
   
   
   Text("default")
   
   
   }
   
   
   }
   
   
   }
   

   View Slide

7. Cookpad Mart ͷ Widget ػೳ طʹಋೖࡁΈ🎉
   

   View Slide

8. ϩοΫը໘ Widget ΋
   αΫοͱಋೖͰ͖ͦ͏💡
   

   View Slide

9. ● accessoryRectangular
   ͱ accessoryCircular
   ͷ 2αΠζΛαϙʔτ
   ● iOS Ͱͷར༻ͷΈΛ૝ఆ
   ࣮૷ͯ͠Έͨ
   

   View Slide

10. ಋೖͯ͠Έͨॴײ
    

    View Slide

11. ● දࣔͰ͖Δ৘ใྔ͕ϗʔϜը
    ໘ Widget ʹൺ΂ͯগͳ͍
    ● ΞϓϦΛىಈ͢Δಈઢͱͯ͠
    ͷ׆༻ʹৼΓ੾Δͷ΋༗Γ
    දࣔίϯςϯπͷ೉͠͞
    

    View Slide

12. Inline ͸ෆ࠾༻
    ● Rectangular Ҏ্ʹڝ૪཰͕ߴ͍ʢ࿮1ͷΈʣ
    ● ೔෇ͷྡʹઃஔ͞ΕΔͷͰ਺஋৘ใ͕ຒ΋Ε΍͍͢
    ϚʔτΞϓϦͰ͸ड͚औΓ༧ఆ೔Λදࣔ
    ͠Α͏ͱ͕ͨ͠ɺ࣌ࠁͷ্ʹ೔෇͕ೋͭ
    ฒͿͱ͍͏ݟͨ໨͕ෆࣗવա͗ͯ຅🥲
    

    View Slide

13. ར༻͞ΕͯΔʁ
    accessoryRectangular Λઃஔ͍ͯ͠ΔϢʔβʔͷׂ߹ 0.018%
    accessoryCircular Λઃஔ͍ͯ͠ΔϢʔβʔͷׂ߹ 0.10%
    (ࢀߟ) systemMedium Λઃஔͯ͠ΔϢʔβʔͷׂ߹ 0.045%
    (ࢀߟ) systemSmall Λઃஔ͍ͯ͠ΔϢʔβʔͷׂ߹ 0.098%
    

    View Slide

14. ࢖ͬͯ΋Β͏ͷ͕೉͍͠
    ● ػೳͷଘࡏࣗମ͕ೝ஌͞Εʹ͍͘
    ● ࿮ͷڝ૪཰͕ߴ͗͢Δ
    ● શ෦ͷαΠζ߹Θͤͯ࠷େͰ̑࿮
    ● ݱঢ়࿮ͷ਺͕ଟ͍ํ͕࢖ͬͯ΋Β͑ͯΔ
    

    View Slide

15. Widget ར༻ͷϩάͷऔΓํ
    ● WidgetCenter.getCurrentConfigurations
    
    
    ● ઃஔ͞ΕͯΔ WidgetFamily ͕഑ྻͰฦΔ
    ● ΞϓϦ͕ΞΫςΟϒʹͳΔ౓ʹ࠷৽஋Λૹ৴
    

    View Slide

16. ࠓޙͷ՝୊
    ● ػೳͷଘࡏͷೝ஌Λ্͛Δ
    ● ίϯςϯπͷϒϥογϡΞοϓ
    ● LiveActivity ౳΋ಋೖͯ͠ϩοΫը໘Ͱͷଘࡏײ ⬆
    

    View Slide