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

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

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

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

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

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

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

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

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

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

࣮ࡍͷϑϩʔ

࢓༷FIX ࢓༷FIX→ϦϦʔε·ͰͷྲྀΕ Designer Engineer UI࣮૷ ϩδοΫ࣮૷ ςετ मਖ਼ ਃ੥ Xib/Storyboardड͚औΓ ϩδοΫ࣮૷ ϦϑΝΫλϦϯά UIͷ૊ΈํΛݕ౼ UI࣮૷ʴϞοΫίʔυ࣮૷
 ʢStoryboard/Xib/SwiftͳͲʣ اը/੍࡞/ٕज़શһͰ֬ೝ fastlaneͰਃ੥

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

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

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

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

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

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

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

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

σϝϦοτ • UIͷڍಈपΓͷ࣮૷͕೉͍͠Viewߏ଄ʹͳ͍ͬͯΔ͕࣌͋ͬͨ • ΑΓύϑΥʔϚϯεͷྑ͍UIύʔπͷ࢖͍ํ΍੍໿ͷ෇͚ํʹ
 ޙ͔Βؾ͕ͭ͘͜ͱ͕͋ͬͨ UIͷ૊ΈཱͯΛ͓ئ͍͢Δલͷίϛϡχέʔγϣϯ͕େ੾
 → ࢖͏UIύʔπ΍ViewͷॏͳΓํͳͲΛࣄલʹϨϏϡʔ͢Δ

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

StoryboardΛWYSIWYGʹ͚ۙͮΔ • ίʔυΛಡ·ͳͯ͘΋
 StoryboardͰσβΠϯͷ֬ೝ΍ௐ੔͕ ͠΍͘͢ͳΔ
 • ৽نϝϯόʔ΋ίʔυΛ୳͠΍͘͢ͳΔ (Storyboard͔ΒΫϥε໊ͳͲ͕෼͔Δ)

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౳)

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

WatchKitΛؚΜͰ͍ΔͱBuild Failed... ? WorkspaceʹWatchKit Extensionؚ͕·Ε͍ͯΔͱ
 IBDesignable͕Build FailedʹͳΔόά͕ൃੜத... 
 (Xcode9.3.1ͷݱࡏ΋) IUUQTGPSVNTEFWFMPQFSBQQMFDPNNFTTBHF

IBDesignableͰಈతʹը૾Λදࣔ͢Δࡍͷ஫ҙ఺ prepareForInterfaceBuilder౳Ͱ͸
 Main Bundle͔Βը૾ΛऔಘͰ͖ͳ͍ IUUQTTUBDLPWFSqPXDPNRVFTUJPOTIPXUPMPBEBOJNBHFJOQSFQBSFGPSJOUFSGBDFCVJMEFSXJUIBJCEFTJHOBCMFVJJNBHFWJ

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

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ͷ஋

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Ͱ͖ΔΑ͏ʹ͠Α͏

·ͱΊ

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

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

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