Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Nativeで作る「触れるプロトタイプ」の活用
Search
Taiga Sano
April 11, 2018
Design
1
1.3k
React Nativeで作る「触れるプロトタイプ」の活用
2018.02.10に開催されたCookpad TechConfのLTで発表したスライド資料です
Taiga Sano
April 11, 2018
Tweet
Share
More Decks by Taiga Sano
See All by Taiga Sano
レシピサービスに買い物体験を組み込むにあたって向き合った課題と解決までの話
sn_taiga
0
4k
2020 Cookpad Online Spring Internship
sn_taiga
1
2.6k
ReDesigner Meetup 2020 Winter
sn_taiga
0
1.3k
クックパッドのサービス開発の日常とデザイナーの醍醐味
sn_taiga
1
8k
エディタの入力時間を11%減らした話
sn_taiga
0
200
「よさそう」から「絶対いい」にするための価値検証
sn_taiga
1
1.2k
Cookpad Design Bar
sn_taiga
0
33
Other Decks in Design
See All in Design
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
530
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
130
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3.5k
AIで加速するアクセシビリティのこれから
magi1125
3
650
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
110
The Spectacular Lies of Maps
axbom
PRO
1
260
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
610
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
280
Them Middle School Kids Pitch
stevie_vee
0
120
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.6k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
302
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Building Adaptive Systems
keathley
43
2.7k
Docker and Python
trallard
45
3.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fireside Chat
paigeccino
39
3.6k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Code Reviewing Like a Champion
maltzj
525
40k
Transcript
ࠤେՏ ߘ։ൃ෦ React NativeͰ࡞Δ ʮ৮ΕΔϓϩτλΠϓʯͷ׆༻
ͩΕʁ 2 ࠤ େՏ 20174݄ ΫοΫύου৽ଔೖࣾ @sn_taiga ߘ։ൃ෦ σβΠφʔ
৮ΕΔϓϩτλΠϓͬͯʁ 3
4 ϓϩτλΠϓΛ࡞ΔతɿཱͯͨԾઆΞΠσΞΛݕূ͢Δ ৮ΕΔϓϩτλΠϓ ʹ ࣮ࡍͷσʔλΛѻ͍ ຊʹ͍ۙମݧΛͱʹݕূͰ͖ΔϓϩτλΠϓ
5 ϝϦοτ σϝϦοτ •ৗੜ׆ͰυοάϑʔσΟϯάͰ͖Δ •࣭ͷߴ͍ϑΟʔυόοά͕ಘΒΕΔ •ѹతʹ։ൃίετ͕͔͔Δ •Ձݕূ͍ͨ͠ਓͱ࣮͢Δਓ͕Ұக͠ͳ͍έʔε͕ଟ͍ ˠݕূ/վળͷαΠΫϧΛૉૣ͘·Θͤͳ͍
6 ϝϦοτ σϝϦοτ •ৗੜ׆ͰυοάϑʔσΟϯάͰ͖Δ •࣭ͷߴ͍ϑΟʔυόοά͕ಘΒΕΔ •ѹతʹ։ൃίετ͕͔͔Δ •Ձݕূ͍ͨ͠ਓͱ࣮͢Δਓ͕Ұக͠ͳ͍έʔε͕ଟ͍ ˠݕূ/վળͷαΠΫϧΛૉૣ͘ߦ͑ͳ͍ ։ൃϑΣʔζతʹ߹Θͤͯదʹ͏ લఏ
ίετͰૉૣ͍վળ͕Ͱ͖Δڥ + ཧ
7 ྉཧ·ͱΊ ࣗͷϨγϐΛҙʹ·ͱΊͯ ϚΠϖʔδʹެ։Ͱ͖Δ ڈ8݄ʹػೳϦϦʔε
8 ࣗͷྉཧΛςʔϚͰදݱͨ͠Γݟ ฦͨ͠Γ͍͚ͨ͠Ͳɺݱঢ়ཷΊΕ ͨΊΔ΄ͲࢄΒ͔ͬͯ͠·͏ Ϣʔβʔͷ ՝ԾઆΛཧ ࣗͷྉཧΛҙʹ·ͱΊΒΕΔ ͜ͱʹՁ͕͋Δ ϖʔύʔϞοΫ ΠϯλϥΫγϣϯ
ϞοΫ ΞΠσΞΛ۩ମԽ ࣮ࡍʹࣗͰ·ͱΊͯݟͯΈ͍ͨ ͦͷ্ͰϕετͳύλʔϯΛݟ͚͍ͭͨ G
ϓϩτλΠϓڥͷհ 9
10 ج൫ͱͯ͠3FDU/BUJWF render() { return <Text>Hello</Text>; } ΫοΫύουΞϓϦͷػೳ͕Ұ௨Γଗ͍ͬͯΔ EFWFMPQFS 1SPUPUZQF-BCT
ΞΠσΞͷՁݕূઐ༻ͷωΠςΟϒΞϓϦ
11 ج൫ͱͯ͠3FDU/BUJWF render() { return <Text>Hello</Text>; } ΫοΫύουΞϓϦͷػೳ͕Ұ௨Γଗ͍ͬͯΔ EFWFMPQFS 1SPUPUZQF-BCT
ΞΠσΞͷՁݕূઐ༻ͷωΠςΟϒΞϓϦ Կ͜Ε࠷ߴͰʜ
Կ͕࠷ߴʁ 12 •ʢωΠςΟϒʹൺͯʣٕज़తͳෑډ͕͍ • WebͷϚʔΫΞοϓʹ׳Ε͍ͯΕσβΠφʔͰ͠Έ͍͢ه๏ͰView ελΠϧͷ࡞͕Ͱ͖Δ • ίϯϙʔωϯτ୯ҐͰϏϡʔ͕ཧ͞Ε͍ͯͯཧղ͍͢͠ •iOS, AndroidͦΕͧΕʹͰ͖Δʢςελʔ͕ීஈ͍ͬͯΔڥͰΞϓϦΛఏ
ڙͰ͖Δʣ
༻ྫ 13 Φʔφʔ݉ΤϯδχΞ σβΠφʔ UIΛݕ౼ ݕূ ࣮ ػೳͷେΛ࣮ ϓϩμΫγϣϯͷ ։ൃ
G G
࣮ࡍʹ৮ͬͯΒͬͯ 14 ·ͱΊΔػೳྑ͍ʂ ± ·ͱΊΔରΛϨγϐͷΈʹͨ͠ΒͲ͏ͩΖ͏ʁ࡞ͬͯΈΑ͏ɻ ͍Ζ͍Ζ·ͱΊΒΕΔ͜ͱΛߟ͚͑ͯͨͲɺ ΊͬͪΌ͍͍͡ΌΜ ± ͚Ͳ·ͱΊΔର͕ଟͯͪ͘ΐͬͱ໘ɻɻ →
Ծઆ͕֬৴ʹ ϑΟʔυόοΫ͔Β͙͢վળҊΛग़ͯ͠ࢼͤΔ
࣮ࡍʹ৮ͬͯΒͬͯ 15 ࠓ3άϦουද͚ࣔͩͲ2άϦουʹͨ͠ΒͲ͏ͩΖ͏ ࣮ࡍͷσʔλΛ͍ͭͭखݩͰ͙͢ݕূͰ͖Δ 2ʹͯ͠Έ͚ͨͲݟฦָͯ͘͠͠ͳ͍ͳɺ3ʹ͠Α͏ɻ
ϝϦοτ/σϝϦοτ 16 σβΠφʔͰ৮ΕΔϓϩτλΠϓͷ؆୯ͳ࣮͕ՄೳʹͳΓɺ ࣭ͷߴ͍ݕূ⁶վળΛҰͯ͠ૉૣ͘ߦ͑Δ ෳࡶͳը໘Ξχϝʔγϣϯͷදݱͮ͠Β͍
·ͱΊ 17 •ʮ৮ΕΔϓϩτλΠϓʯΛͬͨυοάϑʔσΟϯάɺগਓ Ͱૉૣ͍ݕূ/վળͰ͖ΔڥΛ׆༻͠ɺϢʔβʔͷମݧ্·Ͱ མͱ͠ࠐΜͰ͍Δɻ •࣭ͷߴ͍ݕূ͕Ͱ͖Δ໘ɺ։ൃίετ͕ߴ͍ͷͰɺదͳ ϑΣʔζతͰ࡞Δ͜ͱɺଞͷϓϩτλΠϓख๏ͱͷ͍͚ ඞਢ ͱ͍͑
͋Γ͕ͱ͏͍͟͝·ͨ͠