Playground駆動開発のすすめ / Playground driven development suggestion

Transcript

1. iOSDC Japan 2018

   2018/08/30
   גࣜձࣾϛΫγΟ/ΈͯͶࣄۀ෦ ؠ໊༐ً @rockname
   Playgroundۦಈ։ൃ
   ͷ͢͢Ί
   

   View Slide

2. @rockname
   גࣜձࣾϛΫγΟ / ΈͯͶࣄۀ෦

   ΞϓϦ։ൃG 18৽ଔ
   iOS(Swift, objc), Android(Kotlin, Java), Rails(ruby)…
   

   View Slide

3. UIͷ࣮૷Λ൐͏

   iOSΞϓϦ։ൃϑϩʔ
   

   View Slide

4. 1 ϩδοΫΛ૊Ή
   2 StoryboardͰϨΠΞ΢τ
   3 ಈ࡞֬ೝ
   w ͦΕͧΕͷΞʔΩςΫνϟʹԠͯ͡ϩδοΫ͔Β૊ΜͰ͍͘
   w $MFBO"SDIJUFDUVSFͳΒ%PNBJO͔Β
   w ςετॻ͘
   w ΞχϝʔγϣϯͳͲಈతͳཁૉҎ֎͸ఆٛͯ͠͠·͏
   w ࣮ػ΍4JNVMBUPSͰҙਤͨ͠ڍಈΛ͢Δ͔֬ೝ
   

   View Slide

5. 1 ϩδοΫΛ૊Ή
   2 StoryboardͰϨΠΞ΢τ
   3 ಈ࡞֬ೝ
   w ͦΕͧΕͷΞʔΩςΫνϟʹԠͯ͡ϩδοΫ͔Β૊ΜͰ͍͘
   w $MFBO"SDIJUFDUVSFͳΒ%PNBJO͔Β
   w ςετॻ͘
   w ΞχϝʔγϣϯͳͲಈతͳཁૉҎ֎͸ఆٛͯ͠͠·͏
   w ࣮ػ΍4JNVMBUPSͰҙਤͨ͠ڍಈΛ͢Δ͔֬ೝ
   4 σβΠϯௐ੔
   

   View Slide

6. 1 ϩδοΫΛ૊Ή
   2 StoryboardͰϨΠΞ΢τ
   3 ಈ࡞֬ೝ
   w ͦΕͧΕͷΞʔΩςΫνϟʹԠͯ͡ϩδοΫ͔Β૊ΜͰ͍͘
   w $MFBO"SDIJUFDUVSFͳΒ%PNBJO͔Β
   w ςετॻ͘
   w ΞχϝʔγϣϯͳͲಈతͳཁૉҎ֎͸ఆٛͯ͠͠·͏
   w ࣮ػ΍4JNVMBUPSͰҙਤͨ͠ڍಈΛ͢Δ͔֬ೝ
   4 σβΠϯௐ੔
   ͕݁͜͜ߏਏ͍…
   

   View Slide

7. • ෳ਺ղ૾౓ͰͷϨΠΞ΢τ
   • ৚݅ʹΑͬͯมΘΔදࣔ಺༰
   • ϩʔΧϥΠζͷจݴ…
   

   View Slide

8. Xcode Simulator

   /Device
   #VJME͕௨ΔͷΛ଴ͬͯ

   ϨΠΞ΢τΛ֬ೝ
   ϨΠΞ΢τΛௐ੔ͯ͠

   ࠶Ϗϧυ
   • ෳ਺ղ૾౓ͰͷϨΠΞ΢τ
   • ৚݅ʹΑͬͯมΘΔදࣔ಺༰
   • ϩʔΧϥΠζͷจݴ…
   

   View Slide

9. UIͷௐ੔Λ΋ͬͱૣ͍αΠΫϧͰճ͍ͨ͠…
   

   View Slide

10. – Playground driven development
    “Playgroundۦಈ։ൃ”
    

    View Slide

11. Playgroundۦಈ։ൃͱ͸
    • ViewͷΈΛ୹࣌ؒͰϏϧυͯ͠ର৅ͷγʔϯΛ
    PlaygroundͰදࣔ͢Δ͜ͱͰσβΠϯௐ੔ͷϑ
    ϩʔΛૣ͘͢Δ։ൃख๏

    • Kickstarter͕ఏএ

    (https://github.com/kickstarter/ios-oss)
    

    View Slide

12. Kickstarter͸͜Μͳײ͡
    

    View Slide

13. Kickstarter͸͜Μͳײ͡
    

    View Slide

14. Kickstarter͸͜Μͳײ͡
    

    View Slide

15. ಋೖखॱ
    

    View Slide

16. 1. Cocoa Touch frameworkΛ
    λʔήοτʹ௥Ճ
    

    View Slide

17. 1. Cocoa Touch frameworkΛ
    λʔήοτʹ௥Ճ
    

    View Slide

18. 2. ࡞੒ͨ͠Frameworkʹ

    ViewΛ௥Ճ͍ͯ͘͠
    

    View Slide

19. 3. (CarthageΛ࢖༻ͨ͠৔߹ͷΈ)

    ViewͷදࣔʹඞཁͳϥΠϒϥϦΛ௥Ճ
    

    View Slide

20. 4. PlaygroundΛ

    ϓϩδΣΫτʹ௥Ճ
    

    View Slide

21. 5. PlaygroundͰViewΛදࣔ
    let vc = ViewController()
    PlaygroundPage.current.liveView = vc
    

    View Slide

22. 5. PlaygroundͰViewΛදࣔ
    

    View Slide

23. 5. PlaygroundͰViewΛදࣔ
    
    

    View Slide

24. ͞ΒʹPlaygroundʹ৽ػೳ͕…
    

    View Slide

25. What’s new in Playground

    - WWDC 2018
    Xcode10͔ΒPlaygroundͷஞ࣮࣍ߦ͕Մೳʹ…!!

    (https://developer.apple.com/videos/play/
    wwdc2018/402/)
    Alex Brown, Core OS Engineer
    •
    Running Step by Step
    NEW
    

    View Slide

26. What’s new in Playground

    - WWDC 2018
    ҰʑίϝϯτΞ΢τ͢Δඞཁ͕ͳ͘
    ϑϩʔΛڞ௨Խ͠΍͘͢ͳͬͨ
    Alex Brown, Core OS Engineer
    •
    Running Step by Step
    NEW
    

    View Slide

27. ۩ମతʹͲΜͳखॱͰ
    σβΠϯௐ੔͢Δͷ
    

    View Slide

28. DEMO
    IUUQTHJUIVCDPNSPDLOBNF1MBZHSPVOE%SJWFO%FWFMPQNFOU
    

    View Slide

29. DEMOͷྲྀΕ
    • TwitterͷΑ͏ͳΞϓϦΛ࡞ͬͨʂ
    • σβΠϯ֬ೝ͢Δͧʂ
    ౤ߘ͕ ͳ͍/͋Δ ͱ͖ͷදࣔ͸ਖ਼͍͠ʁ
    ͪΌΜͱ ϩʔΧϥΠζ ͞ΕͯΔʁ
    খ͍͞, େ͖͍୺຤Ͱ ϨΠΞ΢τ ่Εͯͳ͍ʁ
    • मਖ਼ͯ͠ View͚ͩ ϏϧυͰ࠶֬ೝʂ
    

    View Slide

30. ࣮૷આ໌
    

    View Slide

31. func display(device: Device, orientation: Orientation, language:
    Language) {

    let vc =
    R.storyboard.twitter.instantiateInitialViewController()!

    

    let (parent, _) = playgroundControllers(device: device,
    orientation: .portrait, child: vc)

    

    

    AppEnvironment.language = language

    

    

    PlaygroundPage.current.liveView = parent

    vc.load(statuses)
    }
    1SPKFDUQMBZHSPVOE5XJUUFSYDQMBZHSPVOEQBHF
    

    View Slide

32. func display(device: Device, orientation: Orientation, language:
    Language) {

    let vc =
    R.storyboard.twitter.instantiateInitialViewController()!

    

    let (parent, _) = playgroundControllers(device: device,
    orientation: .portrait, child: vc)

    

    

    AppEnvironment.language = language

    

    

    PlaygroundPage.current.liveView = parent

    vc.load(statuses)
    }
    
    
    
    1SPKFDUQMBZHSPVOE5XJUUFSYDQMBZHSPVOEQBHF
    

    View Slide

33. 1SPKFDUQMBZHSPVOE5XJUUFSYDQMBZHSPVOEQBHF
    func display(device: Device, orientation: Orientation, language:
    Language) {

    let vc =
    R.storyboard.twitter.instantiateInitialViewController()!

    

    let (parent, _) = playgroundControllers(device: device,
    orientation: .portrait, child: vc)

    

    

    AppEnvironment.language = language

    

    

    PlaygroundPage.current.liveView = parent

    vc.load(statuses)
    }
    
    
    
    simulatorͷsizeͳͲΛࢦఆ
    

    View Slide

34. public func playgroundControllers(device: Device = .phone4_7inch,
    orientation: Orientation,
    child: UIViewController,
    additionalTraits: UITraitCollection)
    -> (parent: UIViewController, child: UIViewController) {
    let parent = UIViewController()
    parent.addChild(child)
    parent.view.addSubview(child.view)
    child.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    let traits: UITraitCollection
    switch (device, orientation) {
    case (.phone3_5inch, .portrait):
    parent.view.frame = .init(x: 0, y: 0, width: 320, height: 480)
    traits = .init(traitsFrom: [
    .init(horizontalSizeClass: .compact),
    .init(verticalSizeClass: .regular),
    .init(userInterfaceIdiom: .phone)
    ])
    ɾ

    ɾ

    ɾ
    simulatorͷsizeͳͲΛࢦఆ
    1SPKFDUQMBZHSPVOE4PVSDFTEFWJDFTXJGU
    

    View Slide

35. public func playgroundControllers(device: Device = .phone4_7inch,
    orientation: Orientation,
    child: UIViewController,
    additionalTraits: UITraitCollection)
    -> (parent: UIViewController, child: UIViewController) {
    let parent = UIViewController()
    parent.addChild(child)
    parent.view.addSubview(child.view)
    child.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    let traits: UITraitCollection
    switch (device, orientation) {
    case (.phone3_5inch, .portrait):
    parent.view.frame = .init(x: 0, y: 0, width: 320, height: 480)
    traits = .init(traitsFrom: [
    .init(horizontalSizeClass: .compact),
    .init(verticalSizeClass: .regular),
    .init(userInterfaceIdiom: .phone)
    ])
    1SPKFDUQMBZHSPVOE4PVSDFTEFWJDFTXJGU
    ɾ

    ɾ

    ɾ
    simulatorͷsizeͳͲΛࢦఆ
    Device, OrientationʹԠͯ͡

    sizeΛࢦఆ͢Δ
    

    View Slide

36. ɾ

    ɾ

    ɾ
    child.view.frame = parent.view.frame
    parent.preferredContentSize = parent.view.frame.size
    parent.view.backgroundColor = .white
    child.view.backgroundColor = .white
    let allTraits = UITraitCollection.init(traitsFrom: [traits,
    additionalTraits])
    parent.setOverrideTraitCollection(allTraits, forChild: child)
    return (parent, child)
    }
    simulatorͷsizeͳͲΛࢦఆ
    1SPKFDUQMBZHSPVOE4PVSDFTEFWJDFTXJGU
    

    View Slide

37. ɾ

    ɾ

    ɾ
    child.view.frame = parent.view.frame
    parent.preferredContentSize = parent.view.frame.size
    parent.view.backgroundColor = .white
    child.view.backgroundColor = .white
    let allTraits = UITraitCollection.init(traitsFrom: [traits,
    additionalTraits])
    parent.setOverrideTraitCollection(allTraits, forChild: child)
    return (parent, child)
    }
    simulatorͷsizeͳͲΛࢦఆ
    1SPKFDUQMBZHSPVOE4PVSDFTEFWJDFTXJGU
    preferredContentSizeΛࢦఆ͢Δ͜ͱͰ
    Playground্Ͱදࣔ͢ΔViewͷେ͖͞ΛมߋՄೳ
    

    View Slide

38. func display(device: Device, orientation: Orientation, language:
    Language) {

    let vc =
    R.storyboard.twitter.instantiateInitialViewController()!

    

    let (parent, _) = playgroundControllers(device: device,
    orientation: .portrait, child: vc)

    

    

    AppEnvironment.language = language

    

    

    PlaygroundPage.current.liveView = parent

    vc.load(statuses)
    }
    
    
    
    1SPKFDUQMBZHSPVOE5XJUUFSYDQMBZHSPVOEQBHF
    

    View Slide

39. func display(device: Device, orientation: Orientation, language:
    Language) {

    let vc =
    R.storyboard.twitter.instantiateInitialViewController()!

    

    let (parent, _) = playgroundControllers(device: device,
    orientation: .portrait, child: vc)

    

    

    AppEnvironment.language = language

    

    

    PlaygroundPage.current.liveView = parent

    vc.load(statuses)
    }
    
    
    
    1SPKFDUQMBZHSPVOE5XJUUFSYDQMBZHSPVOEQBHF
    LanguageΛࢦఆ
    

    View Slide

40. public struct AppEnvironment {
    public static var language: Language = .ja
    public static var currentUser: String? = nil
    public var isLoggedIn: Bool {
    return AppEnvironment.currentUser != nil
    }
    }
    GlobalʹΞϓϦͷ؀ڥΛ͍࣋ͨͤͯΔ
    LanguageΛࢦఆ
    %PNBJO"QQ&OWJSPONFOUTXJGU
    

    View Slide

41. extension StringResourceType {
    func localized(language: Language = AppEnvironment.language) -> String {
    return NSLocalizedString(key, bundle: Bundle(path:
    stringsBundle.path(forResource: language.rawValue, ofType: "lproj") ?? "") ??
    stringsBundle, comment: "")
    }
    }
    private class Pin {}
    public let stringsBundle = Bundle(for: Pin.self)
    LanguageΛࢦఆ
    1SFTFOUBUJPOʜ4USJOH3FTPVSDF5ZQFMPDBMJ[FETXJGU
    

    View Slide

42. extension StringResourceType {
    func localized(language: Language = AppEnvironment.language) -> String {
    return NSLocalizedString(key, bundle: Bundle(path:
    stringsBundle.path(forResource: language.rawValue, ofType: "lproj") ?? "") ??
    stringsBundle, comment: "")
    }
    }
    private class Pin {}
    public let stringsBundle = Bundle(for: Pin.self)
    1SFTFOUBUJPOʜ4USJOH3FTPVSDF5ZQFMPDBMJ[FETXJGU
    NSLocalizedStringͷҾ਺ʹ
    LanguageʹԠͨ͡BundleΛ౉͢Α͏ʹ͢Δ
    LanguageΛࢦఆ
    

    View Slide

43. func display(device: Device, orientation: Orientation, language:
    Language) {

    let vc =
    R.storyboard.twitter.instantiateInitialViewController()!

    

    let (parent, _) = playgroundControllers(device: device,
    orientation: .portrait, child: vc)

    

    

    AppEnvironment.language = language

    

    

    PlaygroundPage.current.liveView = parent

    vc.load(statuses)
    }
    
    
    
    1SPKFDUQMBZHSPVOE5XJUUFSYDQMBZHSPVOEQBHF
    

    View Slide

44. func display(device: Device, orientation: Orientation, language:
    Language) {

    let vc =
    R.storyboard.twitter.instantiateInitialViewController()!

    

    let (parent, _) = playgroundControllers(device: device,
    orientation: .portrait, child: vc)

    

    

    AppEnvironment.language = language

    

    

    PlaygroundPage.current.liveView = parent

    vc.load(statuses)
    }
    1SPKFDUQMBZHSPVOE5XJUUFSYDQMBZHSPVOEQBHF
    
    
    
    Playground্ͰViewΛදࣔͯ͠

    Cellʹදࣔ͢Δ౤ߘΛಡΈࠐΉ
    

    View Slide

45. ViewΛදࣔ
    

    View Slide

46. ViewΛදࣔ
    
    

    View Slide

47. Α͠ɺΈͯͶͰ΋ಋೖʂ
    

    View Slide

48. Α͠ɺΈͯͶͰ΋ಋೖʂ
    
    

    View Slide

49. ಋೖ·ͰͷಓͷΓ
    Viewʹදࣔ͢Δ΋ͷΛϞοΫͰ͖ΔΑ͏ʹઃܭ
    ଟݴޠରԠΛ͍ͯ͠ΔͷͰɺNSLocalizedStringͷ
    ॳظԽ࣌ʹBundleͷpathΛ౉͢
    Embedded Frameworkͷಋೖ
    PlaygroundͷPageಋೖϑϩʔڞ௨Խɾڞ༗
    

    View Slide

50. ৽نϓϩδΣΫτͳΒ
    ׂͱαΫοͱಋೖͰ͖ͦ͏
    

    View Slide

51. Playgroundۦಈ։ൃͰ

    ര଎ʹ։ൃ͠Α͏
    

    View Slide