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

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

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

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

Kyome (Takuto Nakamura)

September 12, 2022
Tweet

More Decks by Kyome (Takuto Nakamura)

Other Decks in Programming

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 5SZ5JNFSΛ࢖ͬͯίϚૹΓͯ͠ΈΔ

  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 5SZ6*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!

    ઓ͍͸·ͩଓ͘…