再利用可能なUI Componentsを利用したアプリ開発

Transcript

1. ࠶ར༻ՄೳͳUIίϯϙʔω ϯτΛར༻ͨ͠ΞϓϦ։ൃ iOSDC 2018 ଟ࿨ాɹါ
2. • ଟ࿨ాɹါ • ΢ΣϧεφϏגࣜձࣾ • Twitterɿ@yuta24 ࣗݾ঺հ
4. ٕज़తͳ՝୊ • ΞϓϦج൫ͷվम • ωοτϫʔΫ૚ • σʔλ૚ • ΞʔΩςΫνϟͷ੔ཧ • UXվળ΁ͷରԠ
5. • ίϯϙʔωϯτԽͷഎܠ • ίϯϙʔωϯτԽͷઓུ • ελΠϧ࣮૷ • ίϯϙʔωϯτ࣮૷ ΞδΣϯμ
6. ίϯϙʔωϯτԽͷഎܠ
7. • ։ൃதͷ࢓༷มߋ • ػೳվળ • ϦχϡʔΞϧ ΞϓϦͷUI
8. ՝୊ • ςΩετͷSize͕ࢦఆͱҟͳΔ • StoryboardͰ৭ࢦఆ͞Ε͍ͯΔՕॴͷมߋ࿙Ε • ෳ਺ͷը໘Ͱಉ͡Α͏ͳUI࣮૷
9. σβΠφʔͷΞϓϩʔν • σβΠϯγεςϜ • ελΠϧΨΠυΛఆٛ • ΧϥʔεΩʔϚɺςΩετελΠϧ • UIίϯϙʔωϯτΛఆٛ ͷϥΠϒϥϦػೳΛ׆༻ʂ
12. ϩάΠϯը໘ͷ৔߹ • มߋͰ͖Δ߲໨ • ςΩετͷ৭ • ϓϨʔεϗϧμʔςΩετ • ΞϯμʔϥΠϯͷ৭ • όοΫάϥ΢ϯυͷ৭ • มߋͰ͖Δ߲໨ • શମͷ৭
13. σβΠφʔ͞Μɺɺɺ ΩϨΠʹ࡞ۀ͠ͱΔ
14. SketchͷγϯϘϧͷΑ͏ʹ ελΠϧ΍UIίϯϙʔωϯτΛ ར༻ͯ͠UIΛ࡞Ε͹ޮ཰ྑͦ͞͏
15. ίϯϙʔωϯτԽͷઓུ
16. Atomic Design ʢhttp://bradfrost.com/blog/post/style-guide-best-practices-at-beyond-tellerrand/ʣ • UIσβΠϯͷͨΊͷϑϨʔϜϫʔΫ • ίϯϙʔωϯτΛఆٛ͢Δ • 5ͭͷεςʔδͰ෼͚Δ • ݪࢠɺ෼ࢠɺ༗ػମɺςϯϓϨʔτɺϖʔδ
17. Atomic DesignͰݱঢ়੔ཧ εςʔδ σβΠϯγεςϜ ʢSketchʣ ݪࢠ γϯϘϧఆٛ ෼ࢠ γϯϘϧఆٛ ༗ػମ ͳ͠ ςϯϓϨʔτ ը໘ఆٛ ϖʔδ ͳ͠
18. σβΠφͱܾΊͨ͜ͱ • ݪࢠͱ෼ࢠͱ͍͏2૚Ͱߟ͑Δ • ࠶ར༻͞ΕΔ΋ͷ͚ͩίϯϙʔωϯτԽ͢Δ • InVision/ZeplinͰͷσβΠϯڞ༗ͷഇࢭ • InVision/ZeplinͩͱελΠϧ৘ใɺγϯϘϧ৘ใ͕ܽམ ͢Δ
19. ελΠϧ࣮૷ • ཁ݅ • Size͸ݻఆ • Weight͸มߋ͞ΕΔ͜ͱ͕͋Δ • ํ਑ • EnumͰఆٛ͢Δͷ͕ྑͦ͞͏ • StoryboardͰελΠϧࢦఆ͢Δͷ͸߇͑Δ • IBInspectable͸ enum ͸αϙʔτର৅֎ • ྫ֎஋ΛϏϧυͰݕ஌Ͱ͖ͳ͍
20. ελΠϧ࣮૷ • ཁ݅ • Size͸ݻఆ • Weight͸มߋ͞ΕΔ͜ͱ͕͋Δ • ํ਑ • EnumͰఆٛ͢Δͷ͕ྑͦ͞͏ • StoryboardͰελΠϧࢦఆ͢Δͷ͸߇͑Δ • IBInspectable͸ enum ͸αϙʔτର৅֎ • ྫ֎஋ΛϏϧυͰݕ஌Ͱ͖ͳ͍
21. • σϑΥϧτ஋Λࢦఆ͢ΔͨΊɺؔ਺Ͱ࣮૷ • Weight΍Alignment͸ݸผͷՕॴͰมߋ͢Δ͜ͱ΋Ͱ͖Δ • ͜ͷؔ਺ΛϏϡʔʹద༻͢Δ ελΠϧ࣮૷
22. Before After
23. ίϯϙʔωϯτ࣮૷ʢϘλϯͷ৔߹ʣ • Ϙλϯ͸2छྨʢlineɺfillʣ • ܾ·͍ͬͯΔ͜ͱ • αΠζ • ؙ֯ͷ஋΋ܾ·Δ • Ϙʔμʔͷଠ͞ • จࣈͷελΠϧ • Disableঢ়ଶͷελΠϧ • จࣈ৭ͱϘʔμʔͷ৭͸ಉ͡
26. PlaygroundͰಈ࡞֬ೝ
27. Before After
28. ·ͱΊ • σβΠφʔͷ࡞ۀϓϩηεΛΈΔ͜ͱͰΤϯδχΞͷ࡞ۀվળʹͭͳ͕ͬͨ • σβΠϯγεςϜ্ͷγϯϘϧΛ࣮૷ͨ͠ • ελΠϧఆٛ • UIίϯϙʔωϯτఆٛ • ֤ίϯϙʔωϯτͷཁ݅Λ֬ೝͭͭ͠ਐΊͨ • StoryboardͰͷελΠϧࢦఆΛ΍Ίͨ • ελΠϧͷ౷ҰੑΛ޲্ͤ͞ΔͨΊ • StoryboardͰ࣮ࡍͷը໘ͷงғؾΛ͔ͭΈʹ͘͘ͳͬͨ • PlaygroundͰίϯϙʔωϯτͷελΠϧɺڍಈͷೝࣝ߹Θͤ
29. • iOSΤϯδχΞ • AndroidΤϯδχΞ • αʔόΤϯδχΞ ΤϯδχΞืूத
30. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠