EightのUI Component化の取り組み

&JHIU ͷ 6*$PNQPOFOU Խͷ  औΓ૊Έ .PCJMF&OHJOFFS.FFUVQCZ4BOTBO Տลխ࢙

Տลխ࢙ 4BOTBOࣄۀ෦1SPEVDU։ൃ෦݉  &JHIUࣄۀ෦&OHJOFFSJOH(SPVQ  J04ΤϯδχΞ ೥݄  4BOTBOגࣜձࣾʹ৽ଔೖࣾ  &JHIUJ04ͷ։ൃʹैࣄ  ೥݄  4BOTBOJ04 &JHIUJ04ͷ։ൃʹैࣄ

6*$PNQPOFOU w ΞϓϦέʔγϣϯͷը໘Λߏ੒͢Δ6*෦඼ w ྫϢʔβʔ໊Λදࣔ͢Δ-BCFM w ྫϢʔβʔΞΠίϯΛදࣔ͢Δ*NBHF7JFX

w GPOUTJ[FQU w GPOUDPMPS#MBDL w GPOUXFJHIUTFNJCPME

w GPOUTJ[FQU w GPOUDPMPS8IJUF w GPOUXFJHIUTFNJCPME w IFJHIUQU w CBDLHSPVOEDPMPS#MVF
w CPSEFSDPMPS$MFBS

6*$PNQPOFOUԽʹऔΓ૊Μͩഎܠ w ҰͭҰͭͷ6*෦඼ʹରͯ͠4UZMFΛઃఆ͢Δͷ͸ඇޮ཰ w ઃఆͰϛεΛ͢ΔՄೳੑ΋͋Δ w σβΠϯ࢓༷ʹมߋ͕͋ͬͨ৔߹ʹɺमਖ਼࡞ۀ͕ඇޮ཰ w ը໘୯ҐͰͷमਖ਼͕ඞཁ

6*$PNQPOFOUԽͷ໨త w ։ൃͷޮ཰Խ w σβΠϯͷ౷Ұײ ੔߹ੑͷ୲อ

։ൃͷޮ཰Խ w ΧϓηϧԽ͞Ε͍ͯΔ w ࠶ར༻Մೳ w ஔ׵Մೳ

σβΠϯͷ౷Ұײ ੔߹ੑͷ୲อ w ελΠϧΨΠυͷఆٛ w ελΠϧΨΠυʹԊͬͨσβΠϯఆٛ w &JHIUͰ͸5FYU4UZMFΛఆٛ

5FYU4UZMF w 5FYUͷ4UZMFΛఆٛͨ͠ελΠϧΨΠυ w &JHIUͰ͸ɺGPOUTJ[F GPOUDPMPS GPOUXFJHIU MJOFTQBDFͷ ͭͷଐੑΛఆٛ

5FYU4UZMFͷ໋໊ GPOUDPMPS GPOUTJ[F GPOUXFJHIUΛ௚઀తʹ໋໊ʁ  ྫCMBDL8 GPOUDPMPS GPOUTJ[F GPOUXFJHIUΛந৅తʹ໋໊ʁ 
ྫCPEZ GPOUDPMPS GPOUTJ[F GPOUXFJHIUΛจ຺ʹԠ໋໊ͯ͡ʁ  ྫGFFE#PEZ

GPOUDPMPS GPOUTJ[F GPOUXFJHIUΛ௚઀తʹ໋໊ w 1SPT໊લ͔Β4UZMF͕Πϝʔδ͠΍͍͢ w $POTมߋʹऑ͍ GPOUDPMPS
GPOUTJ[F GPOUXFJHIUΛந৅తʹ໋໊ w 1SPTมߋʹڧ͍ w $POT໊લ͔Β4UZMF͕Πϝʔδ͠ʹ͍͘ GPOUDPMPS GPOUTJ[F GPOUXFJHIUΛจ຺ʹԠ໋໊ͯ͡ w 1SPTͲͷ5FYU4UZMFΛઃఆͨ͠Βྑ͍͔Πϝʔδ͠΍͍͢ w $POTจ຺͝ͱʹ5FYU4UZMFΛఆٛ͢Δඞཁ͕͋Δ

w ;FQMJOͰ֤7JFXʹ5FYU4UZMF ໊Λهࡌ w ΤϯδχΞ͸5FYU4UZMF໊  ͚ͩΛҙࣝ

enum TextStyle: String { case Header case Body private typealias
StyleDefinition = (size: CGFloat, color: UIColor, weight: UIFont.Weight, lineSpacing: CGFloat) private var definition: StyleDefinition { switch self { case .Header: return (size: 19.0, color: EightColor.white, weight: .semibold, lineSpacing: 4.0) case .Body: return (size: 15.0, color: EightColor.veryDarkGray, weight: .regular, lineSpacing: 3.0) } } var size: CGFloat { return definition.size } var weight: UIFont.Weight { return definition.weight } var font: UIFont { return UIFont.systemFont(ofSize: size, weight: weight) } ɾɾɾ }

&JHIUͰ$PNQPOFOUԽ͞Ε͍ͯΔ΋ͷ w 6*-BCFM w 6*5FYU7JFX w 6**NBHF7JFX w 6*#VUUPO

6*-BCFMΛ$PNQPOFOUԽͨ͠&JHIU-BCFM w *#%FTJHOBCMFͰఆٛ͢Δ͜ͱͰ*OUFSGBDF#VJMEFSʹ  5FYU4UZMFΛ൓ө w *#*OTQFDUBCMFΛఆٛ͢Δ͜ͱͰ9DPEFͷ"UUSJCVUF *OTQFDUPS͔Β5FYU4UZMFΛઃఆՄೳʹ

@IBDesignable final class EightLabel: UILabel { @IBInspectable var style: String
= "Body" { didSet { setTextFont() } } } private extension EightLabel { var textStyle: TextStyle { guard let textStyle = TextStyle(rawValue: style) else { fatalError("\(style) is undefined TextStyle") } return textStyle } func setTextFont() { font = textStyle.font textColor = textStyle.color } }

&JHIU-BCFMʹ5FYU4UZMFͷ൓ө

ؔ৺ͷ෼཭ w 4UPSZCPBSEͰ͸7JFXΛ഑ஔͯ͠ɺ$MBTT 5FYU4UZMFΛࢦఆ͢Δ w $PNQPOFOUͰ͸7JFXͷ4UZMFΛઃఆ͢Δ w 4UZMFͷઃఆ͕4UPSZCPBSEͱίʔυͷ྆ํͰߦΘΕΔ໰୊Λղܾ

*OUFSGBDF#VJMEFSͷݟͨ໨ͱ  ࣮ߦ݁ՌΛҰகͤ͞Δ w ಈ࡞֬ೝʹֻ͔Δ࣌ؒΛ୹ॖ w ฤू͢Δ΂͖'JMF 7JFXͷൃݟΛ༰қʹ

·ͱΊ w 6*$PNQPOFOUͷಋೖʹ͸ɺΤϯδχΞͱσβΠφʔ ͷڠۀ͕ඞཁ w 6*$PNQPOFOUͷಋೖίετ͸গ͠ߴ͍͕ɺ௕ظతʹ ߟ͑ΔͱಘΒΕΔϝϦοτ͕େ͖͍

ࠓ೔࿩ͤͳ͔ͬͨ͜ͱ w $PMPSͷఆٛʹ͍ͭͯ w &JHIU-BCFMҎ֎ͷ$PNQPOFOUԽ͍ͯ͠Δ΋ͷ ؾʹͳΔํ͸࠙਌ձͰ

EightのUI Component化の取り組み

EightのUI Component化の取り組み

Masashi

More Decks by Masashi

Other Decks in Design

Featured

Transcript

&JHIU ͷ 6*$PNQPOFOU Խͷ  औΓ૊Έ .PCJMF&OHJOFFS.FFUVQCZ4BOTBO Տลխ࢙

Տลխ࢙ 4BOTBOࣄۀ෦1SPEVDU։ൃ෦݉  &JHIUࣄۀ෦&OHJOFFSJOH(SPVQ  J04ΤϯδχΞ ೥݄  4BOTBOגࣜձࣾʹ৽ଔೖࣾ  &JHIUJ04ͷ։ൃʹैࣄ  ೥݄  4BOTBOJ04 &JHIUJ04ͷ։ൃʹैࣄ

6$PNQPOFOU w ΞϓϦέʔγϣϯͷը໘Λߏ੒͢Δ6෦඼ w ྫϢʔβʔ໊Λදࣔ͢Δ-BCFM w ྫϢʔβʔΞΠίϯΛදࣔ͢Δ*NBHF7JFX

w GPOUTJ[FQU w GPOUDPMPS#MBDL w GPOUXFJHIUTFNJCPME

w GPOUTJ[FQU w GPOUDPMPS8IJUF w GPOUXFJHIUTFNJCPME w IFJHIUQU w CBDLHSPVOEDPMPS#MVF

6$PNQPOFOUԽʹऔΓ૊Μͩഎܠ w ҰͭҰͭͷ6෦඼ʹରͯ͠4UZMFΛઃఆ͢Δͷ͸ඇޮ཰ w ઃఆͰϛεΛ͢ΔՄೳੑ΋͋Δ w σβΠϯ࢓༷ʹมߋ͕͋ͬͨ৔߹ʹɺमਖ਼࡞ۀ͕ඇޮ཰ w ը໘୯ҐͰͷमਖ਼͕ඞཁ

6*$PNQPOFOUԽͷ໨త w ։ൃͷޮ཰Խ w σβΠϯͷ౷Ұײ ੔߹ੑͷ୲อ

։ൃͷޮ཰Խ w ΧϓηϧԽ͞Ε͍ͯΔ w ࠶ར༻Մೳ w ஔ׵Մೳ

σβΠϯͷ౷Ұײ ੔߹ੑͷ୲อ w ελΠϧΨΠυͷఆٛ w ελΠϧΨΠυʹԊͬͨσβΠϯఆٛ w &JHIUͰ͸5FYU4UZMFΛఆٛ

5FYU4UZMF w 5FYUͷ4UZMFΛఆٛͨ͠ελΠϧΨΠυ w &JHIUͰ͸ɺGPOUTJ[F GPOUDPMPS GPOUXFJHIU MJOFTQBDFͷ ͭͷଐੑΛఆٛ

5FYU4UZMFͷ໋໊ GPOUDPMPS GPOUTJ[F GPOUXFJHIUΛ௚઀తʹ໋໊ʁ  ྫCMBDL8 GPOUDPMPS GPOUTJ[F GPOUXFJHIUΛந৅తʹ໋໊ʁ

GPOUDPMPS GPOUTJ[F GPOUXFJHIUΛ௚઀తʹ໋໊ w 1SPT໊લ͔Β4UZMF͕Πϝʔδ͠΍͍͢ w $POTมߋʹऑ͍ GPOUDPMPS

GPOUDPMPS GPOUTJ[F GPOUXFJHIUΛ௚઀తʹ໋໊ w 1SPT໊લ͔Β4UZMF͕Πϝʔδ͠΍͍͢ w $POTมߋʹऑ͍ GPOUDPMPS

w ;FQMJOͰ֤7JFXʹ5FYU4UZMF ໊Λهࡌ w ΤϯδχΞ͸5FYU4UZMF໊  ͚ͩΛҙࣝ

enum TextStyle: String { case Header case Body private typealias

&JHIUͰ$PNQPOFOUԽ͞Ε͍ͯΔ΋ͷ w 6-BCFM w 65FYU7JFX w 6**NBHF7JFX w 6*#VUUPO

&JHIUͰ$PNQPOFOUԽ͞Ε͍ͯΔ΋ͷ w 6-BCFM w 65FYU7JFX w 6**NBHF7JFX w 6*#VUUPO

6-BCFMΛ$PNQPOFOUԽͨ͠&JHIU-BCFM w #%FTJHOBCMFͰఆٛ͢Δ͜ͱͰOUFSGBDF#VJMEFSʹ  5FYU4UZMFΛ൓ө w #OTQFDUBCMFΛఆٛ͢Δ͜ͱͰ9DPEFͷ"UUSJCVUF OTQFDUPS͔Β5FYU4UZMFΛઃఆՄೳʹ

@IBDesignable final class EightLabel: UILabel { @IBInspectable var style: String

&JHIU-BCFMʹ5FYU4UZMFͷ൓ө

ؔ৺ͷ෼཭ w 4UPSZCPBSEͰ͸7JFXΛ഑ஔͯ͠ɺ$MBTT 5FYU4UZMFΛࢦఆ͢Δ w $PNQPOFOUͰ͸7JFXͷ4UZMFΛઃఆ͢Δ w 4UZMFͷઃఆ͕4UPSZCPBSEͱίʔυͷ྆ํͰߦΘΕΔ໰୊Λղܾ

*OUFSGBDF#VJMEFSͷݟͨ໨ͱ  ࣮ߦ݁ՌΛҰகͤ͞Δ w ಈ࡞֬ೝʹֻ͔Δ࣌ؒΛ୹ॖ w ฤू͢Δ΂͖'JMF 7JFXͷൃݟΛ༰қʹ

·ͱΊ w 6$PNQPOFOUͷಋೖʹ͸ɺΤϯδχΞͱσβΠφʔ ͷڠۀ͕ඞཁ w 6$PNQPOFOUͷಋೖίετ͸গ͠ߴ͍͕ɺ௕ظతʹ ߟ͑ΔͱಘΒΕΔϝϦοτ͕େ͖͍

ࠓ೔࿩ͤͳ͔ͬͨ͜ͱ w $PMPSͷఆٛʹ͍ͭͯ w &JHIU-BCFMҎ֎ͷ$PNQPOFOUԽ͍ͯ͠Δ΋ͷ ؾʹͳΔํ͸࠙਌ձͰ