Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
プロフィール編集画面の構築 / How to create a profile edit screen
Masatoshi Kubode
September 20, 2018
Programming
2
940
プロフィール編集画面の構築 / How to create a profile edit screen
Masatoshi Kubode
September 20, 2018
Tweet
Share
More Decks by Masatoshi Kubode
See All by Masatoshi Kubode
GraphQL+KMM開発でわかったこと / What we learned from GraphQL+KMM development
kubode
0
230
Coroutines 1.6移行記録 / Tried to migrate Coroutines to 1.6
kubode
1
170
KMMでプラットフォーム依存を抑える設計 / A KMM architecture reducing the platform dependency
kubode
0
520
KMMを使って感じたPros/Cons / Pros/Cons experienced using KMM
kubode
1
1.1k
KMMのテストのtips / KMM testing tips
kubode
1
260
秩序あるKotlinの拡張 / Orderly Kotlin Extensions
kubode
0
910
KMMの導入と得られるもの / Introduction of KMM and its benefits
kubode
2
1.2k
The Pitfalls of Cancellation
kubode
1
1.3k
Room 2.2.0-alpha01
kubode
1
1.4k
Other Decks in Programming
See All in Programming
kintone × LINE Bot で餃子検定Botを作った話
naberina
0
330
Isar勉強会
hoddy3190
0
420
Getting Started With Data Structures
adoranwodo
1
260
Git操作編
smt7174
2
240
Pythonで鉄道指向プログラミング
usabarashi
0
130
サーバーレスパターンから学ぶデータ分析基盤構築 / devio2022
kasacchiful
0
480
VIMRC 2022
achimnol
0
130
料理の注文メニューの3D化への挑戦
hideg
0
280
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
maroon1st
0
13k
設計の考え方とやり方
masuda220
PRO
49
27k
Recap CDN, Edge, WebAssembly | ワインと鍋.js#1
sadnessojisan
2
1.2k
Edge Side Frontend という新領域
mizchi
22
10k
Featured
See All Featured
Facilitating Awesome Meetings
lara
29
4.1k
Practical Orchestrator
shlominoach
178
8.7k
Teambox: Starting and Learning
jrom
123
7.7k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Robots, Beer and Maslow
schacon
152
7.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
107
16k
Bootstrapping a Software Product
garrettdimon
296
110k
How to Ace a Technical Interview
jacobian
266
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
The Cult of Friendly URLs
andyhume
68
4.8k
Designing for Performance
lara
597
63k
Transcript
©2018 Wantedly, Inc. ϓϩϑΟʔϧฤूը໘ͷߏங δΣωϦΫεΛͬͨϓϩϑΟʔϧը໘ͷߏங J04%$3FKFDU$POGFSFODF ٱอग़խढ़ 2018/09/18
©2018 Wantedly, Inc. ٱอग़խढ़ 8BOUFEMZͰΛฉ͖ʹߦ͘ମݧΛ࡞Δ8BOUFEMZ7JTJUͷΤϯδχΞͱͯ͠ಇ͍͍ͯ·͢ɻ ϢʔβʔάϩʔεʹϑΥʔΧε͍ͯͯ͠ɺϢʔβʔϢʔβʔମݧΛྑ͘͢ΔͨΊʹʑྗ͍ͯ͠·͢ɻ ओʹϞόΠϧΞϓϦͷ։ൃΛ͍ͯ͠·͢ɻ"OESPJE͕ओͰ͕͢ɺJ04͜͜΄ͲܞΘ͍ͬͯ·͢ɻ !TXJ[@BSE ࣗݾհ
ϖʔδλΠτϧ ϖʔδαϒλΠτϧ ©2018 Wantedly, Inc. 8BOUFEMZ7JTJUJ04 ϦχϡʔΞϧ͠·ͨ͠
©2018 Wantedly, Inc. ϓϩϑΟʔϧฤूը໘ΛͲ͏࡞͔ͬͨ ϓϩτίϧ6*ʹδΣωϦΫεΛͬͯ൚༻తʹߏங͢Δ͜ͱͰɺ࣮ίε τΛԼ͛Δ͜ͱ͕Ͱ͖ͨͱ͍͏Λ͠·͢ɻ υϝΠϯʹڧ͘ґଘ͍ͯ͠ΔͷͰɺԠ༻͕͋·Γޮ͘Ͱͳ͍͔͠Ε· ͤΜɻ ࠓ͢͜ͱ
©2018 Wantedly, Inc. J04ΞϓϦϦχϡʔΞϧ
©2018 Wantedly, Inc. ͳͥϦχϡʔΞϧ͔ͨ͠ ҎԼͷΑ͏ͳ՝͕͋ͬͨ w ΞϓϦͰͷΛฉ͖ʹߦ͘·Ͱͷମݧͷվળ w ΦϯϘʔσΟϯάϑϩʔͷվળ w
σβΠϯͷ৽ w ϝϯςφϯείετͷߴ͔ͬͨίʔυͷ৽ ϦχϡʔΞϧͷܦҢ
©2018 Wantedly, Inc. w 4UPSZCPBSEະ༻ • AutoLayoutʹSnapKit • ࠓճͷStoryboardͰ͑ͳ͍߹͋Γ w
3FBDUPS,JU • RxΛͬͨ୯ํσʔλϑϩʔΞʔΩςΫνϟ લఏࣝ
ϖʔδλΠτϧ ϖʔδαϒλΠτϧ ©2018 Wantedly, Inc. ͱΓ࣮͋͑ͣͩ
ϖʔδλΠτϧ ϖʔδαϒλΠτϧ ©2018 Wantedly, Inc.
©2018 Wantedly, Inc. ฤूը໘ͷ՝
©2018 Wantedly, Inc. ฤूը໘ w ߲͋Δ w Ϧετܥ߲ w Ϧετܥ։ดͰ͖Δ
w ߲͝ͱʹϓϥΠόγʔઃఆΛมߋͰ͖Δ ϓϩϑΟʔϧฤूͷ༷ ϦϯΫΛ։͍ͨঢ়ଶ ͯ͢ดͨ͡ঢ়ଶ
©2018 Wantedly, Inc. ࣅͯΔ͚Ͳத͕ҧ͏7JFX w ը໘શମ6*4UBDL7JFXʹͳ͍ͬͯͯɺࣗݾհ ৬ྺɺֶྺͳͲ߲͕"SSBOHFE4VCWJFXͱ ͯ͠ฒΜͰ͍Δɻ w ͭͭͷ7JFX͕ελΠϧಉ͚ͩ͡Ͳදࣔ͢Δ
༰͕߲ʹΑͬͯҟͳ͍ͬͯΔɻ w λοϓ࣌ʹ։͘ը໘ͯ͢ҟͳΔɻ w ͭͭΧελϜ7JFXΫϥεԽ͢ΔͷϘΠϥʔ ϓϨʔτ͕૿࣮͑ͯίετ͕ߴͦ͏ɻ ՝ ϦϯΫ ࣗݾհ ͖ͳݴ༿ ৬ྺ ֶྺ ελΠϧಉ͚ͩ͡Ͳ த͕શ෦ҧ͏ UIStackView
ϖʔδλΠτϧ ϖʔδαϒλΠτϧ ©2018 Wantedly, Inc. δΣωϦΫε͑ͦ͏
©2018 Wantedly, Inc. w ൚༻తʹςΩετͳͲΛઃఆͰ͖Δ7JFXΛ࡞Δ w ΞΠίϯɺλΠτϧɺৄࡉςΩετɺΞΫηαϦΞΠίϯʢӈΞΠίϯʣ w ϦετΛཧ͢Δίϯςφ7JFXΛ࡞Δ w
͜͜ʹδΣωϦΫεΛ͍ɺ֨ೲͰ͖ΔܕΛܾΊΔΑ͏ʹͨ͠ w ։ดͷॲཧ͜ͷ7JFXͰΔ w ։͍͍ͯΔ߹ߴ͞Մมͷ$PMMFDUJPO7JFXΛදࣔ͢Δ ͱͬͨख๏
©2018 Wantedly, Inc. ͱͬͨख๏ ϦετΛཧ͢ΔίϯςφView ProfileEditExpandableItemsView ൚༻తͳView ProfileEditItemView
©2018 Wantedly, Inc. Ϧετܥཧ7JFXଞͷ7JFX
©2018 Wantedly, Inc. Ϧετܥཧ7JFX7JFX֊
©2018 Wantedly, Inc. Ϧετܥཧ7JFXσʔλ͔Β7JFXߋ৽
©2018 Wantedly, Inc. Ϧετܥཧ7JFXσʔλ͔Β$FMMߋ৽ͱίʔϧόοΫ CollectionViewͱCell
©2018 Wantedly, Inc. ฤूը໘ͷ࣮ྫ ৬ྺͷྫ
©2018 Wantedly, Inc. ৬ྺͷ7JFXߋ৽ྫ
©2018 Wantedly, Inc. ৬ྺͷ$BMMCBDLྫ
©2018 Wantedly, Inc. ΞΠςϜฤूը໘ͷ՝
©2018 Wantedly, Inc. ΞΠςϜฤूը໘ w ߲ͦΕͧΕʹը໘ w ϦετܥՃͱฤूϞʔυ͕͋Δ w όϦσʔγϣϯ͕͋Δ
w ը໘͝ͱʹϑΥʔϜ͕ҟͳΔ ϓϩϑΟʔϧฤूͷ༷ ՃϞʔυ ฤूϞʔυ
©2018 Wantedly, Inc. ը໘࡞Βͳ͍ͱ͍͚ͳ͍ w อଘϘλϯɺด͡ΔϘλϯɺอଘதͷΠϯδέʔ λڞ௨ w ฤूϑΥʔϜ߲ʹΑͬͯશ͘ҧ͏ w
όϦσʔγϣϯҧ͏ w ୟ͘ߋ৽"1*ҟͳΔͷ͕͋Δ w Ϧετܥͷͷআ͕Ͱ͖Δ ՝ ֶྺ ৬ྺ
ϖʔδλΠτϧ ϖʔδαϒλΠτϧ ©2018 Wantedly, Inc. ڞ௨෦Λ ͦΕҎ֎Λࢠ✕̍̒Ͱ࡞Ζ͏
©2018 Wantedly, Inc. w ڞ௨෦ w 7JFX$POUSPMMFSͰ7JFXͱঢ়ଶͷཧ w ࢠͷঢ়ଶΛ0CTFSWFͯ͠อଘϘλϯͷঢ়ଶมߋͳͲ͢Δ w
อଘ"1*ίʔϧࢠͷΠϯλʔϑΣʔεΛݺΜͰࢠͷํͰߦ͏ w ϑΥʔϜόϦσʔγϣϯࢠ w όϦσʔγϣϯͳͲͷೖྗঢ়ଶཧࢠͰߦ͏ w ࢠͷQSPUPDPMʹ४ڌͤ͞Δ ͱͬͨख๏ ࢠ✕̍̒
©2018 Wantedly, Inc. 7JFX$POUSPMMFSͱ3FBDUPS w DMBTT1SPpMF*UFN&EJU7JFX$POUSPMMFS7JFX$POUSPMMFS*UFN&EJU7JFX$POUSPMMFS w DMBTT1SPpMF*UFN&EJU3FBDUPS*UFN3FBDUPS*UFN&EJU3FBDUPS
ࢠ7JFX$POUSPMMFSͱ3FBDUPS w QSPUPDPM*UFN&EJU7JFX$POUSPMMFS7JFXXIFSF3FBDUPS*UFN&EJU3FBDUPS w QSPUPDPM*UFN&EJU3FBDUPS3FBDUPSXIFSF4UBUF*UFN&EJU3FBDUPS4UBUF w QSPUPDPM*UFN&EJU3FBDUPS4UBUF&EJUBCMF ܕͷఆٛ
©2018 Wantedly, Inc. ✕ ࢀরͱδΣωϦΫε ࢀর Observable <Type> δΣωϦΫεͷܕ 3FBDUPS
ࢠ3FBDUPS 7JFX$POUSPMMFS ࢠ7JFX$POUSPMMFS ࢠ3FBDUPS ࢠ7JFX$POUSPMMFS &EJUBCMF
©2018 Wantedly, Inc. Editable
©2018 Wantedly, Inc. Editable - ྫ Entityͷఆ͔ٛΒ SourceryͰEditableΛੜ͍ͯ͠Δ
©2018 Wantedly, Inc. ࢠReactorͱStateͷprotocol
©2018 Wantedly, Inc. Reactor
©2018 Wantedly, Inc. Reactor - ࢠͷ࿈ܞ submit updateSingle state (button.isEnabled)
state (Valid, Changed)
©2018 Wantedly, Inc. ViewController - Viewߏ
©2018 Wantedly, Inc. ViewController - Reactorͷbind action update views
©2018 Wantedly, Inc. ߲ฤूը໘ͷ࣮ྫ ৬ྺͷྫ
©2018 Wantedly, Inc. ৬ྺͷྫ - ࢠReactor ςΩετߋ৽࣌ʹ ͜ͷAction͕͛ΒΕΔ
©2018 Wantedly, Inc. ৬ྺͷྫ - ࢠReactorͷߋ৽APIݺͼग़͠ submit updateSingle
©2018 Wantedly, Inc. ৬ྺͷྫ - ViewController όϦσʔγϣϯΤϥʔͷදࣔ
©2018 Wantedly, Inc. ·ͱΊ
©2018 Wantedly, Inc. w 6*ʹδΣωϦΫεར༻Ͱ͖Δ w ֎ಉ͚ͩ͡Ͳத$FMM͕ҧ͏ύλʔϯͳͲͰ༗ޮ w ৼΔ͍ΛϓϩτίϧΫϩʔδϟͰҕৡ͢Δ w
ΠϕϯτίʔϧόοΫ࣌ʹܕ҆શʹΦϒδΣΫτΛॲཧͰ͖Δ w ͞ΒͳΔվળ w 6*Ͱͳ͘ΦϒδΣΫτʹ1SPUPDPMΛద༻͢Δ͜ͱͰࣅͨΑ͏ͳ࣮Մೳ w ͏গ͠நԽͰ͖͔ͨ w 4UPSZCPBSEͰδΣωϦΫε͕͑ͳ͍ͷͰΧελϜ7JFXʴ1SPUPDPMͷ΄͏͕ॊೈ͔ ·ͱΊ
ϖʔδλΠτϧ ϖʔδαϒλΠτϧ ©2018 Wantedly, Inc.