Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8

sawa-zen
June 22, 2018

デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8

sawa-zen

June 22, 2018
Tweet

More Decks by sawa-zen

Other Decks in Design

Transcript

  1. σβΠϯΨΠυϥΠϯΛ࡞Δ
    WebαʔϏεΛ࡞͍ͬͯΔ࿩
    Merpay, Inc ϑϩϯτΤϯυΤϯδχΞ
    @sawa-zen
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  2. @sawa-zen
    ॴଐɿMerpay, Inc
    ৬छɿϑϩϯτΤϯυΤϯδχ
    Ξ/ΠϯλϥΫγϣϯσβΠφʔ
    Three.js
    React
    SketchApp
    Blender
    YouTuberେ޷͖
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  3. react-primi*vesͬͯ
    ஌ͬͯ·͔͢ʁ
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  4. react-primi*vesͱ͸ʁ
    • ϓϥοτϑΥʔϜຖͷAPIʹࠨӈ͞Εͣڞ௨Ͱ࢖༻
    Ͱ͖ΔΠϯλʔϑΣʔε
    • ҎԼͷrenderʹରͯ͠ಉ͡ίʔυͰView͕࡞ΕΔ
    • react-dom
    • react-na.ve
    • react-sketchapp
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  5. ػೳ
    • View: ϨΠΞ΢τͷͨΊͷίϯϙʔωϯτ
    • Text: ςΩετͷͨΊͷίϯϙʔωϯτ
    • Image: ը૾ͷͨΊͷίϯϙʔωϯτ
    • Touchable: ΠϯλϥΫγϣϯͷͨΊͷίϯϙʔω
    ϯτ
    • StyleSheet: ReactNa9ve ͷ StyleSheet ͱಉ͡
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  6. ૝ఆ͠͏Δ࣮༻ྫ
    σβΠϯஈ֊ͰίʔυͰUIΛ࡞੒͠
    ίϯϙʔωϯτΛΤϯδχΞʹڞ༗͢Δ
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  7. @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  8. ΍ͬͯΈͨ!!
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  9. @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  10. @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  11. ײ૝
    • ෳࡶͳViewͷ৔߹एׯͷݟͨ໨ͷࠩҟ͕ؾʹͳΔ
    • σβΠφʔ͞Μʹ͜ͷίʔυॻ͔ͤΔͷ͸ࠅ
    • ܕఆٛϑΝΠϧ͕ແͯ͘ෆ҆
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  12. ײ૝
    • ෳࡶͳViewͷ৔߹एׯͷݟͨ໨ͷࠩҟ͕ؾʹͳΔ
    • σβΠφʔ͞Μʹ͜ͷίʔυॻ͔ͤΔͷ͸ࠅ
    • ܕఆٛϑΝΠϧ͕ແͯ͘ෆ҆
    => C޲͚ͷϓϩμΫτʹ͸࣮༻తͰ͸ͳ͍
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  13. ଞʹ༻్͸ແ͍΋ͷ͔
    !
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  14. Ͳ͏͍͏༻్Ͱ͋Ε͹࢖͑ͦ͏͔ʁ
    • ෳࡶͳViewΛඞཁͱ͠ͳ͍
    • ݎ࿚͞Λඞཁͱ͠ͳ͍
    • σβΠφʔ͞Μ͕ίʔυΛॻ͘ඞཁ͕ͳ͍
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  15. ۀ຿ޮ཰ԽπʔϧͰ͋Ε͹
    ͍͚ΔͷͰ͸?
    !
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  16. ͔͜͜Β͕ຊ୊
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  17. ͜Μͳ෺Λ࡞Γ࢝Ί·ͨ͠
    ελΠϧΨΠυϥΠϯΛWeb্Ͱ࡞੒Ͱ͖Δπʔϧ
    • SketchͷϓϥάΠϯͱͯ͠ViewΛॻ͖ग़ͤΔ
    • ΨΠυϥΠϯʹؔΘΔ৘ใΛjsonͰॻ͖ग़ͤΔ
    • Χϥʔ
    • ςΩετελΠϧ
    • etc...
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  18. @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  19. DEMO
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  20. Կ͕ྑ͍ͷ͔
    • σβΠφʔ͕GUIૢ࡞Ͱѻ͑Δ
    • jsonͱͯ͠஋͕΋Β͑Δ
    • ViewϥΠϒϥϦʹ੍ݶ͞Εͳ͍
    • JSͰͳͯ͘΋ѻ͑Δ
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  21. Կ͕ྑ͍ͷ͔
    • σβΠφʔ͕GUIૢ࡞Ͱѻ͑Δ
    • jsonͱͯ͠஋͕΋Β͑Δ
    • ViewϥΠϒϥϦʹ੍ݶ͞Εͳ͍
    • JSͰͳͯ͘΋ѻ͑Δ
    => react-primi-ves͕ແବʹͳΒͳ͍ʂ
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide

  22. ࠓޙͷల๬
    • ֤ฤूػೳ
    • font-famiryύλʔϯ
    • marginύλʔϯ
    • border-radiusύλʔϯ
    • jsonͷexport/importػೳ
    @sawa-zen (2018/6/22) react-na5ve-meetup

    View Slide