Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yuji Fujisaka
February 27, 2019

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

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

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

Yuji Fujisaka

February 27, 2019
Tweet

More Decks by Yuji Fujisaka

Other Decks in Technology

Transcript

  1. # WebΤϯδχΞ 
 (ϓϩδΣΫτϦʔμʔ)
 
 $ σβΠφʔ 
% σβΠφʔ 


    
& iOSΤϯδχΞ 4 ։ൃνʔϜ ͢͹΍͘ ࡞ΕΔ νʔϜʹ
  2. ͢͹΍͘ϓϩτ࣮૷͢ΔͨΊʹʢσβΠφʔฤʣ 7 1. Apple ͷ Human Interface Guidelines ΛಡΜͰ͓͘ 2.

    UIϥΠϒϥϦΛ୳ͯ͠ɺखݩͰಈ͔ͯ͠ΈΔ 3. ϖΞϓϩͰجຊૢ࡞ΛֶͿ 4. FigmaΛ࢖ͬͯσβΠϯ͢Δ
  3. 1. Apple ͷ Human Interface Guidelines ΛಡΜͰ͓͘ 8 • ݪଇɾࢥ૝Λ౿·͑ͯσβΠϯͰ͖Δ

    • ඪ४ͷίϯϙʔωϯτΛ೺ѲͰ͖Δ ‣ ΤϯδχΞͱͷίϛϡχέʔγϣϯͰ
 


͢Εҧ͍͕ͳ͘ͳΔ $ σβΠφʔʮ͜Ε͸ Navigation Bar ͷ largeTitle ʹ͠·͢ʯ & ΤϯδχΞʮͦΕͳΒ1ߦॻ͚ͩ͘OKͰ͢Ͷʂʯ IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFTJPTCBSTOBWJHBUJPOCBST
  4. 2. UIϥΠϒϥϦΛ୳ͯ͠ɺखݩͰಈ͔͢ 9 • ͙͢ಋೖͰ͖ΔϦονͳUI͕ͨ͘͞Μݟ͔ͭΔ • αϯϓϧΛಈ͔ͯ͠ɺ಺༰Λ͔͑Δͷ͸ൺֱత؆୯ ‣ σβΠφʔͷ૝૾ʹ͍ۙ΋ͷΛɺ͙͢औΓࠐΊΔ $

    σβΠφʔʮΦϯϘʔσΟϯάɺ͜ΕͰ࡞ͬͯΈ·ͨ͠ʯ & ΤϯδχΞʮΦο ૊ΈࠐΉ͚ͩͰOKͰ͢Ͷʂʯ IUUQTHJUIVCDPN3BNPUJPOQBQFSPOCPBSEJOH
  5. 4. FigmaΛ࢖ͬͯσβΠϯ͢Δ 11 • ϦΞϧλΠϜʹڞಉฤूͰ͖Δ ✓ શһ͕ৗʹ࠷৽ͷσβΠϯͰٞ࿦Ͱ͖Δ ✓ ৗʹݟ͍ͯͳͯ͘΋ Slack

    Ͱίϝϯτʹؾ͚ͮΔ
 
 • σβΠϯΛ࣮૷ʹऔΓࠐΈ΍͍͢ ✓ ࢖ΘΕ͍ͯΔ৭͕ҰཡԽ͞ΕΔ ✓ ΞΠίϯ౳ Λ PDF Ͱ΋ Export Ͱ͖Δ ✓ ؆қతʹ Swiftͷίʔυ΋ੜ੒͞ΕΔ
 



 ‣ ΤϯδχΞ΋ద౓ʹר͖ࠐΜͰٞ࿦Ͱ͖ɺࠞཚͳ࣮͘૷΋εϜʔζʹͰ͖Δ IUUQTUFDIMJGFDPPLQBEDPNFOUSZ
  6. ͢͹΍͘ϓϩτ࣮૷͢ΔͨΊʹʢσβΠφʔฤʣ 12 1. Apple ͷ Human Interface Guidelines ΛಡΜͰ͓͘ 2.

    UIϥΠϒϥϦΛ୳ͯ͠ɺखݩͰಈ͔ͯ͠ΈΔ 3. ϖΞϓϩͰجຊૢ࡞ΛֶͿ 4. FigmaΛ࢖ͬͯσβΠϯ͢Δ
  7. ͢͹΍͘ϓϩτ࣮૷͢ΔͨΊʹʢΤϯδχΞฤʣ 14 1. ͲΜͳUIͷબ୒ࢶ͕͋Δ͔೺Ѳ͓ͯ͘͠ • Apple ७ਖ਼ͷ API ΛͪΌΜͱ஌Δ •

    UI ϥΠϒϥϦ΋໨Λ௨͢
 2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ • Α͘࢖͏ߏ੒͸ϓϩδΣΫτςϯϓϨʔτʹ͢Δ • ศརͳϥΠϒϥϦ΍ extension Λੵۃతʹ࢖͏ • ࣾ಺ͷ։ൃج൫Λϑϧ׆༻͢Δ
  8. 1. ͲΜͳUIͷબ୒ࢶ͕͋Δ͔೺Ѳ͓ͯ͘͠ 15 • Apple ७ਖ਼ͷ API ΛͪΌΜͱݟ͓ͯ͘
 
 •

    UIϥΠϒϥϦ΋໨Λ௨͓ͯ͘͠ ‣ ղܾ͍ͨ͠՝୊ʹରͯ͠ɺ
 

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


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


& ΤϯδχΞʮʢDrag and Drop APIͷʣ͜ͷܗͳΒൺֱత͙͢Ͱ͖ͦ͏Ͱ͢ʯ ྫ: Drag and Drop APIʢiOS 11ʙʣ ɹΞϓϦ಺σʔλͷίϐʔ/Ҡಈɺυϥοάதͷ ɹΠϯλϥΫγϣϯͳͲҰ௨Γαϙʔτɻ ɹUITableView / UICollectionView ޲͚ͷαϙʔτ΋ɻ
  9. 2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ 16 • Α͘࢖͏ߏ੒͸ϓϩδΣΫτςϯϓϨʔτʹ͢Δ ✓ UITableView ͷઃఆ΍ Button ͷؙ֯ͳͲɺຖճ΍Δ͜ͱ͸׬੒ࡁΈʹ͢Δ

    ✓ ϓϩδΣΫτੜ੒͚ͩͰɺҰཡʗৄࡉදࣔͱCRUD·ͰͰ͖Δঢ়ଶʹͳΔ ✓ ࠓճඞཁͳ࣮૷ʹ࠷଎ͰऔΓ͔͔ΕΔ
 
 ‣ ׬੒౓ͷߴ͍MVPΛ͢͹΍͘࡞ΕΔͷͰɺ఍߅ͳ͘Կ౓΋࡞ͬͯյͤΔ
  10. 2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ 17 • ศརͳϥΠϒϥϦ΍ extension Λੵۃతʹ࢖͏
 - ࣌ࠁɺจࣈྻͳͲɿSwifterSwift, SwiftyAttributes

    - ϦιʔεपΓɿSwiftGen / R.swift - ը૾ΩϟογϡɿPINRemoteImage - σʔλอଘɿRealm (In-memory Realm΋ศར), SwiftyUserDefaults 
 ɹɹɹɹɹɹFirebase Cloud Firestore, CodableFirebase
  11. 2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ 19 • σβΠϯγεςϜ Citrus ৄࡉ͸ https://seleck.cc/1247 Ͱ ✓

    ࣾ಺ͷσβΠϯݪଇɺجຊ33৭΍ϑΥϯτͷࢦఆɺ໿280छͷΞΠίϯͳͲ͕
 
 ͙͢ར༻Ͱ͖ΔܗͰू໿͞Ε͍ͯΔ ✓ σβΠϯπʔϧ Figma ্Ͱ΋ࢀরͰ͖ɺҰ؏͞ΕͨσβΠϯ͕Ͱ͖Δ ✓ ࣾ಺ϥΠϒϥϦ Cookpad-UI ΛೖΕΔ͚ͩͰɺελΠϧͷ࣮૷΋͙͢Ͱ͖Δ • Ϣʔβɾܾࡁج൫ Cuisine ৄࡉ͸ TechConf 2019 Ӊ௡ (@uzzu) ͞Μͷൃද Ͱ ✓ ΞΧ΢ϯτొ࿥ɾೝূ΍ϨγϐݕࡧͳͲͷAPI΋ɺࣾ಺ϥΠϒϥϦΛೖΕΔͱ͙͢ʹ࢖͑Δ
  12. ͢͹΍͘ϓϩτ࣮૷͢ΔͨΊʹʢΤϯδχΞฤʣ 20 1. ͲΜͳUIͷબ୒ࢶ͕͋Δ͔೺Ѳ͓ͯ͘͠ • Apple ७ਖ਼ͷ API ΛͪΌΜͱ஌Δ •

    UI ϥΠϒϥϦ΋໨Λ௨͢
 2. ҰॠͰ࡞ΕΔΑ͏ʹඋ͑Δ • Α͘࢖͏ߏ੒͸ϓϩδΣΫτςϯϓϨʔτʹ͢Δ • ศརͳϥΠϒϥϦ΍ extension Λੵۃతʹ࢖͏ • ࣾ಺ͷ։ൃج൫Λϑϧ׆༻͢Δ