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

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