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.5k
ReDesigner Meetup 2020 Winter
sn_taiga
0
1.2k
クックパッドのサービス開発の日常とデザイナーの醍醐味
sn_taiga
1
7.7k
エディタの入力時間を11%減らした話
sn_taiga
0
190
「よさそう」から「絶対いい」にするための価値検証
sn_taiga
1
1.1k
Cookpad Design Bar
sn_taiga
0
25
Other Decks in Design
See All in Design
What Was UX Design All About?
ykazu
3
600
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
220
私たちが取り組んできたアクセシビリティと これから取り組んでいくアクセシビリティについて
securecat
1
250
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
4.3k
🇫🇷 Design Leadership en eaux troubles
morganepeng
2
340
Tuzukuru解説ブック
atsumaru1377
0
240
デザインスプリントを活かすチームの在り方
mixi_design
PRO
1
430
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
0
390
Cхематизация процессов и пользовательского опыта с Картой процесса-опыта
ashapiro
0
160
WHAT ARE ME?
takuro_nakajima
PRO
0
1.8k
生成AIのデザイン活用
asakohs
1
200
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
220
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Building an army of robots
kneath
301
42k
Faster Mobile Websites
deanohume
303
30k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Designing for Performance
lara
604
67k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Debugging Ruby Performance
tmm1
71
11k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Statistics for Hackers
jakevdp
792
220k
4 Signs Your Business is Dying
shpigford
178
21k
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 •ʮ৮ΕΔϓϩτλΠϓʯΛͬͨυοάϑʔσΟϯάɺগਓ Ͱૉૣ͍ݕূ/վળͰ͖ΔڥΛ׆༻͠ɺϢʔβʔͷମݧ্·Ͱ མͱ͠ࠐΜͰ͍Δɻ •࣭ͷߴ͍ݕূ͕Ͱ͖Δ໘ɺ։ൃίετ͕ߴ͍ͷͰɺదͳ ϑΣʔζతͰ࡞Δ͜ͱɺଞͷϓϩτλΠϓख๏ͱͷ͍͚ ඞਢ ͱ͍͑
͋Γ͕ͱ͏͍͟͝·ͨ͠