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

by Yu Tawata

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

ٕज़తͳ՝୊ • ΞϓϦج൫ͷվम • ωοτϫʔΫ૚ • σʔλ૚ • ΞʔΩςΫνϟͷ੔ཧ • UXվળ΁ͷରԠ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ίϯϙʔωϯτԽͷഎܠ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

ϩάΠϯը໘ͷ৔߹ • มߋͰ͖Δ߲໨ • ςΩετͷ৭ • ϓϨʔεϗϧμʔςΩετ • ΞϯμʔϥΠϯͷ৭ • όοΫάϥ΢ϯυͷ৭ • มߋͰ͖Δ߲໨ • શମͷ৭

Slide 13

Slide 13 text

σβΠφʔ͞Μɺɺɺ ΩϨΠʹ࡞ۀ͠ͱΔ

Slide 14

Slide 14 text

SketchͷγϯϘϧͷΑ͏ʹ ελΠϧ΍UIίϯϙʔωϯτΛ ར༻ͯ͠UIΛ࡞Ε͹ޮ཰ྑͦ͞͏

Slide 15

Slide 15 text

ίϯϙʔωϯτԽͷઓུ

Slide 16

Slide 16 text

Atomic Design ʢhttp://bradfrost.com/blog/post/style-guide-best-practices-at-beyond-tellerrand/ʣ • UIσβΠϯͷͨΊͷϑϨʔϜϫʔΫ • ίϯϙʔωϯτΛఆٛ͢Δ • 5ͭͷεςʔδͰ෼͚Δ • ݪࢠɺ෼ࢠɺ༗ػମɺςϯϓϨʔτɺϖʔδ

Slide 17

Slide 17 text

Atomic DesignͰݱঢ়੔ཧ εςʔδ σβΠϯγεςϜ ʢSketchʣ ݪࢠ γϯϘϧఆٛ ෼ࢠ γϯϘϧఆٛ ༗ػମ ͳ͠ ςϯϓϨʔτ ը໘ఆٛ ϖʔδ ͳ͠

Slide 18

Slide 18 text

σβΠφͱܾΊͨ͜ͱ • ݪࢠͱ෼ࢠͱ͍͏2૚Ͱߟ͑Δ • ࠶ར༻͞ΕΔ΋ͷ͚ͩίϯϙʔωϯτԽ͢Δ • InVision/ZeplinͰͷσβΠϯڞ༗ͷഇࢭ • InVision/ZeplinͩͱελΠϧ৘ใɺγϯϘϧ৘ใ͕ܽམ ͢Δ

Slide 19

Slide 19 text

ελΠϧ࣮૷ • ཁ݅ • Size͸ݻఆ • Weight͸มߋ͞ΕΔ͜ͱ͕͋Δ • ํ਑ • EnumͰఆٛ͢Δͷ͕ྑͦ͞͏ • StoryboardͰελΠϧࢦఆ͢Δͷ͸߇͑Δ • IBInspectable͸ enum ͸αϙʔτର৅֎ • ྫ֎஋ΛϏϧυͰݕ஌Ͱ͖ͳ͍

Slide 20

Slide 20 text

Slide 21

Slide 21 text

• σϑΥϧτ஋Λࢦఆ͢ΔͨΊɺؔ਺Ͱ࣮૷ • Weight΍Alignment͸ݸผͷՕॴͰมߋ͢Δ͜ͱ΋Ͱ͖Δ • ͜ͷؔ਺ΛϏϡʔʹద༻͢Δ ελΠϧ࣮૷

Slide 22

Slide 22 text

Before After

Slide 23

Slide 23 text

ίϯϙʔωϯτ࣮૷ʢϘλϯͷ৔߹ʣ • Ϙλϯ͸2छྨʢlineɺﬁllʣ • ܾ·͍ͬͯΔ͜ͱ • αΠζ • ؙ֯ͷ஋΋ܾ·Δ • Ϙʔμʔͷଠ͞ • จࣈͷελΠϧ • Disableঢ়ଶͷελΠϧ • จࣈ৭ͱϘʔμʔͷ৭͸ಉ͡

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

PlaygroundͰಈ࡞֬ೝ

Slide 27

Slide 27 text

Before After

Slide 28

Slide 28 text

·ͱΊ • σβΠφʔͷ࡞ۀϓϩηεΛΈΔ͜ͱͰΤϯδχΞͷ࡞ۀվળʹͭͳ͕ͬͨ • σβΠϯγεςϜ্ͷγϯϘϧΛ࣮૷ͨ͠ • ελΠϧఆٛ • UIίϯϙʔωϯτఆٛ • ֤ίϯϙʔωϯτͷཁ݅Λ֬ೝͭͭ͠ਐΊͨ • StoryboardͰͷελΠϧࢦఆΛ΍Ίͨ • ελΠϧͷ౷ҰੑΛ޲্ͤ͞ΔͨΊ • StoryboardͰ࣮ࡍͷը໘ͷงғؾΛ͔ͭΈʹ͘͘ͳͬͨ • PlaygroundͰίϯϙʔωϯτͷελΠϧɺڍಈͷೝࣝ߹Θͤ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠