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

React Nativeで作る「触れるプロトタイプ」の活用

Taiga Sano
April 11, 2018

React Nativeで作る「触れるプロトタイプ」の活用

2018.02.10に開催されたCookpad TechConfのLTで発表したスライド資料です

Taiga Sano

April 11, 2018
Tweet

More Decks by Taiga Sano

Other Decks in Design

Transcript

  1. ࠤ໺େՏ
    ౤ߘ։ൃ෦
    React NativeͰ࡞Δ
    ʮ৮ΕΔϓϩτλΠϓʯͷ׆༻

    View full-size slide

  2. ͩΕʁ
    2
    ࠤ໺ େՏ
    2017೥4݄ ΫοΫύου৽ଔೖࣾ
    @sn_taiga
    ౤ߘ։ൃ෦ σβΠφʔ

    View full-size slide

  3. ৮ΕΔϓϩτλΠϓͬͯʁ
    3

    View full-size slide

  4. 4
    ϓϩτλΠϓΛ࡞Δ໨తɿཱͯͨԾઆ΍ΞΠσΞΛݕূ͢Δ
    ৮ΕΔϓϩτλΠϓ
    ʹ
    ࣮ࡍͷσʔλΛѻ͍
    ຊ෺ʹ͍ۙମݧΛ΋ͱʹݕূͰ͖ΔϓϩτλΠϓ

    View full-size slide

  5. 5
    ϝϦοτ
    σϝϦοτ
    •೔ৗੜ׆ͰυοάϑʔσΟϯάͰ͖Δ

    •࣭ͷߴ͍ϑΟʔυόοά͕ಘΒΕΔ
    •ѹ౗తʹ։ൃίετ͕͔͔Δ

    •Ձ஋ݕূ͍ͨ͠ਓͱ࣮૷͢Δਓ͕Ұக͠ͳ͍έʔε͕ଟ͍
    ˠݕূ/վળͷαΠΫϧΛૉૣ͘·Θͤͳ͍

    View full-size slide

  6. 6
    ϝϦοτ
    σϝϦοτ
    •೔ৗੜ׆ͰυοάϑʔσΟϯάͰ͖Δ

    •࣭ͷߴ͍ϑΟʔυόοά͕ಘΒΕΔ
    •ѹ౗తʹ։ൃίετ͕͔͔Δ

    •Ձ஋ݕূ͍ͨ͠ਓͱ࣮૷͢Δਓ͕Ұக͠ͳ͍έʔε͕ଟ͍
    ˠݕূ/վળͷαΠΫϧΛૉૣ͘ߦ͑ͳ͍
    ։ൃϑΣʔζ΍໨తʹ߹Θͤͯద੾ʹ࢖͏
    લఏ
    ௿ίετͰૉૣ͍վળ͕Ͱ͖Δ؀ڥ
    + ཧ૝

    View full-size slide

  7. 7
    ྉཧ·ͱΊ
    ࣗ෼ͷϨγϐΛ೚ҙʹ·ͱΊͯ

    ϚΠϖʔδʹެ։Ͱ͖Δ
    ڈ೥8݄ʹػೳϦϦʔε

    View full-size slide

  8. 8
    ࣗ෼ͷྉཧΛςʔϚͰදݱͨ͠Γݟ
    ฦͨ͠Γ͍͚ͨ͠Ͳɺݱঢ়ཷΊΕ͹
    ͨΊΔ΄ͲࢄΒ͔ͬͯ͠·͏
    Ϣʔβʔͷ
    ՝୊΍ԾઆΛ੔ཧ
    ࣗ෼ͷྉཧΛ೚ҙʹ·ͱΊΒΕΔ
    ͜ͱʹՁ஋͕͋Δ
    ϖʔύʔϞοΫ ΠϯλϥΫγϣϯ

    ϞοΫ
    ΞΠσΞΛ۩ମԽ


    ࣮ࡍʹࣗ෼Ͱ·ͱΊͯݟͯΈ͍ͨ
    ͦͷ্ͰϕετͳύλʔϯΛݟ͚͍ͭͨ
    G

    View full-size slide

  9. ϓϩτλΠϓ؀ڥͷ঺հ
    9

    View full-size slide

  10. 10
    ج൫ͱͯ͠3FDU/BUJWF
    render() { return Hello; }
    ΫοΫύουΞϓϦͷػೳ͕Ұ௨Γଗ͍ͬͯΔ
    EFWFMPQFS
    1SPUPUZQF-BCT
    ΞΠσΞͷՁ஋ݕূઐ༻ͷωΠςΟϒΞϓϦ

    View full-size slide

  11. 11
    ج൫ͱͯ͠3FDU/BUJWF
    render() { return Hello; }
    ΫοΫύουΞϓϦͷػೳ͕Ұ௨Γଗ͍ͬͯΔ
    EFWFMPQFS
    1SPUPUZQF-BCT
    ΞΠσΞͷՁ஋ݕূઐ༻ͷωΠςΟϒΞϓϦ
    Կ͜Ε࠷ߴͰ͸ʜ

    View full-size slide

  12. Կ͕࠷ߴʁ
    12
    •ʢωΠςΟϒʹൺ΂ͯʣٕज़తͳෑډ͕௿͍

    • WebͷϚʔΫΞοϓʹ׳Ε͍ͯΕ͹σβΠφʔͰ΋਌͠Έ΍͍͢ه๏ͰView
    ΍ελΠϧͷ࡞੒͕Ͱ͖Δ

    • ίϯϙʔωϯτ୯ҐͰϏϡʔ͕؅ཧ͞Ε͍ͯͯཧղ͠΍͍͢

    •iOS, AndroidͦΕͧΕʹ഑෍Ͱ͖Δʢςελʔ͕ීஈ࢖͍ͬͯΔ؀ڥͰΞϓϦΛఏ
    ڙͰ͖Δʣ

    View full-size slide

  13. ࢖༻ྫ
    13
    Φʔφʔ݉ΤϯδχΞ σβΠφʔ
    UIΛݕ౼ ݕূ
    ࣮૷
    ػೳͷେ࿮Λ࣮૷
    ϓϩμΫγϣϯͷ
    ։ൃ΁
    G G

    View full-size slide

  14. ࣮ࡍʹ৮ͬͯ΋Βͬͯ
    14
    ·ͱΊΔػೳྑ͍ʂ
    ±
    ·ͱΊΔର৅ΛϨγϐͷΈʹͨ͠ΒͲ͏ͩΖ͏ʁ࡞ͬͯΈΑ͏ɻ
    ͍Ζ͍Ζ·ͱΊΒΕΔ͜ͱΛߟ͚͑ͯͨͲɺ
    ΊͬͪΌ͍͍͡ΌΜ
    ±
    ͚Ͳ·ͱΊΔର৅͕ଟͯͪ͘ΐͬͱ໘౗ɻɻ
    → Ծઆ͕֬৴ʹ
    ϑΟʔυόοΫ͔Β͙͢վળҊΛग़ͯ͠ࢼͤΔ

    View full-size slide

  15. ࣮ࡍʹ৮ͬͯ΋Βͬͯ
    15
    ࠓ3άϦουද͚ࣔͩͲ2άϦουʹͨ͠ΒͲ͏ͩΖ͏
    ࣮ࡍͷσʔλΛ࢖͍ͭͭखݩͰ͙͢ݕূͰ͖Δ
    2ʹͯ͠Έ͚ͨͲݟฦָͯ͘͠͠ͳ͍ͳɺ3ʹ͠Α͏ɻ

    View full-size slide

  16. ϝϦοτ/σϝϦοτ
    16
    σβΠφʔͰ΋৮ΕΔϓϩτλΠϓͷ؆୯ͳ࣮૷͕ՄೳʹͳΓɺ
    ࣭ͷߴ͍ݕূ⁶վળΛҰ೚ͯ͠ૉૣ͘ߦ͑Δ


    ෳࡶͳը໘΍Ξχϝʔγϣϯͷදݱ͸ͮ͠Β͍

    View full-size slide

  17. ·ͱΊ
    17
    •ʮ৮ΕΔϓϩτλΠϓʯΛ࢖ͬͨυοάϑʔσΟϯά΍ɺগਓ਺
    Ͱૉૣ͍ݕূ/վળͰ͖Δ؀ڥΛ׆༻͠ɺϢʔβʔͷମݧ޲্·Ͱ
    མͱ͠ࠐΜͰ͍Δɻ
    •࣭ͷߴ͍ݕূ͕Ͱ͖Δ൓໘ɺ։ൃίετ͕ߴ͍ͷͰɺద੾ͳ
    ϑΣʔζ΍໨తͰ࡞Δ͜ͱɺଞͷϓϩτλΠϓख๏ͱͷ࢖͍෼͚
    ͸ඞਢ
    ͱ͸͍͑

    View full-size slide

  18. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View full-size slide