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.2k
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.9k
2020 Cookpad Online Spring Internship
sn_taiga
1
2.5k
ReDesigner Meetup 2020 Winter
sn_taiga
0
1.2k
クックパッドのサービス開発の日常とデザイナーの醍醐味
sn_taiga
1
7.8k
エディタの入力時間を11%減らした話
sn_taiga
0
190
「よさそう」から「絶対いい」にするための価値検証
sn_taiga
1
1.1k
Cookpad Design Bar
sn_taiga
0
26
Other Decks in Design
See All in Design
ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
ncdc
9
7.8k
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
2
200
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
250
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
50
32k
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.6k
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
1
2.4k
ZOZO CDO Office Design
zozodevelopers
PRO
1
360
Карта процесса-опыта. Презентация метода
ashapiro
0
310
我做了一個詐騙網站...嗎?
crboy
1
140
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
330
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
440
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
330
Featured
See All Featured
Thoughts on Productivity
jonyablonski
67
4.3k
Writing Fast Ruby
sferik
626
61k
Being A Developer After 40
akosma
86
590k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Music & Morning Musume
bryan
46
6.1k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
[RailsConf 2023] Rails as a piece of cake
palkan
51
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 •ʮ৮ΕΔϓϩτλΠϓʯΛͬͨυοάϑʔσΟϯάɺগਓ Ͱૉૣ͍ݕূ/վળͰ͖ΔڥΛ׆༻͠ɺϢʔβʔͷମݧ্·Ͱ མͱ͠ࠐΜͰ͍Δɻ •࣭ͷߴ͍ݕূ͕Ͱ͖Δ໘ɺ։ൃίετ͕ߴ͍ͷͰɺదͳ ϑΣʔζతͰ࡞Δ͜ͱɺଞͷϓϩτλΠϓख๏ͱͷ͍͚ ඞਢ ͱ͍͑
͋Γ͕ͱ͏͍͟͝·ͨ͠