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

Slide 1

Slide 1 text

Cookpad Inc. Feb 27th, 2019 ౻ࡔ ༞࢙ ৽نαʔϏε։ൃ෦ XcodeͰ͢͹΍͘  ϓϩτλΠϓΛ࡞ΕΔνʔϜͮ͘Γ Lightning Talk

Slide 2

Slide 2 text

ͳͥXcodeͰ  ϓϩτλΠϓʁ 2

Slide 3

Slide 3 text

஧࣮౓ͷߴ͍ϓϩτλΠϓ͕ඞཁʹ 3 • ίϯηϓτஈ֊ͳΒɺϞοΫΞοϓͰ΋े෼ݕূͰ͖Δ ⭕ • ΑΓ౿ΈࠐΜͩݕূͰ͸ɺ஧࣮౓͕ߴ͘ͳ͍ͱݕূͰ͖ͳ͍     ʮ࣮ࡍʹ࢖ͬͯΈͳ͍ͱԿͱ΋ݴ͑ͳ͍ʯ    ‣ ҙຯ͋ΔϑΟʔυόοΫΛಘΒΕΔϓϩτλΠϓ͕ඞཁʂ     → XcodeͰΞϓϦͱͯ͠ࡶ࣮૷

Slide 4

Slide 4 text

# WebΤϯδχΞ   (ϓϩδΣΫτϦʔμʔ)    $ σβΠφʔ  % σβΠφʔ    & iOSΤϯδχΞ 4 ։ൃνʔϜ ͢͹΍͘ ࡞ΕΔ νʔϜʹ

Slide 5

Slide 5 text

XcodeͰ͢͹΍͘ ϓϩτλΠϓ࣮૷͢ΔͨΊʹ ΍ͬͨ͜ͱ 5

Slide 6

Slide 6 text

σβΠφʔฤ 6

Slide 7

Slide 7 text

͢͹΍͘ϓϩτ࣮૷͢ΔͨΊʹʢσβΠφʔฤʣ 7 1. Apple ͷ Human Interface Guidelines ΛಡΜͰ͓͘ 2. UIϥΠϒϥϦΛ୳ͯ͠ɺखݩͰಈ͔ͯ͠ΈΔ 3. ϖΞϓϩͰجຊૢ࡞ΛֶͿ 4. FigmaΛ࢖ͬͯσβΠϯ͢Δ

Slide 8

Slide 8 text

1. Apple ͷ Human Interface Guidelines ΛಡΜͰ͓͘ 8 • ݪଇɾࢥ૝Λ౿·͑ͯσβΠϯͰ͖Δ • ඪ४ͷίϯϙʔωϯτΛ೺ѲͰ͖Δ ‣ ΤϯδχΞͱͷίϛϡχέʔγϣϯͰ     ͢Εҧ͍͕ͳ͘ͳΔ $ σβΠφʔʮ͜Ε͸ Navigation Bar ͷ largeTitle ʹ͠·͢ʯ & ΤϯδχΞʮͦΕͳΒ1ߦॻ͚ͩ͘OKͰ͢Ͷʂʯ IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFTJPTCBSTOBWJHBUJPOCBST

Slide 9

Slide 9 text

2. UIϥΠϒϥϦΛ୳ͯ͠ɺखݩͰಈ͔͢ 9 • ͙͢ಋೖͰ͖ΔϦονͳUI͕ͨ͘͞Μݟ͔ͭΔ • αϯϓϧΛಈ͔ͯ͠ɺ಺༰Λ͔͑Δͷ͸ൺֱత؆୯ ‣ σβΠφʔͷ૝૾ʹ͍ۙ΋ͷΛɺ͙͢औΓࠐΊΔ $ σβΠφʔʮΦϯϘʔσΟϯάɺ͜ΕͰ࡞ͬͯΈ·ͨ͠ʯ & ΤϯδχΞʮΦο ૊ΈࠐΉ͚ͩͰOKͰ͢Ͷʂʯ IUUQTHJUIVCDPN3BNPUJPOQBQFSPOCPBSEJOH

Slide 10

Slide 10 text

3. ϖΞϓϩͰجຊૢ࡞ΛֶͿ 10 • UIͷࡉ͔͍ௐ੔Λ͢ΔʢAuto LayoutɺจࣈελΠϧɺؙ֯ʣ • ը໘௥ՃɾભҠ΋ܰ͘΍ͬͯΈΔ ‣ σβΠφʔʹ·͔ͤͯɺΤϯδχΞ͕ػೳଆͷ࣮૷ʹूதͰ͖Δ % σβΠφʔʮ͜ͷը໘ͷσβΠϯௐ੔ɺPull Requestग़͠·ͨ͠ʂʯ & ΤϯδχΞʮ͋Γ͕ͱ͏͍͟͝·͢ʂʯ

Slide 11

Slide 11 text

4. FigmaΛ࢖ͬͯσβΠϯ͢Δ 11 • ϦΞϧλΠϜʹڞಉฤूͰ͖Δ ✓ શһ͕ৗʹ࠷৽ͷσβΠϯͰٞ࿦Ͱ͖Δ ✓ ৗʹݟ͍ͯͳͯ͘΋ Slack Ͱίϝϯτʹؾ͚ͮΔ    • σβΠϯΛ࣮૷ʹऔΓࠐΈ΍͍͢ ✓ ࢖ΘΕ͍ͯΔ৭͕ҰཡԽ͞ΕΔ ✓ ΞΠίϯ౳ Λ PDF Ͱ΋ Export Ͱ͖Δ ✓ ؆қతʹ Swiftͷίʔυ΋ੜ੒͞ΕΔ       ‣ ΤϯδχΞ΋ద౓ʹר͖ࠐΜͰٞ࿦Ͱ͖ɺࠞཚͳ࣮͘૷΋εϜʔζʹͰ͖Δ IUUQTUFDIMJGFDPPLQBEDPNFOUSZ

Slide 12

Slide 12 text

͢͹΍͘ϓϩτ࣮૷͢ΔͨΊʹʢσβΠφʔฤʣ 12 1. Apple ͷ Human Interface Guidelines ΛಡΜͰ͓͘ 2. UIϥΠϒϥϦΛ୳ͯ͠ɺखݩͰಈ͔ͯ͠ΈΔ 3. ϖΞϓϩͰجຊૢ࡞ΛֶͿ 4. FigmaΛ࢖ͬͯσβΠϯ͢Δ

Slide 13

Slide 13 text

ΤϯδχΞฤ 13

Slide 14

Slide 14 text

͢͹΍͘ϓϩτ࣮૷͢ΔͨΊʹʢΤϯδχΞฤʣ 14 1. ͲΜͳUIͷબ୒ࢶ͕͋Δ͔೺Ѳ͓ͯ͘͠ • Apple ७ਖ਼ͷ API ΛͪΌΜͱ஌Δ • UI ϥΠϒϥϦ΋໨Λ௨͢  2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ • Α͘࢖͏ߏ੒͸ϓϩδΣΫτςϯϓϨʔτʹ͢Δ • ศརͳϥΠϒϥϦ΍ extension Λੵۃతʹ࢖͏ • ࣾ಺ͷ։ൃج൫Λϑϧ׆༻͢Δ

Slide 15

Slide 15 text

1. ͲΜͳUIͷબ୒ࢶ͕͋Δ͔೺Ѳ͓ͯ͘͠ 15 • Apple ७ਖ਼ͷ API ΛͪΌΜͱݟ͓ͯ͘    • UIϥΠϒϥϦ΋໨Λ௨͓ͯ͘͠ ‣ ղܾ͍ͨ͠՝୊ʹରͯ͠ɺ    ΑΓద੾ͳUIΛߏ૝ஈ֊͔ΒఏҊͰ͖Δ     ྑ͍UX ͔ͭ ࣮ݱՄೳ % σβΠφʔʮ͜͜ͷҠಈͤ͞Δૢ࡞ɺD&DͰ͖Δͷ͕ཧ૝Ͱ͸͋ΔΜͰ͕͢……ʯ     & ΤϯδχΞʮʢDrag and Drop APIͷʣ͜ͷܗͳΒൺֱత͙͢Ͱ͖ͦ͏Ͱ͢ʯ ྫ: Drag and Drop APIʢiOS 11ʙʣ ɹΞϓϦ಺σʔλͷίϐʔ/Ҡಈɺυϥοάதͷ ɹΠϯλϥΫγϣϯͳͲҰ௨Γαϙʔτɻ ɹUITableView / UICollectionView ޲͚ͷαϙʔτ΋ɻ

Slide 16

Slide 16 text

2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ 16 • Α͘࢖͏ߏ੒͸ϓϩδΣΫτςϯϓϨʔτʹ͢Δ ✓ UITableView ͷઃఆ΍ Button ͷؙ֯ͳͲɺຖճ΍Δ͜ͱ͸׬੒ࡁΈʹ͢Δ ✓ ϓϩδΣΫτੜ੒͚ͩͰɺҰཡʗৄࡉදࣔͱCRUD·ͰͰ͖Δঢ়ଶʹͳΔ ✓ ࠓճඞཁͳ࣮૷ʹ࠷଎ͰऔΓ͔͔ΕΔ    ‣ ׬੒౓ͷߴ͍MVPΛ͢͹΍͘࡞ΕΔͷͰɺ఍߅ͳ͘Կ౓΋࡞ͬͯյͤΔ

Slide 17

Slide 17 text

2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ 17 • ศརͳϥΠϒϥϦ΍ extension Λੵۃతʹ࢖͏  - ࣌ࠁɺจࣈྻͳͲɿSwifterSwift, SwiftyAttributes - ϦιʔεपΓɿSwiftGen / R.swift - ը૾ΩϟογϡɿPINRemoteImage - σʔλอଘɿRealm (In-memory Realm΋ศར), SwiftyUserDefaults   ɹɹɹɹɹɹFirebase Cloud Firestore, CodableFirebase

Slide 18

Slide 18 text

Cookpad ͷ ࣾ಺։ൃج൫

Slide 19

Slide 19 text

2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ 19 • σβΠϯγεςϜ Citrus ৄࡉ͸ https://seleck.cc/1247 Ͱ ✓ ࣾ಺ͷσβΠϯݪଇɺجຊ33৭΍ϑΥϯτͷࢦఆɺ໿280छͷΞΠίϯͳͲ͕    ͙͢ར༻Ͱ͖ΔܗͰू໿͞Ε͍ͯΔ ✓ σβΠϯπʔϧ Figma ্Ͱ΋ࢀরͰ͖ɺҰ؏͞ΕͨσβΠϯ͕Ͱ͖Δ ✓ ࣾ಺ϥΠϒϥϦ Cookpad-UI ΛೖΕΔ͚ͩͰɺελΠϧͷ࣮૷΋͙͢Ͱ͖Δ • Ϣʔβɾܾࡁج൫ Cuisine ৄࡉ͸ TechConf 2019 Ӊ௡ (@uzzu) ͞Μͷൃද Ͱ ✓ ΞΧ΢ϯτొ࿥ɾೝূ΍ϨγϐݕࡧͳͲͷAPI΋ɺࣾ಺ϥΠϒϥϦΛೖΕΔͱ͙͢ʹ࢖͑Δ

Slide 20

Slide 20 text

͢͹΍͘ϓϩτ࣮૷͢ΔͨΊʹʢΤϯδχΞฤʣ 20 1. ͲΜͳUIͷબ୒ࢶ͕͋Δ͔೺Ѳ͓ͯ͘͠ • Apple ७ਖ਼ͷ API ΛͪΌΜͱ஌Δ • UI ϥΠϒϥϦ΋໨Λ௨͢  2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ • Α͘࢖͏ߏ੒͸ϓϩδΣΫτςϯϓϨʔτʹ͢Δ • ศརͳϥΠϒϥϦ΍ extension Λੵۃతʹ࢖͏ • ࣾ಺ͷ։ൃج൫Λϑϧ׆༻͢Δ

Slide 21

Slide 21 text

XcodeͰ͢͹΍͘ ϓϩτλΠϓ࣮૷Ͱ͖Δͱ…… 21

Slide 22

Slide 22 text

͢͹΍͘ϓϩτ࣮૷Ͱ͖Δͱ…… 22 • ਺೔ؒͰ΋ɺੜ׆ͷதͰී௨ʹ࢖͑ΔMVPΛ࡞Εͨ  ✓ ϢʔβʔΠϯλϏϡʔͰҙຯ͋ΔϑΟʔυόοΫΛಘ΍͍͢ ✓ ࣗ෼ͨͪ΋ࣗવͱυοάϑʔσΟϯάͰ͖Δ    ʢిंͷத΍৸ΔલͳͲɺϦΞϧͳར༻γʔϯͰ࣮ࡍʹ࢖͑Δʣ  ‣ ίϯηϓτΛཧղ͍ͯ͠Δ։ൃऀࣗ਎͕࢖͑Δ͜ͱͰɺ     Ұา౿ΈࠐΜͩվળΞΠσΞ΋࣍ʑͱग़͖ͯͨ