iOSのウィジェットでも猫走らせたい / iOSDC Japan 2022 Day2 Unconference

iOSDC Japan 2022 Day2 14:00~ Unconference トーク

Transcript

1. Kyome iOSDC Japan 2022 - Unconference 2022/09/12 iOSͷ΢ΟδΣοτͰ΋ೣ૸Β͍ͤͨ
2. iOSDC Japan 2022 - Unconference #iosdc #unconference ࣗݾ঺հ IUUQTLZPNFJP ,ZPNF ,ZPNFTVLF macOS޲͚ͷϢʔςΟϦςΟΞϓϦ։ൃऀʢझຯ݉෭ۀʣ ϝχϡʔόʔৗறܕΞϓϦɺApp Extension ͕ಘҙ෼໺ ීஈ͸αΠϘ΢ζͰ kintoneϞόΠϧ ։ൃ͍ͯ͠·͢ʂ
3. iOSDC Japan 2022 - Unconference #iosdc #unconference What’s RunCat?
4. iOSDC Japan 2022 - Unconference #iosdc #unconference What’s RunCat? RunCat macOS ޲͚ͷϝχϡʔόʔৗறܕΞϓϦ ೣͷ૸ΔεϐʔυͰ CPU ෛՙ͕Θ͔Δ
 ΞΫςΟϏςΟɾΠϯδέʔλʔ
5. iOSDC Japan 2022 - Unconference #iosdc #unconference What’s RunCat? macOS൛ͷRunCat͸ CAKeyframeAnimation Λ࢖ͬͯύϥύϥອը ͷཁྖͰΞχϝʔγϣϯ͍ͯ͠Δʢແݶϧʔϓʣ ఆظతʹCPUෛՙΛऔಘͯ͠ɺͦͷ஋ʹج͍ͮͯΞχϝʔγϣϯͷ speed Λߋ৽͍ͯ͠Δ cat-0 cat-1 cat-2 cat-3 cat-4 Speed
6. iOSDC Japan 2022 - Unconference #iosdc #unconference What’s RunCat? speed Λߋ৽͢ΔࡍʹΞχϝʔγϣϯ͕Ϧηοτ͞ΕΔͷͰɺ
 ରࡦ͠ͳ͍ͱΞχϝʔγϣϯ͕ΨΫΨΫͯ͠͠·͏ ☝︎ ͜Μͳײ͡
7. iOSDC Japan 2022 - Unconference #iosdc #unconference What’s RunCat? speed Λߋ৽͢ΔࡍʹΞχϝʔγϣϯ͕Ϧηοτ͞ΕΔͷͰɺ
 ରࡦ͠ͳ͍ͱΞχϝʔγϣϯ͕ΨΫΨΫͯ͠͠·͏ cat-0 cat-1 cat-2 cat-3 cat-4 Speed มߋ
8. iOSDC Japan 2022 - Unconference #iosdc #unconference What’s RunCat? speed Λߋ৽͢ΔࡍʹΞχϝʔγϣϯ͕Ϧηοτ͞ΕΔͷͰɺ
 ରࡦ͠ͳ͍ͱΞχϝʔγϣϯ͕ΨΫΨΫͯ͠͠·͏ cat-0 cat-1 cat-2 cat-3 cat-4 Speed มߋ ☝︎ ࣍ͷΞχϝʔγϣϯ͸ cat-3 ͔Β
 ࢝Ίͳ͍ͱεϜʔζʹͳΒͳ͍
9. iOSDC Japan 2022 - Unconference #iosdc #unconference What’s RunCat? speed Λߋ৽͢ΔࡍʹΞχϝʔγϣϯ͕Ϧηοτ͞ΕΔͷͰɺ
 ରࡦ͠ͳ͍ͱΞχϝʔγϣϯ͕ΨΫΨΫͯ͠͠·͏ γʔϜϨεʹ੾Γସ͑ΔͨΊɺߋ৽લʹ CALayer ͷ timeO ff set ͱ beginTime Λ੍ޚ్ͯ͠த͔ΒΞχϝʔγϣϯ͕࢝·ΔΑ͏ʹ͢Δ ☝︎ cat-3 ͔Β࢝·Γ cat-2 ͰऴΘΔΞχϝʹ͢Δ cat-3 cat-4 cat-0 cat-1 cat-2
10. iOSDC Japan 2022 - Unconference #iosdc #unconference What’s RunCat? ͜ͷΑ͏ͳεϐʔυ్͕தͰมԽ͢ΔແݶϧʔϓͷίϚૹΓ
 ΞχϝʔγϣϯΛ࣮ݱͰ͖Δ࠷దखஈ͕ CAKeyframeAnimation Core Animation ͍͢͝ʂ
11. iOSDC Japan 2022 - Unconference #iosdc #unconference ؓ࿩ٳ୊
12. iOSDC Japan 2022 - Unconference #iosdc #unconference iOSͰ΋ೣ૸Β͍ͤͨ 2020೥ͷKyomeࢯ
13. iOSDC Japan 2022 - Unconference #iosdc #unconference WidgetKit ग़ͨ͠ͳΜ͔Ͱ͖ͦ͏ 2020೥ͷKyomeࢯ ※ 2020೥͸ iOS 14 ͕ൃද͞Ε WidgetKit ͕ಋೖ͞Ε·ͨ͠ɻ
14. iOSDC Japan 2022 - Unconference #iosdc #unconference vs WidgetKit
15. iOSDC Japan 2022 - Unconference #iosdc #unconference ઈରʹΞχϝʔγϣϯͤͨ͘͞ͳ͍ 
 74 
 Կͱͯ͠΋΢ΟδΣοτͰೣ૸Β͍ͤͨɾ
16. iOSDC Japan 2022 - Unconference #iosdc #unconference 5SZ
    
    ͱΓ͋͑ͣૉ௚ʹ 
 Ξχϝʔγϣϯࢼͯ͠ΈΔ
17. iOSDC Japan 2022 - Unconference #iosdc #unconference Try 1: ͱΓ͋͑ͣૉ௚ʹΞχϝʔγϣϯࢼͯ͠ΈΔ in App struct RotateItemView: View { @State var flag: Bool = false var body: some View { Image(systemName: "paperplane") .resizable() .frame(width: 100, height: 100, alignment: .center) .rotationEffect(Angle(degrees: flag ? 0 : 360)) .animation( Animation.linear(duration: 2) .repeatForever(autoreverses: false), value: flag ) .onAppear { flag.toggle() } } }
18. iOSDC Japan 2022 - Unconference #iosdc #unconference Try 1: ͱΓ͋͑ͣૉ௚ʹΞχϝʔγϣϯࢼͯ͠ΈΔ in Widget struct RotateItemView: View { @State var flag: Bool = false var body: some View { Image(systemName: "paperplane") .resizable() .frame(width: 100, height: 100, alignment: .center) .rotationEffect(Angle(degrees: flag ? 0 : 360)) .animation( Animation.linear(duration: 2) .repeatForever(autoreverses: false), value: flag ) .onAppear { flag.toggle() } } } Ξχϝʔγϣϯ͠ͳ͍ 💦
19. iOSDC Japan 2022 - Unconference #iosdc #unconference 5SZ
    
    5JNFSΛ࢖ͬͯίϚૹΓͯ͠ΈΔ
20. iOSDC Japan 2022 - Unconference #iosdc #unconference struct CatTimerView: View { @State var catIndex: Int = 0 let timer = Timer .publish(every: 0.1, on: .main, in: .default) .autoconnect() var body: some View { Image("cat-\(catIndex)") .onReceive(timer) { _ in catIndex = (catIndex + 1) % 5 } .padding() } } Try 2: TimerΛ࢖ͬͯίϚૹΓͯ͠ΈΔ in App
21. iOSDC Japan 2022 - Unconference #iosdc #unconference struct CatTimerView: View { @State var catIndex: Int = 0 let timer = Timer .publish(every: 0.1, on: .main, in: .default) .autoconnect() var body: some View { Image("cat-\(catIndex)") .onReceive(timer) { _ in catIndex = (catIndex + 1) % 5 } .padding() } } Try 2: TimerΛ࢖ͬͯίϚૹΓͯ͠ΈΔ in Widget ΍͸Γಈ͔ͳ͍ 💧
22. iOSDC Japan 2022 - Unconference #iosdc #unconference 5SZ
    
    ͦ͏ͩ
    6*,JU
    ʹཔΖ͏ʂ
23. iOSDC Japan 2022 - Unconference #iosdc #unconference var animatedCatImage: Image? { if let uiImage = UIImage.animatedImageNamed("cat-", duration: 1) { return Image(uiImage: uiImage) } return nil } Try 3: ͦ͏ͩ UIKit ʹཔΖ͏ʂ in App UIImage.animatedImageNamed(_:duration:) Λ࢖͑͹ɺ
 ࿈൪ʹͳ͍ͬͯΔϑΝΠϧ໊ͷը૾ΛΞχϝʔγϣϯԽ
 ͞ΕͨҰͭͷ UIImageʹͰ͖Δ͕… UIImageView ͩͱಈ͚͘Ͳ
 SwiftUIͷImageʹೖΕΔͱಈ͔ͳ͍
24. iOSDC Japan 2022 - Unconference #iosdc #unconference 5SZ
    
    6*7JFX3FQSFTFOUBCMF
    ͰͲ͏ͩʂ
25. iOSDC Japan 2022 - Unconference #iosdc #unconference struct CatRepView: UIViewRepresentable { typealias UIViewType = UIImageView let uiImage: UIImage? init() { uiImage = UIImage.animatedImageNamed("cat-", duration: 1) } func makeUIView(context: Context) -> UIImageView { let imageView = UIImageView(image: uiImage) imageView.contentMode = .scaleAspectFit return imageView } func updateUIView(_ uiView: UIImageView, context: Context) {} } Try 4: UIViewRepresentable ͰͲ͏ͩʂ ౰࣌ͷදࣔΛ࠶ݱͨ͠΋ͷ ❗ ͔ͯɺφχίϨ!! UIKit ༝དྷͷ View ͸΢ΟδΣοτͷதͰ͸ແޮ
26. iOSDC Japan 2022 - Unconference #iosdc #unconference 5SZ
    
    (*'Λ௚઀ಡΈࠐΜͰΈΔ
27. iOSDC Japan 2022 - Unconference #iosdc #unconference var catGIFImage: Image? { if let asset = NSDataAsset(name: "runcat-gif"), let uiImage = UIImage(data: asset.data) { return Image(uiImage: uiImage) } return nil } Try 5: GIFΛ௚઀ಡΈࠐΜͰΈΔ in App ͦ΋ͦ΋΢ΟδΣοτ͡Όͳͯ͘΋ಈ͔ͳ͍
28. iOSDC Japan 2022 - Unconference #iosdc #unconference ͦͯ͠ࢸͬͨKyomeࢯͷ݁࿦
29. iOSDC Japan 2022 - Unconference #iosdc #unconference
30. iOSDC Japan 2022 - Unconference #iosdc #unconference
31. iOSDC Japan 2022 - Unconference #iosdc #unconference ࣌͸ྲྀΕ̎̌̎̎೥݄̒
32. iOSDC Japan 2022 - Unconference #iosdc #unconference WWDC 2022 ʹͯ Live Activities ൃද
33. iOSDC Japan 2022 - Unconference #iosdc #unconference Live Activities ref: AppleɺiOS 16Ͱಋೖ͞ΕΔڞ༗ͱίϛϡχέʔγϣϯͷͨΊͷ৽͍͠ํ๏Λൃද - Apple (೔ຊ) https://www.apple.com/jp/newsroom/2022/06/apple-unveils-new-ways-to-share-and-communicate-in-ios-16/
34. iOSDC Japan 2022 - Unconference #iosdc #unconference Live Activities ref: Keynote (ASL) - WWDC22 - Videos - Apple Developer. https://developer.apple.com/videos/play/wwdc2022/111/
35. iOSDC Japan 2022 - Unconference #iosdc #unconference ࠓΞχϝʔγϣϯͯ͠ͳ͔͔ͬͨ ⁉︎ 2022೥ͷKyomeࢯ ⁉
36. iOSDC Japan 2022 - Unconference #iosdc #unconference Live Activities ref: Keynote (ASL) - WWDC22 - Videos - Apple Developer. https://developer.apple.com/videos/play/wwdc2022/111/
37. iOSDC Japan 2022 - Unconference #iosdc #unconference 5SZ
    
    -JWF
    "DUJWJUJFTΛ࢖ͬͯΈΔ
38. iOSDC Japan 2022 - Unconference #iosdc #unconference Try 6: Live Activities Λ࢖ͬͯΈΔ Live Activities ͸ ActivityKit Framework Λ࢖࣮ͬͯ૷͢Δ ActivityKit ͸ Xcode 14 beta 4~6 Ͱ࢖͑Δ Xcode 14 RC ʹ͸ೖ͍ͬͯͳ͍ ૣ଎ࢼ͍ͯ͠Δਓͷهࣄ΍GitHubͷιʔε*͕͋ΔͷͰ࣮૷͸ ͦΜͳʹ೉͘͠ͳ͍ * Create Live Activities With ActivityKit on iOS 16 | by Batikan Sosun | Aug, 2022 | Better Programming
 https://betterprogramming.pub/create-live-activities-with-activitykit-on-ios-16-beta-4766a347035b
39. iOSDC Japan 2022 - Unconference #iosdc #unconference Try 6: Live Activities Λ࢖ͬͯΈΔ ࢼͯ͠Θ͔ͬͨ͜ͱ Live Activities ͸جຊతʹ͸΢ΟδΣοτͱҰॹ
 ϩοΫεΫϦʔϯʹදࣔͰ͖Δ΢ΟδΣοτͱ͍͏ײ͡ ΍͸ΓΞχϝʔγϣϯ͸Ͱ͖ͳ͍😫 ं͕ಈ͍͍ͯΔΑ͏ʹݟ͑ͨͷ͸ɺSliderͷϊϒͷը૾Λม͍͚͑ͯͨͩ
 ߋ৽࣌ʹϊϒͷҠಈΞχϝʔγϣϯ͕࣮ߦ͞ΕΔ λΠϚʔ͸ Text(date: Date, style: Text.DateStyle) Λ࢖͑͹࣮૷Ͱ͖Δ ͔͠΋ɺiOS 14͔Β͜Ε͸͋ͬͨʢ஌Βͳ͔ͬͨ..ʣ
40. iOSDC Japan 2022 - Unconference #iosdc #unconference ͦͯ͠ࢸͬͨKyomeࢯͷ݁࿦վΊ
41. iOSDC Japan 2022 - Unconference #iosdc #unconference
42. iOSDC Japan 2022 - Unconference #iosdc #unconference
43. iOSDC Japan 2022 - Unconference #iosdc #unconference ͔͠͠Kyomeࢯʹిྲྀ૸Δʔʔʂ
44. iOSDC Japan 2022 - Unconference #iosdc #unconference ॴḨɺRunCat ͸̑ຕͷ੩ࢭըΛ 
 ίϚૹΓ͍ͯ͠Δ͚ͩ… ͳΒ͹
45. iOSDC Japan 2022 - Unconference #iosdc #unconference 5SZ
    
    λΠϚʔ͕ಈ͔ͤΔͳΒೣϑΥϯτ 
 Ͱࠩ͠ସ͑Ε͹͍͍͡Όͳ͍
46. iOSDC Japan 2022 - Unconference #iosdc #unconference Try 7: λΠϚʔ͕ಈ͔ͤΔͳΒೣϑΥϯτͰࠩ͠ସ͑Ε͹͍͍͡Όͳ͍ λΠϚʔΛදࣔͨ͠΢ΟδΣοτ ೣϑΥϯτ
47. iOSDC Japan 2022 - Unconference #iosdc #unconference Calligraphr ͱ͍͏ϑΥϯτΛࣗ࡞Ͱ͖Δ
 αʔϏεΛ࢖ͬͯೣϑΥϯτΛ࡞੒ ૸Δೣ͸̑ϑϨʔϜͳͷͰɺ
 0~4ͱ5~9ͷ̎प෼ࢦఆ͢Δ ग़དྷ্͕ͬͨOpenTypeϑΥϯτΛ
 ϓϩδΣΫτʹऔΓࠐΉ Try 7: λΠϚʔ͕ಈ͔ͤΔͳΒೣϑΥϯτͰࠩ͠ସ͑Ε͹͍͍͡Όͳ͍ ref: Calligraphr. https://www.calligraphr.com/en/webapp/app_home/?/
48. iOSDC Japan 2022 - Unconference #iosdc #unconference struct ContentView: View { var body: some View { Text(Date(), style: .timer) .font(.custom("Runningcat-Regular", size: 150)) } } in App ͱΓ͋͑ͣී௨ͷSwiftUI AppͳΒػೳͨ͠ʂ ͳΜ͔ΧϫΠΠ Try 7: λΠϚʔ͕ಈ͔ͤΔͳΒೣϑΥϯτͰࠩ͠ସ͑Ε͹͍͍͡Όͳ͍ ❗
49. iOSDC Japan 2022 - Unconference #iosdc #unconference ͚ͩ͘͜͜Γൈ͖͍ͨ Try 7: λΠϚʔ͕ಈ͔ͤΔͳΒೣϑΥϯτͰࠩ͠ସ͑Ε͹͍͍͡Όͳ͍
50. iOSDC Japan 2022 - Unconference #iosdc #unconference struct ContentView: View { var body: some View { Text(Date(), style: .timer) .lineLimit(1) .font(.custom("Runningcat-Regular", size: 200)) .fixedSize(horizontal: true, vertical: false) .frame(width: 120, alignment: .trailing) .clipped() } } in App Try 7: λΠϚʔ͕ಈ͔ͤΔͳΒೣϑΥϯτͰࠩ͠ସ͑Ε͹͍͍͡Όͳ͍ .lineLimit(1) ͱ . fi xedSize() ͰվߦΛڐ͞ͳ͍Α͏ʹ͢Δ .frame(width: 120, alignment: .trailing) Ͱ෯ΛೣҰඖ෼ʹ ͭͭ͠ɺTextΛӈدͤʹ͢Δ .clipped() Ͱ༨෼ͳೣΛফ͢
51. iOSDC Japan 2022 - Unconference #iosdc #unconference struct ContentView: View { var body: some View { Text(Date(), style: .timer) .lineLimit(1) .font(.custom("Runningcat-Regular", size: 200)) .fixedSize(horizontal: true, vertical: false) .frame(width: 120, alignment: .trailing) .clipped() } } in Widget Try 7: λΠϚʔ͕ಈ͔ͤΔͳΒೣϑΥϯτͰࠩ͠ସ͑Ε͹͍͍͡Όͳ͍ ΢ΟδΣοτͩͱ Text(Date(), style: .timer) ͱ . fi xedSize() ͷ૬ੑ͕ѱ͍Β͘͠ɺText͕ফ͑ͯ͠·͏ ͱʃ͓ʃ͠ʃͯʃͨʃΑʃ͓ʃ͓ʃ͓ʃʂ 💢
52. iOSDC Japan 2022 - Unconference #iosdc #unconference ࢼߦࡨޡͨ݁͠Ռ
53. iOSDC Japan 2022 - Unconference #iosdc #unconference ͍ͭʹ΢ΟδΣοτͰೣಈ͖·ͨ͠ʂʂ Try 7: λΠϚʔ͕ಈ͔ͤΔͳΒೣϑΥϯτͰࠩ͠ସ͑Ε͹͍͍͡Όͳ͍ ΍Γ·ͨ͠🎉 ༏উ🏆 👑
54. iOSDC Japan 2022 - Unconference #iosdc #unconference in Widget Try 7: λΠϚʔ͕ಈ͔ͤΔͳΒೣϑΥϯτͰࠩ͠ସ͑Ε͹͍͍͡Όͳ͍ . fi xedSize() ͸ Group ͰแΜͰ͔Β࢖͑͹༗ޮ .clipped() ΋͞Βʹ Group ͰแΜͰ͔Β࢖͑͹༗ޮ var body: some View { Group { Group { Text(Date(), style: .timer) .lineLimit(1) .truncationMode(.head) .font(.custom("Runningcat-Regular", size: 120)) .frame(width: 200) } .fixedSize() } .frame(width: 90, alignment: .trailing) .clipped() }
55. iOSDC Japan 2022 - Unconference #iosdc #unconference var body: some View { Group { Group { Text(Date(), style: .timer) .lineLimit(1) .truncationMode(.head) .font(.custom("Runningcat-Regular", size: 120)) .frame(width: 200) } .fixedSize() } .frame(width: 90, alignment: .trailing) .clipped() } in Widget Try 7: λΠϚʔ͕ಈ͔ͤΔͳΒೣϑΥϯτͰࠩ͠ସ͑Ε͹͍͍͡Όͳ͍ .truncationMode(.head) Ͱ෯͕଍Γͳ͍ͱ͖ઌ಄͕
 ʮ…ʯͰলུ͞ΕΔΑ͏ʹ͓ͯ͘͜͠ͱ͕ॏཁ লུͭͭ͠෯Λݻఆͤ͞ΔͨΊʹɺframe(width: 200) Ͱ
 ೋจࣈ෼ͷ෯Λࢦఆ͢Δ
56. iOSDC Japan 2022 - Unconference #iosdc #unconference var body: some View { Group { Group { Text(Date(), style: .timer) .lineLimit(1) .truncationMode(.head) .font(.custom("Runningcat-Regular", size: 120)) .frame(width: 200) } .fixedSize() } .frame(width: 90, alignment: .trailing) .clipped() } in Widget Try 7: λΠϚʔ͕ಈ͔ͤΔͳΒೣϑΥϯτͰࠩ͠ସ͑Ε͹͍͍͡Όͳ͍ .clipped() ͢Δલʹ .frame(width: 90, alignment: .trailing)
 Ͱද͍ࣔͤͨ͞ೣҰඖ෼ͷ෯Λ֬อ͢Δ
57. iOSDC Japan 2022 - Unconference #iosdc #unconference RunCatͱͯ͠ͷ՝୊
58. iOSDC Japan 2022 - Unconference #iosdc #unconference RunCatͱͯ͠ͷ՝୊ ࢓૊Έ্ɺίϚૹΓͷִؒ͸̍ඵͰݻఆ Կ͔ͷঢ়ଶʹԠͯ͡εϐʔυΛม͑Δͱ͍͏͜ͱ͸Ͱ͖ͳ͍
59. iOSDC Japan 2022 - Unconference #iosdc #unconference RunCatͱͯ͠ͷ՝୊ ࢓૊Έ্ɺίϚૹΓͷִؒ͸̍ඵͰݻఆ Կ͔ͷঢ়ଶʹԠͯ͡εϐʔυΛม͑Δͱ͍͏͜ͱ͸Ͱ͖ͳ͍ ͔ͯ͜Ε͡ΌΞχϝʔγϣϯ
 ͱ͸ݴ͑ͳ͘ͳ͍ʁ
60. iOSDC Japan 2022 - Unconference #iosdc #unconference RunCatͱͯ͠ͷ՝୊ ࢓૊Έ্ɺίϚૹΓͷִؒ͸̍ඵͰݻఆ Կ͔ͷঢ়ଶʹԠͯ͡εϐʔυΛม͑Δͱ͍͏͜ͱ͸Ͱ͖ͳ͍ ͔ͯ͜Ε͡ΌΞχϝʔγϣϯ
 ͱ͸ݴ͑ͳ͘ͳ͍ʁ ͏ͬͤ͐ʂ 💢
61. iOSDC Japan 2022 - Unconference #iosdc #unconference RunCatͱͯ͠ͷ՝୊ ࢓૊Έ্ɺίϚૹΓͷִؒ͸̍ඵͰݻఆ Կ͔ͷঢ়ଶʹԠͯ͡εϐʔυΛม͑Δͱ͍͏͜ͱ͸Ͱ͖ͳ͍ ঢ়ଶʹԠͯ͡ೣҎ֎ͷϥϯφʔʹ੾Γସ͑Δ ૸͍ͬͯΔίϚΞχϝ͚ͩͰͳ͘า͍͍ͯΔίϚΞχϝ΋༻ҙ͢Δ
62. iOSDC Japan 2022 - Unconference #iosdc #unconference iOSͷ΢ΟδΣοτͰ΋ೣ૸Β͍ͤͨ Thank you! ઓ͍͸·ͩଓ͘…