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.1k
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
3.8k
2020 Cookpad Online Spring Internship
sn_taiga
1
2.4k
ReDesigner Meetup 2020 Winter
sn_taiga
0
1.2k
クックパッドのサービス開発の日常とデザイナーの醍醐味
sn_taiga
1
7.6k
エディタの入力時間を11%減らした話
sn_taiga
0
180
「よさそう」から「絶対いい」にするための価値検証
sn_taiga
1
1.1k
Cookpad Design Bar
sn_taiga
0
16
Other Decks in Design
See All in Design
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
0
320
意志と、デザインと、ときどきお金
transit_kix
2
1.9k
Wishing Star Comic
torije
1
1k
「これをゲームにしたい!」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.1k
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
150
Data, Design and Government
hik0107
45
31k
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.2k
事業とともに成長するデザイン環境を目指して / Designship2023
root_recruit
0
130
モデル・デザイン入門
akitsugu7935
0
400
社内管理画面のデザインもプロダクトデザイン
takanorip
3
670
3D空間を扱うUI表現とユーザビリティ
akinen
0
390
🇫🇷 Dogmes et Design Systems, comment faire autrement
morganepeng
0
190
Featured
See All Featured
Building Adaptive Systems
keathley
29
1.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Docker and Python
trallard
33
2.6k
Product Roadmaps are Hard
iamctodd
43
9.6k
Infographics Made Easy
chrislema
237
17k
Clear Off the Table
cherdarchuk
82
310k
The Pragmatic Product Professional
lauravandoore
24
5.7k
GitHub's CSS Performance
jonrohan
1023
450k
Ruby is Unlike a Banana
tanoku
95
10k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Happy Clients
brianwarren
91
6.3k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
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 •ʮ৮ΕΔϓϩτλΠϓʯΛͬͨυοάϑʔσΟϯάɺগਓ Ͱૉૣ͍ݕূ/վળͰ͖ΔڥΛ׆༻͠ɺϢʔβʔͷମݧ্·Ͱ མͱ͠ࠐΜͰ͍Δɻ •࣭ͷߴ͍ݕূ͕Ͱ͖Δ໘ɺ։ൃίετ͕ߴ͍ͷͰɺదͳ ϑΣʔζతͰ࡞Δ͜ͱɺଞͷϓϩτλΠϓख๏ͱͷ͍͚ ඞਢ ͱ͍͑
͋Γ͕ͱ͏͍͟͝·ͨ͠