デザイン環境やワークフローの改善 - みてねのMeetup#3 / Improve Design Environment and Workflow

Transcript

1. ౉ล௚໵ ΈͯͶ
   σβΠφʔ σβΠϯ؀ڥ΍ϫʔΫϑϩʔͷվળ Mitene Meetup #3
2. 2013೥
   2013೥
   2013೥
   2014೥ ೖࣾ
   POPHOMEʢ৽نࣄۀɾΞϓϦʣ
   PoPollyʢ৽نࣄۀɾΞϓϦʣ
   ΈͯͶ ౉ล௚໵ σβΠφʔ 6݄
   6-9݄
   10-12݄
   1݄
4. σβΠϯ؀ڥ΍ϫʔΫϑϩʔΛվળͨ͠࿩ ࿩͢͜ͱ
5. ᶃ GitΛ࢖ͬͨσβΠϯσʔλ؅ཧ
   ᶄ apkαΠζ࠷దԽ & Sketch Plugin࡞੒
   ᶅ XcodeΛ࢖ͬͨϓϩτλΠϐϯά ಺༰
6. ᶃ
   GitΛ࢖ͬͨσβΠϯσʔλ؅ཧ
7. GitҠߦલ ໰୊͕͋Δͷ͸Θ͔͍͕ͬͯͨɺ
   ۩ମతʹରࡦΛͨ͠ΓɺϧʔϧΛܾΊΔͷ͕Ͱ͖͍ͯͳ͔ͬͨ w ΋ͱ΋ͱ͸(PPHMF
   %SJWF
   w ͨͼͨͼ໰୊͕ൃੜ
   w σʔλͷ໭͠๨Εɺઌ૆ฦΓɺ࠷৽σʔλʁʁ
8. ৭ʑͭΒ͍ͷͰɺͳΜͱ͔͍ͨ͠
9. Git LFSʁ
10. Git LFS ͱ͸ʁ w Gitͷ֦ுػೳ
    w 100MBҎ্ͷϑΝΠϧ΋ѻ͑Δ
    w Sketch, AI, PSD΋OK w ίϝϯτ΍ཤྺ͕࢒ͤΔ
    (JU
    -'4Λ࢖͑͹՝୊ΛղܾͰ͖ͦ͏
11. Ҡߦ࣌ͷ՝୊΋গͳ͍ w Git͸ಋೖࡁΈ
    w Git LFS DataΛ༗ޮʹ͢Δ͚ͩ
    w ஋ஈ΋50GB $5.00/monthͱखࠒ
12. Ұ൪ͷωοΫͱͳΔgitͷૢ࡞໘ w ΈͯͶͰ͸σβΠφʔ΋೔ৗతʹgitΛ࢖༻
    w UIͷ࠷ऴௐ੔ΛσβΠφʔ͕ߦ͍PRఏग़
    w ը૾σʔλͷड͚౉͠
    w gitΛѻ͏্Ͱͷ఍߅͸ͳ͔ͬͨ
13. 2017೥9݄
    Ҡߦ
14. ࡞ۀखॱ ᶃ GitHubͷBillingϖʔδͰGit LFS DataΛ༗ޮʹ͢Δ
    ᶄ Git LFSΛΠϯετʔϧ
    ᶅ .gitattributes ͷઃఆ σβΠϯσʔλ؅ཧΛGit LFSʹͨ͠࿩ https://medium.com/mixi-developers/3cff02241f13
15. Ҡߦޙ೥
    
    େ͖ͳ໰୊ͳ͠
16. ్தߦͬͨվળ w ϦϙδτϦ෼ׂ ΋ͱ΋ͱ1ͭͩͬͨϦϙδτϦΛ͍͔ͭ͘ʹ෼ׂͯ͠؅ཧ͠΍͘͢ pre-commit ͰಛఆαΠζҎ্ͷ৔߹ʹܯࠂɺؾ͚ͮΔΑ͏ʹ
    Sketch ReducerͰϑΝΠϧαΠζݮྔ
    or
    ϑΝΠϧΛ෼ׂ͢ΔͳͲରԠ w ίϛοτ࣌ʹϑΝΠϧαΠζ֬ೝ
17. ݁Ռ ຊۀʹઐ೦͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ σʔλ؅ཧͷετϨε͔Βͷղ์
18. ᶄ
    apkαΠζ࠷దԽ & Sketch Plugin࡞੒
19. ͖͔͚ͬ w apkαΠζ͕େ͖͍
    w ΋ͬͱখ͘͞Ͱ͖Δ
    w ը૾ϦιʔεΛ੔ཧ͍ͨ͠
    w ͳͲͳͲΤϯδχΞνʔϜ͔ΒఏҊΛ΋Β͏
20. ཁҼ͸ը૾؅ཧͷࡶ͞ w ࢖͍ͬͯͳ͍ը૾͕͋ͬͨΓ
    w ը૾ͷ࠷దԽ ʢݮྔʣ Λ΍ͬͨΓ΍Βͳ͔ͬͨΓ
    w ϧʔϧ΋ͳ͍ঢ়گ
21. ͳΜͱ͔վળ͍ͨ͠
22. ΍ͬͨ͜ͱ w ࢖͍ͬͯͳ͍ϑΝΠϧͷ࡟আ ΤϯδχΞνʔϜͰରԠ σβΠϯνʔϜͰରԠ ѹॖπʔϧͷબఆ ѹॖ཰ͷௐ੔ w ը૾ͷ࠷దԽ ʢQOH
    KQHʣ
23. ৽͘͠ը૾Λ௥Ճ͢Δ৔߹͸ʁ
    
24. ઈର๨Εͳ͍Α͏ʹ࢓૊ΈԽ͓͖͍ͯͨ͠
25. ࢓૊ΈԽީิ • Git hooks pre-commit
    Ͱѹॖ
    ѹॖޙͷ໨ࢹ֬ೝ͕ͮ͠Β͍ ը૾ॻ͖ग़࣌͠ʹࣗಈͰѹॖΛ͔͚ΒΕΔ ѹॖޙͷΫΦϦςΟνΣοΫ͕͠΍͘͢ɺON/OFF΋Մೳ • Sketch Plugin
26. ϓϥάΠϯΛ୳͕ͨ͠ɺཁ݅ʹ߹͏΋ͷ͕ͳ͔ͬͨʜ
    
27. ϓϥάΠϯͬͯ࡞Εͳ͍ͷ͔ͳʁ
    
28. Sketch Pluginͷ࡞Γํ w ެࣜαΠτʹΨΠυ
    w https://developer.sketchapp.com/guides/
    
    w JavaScript
    apkαΠζͷ࠷దԽͱSketchϓϥάΠϯΛ࡞ͬͨ࿩ https://medium.com/mixi-developers/3ff4f998d61c
29. ࡞ͬͨ
    
30. SketchͷExportϘλϯͰࣗಈѹॖ
31. GitHubͰެ։
32. ެࣜʹ΋Ϧετ͞Ε·ͨ͠
    
33. ݁Ռ େ෯ʹݮྔͭͭ͠ɺࠓޙ΋ܧଓͯ͠࠷దԽ͞Εଓ͚Δ࢓૊ΈʹͳΓ·ͨ͠ 52.9MB → 30.7MBʢ40% Downʣ
34. ᶅ
    XcodeΛ࢖ͬͨϓϩτλΠϐϯά
35. Xcode
    ಋೖҎલʢ2014೥ʣ w Proto.io
    
    w HTML & JavaScriptʢϒϥ΢βϕʔεʣ
36. ౰࣌ͷ՝୊ w ࣮૷ޙʹؾͮ͘ҧ࿨ײ
    w ͳͥϓϩτλΠϓͷஈ֊Ͱؾ͚ͮͳ͔ͬͨͷ͔ʁ
    w मਖ਼ͷ޻਺΋͍ͬͨͳ͍
    
37. ϓϩτλΠϐϯάπʔϧͷ੔ཧ
38. ϓϩτλΠϐϯάπʔϧͷछྨ w τϥϯδγϣϯλΠϓʢSketch, Prott, Invisionʣ w ΠϯλϥΫγϣϯλΠϓʢFramer, Origami Studio, ProtoPieʣ ࢴࣳډతͳλΠϓɻΦʔιυοΫεͳը໘ભҠ΍6*ͷݕূʹ޲͍͍ͯΔɻ ωΠςΟϒΞϓϦͷΑ͏ʹಈ͔͢͜ͱ͕Ͱ͖Δɻ
    ຊ൪ಉ༷ʹߴਫ਼౓ͳݕূɾςετ͕Մೳɻ ΠϯλϥΫγϣϯλΠϓΛ࢖͑͹ղܾͰ͖Δʁʁ
39. ౰࣌͸τϥϯδγϣϯλΠϓ͔͠ଘࡏ͍ͯ͠ͳ͔ͬͨ
    
40. ͳΜͱ͔ͳΒͳ͍͔ͳʁ
    
41. XcodeͰϓϩτλΠϓ࡞Εͳ͍͔ͳʁ
42. ࡞ͬͨ
    
44. Կ͕ྑ͍ͷʁ w ϢʔβʔϏϦςΟςετͷਫ਼౓͕ߴ͘ɺؾ͖ͮΛಘ΍͍͢
    w ݴޠԽͮ͠Β͍ΠϯλϥΫγϣϯΛڞ༗ & FBΛಘ΍͍͢
    w ݕূਫ਼౓͕ߴ͍ͷͰ࣮૷ޙͷख໭Γ͕গͳ͘ɺ࡞ۀޮ཰͕ྑ͍
    w ࣄલʹٕज़՝୊΍޻਺ͷ೺Ѳ͕͠΍͍͢ Xcode
    ͷϓϩτλΠϓ
    
    
    
    ಈ͘࢓༷ॻ
45. 2ͭͷϓϩτλΠϓͷ࢖͍෼͚ w τϥϯδγϣϯλΠϓʢSketch, Prott, Invisionʣ w ΠϯλϥΫγϣϯλΠϓʢXcodeʣ ΦʔιυοΫεͳ6*΍ը໘ભҠʢQVTI
    QPQ
    NPEBMʣͰར༻ɻΠϯλϥΫγϣϯλΠϓͷલߦఔͳͲɻ Ξχϝʔγϣϯ͕͋ͬͨΓɺෳ਺ͷঢ়ଶΛ࣋ͭΑ͏ͳ6*ɻख৮Γ͕ಛʹେࣄͳը໘ͳͲɻ ΠϯλϥΫγϣϯλΠϓ͸τϥϯδγϣϯλΠϓͱൺֱͯ͠࡞Δͷʹ͕͔͔࣌ؒΔ
    ঢ়گ΍ର৅ʹԠͯ͡࢖͍෼͚͍ͯΔ
46. ݁Ռ ࢖͍΍͍͢UIΛ௥ٻͭͭ͠ɺશମͷ։ൃޮ཰ʹ΋ߩݙ σβΠϯϑΣʔζͰਫ਼౓ͷߴ͍ࢼߦࡨޡ͕Մೳ
47. ᶃ GitΛ࢖ͬͯσβΠϯσʔλ؅ཧΛվળ
    ᶄ apkαΠζ࠷దԽ & อͪଓ͚ΔͨΊͷ࢓૊Έ
    ᶅ XcodeΛ࢖ͬͨߴਫ਼౓ͳϓϩτλΠϐϯά ·ͱΊ
48. ͋Γ͕ͱ͏͍͟͝·ͨ͠