デザイナー × エンジニアの共同UIづくり

#yjbonfire

Bonfire iOS #4
https://yj-meetup.connpass.com/event/86651/

乗換案内アプリのCI/CDの取り組みについてのご紹介
https://techblog.yahoo.co.jp/advent-calendar-2017/transit_ci_cd/

Transcript

1. σβΠφʔ × ΤϯδχΞͷ
   ڞಉUIͮ͘Γ
   ՖҪ ෣ × ాதୡ໵
   Bonfire iOS #4 #yjbonfire
   

   View Slide

2. • Yahoo!৐׵Ҋ಺
   • iOSΞϓϦΤϯδχΞ
   • GitHub: @tattn
   • Qiita: @tattn
   • Twitter: @tanakasan2525
   ాத ୡ໵
   ՖҪ ෣ • Yahoo!৐׵Ҋ಺
   • Web/iOSσβΠφʔ
   

   View Slide

3. DesignerͱEngineer͕
   ࣮૷ϑΣʔζͰग़ձ͓ͬͨ࿩
   

   View Slide

4. ΞϓϦ੍࡞΁ͷؔ৺
   Designer
   Engineer
   UIσβΠϯɺը૾ύʔπͷ࡞੒
   UIɺϩδοΫͷ࣮૷
   2015೥Ҏલͷ։ൃମ੍
   ʢओʹPhotoshopσʔλʣ
   ʢObjective-CʹΑΔ࣮૷ʣ
   Designer͸ը໘σβΠϯ·Ͱ
   Ͱ΋ग़൪ͳ͠^^;
   ΞϓϦָͦ͠͏ʙ
   ΍ͬͯΈ͍͔ͨ΋ʔ
   

   View Slide

5. ࣌અ౸དྷ
   Swift×StoryboardԽͷ೾͕͖ͨ
   UI࣮૷୲౰Designerͷ஀ੜ
   ৐׵Ҋ಺ΞϓϦϝδϟʔΞοϓσʔτ
   

   View Slide

6. ҰॹʹֶΜͰ͍͚ΔλΠϛϯά
   Engineer΋1͔Βษڧ࢝͠ΊΔஈ֊
   ʘΈΜͳॳ৺ऀʗ
   Engineer
   Lv1 Designer
   Lv0
   

   View Slide

7. ڠۀ͢ΔͨΊʹେ੾ͳ͜ͱ͸ʁ
   

   View Slide

8. ηΫγϣφϦζϜͷղফ
   Designer Engineer
   ৬छͷ֞ࠜΛ௒͑ͨίϛϡχέʔγϣϯ
   νʔϜશମͱͯ͠ɺҙݟΛݴ͍΍͍͢งғؾ
   ৬छͷนΛ౿Έӽ͑ͯ΋Α͍งғؾ
   

   View Slide

9. ࠔͬͨ࣌ʹϑΥϩʔʗϨϏϡʔ͠߹͑Δ؀ڥ
   ͜͜ͷίʔυ͸
   ͜Μͳײ͡ʹ௚͢ͱΑ͍Ͱ͢ʂ
   ʘؾܰʹ΍ΓऔΓʗ
   ϨϏϡʔ͓ئ͍͠·͢ʂ ͜Μͳײ͡ͰͲ͏Ͱ͠ΐ͏ʁ
   build͕
   ͏·͍͔͘ͳ͍Ͱ͢ɾɾ
   ͜͜ͷ࢓༷ͬͯ
   Ͳ͏ͳͬͯ·͔͢ʁ
   ։ൃ؀ڥߏங͕
   ͏·͍͔͘ͳ͍ɾɾ
   ࢓༷ etc..
   ϨΠΞ΢τ
   ։ൃ؀ڥपΓ etc..
   ϩδοΫ
   

   View Slide

10. UI࣮૷Λ΍Γ͍ͨʂͱࢥ͏ؾ࣋ͪ
    Designerࣗ਎͕
    

    View Slide

11. ࣮ࡍͷϑϩʔ
    

    View Slide

12. ࢓༷FIX
    ࢓༷FIX→ϦϦʔε·ͰͷྲྀΕ
    Designer
    Engineer
    UI࣮૷ ϩδοΫ࣮૷
    ςετ
    मਖ਼
    ਃ੥
    Xib/Storyboardड͚औΓ
    ϩδοΫ࣮૷
    ϦϑΝΫλϦϯά
    UIͷ૊ΈํΛݕ౼
    UI࣮૷ʴϞοΫίʔυ࣮૷

    ʢStoryboard/Xib/SwiftͳͲʣ
    اը/੍࡞/ٕज़શһͰ֬ೝ
    fastlaneͰਃ੥
    

    View Slide

13. ݕূΛՃ଎ͤ͞ΔCI/CDͷऔΓ૊Έʹ͍ͭͯ
    https://techblog.yahoo.co.jp/advent-calendar-2017/transit_ci_cd/
    ৐׵Ҋ಺ΞϓϦͷCI/CDͷऔΓ૊Έʹ͍ͭͯͷ͝঺հ
    ʮ৐׵Ҋ಺ CI CDʯͰݕࡧʂ
    

    View Slide

14. ࣮ࡍʹڠۀͯ͠ײͨ͜͡ͱ
    Designerͷ
    

    View Slide

15. ϝϦοτ - ݫີͳϨΠΞ΢τ͕Ͱ͖Δ
    • ࡉ͔ͳϨΠΞ΢τௐ੔͕༰қʹͰ͖Δ
    • ID/VD୲౰ऀͱɺ࣮ࡍʹಈ͔͠ͳ͕ΒUI֬ೝ΍ௐ੔͕Ͱ͖Δ
    ΑΓཧ૝ʹ͍ۙ΋ͷΛ࡞Δ͜ͱ͕Ͱ͖Δ
    

    View Slide

16. ϝϦοτ - ࡞ۀޮ཰ͷ޲্
    • σβΠϯ޻ఔͰͷ࡞ۀ΍εέδϡʔϧʹॊೈੑ͕࣋ͯΔ
    • ઃܭϑΣʔζͰ͋Δఔ౓࣮૷Λߟྀͨ͠࢓༷ΛఏҊͰ͖Δ
    ࢓༷FIXʹͦ͜·ͰযΒͳͯ͘΋େৎ෉
    ࣮૷ϑΣʔζʹ͓͚Δίϛϡχέʔγϣϯίετ࡟ݮ
    ID/VDͷҙΛ἞ΜͰ࡞ۀ
    

    View Slide

17. UI࣮૷Λ͢Δͷָ͕͍͠ʂʂ
    ݸਓతͳϝϦοτ
    

    View Slide

18. σϝϦοτ
    σβΠφʔࢹ఺Ͱ͸ɺࠓͷͱ͜ΖσϝϦοτ͸͋Γ·ͤΜ
    Storyboard΍SwiftͳͲ
    ଟগ࣮૷΋͍͚֮͑ͯΔͱɺಈ͘ϞοΫ΋࡞Δ͜ͱ͕Ͱ͖·͢ʂ
    

    View Slide

19. ࣮ࡍʹڠۀͯ͠ײͨ͜͡ͱ
    Engineerͷ
    

    View Slide

20. ϝϦοτ - ࣮૷ʹ஫ྗͰ͖Δ
    • ࢓༷ॻΛݟͳ͕Β1pt୯ҐͰͷϨΠΞ΢τௐ੔͕ͳ͘ͳΔ
    • UI࣮૷ޙͷ֬ೝͷͨΊͷίϛϡχέʔγϣϯίετ͕ݮΔ
    ػೳ࣮૷΍ϦϑΝΫλϦϯάʹ஫ྗͰ͖Δ
    ΞϓϦͷ඼࣭޲্
    

    View Slide

21. σϝϦοτ
    • UIͷڍಈपΓͷ࣮૷͕೉͍͠Viewߏ଄ʹͳ͍ͬͯΔ͕࣌͋ͬͨ
    • ΑΓύϑΥʔϚϯεͷྑ͍UIύʔπͷ࢖͍ํ΍੍໿ͷ෇͚ํʹ

    ޙ͔Βؾ͕ͭ͘͜ͱ͕͋ͬͨ
    UIͷ૊ΈཱͯΛ͓ئ͍͢Δલͷίϛϡχέʔγϣϯ͕େ੾

    → ࢖͏UIύʔπ΍ViewͷॏͳΓํͳͲΛࣄલʹϨϏϡʔ͢Δ
    

    View Slide

22. ޻෉͍ͯ͠Δ/ؾΛ͚͍ͭͯΔ͜ͱ
    ٕज़తʹ
    

    View Slide

23. StoryboardΛWYSIWYGʹ͚ۙͮΔ
    • ίʔυΛಡ·ͳͯ͘΋

    StoryboardͰσβΠϯͷ֬ೝ΍ௐ੔͕
    ͠΍͘͢ͳΔ

    • ৽نϝϯόʔ΋ίʔυΛ୳͠΍͘͢ͳΔ
    (Storyboard͔ΒΫϥε໊ͳͲ͕෼͔Δ)
    

    View Slide

24. StoryboardʹԾͷ஋ΛೖΕͯίʔυͰॳظԽ
    @IBOutlet private var firstStartTimeLabel: WKInterfaceLabel!
    @IBOutlet private var firstTimeDotImage: WKInterfaceImage!
    override func awake(withContext context: Any?) {
    super.awake(withContext: context)
    firstStartTimeLabel.setText(nil)
    secondStartTimeLabel.setText(nil)
    thirdStartTimeLabel.setText(nil)
    firstTimeDotImage.setImage(nil)
    secondTimeDotImage.setImage(nil)
    thirdTimeDotImage.setImage(nil)
    ...
    1. σβΠϯ͕Ұ໨ͰΘ͔Δ஋Λ

    Xib΍StoryboardͰઃఆ
    2. ௨৴தͳͲʹԾͷ஋͕දࣔ͞
    Εͳ͍Α͏ʹදࣔલʹίʔυ
    ͰॳظԽ/ඇදࣔ

    (awakeFromNib, viewDidLoad౳)
    

    View Slide

25. ࠔ͍ͬͯΔ͜ͱ/஫ҙ఺
    ٕज़తʹ
    

    View Slide

26. WatchKitΛؚΜͰ͍ΔͱBuild Failed... ?
    WorkspaceʹWatchKit Extensionؚ͕·Ε͍ͯΔͱ

    IBDesignable͕Build FailedʹͳΔόά͕ൃੜத... 

    (Xcode9.3.1ͷݱࡏ΋)
    IUUQTGPSVNTEFWFMPQFSBQQMFDPNNFTTBHF
    

    View Slide

27. IBDesignableͰಈతʹը૾Λදࣔ͢Δࡍͷ஫ҙ఺
    prepareForInterfaceBuilder౳Ͱ͸

    Main Bundle͔Βը૾ΛऔಘͰ͖ͳ͍
    IUUQTTUBDLPWFSqPXDPNRVFTUJPOTIPXUPMPBEBOJNBHFJOQSFQBSFGPSJOUFSGBDFCVJMEFSXJUIBJCEFTJHOBCMFVJJNBHFWJ
    

    View Slide

28. ্ख͘ಈ͔ͳ͍έʔε
    ✖ override func prepareForInterfaceBuilder() {
    super.prepareForInterfaceBuilder()
    imageView.image = UIImage(named: "image")
    }
    ✖ override func prepareForInterfaceBuilder() {
    super.prepareForInterfaceBuilder()
    imageView.image = #imageLiteral(resourceName: "image")
    }
    

    View Slide

29. Bundleͷύε͕มΘΔ
    ΞϓϦ࣮ߦ࣌ (Simulator)
    ~/Library/Developer/Xcode/DerivedData/ΞϓϦ໊-xxx/Build/Intermediates.noindex/
    IBDesignables/Products/Debug-iphonesimulator/ΞϓϦ໊.app
    3. Bundle(for: type(of: self)).bundleURLͷ஋
    1. Bundle.main.bundleURLͷ஋
    ~/Library/Developer/CoreSimulator/Devices/xxx-xxx-xxx-xxx-xxx/data/
    Containers/Bundle/Application/xxx-xxx-xxx-xxx-xxx/ΞϓϦ໊.app/
    Interface BuilderͰͷ࣮ߦ࣌
    /Applications/Xcode.app/Contents/Developer/Platforms/
    iPhoneSimulator.platform/Developer/Library/Xcode/Overlays/
    2. Bundle.main.bundleURLͷ஋
    

    View Slide

30. BundleΛࢦఆͯ͠ը૾Λઃఆ
    override func prepareForInterfaceBuilder() {
    super.prepareForInterfaceBuilder()
    let bundle = Bundle(for: type(of: self))
    imageView.image = UIImage(named: "image", in: bundle, compatibleWith: nil)
    }
    ✖ override func prepareForInterfaceBuilder() {
    super.prepareForInterfaceBuilder()
    imageView.image = UIImage(named: "image")
    }
    ✖ override func prepareForInterfaceBuilder() {
    super.prepareForInterfaceBuilder()
    imageView.image = #imageLiteral(resourceName: "image")
    }
    ը૾औಘΛந৅Խ͢Δ৔߹͸Bundle͸DIͰ͖ΔΑ͏ʹ͠Α͏
    

    View Slide

31. ·ͱΊ
    

    View Slide

32. ·ͱΊ
    าΈدΓ͕େ੾
    Engineer
    Designerͱ ͷ
    

    View Slide

33. ·ͱΊ
    Storyboard/XibΛ࡞Ζ͏ʂ
    Designer΋ฤू͠΍͍͢
    ͓ޓ͍ͷੜ࢈ੑUP!!
    

    View Slide

34. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide