Xcodeですばやくプロトタイプを作れるチームづくり

Cookpad TechConf 2019 Lightning Talk で発表
https://techconf.cookpad.com/2019
新規サービス開発部 藤坂 祐史

デザインシステム citrus に関するインタビュー記事
https://seleck.cc/1247

Transcript

1. Cookpad Inc. Feb 27th, 2019 ౻ࡔ ༞࢙ ৽نαʔϏε։ൃ෦ XcodeͰ͢͹΍͘
 ϓϩτλΠϓΛ࡞ΕΔνʔϜͮ͘Γ Lightning Talk
2. ͳͥXcodeͰ
 ϓϩτλΠϓʁ 2
3. ஧࣮౓ͷߴ͍ϓϩτλΠϓ͕ඞཁʹ 3 • ίϯηϓτஈ֊ͳΒɺϞοΫΞοϓͰ΋े෼ݕূͰ͖Δ ⭕ • ΑΓ౿ΈࠐΜͩݕূͰ͸ɺ஧࣮౓͕ߴ͘ͳ͍ͱݕূͰ͖ͳ͍
 


ʮ࣮ࡍʹ࢖ͬͯΈͳ͍ͱԿͱ΋ݴ͑ͳ͍ʯ
 
 ‣ ҙຯ͋ΔϑΟʔυόοΫΛಘΒΕΔϓϩτλΠϓ͕ඞཁʂ
 


→ XcodeͰΞϓϦͱͯ͠ࡶ࣮૷
4. # WebΤϯδχΞ 
 (ϓϩδΣΫτϦʔμʔ)
 
 $ σβΠφʔ 
% σβΠφʔ 
 
& iOSΤϯδχΞ 4 ։ൃνʔϜ ͢͹΍͘ ࡞ΕΔ νʔϜʹ
5. XcodeͰ͢͹΍͘ ϓϩτλΠϓ࣮૷͢ΔͨΊʹ ΍ͬͨ͜ͱ 5
6. σβΠφʔฤ 6
7. ͢͹΍͘ϓϩτ࣮૷͢ΔͨΊʹʢσβΠφʔฤʣ 7 1. Apple ͷ Human Interface Guidelines ΛಡΜͰ͓͘ 2. UIϥΠϒϥϦΛ୳ͯ͠ɺखݩͰಈ͔ͯ͠ΈΔ 3. ϖΞϓϩͰجຊૢ࡞ΛֶͿ 4. FigmaΛ࢖ͬͯσβΠϯ͢Δ
8. 1. Apple ͷ Human Interface Guidelines ΛಡΜͰ͓͘ 8 • ݪଇɾࢥ૝Λ౿·͑ͯσβΠϯͰ͖Δ • ඪ४ͷίϯϙʔωϯτΛ೺ѲͰ͖Δ ‣ ΤϯδχΞͱͷίϛϡχέʔγϣϯͰ
 


͢Εҧ͍͕ͳ͘ͳΔ $ σβΠφʔʮ͜Ε͸ Navigation Bar ͷ largeTitle ʹ͠·͢ʯ & ΤϯδχΞʮͦΕͳΒ1ߦॻ͚ͩ͘OKͰ͢Ͷʂʯ IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFTJPTCBSTOBWJHBUJPOCBST
9. 2. UIϥΠϒϥϦΛ୳ͯ͠ɺखݩͰಈ͔͢ 9 • ͙͢ಋೖͰ͖ΔϦονͳUI͕ͨ͘͞Μݟ͔ͭΔ • αϯϓϧΛಈ͔ͯ͠ɺ಺༰Λ͔͑Δͷ͸ൺֱత؆୯ ‣ σβΠφʔͷ૝૾ʹ͍ۙ΋ͷΛɺ͙͢औΓࠐΊΔ $ σβΠφʔʮΦϯϘʔσΟϯάɺ͜ΕͰ࡞ͬͯΈ·ͨ͠ʯ & ΤϯδχΞʮΦο ૊ΈࠐΉ͚ͩͰOKͰ͢Ͷʂʯ IUUQTHJUIVCDPN3BNPUJPOQBQFSPOCPBSEJOH
10. 3. ϖΞϓϩͰجຊૢ࡞ΛֶͿ 10 • UIͷࡉ͔͍ௐ੔Λ͢ΔʢAuto LayoutɺจࣈελΠϧɺؙ֯ʣ • ը໘௥ՃɾભҠ΋ܰ͘΍ͬͯΈΔ ‣ σβΠφʔʹ·͔ͤͯɺΤϯδχΞ͕ػೳଆͷ࣮૷ʹूதͰ͖Δ % σβΠφʔʮ͜ͷը໘ͷσβΠϯௐ੔ɺPull Requestग़͠·ͨ͠ʂʯ & ΤϯδχΞʮ͋Γ͕ͱ͏͍͟͝·͢ʂʯ
11. 4. FigmaΛ࢖ͬͯσβΠϯ͢Δ 11 • ϦΞϧλΠϜʹڞಉฤूͰ͖Δ ✓ શһ͕ৗʹ࠷৽ͷσβΠϯͰٞ࿦Ͱ͖Δ ✓ ৗʹݟ͍ͯͳͯ͘΋ Slack Ͱίϝϯτʹؾ͚ͮΔ
 
 • σβΠϯΛ࣮૷ʹऔΓࠐΈ΍͍͢ ✓ ࢖ΘΕ͍ͯΔ৭͕ҰཡԽ͞ΕΔ ✓ ΞΠίϯ౳ Λ PDF Ͱ΋ Export Ͱ͖Δ ✓ ؆қతʹ Swiftͷίʔυ΋ੜ੒͞ΕΔ
 



 ‣ ΤϯδχΞ΋ద౓ʹר͖ࠐΜͰٞ࿦Ͱ͖ɺࠞཚͳ࣮͘૷΋εϜʔζʹͰ͖Δ IUUQTUFDIMJGFDPPLQBEDPNFOUSZ
12. ͢͹΍͘ϓϩτ࣮૷͢ΔͨΊʹʢσβΠφʔฤʣ 12 1. Apple ͷ Human Interface Guidelines ΛಡΜͰ͓͘ 2. UIϥΠϒϥϦΛ୳ͯ͠ɺखݩͰಈ͔ͯ͠ΈΔ 3. ϖΞϓϩͰجຊૢ࡞ΛֶͿ 4. FigmaΛ࢖ͬͯσβΠϯ͢Δ
13. ΤϯδχΞฤ 13
14. ͢͹΍͘ϓϩτ࣮૷͢ΔͨΊʹʢΤϯδχΞฤʣ 14 1. ͲΜͳUIͷબ୒ࢶ͕͋Δ͔೺Ѳ͓ͯ͘͠ • Apple ७ਖ਼ͷ API ΛͪΌΜͱ஌Δ • UI ϥΠϒϥϦ΋໨Λ௨͢
 2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ • Α͘࢖͏ߏ੒͸ϓϩδΣΫτςϯϓϨʔτʹ͢Δ • ศརͳϥΠϒϥϦ΍ extension Λੵۃతʹ࢖͏ • ࣾ಺ͷ։ൃج൫Λϑϧ׆༻͢Δ
15. 1. ͲΜͳUIͷબ୒ࢶ͕͋Δ͔೺Ѳ͓ͯ͘͠ 15 • Apple ७ਖ਼ͷ API ΛͪΌΜͱݟ͓ͯ͘
 
 • UIϥΠϒϥϦ΋໨Λ௨͓ͯ͘͠ ‣ ղܾ͍ͨ͠՝୊ʹରͯ͠ɺ
 

ΑΓద੾ͳUIΛߏ૝ஈ֊͔ΒఏҊͰ͖Δ
 


ྑ͍UX ͔ͭ ࣮ݱՄೳ % σβΠφʔʮ͜͜ͷҠಈͤ͞Δૢ࡞ɺD&DͰ͖Δͷ͕ཧ૝Ͱ͸͋ΔΜͰ͕͢……ʯ
 


& ΤϯδχΞʮʢDrag and Drop APIͷʣ͜ͷܗͳΒൺֱత͙͢Ͱ͖ͦ͏Ͱ͢ʯ ྫ: Drag and Drop APIʢiOS 11ʙʣ ɹΞϓϦ಺σʔλͷίϐʔ/Ҡಈɺυϥοάதͷ ɹΠϯλϥΫγϣϯͳͲҰ௨Γαϙʔτɻ ɹUITableView / UICollectionView ޲͚ͷαϙʔτ΋ɻ
16. 2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ 16 • Α͘࢖͏ߏ੒͸ϓϩδΣΫτςϯϓϨʔτʹ͢Δ ✓ UITableView ͷઃఆ΍ Button ͷؙ֯ͳͲɺຖճ΍Δ͜ͱ͸׬੒ࡁΈʹ͢Δ ✓ ϓϩδΣΫτੜ੒͚ͩͰɺҰཡʗৄࡉදࣔͱCRUD·ͰͰ͖Δঢ়ଶʹͳΔ ✓ ࠓճඞཁͳ࣮૷ʹ࠷଎ͰऔΓ͔͔ΕΔ
 
 ‣ ׬੒౓ͷߴ͍MVPΛ͢͹΍͘࡞ΕΔͷͰɺ఍߅ͳ͘Կ౓΋࡞ͬͯյͤΔ
17. 2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ 17 • ศརͳϥΠϒϥϦ΍ extension Λੵۃతʹ࢖͏
 - ࣌ࠁɺจࣈྻͳͲɿSwifterSwift, SwiftyAttributes - ϦιʔεपΓɿSwiftGen / R.swift - ը૾ΩϟογϡɿPINRemoteImage - σʔλอଘɿRealm (In-memory Realm΋ศར), SwiftyUserDefaults 
 ɹɹɹɹɹɹFirebase Cloud Firestore, CodableFirebase
18. Cookpad ͷ ࣾ಺։ൃج൫
19. 2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ 19 • σβΠϯγεςϜ Citrus ৄࡉ͸ https://seleck.cc/1247 Ͱ ✓ ࣾ಺ͷσβΠϯݪଇɺجຊ33৭΍ϑΥϯτͷࢦఆɺ໿280छͷΞΠίϯͳͲ͕
 
 ͙͢ར༻Ͱ͖ΔܗͰू໿͞Ε͍ͯΔ ✓ σβΠϯπʔϧ Figma ্Ͱ΋ࢀরͰ͖ɺҰ؏͞ΕͨσβΠϯ͕Ͱ͖Δ ✓ ࣾ಺ϥΠϒϥϦ Cookpad-UI ΛೖΕΔ͚ͩͰɺελΠϧͷ࣮૷΋͙͢Ͱ͖Δ • Ϣʔβɾܾࡁج൫ Cuisine ৄࡉ͸ TechConf 2019 Ӊ௡ (@uzzu) ͞Μͷൃද Ͱ ✓ ΞΧ΢ϯτొ࿥ɾೝূ΍ϨγϐݕࡧͳͲͷAPI΋ɺࣾ಺ϥΠϒϥϦΛೖΕΔͱ͙͢ʹ࢖͑Δ
20. ͢͹΍͘ϓϩτ࣮૷͢ΔͨΊʹʢΤϯδχΞฤʣ 20 1. ͲΜͳUIͷબ୒ࢶ͕͋Δ͔೺Ѳ͓ͯ͘͠ • Apple ७ਖ਼ͷ API ΛͪΌΜͱ஌Δ • UI ϥΠϒϥϦ΋໨Λ௨͢
 2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ • Α͘࢖͏ߏ੒͸ϓϩδΣΫτςϯϓϨʔτʹ͢Δ • ศརͳϥΠϒϥϦ΍ extension Λੵۃతʹ࢖͏ • ࣾ಺ͷ։ൃج൫Λϑϧ׆༻͢Δ
21. XcodeͰ͢͹΍͘ ϓϩτλΠϓ࣮૷Ͱ͖Δͱ…… 21
22. ͢͹΍͘ϓϩτ࣮૷Ͱ͖Δͱ…… 22 • ਺೔ؒͰ΋ɺੜ׆ͷதͰී௨ʹ࢖͑ΔMVPΛ࡞Εͨ
 ✓ ϢʔβʔΠϯλϏϡʔͰҙຯ͋ΔϑΟʔυόοΫΛಘ΍͍͢ ✓ ࣗ෼ͨͪ΋ࣗવͱυοάϑʔσΟϯάͰ͖Δ
 

ʢిंͷத΍৸ΔલͳͲɺϦΞϧͳར༻γʔϯͰ࣮ࡍʹ࢖͑Δʣ
 ‣ ίϯηϓτΛཧղ͍ͯ͠Δ։ൃऀࣗ਎͕࢖͑Δ͜ͱͰɺ
 


Ұา౿ΈࠐΜͩվળΞΠσΞ΋࣍ʑͱग़͖ͯͨ