σβΠϯΨΠυϥΠϯΛ࡞ΔWebαʔϏεΛ࡞͍ͬͯΔMerpay, Inc ϑϩϯτΤϯυΤϯδχΞ@sawa-zen@sawa-zen (2018/6/22) react-na5ve-meetup
View Slide
@sawa-zenॴଐɿMerpay, Inc৬छɿϑϩϯτΤϯυΤϯδχΞ/ΠϯλϥΫγϣϯσβΠφʔThree.jsReactSketchAppBlenderYouTuberେ͖@sawa-zen (2018/6/22) react-na5ve-meetup
react-primi*vesͬͯͬͯ·͔͢ʁ@sawa-zen (2018/6/22) react-na5ve-meetup
react-primi*vesͱʁ• ϓϥοτϑΥʔϜຖͷAPIʹࠨӈ͞Εͣڞ௨Ͱ༻Ͱ͖ΔΠϯλʔϑΣʔε• ҎԼͷrenderʹରͯ͠ಉ͡ίʔυͰView͕࡞ΕΔ• react-dom• react-na.ve• react-sketchapp@sawa-zen (2018/6/22) react-na5ve-meetup
ػೳ• View: ϨΠΞτͷͨΊͷίϯϙʔωϯτ• Text: ςΩετͷͨΊͷίϯϙʔωϯτ• Image: ը૾ͷͨΊͷίϯϙʔωϯτ• Touchable: ΠϯλϥΫγϣϯͷͨΊͷίϯϙʔωϯτ• StyleSheet: ReactNa9ve ͷ StyleSheet ͱಉ͡@sawa-zen (2018/6/22) react-na5ve-meetup
ఆ͠͏Δ࣮༻ྫσβΠϯஈ֊ͰίʔυͰUIΛ࡞͠ίϯϙʔωϯτΛΤϯδχΞʹڞ༗͢Δ@sawa-zen (2018/6/22) react-na5ve-meetup
@sawa-zen (2018/6/22) react-na5ve-meetup
ͬͯΈͨ!!@sawa-zen (2018/6/22) react-na5ve-meetup
ײ• ෳࡶͳViewͷ߹एׯͷݟͨͷࠩҟ͕ؾʹͳΔ• σβΠφʔ͞Μʹ͜ͷίʔυॻ͔ͤΔͷࠅ• ܕఆٛϑΝΠϧ͕ແͯ͘ෆ҆@sawa-zen (2018/6/22) react-na5ve-meetup
ײ• ෳࡶͳViewͷ߹एׯͷݟͨͷࠩҟ͕ؾʹͳΔ• σβΠφʔ͞Μʹ͜ͷίʔυॻ͔ͤΔͷࠅ• ܕఆٛϑΝΠϧ͕ແͯ͘ෆ҆=> C͚ͷϓϩμΫτʹ࣮༻తͰͳ͍@sawa-zen (2018/6/22) react-na5ve-meetup
ଞʹ༻్ແ͍ͷ͔!@sawa-zen (2018/6/22) react-na5ve-meetup
Ͳ͏͍͏༻్Ͱ͋Ε͑ͦ͏͔ʁ• ෳࡶͳViewΛඞཁͱ͠ͳ͍• ݎ࿚͞Λඞཁͱ͠ͳ͍• σβΠφʔ͞Μ͕ίʔυΛॻ͘ඞཁ͕ͳ͍@sawa-zen (2018/6/22) react-na5ve-meetup
ۀޮԽπʔϧͰ͋Ε͍͚ΔͷͰ?!@sawa-zen (2018/6/22) react-na5ve-meetup
͔͜͜Β͕ຊ@sawa-zen (2018/6/22) react-na5ve-meetup
͜ΜͳΛ࡞Γ࢝Ί·ͨ͠ελΠϧΨΠυϥΠϯΛWeb্Ͱ࡞Ͱ͖Δπʔϧ• SketchͷϓϥάΠϯͱͯ͠ViewΛॻ͖ग़ͤΔ• ΨΠυϥΠϯʹؔΘΔใΛjsonͰॻ͖ग़ͤΔ• Χϥʔ• ςΩετελΠϧ• etc...@sawa-zen (2018/6/22) react-na5ve-meetup
DEMO@sawa-zen (2018/6/22) react-na5ve-meetup
Կ͕ྑ͍ͷ͔• σβΠφʔ͕GUIૢ࡞Ͱѻ͑Δ• jsonͱ͕ͯ͠Β͑Δ• ViewϥΠϒϥϦʹ੍ݶ͞Εͳ͍• JSͰͳͯ͘ѻ͑Δ@sawa-zen (2018/6/22) react-na5ve-meetup
Կ͕ྑ͍ͷ͔• σβΠφʔ͕GUIૢ࡞Ͱѻ͑Δ• jsonͱ͕ͯ͠Β͑Δ• ViewϥΠϒϥϦʹ੍ݶ͞Εͳ͍• JSͰͳͯ͘ѻ͑Δ=> react-primi-ves͕ແବʹͳΒͳ͍ʂ@sawa-zen (2018/6/22) react-na5ve-meetup
ࠓޙͷల• ֤ฤूػೳ• font-famiryύλʔϯ• marginύλʔϯ• border-radiusύλʔϯ• jsonͷexport/importػೳ@sawa-zen (2018/6/22) react-na5ve-meetup