Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

࣮ࡍͷϑϩʔ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

·ͱΊ

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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