デザイナー × エンジニアの共同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
2. • Yahoo!৐׵Ҋ಺ • iOSΞϓϦΤϯδχΞ • GitHub: @tattn • Qiita: @tattn • Twitter: @tanakasan2525 ాத ୡ໵ ՖҪ ෣ • Yahoo!৐׵Ҋ಺ • Web/iOSσβΠφʔ
3. DesignerͱEngineer͕ ࣮૷ϑΣʔζͰग़ձ͓ͬͨ࿩
4. ΞϓϦ੍࡞΁ͷؔ৺ Designer Engineer UIσβΠϯɺը૾ύʔπͷ࡞੒ UIɺϩδοΫͷ࣮૷ 2015೥Ҏલͷ։ൃମ੍ ʢओʹPhotoshopσʔλʣ ʢObjective-CʹΑΔ࣮૷ʣ Designer͸ը໘σβΠϯ·Ͱ Ͱ΋ग़൪ͳ͠^^; ΞϓϦָͦ͠͏ʙ ΍ͬͯΈ͍͔ͨ΋ʔ
5. ࣌અ౸དྷ Swift×StoryboardԽͷ೾͕͖ͨ UI࣮૷୲౰Designerͷ஀ੜ ৐׵Ҋ಺ΞϓϦϝδϟʔΞοϓσʔτ
6. ҰॹʹֶΜͰ͍͚ΔλΠϛϯά Engineer΋1͔Βษڧ࢝͠ΊΔஈ֊ ʘΈΜͳॳ৺ऀʗ Engineer Lv1 Designer Lv0
7. ڠۀ͢ΔͨΊʹେ੾ͳ͜ͱ͸ʁ
8. ηΫγϣφϦζϜͷղফ Designer Engineer ৬छͷ֞ࠜΛ௒͑ͨίϛϡχέʔγϣϯ νʔϜશମͱͯ͠ɺҙݟΛݴ͍΍͍͢งғؾ ৬छͷนΛ౿Έӽ͑ͯ΋Α͍งғؾ
9. ࠔͬͨ࣌ʹϑΥϩʔʗϨϏϡʔ͠߹͑Δ؀ڥ ͜͜ͷίʔυ͸ ͜Μͳײ͡ʹ௚͢ͱΑ͍Ͱ͢ʂ ʘؾܰʹ΍ΓऔΓʗ ϨϏϡʔ͓ئ͍͠·͢ʂ ͜Μͳײ͡ͰͲ͏Ͱ͠ΐ͏ʁ build͕ ͏·͍͔͘ͳ͍Ͱ͢ɾɾ ͜͜ͷ࢓༷ͬͯ Ͳ͏ͳͬͯ·͔͢ʁ ։ൃ؀ڥߏங͕ ͏·͍͔͘ͳ͍ɾɾ ࢓༷ etc.. ϨΠΞ΢τ ։ൃ؀ڥपΓ etc.. ϩδοΫ
10. UI࣮૷Λ΍Γ͍ͨʂͱࢥ͏ؾ࣋ͪ Designerࣗ਎͕
11. ࣮ࡍͷϑϩʔ
12. ࢓༷FIX ࢓༷FIX→ϦϦʔε·ͰͷྲྀΕ Designer Engineer UI࣮૷ ϩδοΫ࣮૷ ςετ मਖ਼ ਃ੥ Xib/Storyboardड͚औΓ ϩδοΫ࣮૷ ϦϑΝΫλϦϯά UIͷ૊ΈํΛݕ౼ UI࣮૷ʴϞοΫίʔυ࣮૷
 ʢStoryboard/Xib/SwiftͳͲʣ اը/੍࡞/ٕज़શһͰ֬ೝ fastlaneͰਃ੥
13. ݕূΛՃ଎ͤ͞ΔCI/CDͷऔΓ૊Έʹ͍ͭͯ https://techblog.yahoo.co.jp/advent-calendar-2017/transit_ci_cd/ ৐׵Ҋ಺ΞϓϦͷCI/CDͷऔΓ૊Έʹ͍ͭͯͷ͝঺հ ʮ৐׵Ҋ಺ CI CDʯͰݕࡧʂ
14. ࣮ࡍʹڠۀͯ͠ײͨ͜͡ͱ Designerͷ
15. ϝϦοτ - ݫີͳϨΠΞ΢τ͕Ͱ͖Δ • ࡉ͔ͳϨΠΞ΢τௐ੔͕༰қʹͰ͖Δ • ID/VD୲౰ऀͱɺ࣮ࡍʹಈ͔͠ͳ͕ΒUI֬ೝ΍ௐ੔͕Ͱ͖Δ ΑΓཧ૝ʹ͍ۙ΋ͷΛ࡞Δ͜ͱ͕Ͱ͖Δ
16. ϝϦοτ - ࡞ۀޮ཰ͷ޲্ • σβΠϯ޻ఔͰͷ࡞ۀ΍εέδϡʔϧʹॊೈੑ͕࣋ͯΔ • ઃܭϑΣʔζͰ͋Δఔ౓࣮૷Λߟྀͨ͠࢓༷ΛఏҊͰ͖Δ ࢓༷FIXʹͦ͜·ͰযΒͳͯ͘΋େৎ෉ ࣮૷ϑΣʔζʹ͓͚Δίϛϡχέʔγϣϯίετ࡟ݮ ID/VDͷҙΛ἞ΜͰ࡞ۀ
17. UI࣮૷Λ͢Δͷָ͕͍͠ʂʂ ݸਓతͳϝϦοτ
18. σϝϦοτ σβΠφʔࢹ఺Ͱ͸ɺࠓͷͱ͜ΖσϝϦοτ͸͋Γ·ͤΜ Storyboard΍SwiftͳͲ ଟগ࣮૷΋͍͚֮͑ͯΔͱɺಈ͘ϞοΫ΋࡞Δ͜ͱ͕Ͱ͖·͢ʂ
19. ࣮ࡍʹڠۀͯ͠ײͨ͜͡ͱ Engineerͷ
20. ϝϦοτ - ࣮૷ʹ஫ྗͰ͖Δ • ࢓༷ॻΛݟͳ͕Β1pt୯ҐͰͷϨΠΞ΢τௐ੔͕ͳ͘ͳΔ • UI࣮૷ޙͷ֬ೝͷͨΊͷίϛϡχέʔγϣϯίετ͕ݮΔ ػೳ࣮૷΍ϦϑΝΫλϦϯάʹ஫ྗͰ͖Δ ΞϓϦͷ඼࣭޲্
21. σϝϦοτ • UIͷڍಈपΓͷ࣮૷͕೉͍͠Viewߏ଄ʹͳ͍ͬͯΔ͕࣌͋ͬͨ • ΑΓύϑΥʔϚϯεͷྑ͍UIύʔπͷ࢖͍ํ΍੍໿ͷ෇͚ํʹ
 ޙ͔Βؾ͕ͭ͘͜ͱ͕͋ͬͨ UIͷ૊ΈཱͯΛ͓ئ͍͢Δલͷίϛϡχέʔγϣϯ͕େ੾
 → ࢖͏UIύʔπ΍ViewͷॏͳΓํͳͲΛࣄલʹϨϏϡʔ͢Δ
22. ޻෉͍ͯ͠Δ/ؾΛ͚͍ͭͯΔ͜ͱ ٕज़తʹ
23. StoryboardΛWYSIWYGʹ͚ۙͮΔ • ίʔυΛಡ·ͳͯ͘΋
 StoryboardͰσβΠϯͷ֬ೝ΍ௐ੔͕ ͠΍͘͢ͳΔ
 • ৽نϝϯόʔ΋ίʔυΛ୳͠΍͘͢ͳΔ (Storyboard͔ΒΫϥε໊ͳͲ͕෼͔Δ)
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౳)
25. ࠔ͍ͬͯΔ͜ͱ/஫ҙ఺ ٕज़తʹ
26. WatchKitΛؚΜͰ͍ΔͱBuild Failed... ? WorkspaceʹWatchKit Extensionؚ͕·Ε͍ͯΔͱ
 IBDesignable͕Build FailedʹͳΔόά͕ൃੜத... 
 (Xcode9.3.1ͷݱࡏ΋) IUUQTGPSVNTEFWFMPQFSBQQMFDPNNFTTBHF
27. IBDesignableͰಈతʹը૾Λදࣔ͢Δࡍͷ஫ҙ఺ prepareForInterfaceBuilder౳Ͱ͸
 Main Bundle͔Βը૾ΛऔಘͰ͖ͳ͍ IUUQTTUBDLPWFSqPXDPNRVFTUJPOTIPXUPMPBEBOJNBHFJOQSFQBSFGPSJOUFSGBDFCVJMEFSXJUIBJCEFTJHOBCMFVJJNBHFWJ
28. ্ख͘ಈ͔ͳ͍έʔε ✖ override func prepareForInterfaceBuilder() { super.prepareForInterfaceBuilder() imageView.image = UIImage(named: "image") } ✖ override func prepareForInterfaceBuilder() { super.prepareForInterfaceBuilder() imageView.image = #imageLiteral(resourceName: "image") }
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ͷ஋
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Ͱ͖ΔΑ͏ʹ͠Α͏
31. ·ͱΊ
32. ·ͱΊ าΈدΓ͕େ੾ Engineer Designerͱ ͷ
33. ·ͱΊ Storyboard/XibΛ࡞Ζ͏ʂ Designer΋ฤू͠΍͍͢ ͓ޓ͍ͷੜ࢈ੑUP!!
34. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠