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

Transcript

1. ࠶ར༻ՄೳͳUIίϯϙʔω ϯτΛར༻ͨ͠ΞϓϦ։ൃ iOSDC 2018 ଟ࿨ాɹါ

2. • ଟ࿨ాɹါ • ΢ΣϧεφϏגࣜձࣾ • Twitterɿ@yuta24 ࣗݾ঺հ

3. None

4. ٕज़తͳ՝୊ • ΞϓϦج൫ͷվम • ωοτϫʔΫ૚ • σʔλ૚ • ΞʔΩςΫνϟͷ੔ཧ •

   UXվળ΁ͷରԠ

5. • ίϯϙʔωϯτԽͷഎܠ • ίϯϙʔωϯτԽͷઓུ • ελΠϧ࣮૷ • ίϯϙʔωϯτ࣮૷ ΞδΣϯμ

6. ίϯϙʔωϯτԽͷഎܠ

7. • ։ൃதͷ࢓༷มߋ • ػೳվળ • ϦχϡʔΞϧ ΞϓϦͷUI

8. ՝୊ • ςΩετͷSize͕ࢦఆͱҟͳΔ • StoryboardͰ৭ࢦఆ͞Ε͍ͯΔՕॴͷมߋ࿙Ε • ෳ਺ͷը໘Ͱಉ͡Α͏ͳUI࣮૷

9. σβΠφʔͷΞϓϩʔν • σβΠϯγεςϜ • ελΠϧΨΠυΛఆٛ • ΧϥʔεΩʔϚɺςΩετελΠϧ • UIίϯϙʔωϯτΛఆٛ ͷϥΠϒϥϦػೳΛ׆༻ʂ

10. None
11. None

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ঢ়ଶͷελΠϧ • จࣈ৭ͱϘʔμʔͷ৭͸ಉ͡
24. None
25. None

26. PlaygroundͰಈ࡞֬ೝ

27. Before After

28. ·ͱΊ • σβΠφʔͷ࡞ۀϓϩηεΛΈΔ͜ͱͰΤϯδχΞͷ࡞ۀվળʹͭͳ͕ͬͨ • σβΠϯγεςϜ্ͷγϯϘϧΛ࣮૷ͨ͠ • ελΠϧఆٛ • UIίϯϙʔωϯτఆٛ •

    ֤ίϯϙʔωϯτͷཁ݅Λ֬ೝͭͭ͠ਐΊͨ • StoryboardͰͷελΠϧࢦఆΛ΍Ίͨ • ελΠϧͷ౷ҰੑΛ޲্ͤ͞ΔͨΊ • StoryboardͰ࣮ࡍͷը໘ͷงғؾΛ͔ͭΈʹ͘͘ͳͬͨ • PlaygroundͰίϯϙʔωϯτͷελΠϧɺڍಈͷೝࣝ߹Θͤ

29. • iOSΤϯδχΞ • AndroidΤϯδχΞ • αʔόΤϯδχΞ ΤϯδχΞืूத

30. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠