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

デザイナー × エンジニアの共同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/

0620564f0125b8b3b7f4fe40c10b8b4e?s=128

Tatsuya Tanaka

May 16, 2018
Tweet

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠