Design System Discussion

Transcript

1. Design System Discussion 2019/09/19 @ SmartHR ΦϑΟε

2. Panelist

3. ݹ઒ͷελϯε • σβΠϯγεςϜջٙ೿ • σβΠϯγεςϜࣗମ͸ྑ͍ • අ༻ରޮՌ͕ٙ໰

4. ͜ͷٞ࿦ͷΰʔϧ • σβΠϯγεςϜͷٙ໰ʹ͍ͭͯҙݟΛͿͭ ͚ɺճ౴ΛಘΔ • σβΠϯγεςϜͷམͱ͠ॴΛ͠Δ

5. ͦ΋ͦ΋࿦ • ͏·͍ͬͯ͘Δʁ • य़໺͞Μ: ͻͱ·ͣೖΕͯΈ͚ͨͲɺࠓͷॴճͤͯΔɻ͜Ε͔Βɺ͏·͍ͬͯ͘Δ͔Ͳ͏͔͸൒ʑɺ࡞͍͖͍ͬͯͨͱ ͍͏৺ҙؾ͕͋Δɻ • ݱঢ়͸ࣾ಺ͷޮ཰ԽͷͨΊͷπʔϧͱ͔ͯ͠͠ݕ౼͍ͯ͠ͳ͍ •

   ࣾ಺ͷޮ཰Խ͕ϝΠϯͷ͜ͱ͕ଟ͍ => Ϗδωε·Ͱམͱ͢ॴ·Ͱ͍͚ͯͳ͍ • ੴڮ͞Μ: ಉ͘͡ɺࠓͷॴ͸΍ͬͯΔ͕ɺ͏·͘ݴͬͯΔ͔Ͳ͏͔ͷධՁ͸·ͩԼͤͳ͍ɻ • উखʹ࡞ۭͬͯதʹු͘ͷ͸΍Ί͔ͨͬͨɻ • খ͘͞࡞ͬͯɺϓϩμΫγϣϯͰಈ͍ͯΔΑ͏ʹ͔ͨͬͨ͠ɻ • => ͜͜͸ୡ੒ɺελʔτ͔ͯ͠Β൒೥ • ٶݪ͞Μ: ͓ۚʹ௓Ͷͯͳ͍ɺ͏·͘ݴͬͯͳ͍ͱࢥͬͯΔɻ • ·ͩ૸Γग़͠Ͱ౤ࢿظؒɺ։ൃੜ࢈ੑʹͪΌΜͱϑΟʔυόοΫ͍ͯ͘͠ͱΑ͍

6. ͦ΋ͦ΋࿦ • ಋೖͨ͠͹͔Γ? • ಋೖͯ͠ӡ༻ͯ͠Δ? • ӡ༻੒ख़ظ? • य़໺͞Μ: 1೥

   • ੴڮ͞Μ ൒೥ • ٶݪ͞Μ 3ϲ݄ • य़໺͞Μ͸1೥ؒӡ༻ͯ͠Δ͕ɺͦ΋ͦ΋͕σβΠϯ౷Ұ͞Εͯͳ͍ɺ։ൃͷUI͕ό ϥόϥͳͲͷঢ়گ͔Β࢝·ͬͨɻ

7. ͦ΋ͦ΋࿦ • σβΠϯγεςϜͷॳखͰ΍Δ͜ͱ: • ٶݪ: ͓ߦّΑ͘΍ͬͯͳ͍ɺύλʔϯΛચ͍ग़͠ͱ͔΍ͬͯͳ͍ɺ࠷ॳʹτοϓμ΢ϯͷ͋Δ΂͖࢟ͷશମ ૾࡞ͬͯΔɺػೳతʹ੔ཧͯ͠ϘτϜΞοϓ΋࡞Δɺτοϓμ΢ϯͱϘτϜΞοϓͷ྆ํ͔Β߈ΊΔ • લ৬͸ΞτϛοΫσβΠϯ͕ࣦഊ =>

   ޙͰฉ͘ • ੴڮ͞Μ σβΠϯγεςϜͷγεςϚνοΫͳͱ͜ΖΛ͍Ε͍ͨɺͲ͏΍ͬͯ੾Γ෼͚ͯೖΕ͍͔ͯ͘Λ૬ ஊ • Ұ୴ϖʔδΛεΫγϣͯ͠ɺϋαϛͰ੾ͬͯ·ͱΊ͍ͯͬͨ • ࠷ॳ͔Β׬ᘳ͸໨ࢦ͞ͳ͔ͬͨ • ΧϥʔύϨοτ͸࠷ॳ͔ΒܾΊͯྑ͍ͷͰ͸ => ૝૾ͱҧͬͯͨ͘͞Μ͋ͬͨɻ • य़໺͞Μ ελΠϧΨΠυΛ࡞͍ͬͯͬͯɺ͢Ͱʹ͋Δϖʔδ͔ΒίϯϙʔωϯτΛચ͍ग़͢ͷ͸Ұॹɺύʔ πύʔπͰ࡞͍ͬͯ͘ɻ

8. ͦ΋ͦ΋࿦ • σβΠϯγεςϜͬͯݴͬͨ࣌ʹͲ͜·Ͱ΍ͬͯΔ? • UIKitͱ͔΋࡞ͬͯΔʁ • Styleguideͱ͔͸ʁ • ͦΕͱ΋σβΠϯͷυΩϡϝϯτԽ =

   ϧʔϧͱݪଇͷ໌จԽͷΈʁ • य़໺͞Μ: UIKit, StyleGuide, React Component ͷఏڙ • ੴڮ͞Μ: ΄΅ࣅ͍ͯΔɺUIιʔείʔυɺ։ൃऀ޲͚υΩϡϝϯτɺσβΠϯͷυΩϡϝϯτ Խ͕Ͱ͖ͯͳ͍ • ٶݪ͞Μ: sketch library, React Component, UIKit આ໌͢ΔΨΠυϥΠϯ • σβΠφʔࣗ਎͕ίʔσΟϯά͍ͯ͠Δ

9. ૊৫࿦ • σβΠφʔͱΤϯδχΞ͕Ͳ͏΍ͬͯڠۀͯ͠ Δͷ͔ •

10. ૊৫࿦ • σβΠφʔɺΤϯδχΞ͚ͩͰ͸ͳ͘ɺϓϥϯφʔ·Ͱ͍ࠞͥͯ͘ඞཁ͕͋ΔͷͰɺ ͦͷลΓͷԹ౓ײΛͲ͏΍ͬͯௐ੔ͯ͠Δͷ͔ • ੴڮ͞Μ: σβΠφʔ͕ϫΠϠʔΛߟ͑Δ΂͖ͩͱࢥͬͯΔɺσβΠϯγεςϜΛε ΫϥϜͷதͰಋೖ͢Δ΂͖ͩͱࢥͬͯΔ͕Ͱ͖͍ͯͳ͍ • य़໺͞Μ:

    σβΠφʔ͚ͩͰ΍ͬͯΔɺΤϯδχΞͱڠۀ͸͜Ε͔ΒɻσβΠφʔ͕ ओମͰ΍ͬͯΔ͚ͩͰ͜Ε͔Βͷͱ͜Ζ͕ଟ͍ • ٶݪ͞Μ: SmartHRͰ͸ظ଴஋શһἧͬͯΔ => લ৬͸ɺσβΠϯΛΩϨΠʹͯ͠΋ Ϗδωεʹܨ͕Βͳ͍ͷͰ͸ʁͱ͋ͬͨͷͰɺࣾ಺ϚʔέςΟϯά΍ΩϟϥΫλʔ ෇Λ͍ͯͬͨ͠ɻ • σβΠϯγεςϜνʔϜ ͷ໊લΛ vibes ʹ͍ͯͬͨ͠ɺόΠϒε͋͛͋͛ͬͯ͜ͱʁ

11. ։ൃ࿦ • Storybook͕෗Γ΍͍͢໰୊Ͳ͏ͯ͠Δ? • ٶݪ͞Μ: ઈࢍ෗ͬͯΔʂͨͩSmartHR͸౤ࢿʹ͍ͭͯ͸ΈΜͳagreeͳͷͰݴ͏͜ ͱແ͍ɻલ৬͸ΤϯδχΞͷOKRͷதʹೖΕ͍ͯͬͨɻ • ੴڮ͞Μ: ࡞ͬͨUIϥΠϒϥϦ͸ඞͣόʔδϣχϯάͯ͠Δɺͦͷࠩ෼͸Θ͔ΔΑ͏

    ʹͯ͠Δɺࡉ͔͍ͷ͸ඞ͍͔ͣͯ͠ͳ͍ͱ͍͚ͳ͍ɻࣾ಺ͷͲΜͳਓͰ΋ίϛοτ ͯ͠ྑ͍͜ͱʹͨ͠ɻ׬શʹࣾ಺ͰOSSʹ͢Δͷ͸ແ஡ͩͬͨͷͰɺϝΠϯϝϯς φΛೖΕΔͳͲΛݕ౼ͨ͠ • य़໺͞Μ: ࢲ͕Storybookܯ࡯ͩɻදࣔ֬ೝͱͯ͠࠷ॳ͸΍͍͕ͬͯͨɺ͍ͭ࠷ۙ Storybook v5.2͕ग़ͯɺΞϧϑΝ൛͔Β࢖ͬͯΔaddon docs͕ग़ͯɺͦΕʹ߹Θͤ ͯstorybookࣗମΛϝϯςφϯε͍ͯ͠Δ

12. ։ൃ࿦ • ͦ΋ͦ΋StorybookۦಈͰ։ൃͱ͔΍ͬͯΔ?

13. ։ൃ࿦ • ͦ΋ͦ΋StorybookۦಈͰ։ൃͱ͔΍ͬͯΔ?

14. Q&A • σβΠϯγεςϜΛطଘͷϓϩδΣΫτʹஈ ֊తʹಋೖͨ͠ਓ or ಋೖ͍ͯ͠Δਓ͕ډΔ͔ ฉ͍ͯ΄͍͠Ͱ͢ʂ

15. Q&A • 1. ԿΛओ໨తʹσβΠϯγεςϜͷ੔උΛ࢝Ί·͔ͨ͠ʁ • ex. ϒϥϯυΞΠσϯςΟςΟͷೝ஌ɺϢʔβೝ஌ෛՙͷ ܰݮɺσβΠϯίετ࡟ݮɺ࣮૷ίετ࡟ݮ • 2.

    σβΠϯγεςϜͷӡ༻ΛͲͷ໾ׂɺ৬छͷਓ͕ओಋ͠ ͯ·͔͢ʁ

16. Q&A • σόΠεؒͷࠩ෼ΛͲ͏ѻ͏ͷ͔օͷ஌ݟฉ ͖͍ͨͰ͢ࢲɻ • ωΠςΟϒͷ iOS ͱ Android Ͱ

    Platform ʹ ߹Θͤͨύʔπ (τάϧεΠονͱ͔) ͕͋ͬ ͨ৔߹ɺWeb ΛͲ͏͢Δ͔ɻ৔߹ʹΑͬͯ͸ WebView Ͱ͍͢͝ࠔΔΜͰ͢ΑͶɻɻɻ