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.9k
エディタの入力時間を11%減らした話
sn_taiga
0
200
「よさそう」から「絶対いい」にするための価値検証
sn_taiga
1
1.1k
Cookpad Design Bar
sn_taiga
0
27
Other Decks in Design
See All in Design
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
270
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
980
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
190
Personal Story Sequence - Vendetta(WIP)
elrns88
0
400
Dinosaur Mayhem
storyartist
0
140
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
570
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
280
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3k
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
320
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.3k
aya_murakami_portfolio
ayakaimi1101
0
1.1k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
The Cult of Friendly URLs
andyhume
78
6.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Adopting Sorbet at Scale
ufuk
74
9.2k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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 •ʮ৮ΕΔϓϩτλΠϓʯΛͬͨυοάϑʔσΟϯάɺগਓ Ͱૉૣ͍ݕূ/վળͰ͖ΔڥΛ׆༻͠ɺϢʔβʔͷମݧ্·Ͱ མͱ͠ࠐΜͰ͍Δɻ •࣭ͷߴ͍ݕূ͕Ͱ͖Δ໘ɺ։ൃίετ͕ߴ͍ͷͰɺదͳ ϑΣʔζతͰ࡞Δ͜ͱɺଞͷϓϩτλΠϓख๏ͱͷ͍͚ ඞਢ ͱ͍͑
͋Γ͕ͱ͏͍͟͝·ͨ͠