プロフィール編集画面の構築 / How to create a profile edit screen

Transcript

1. ©2018 Wantedly, Inc. ϓϩϑΟʔϧฤूը໘ͷߏங δΣωϦΫεΛ࢖ͬͨϓϩϑΟʔϧը໘ͷߏங J04%$
   
   3FKFDU
   $POGFSFODF ٱอग़խढ़ 2018/09/18
2. ©2018 Wantedly, Inc. ٱอग़խढ़ 8BOUFEMZͰ࿩Λฉ͖ʹߦ͘ମݧΛ࡞Δ8BOUFEMZ
   7JTJUͷΤϯδχΞͱͯ͠ಇ͍͍ͯ·͢ɻ
   ϢʔβʔάϩʔεʹϑΥʔΧε͍ͯͯ͠ɺϢʔβʔ਺΍ϢʔβʔମݧΛྑ͘͢ΔͨΊʹ೔ʑ౒ྗ͍ͯ͠·͢ɻ
   ओʹϞόΠϧΞϓϦͷ։ൃΛ͍ͯ͠·͢ɻ"OESPJE͕ओͰ͕͢ɺJ04΋͜͜൒೥΄ͲܞΘ͍ͬͯ·͢ɻ
   
   
   !TXJ[@BSE ࣗݾ঺հ
3. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ ©2018 Wantedly, Inc. 8BOUFEMZ
   7JTJU
   J04
   ϦχϡʔΞϧ͠·ͨ͠
   
4. ©2018 Wantedly, Inc. ϓϩϑΟʔϧฤूը໘ΛͲ͏࡞͔ͬͨ ϓϩτίϧ΍6*ʹδΣωϦΫεΛ࢖ͬͯ൚༻తʹߏங͢Δ͜ͱͰɺ࣮૷ίε τΛԼ͛Δ͜ͱ͕Ͱ͖ͨͱ͍͏࿩Λ͠·͢ɻ
   υϝΠϯʹڧ͘ґଘ͍ͯ͠ΔͷͰɺԠ༻͕͋·Γޮ͘࿩Ͱ͸ͳ͍͔΋͠Ε· ͤΜɻ ࠓ೔࿩͢͜ͱ
5. ©2018 Wantedly, Inc. J04ΞϓϦϦχϡʔΞϧ
6. ©2018 Wantedly, Inc. ͳͥϦχϡʔΞϧ͔ͨ͠ ҎԼͷΑ͏ͳ՝୊͕͋ͬͨ
   w ΞϓϦͰͷ࿩Λฉ͖ʹߦ͘·Ͱͷମݧͷվળ
   w ΦϯϘʔσΟϯάϑϩʔͷվળ
   w σβΠϯͷ࡮৽
   w ϝϯςφϯείετͷߴ͔ͬͨίʔυͷ࡮৽ ϦχϡʔΞϧͷܦҢ
7. ©2018 Wantedly, Inc. w 4UPSZCPBSEະ࢖༻
   • AutoLayoutʹ͸SnapKit • ࠓճͷ࿩͸StoryboardͰ͸࢖͑ͳ͍৔߹͋Γ w 3FBDUPS,JU
   • RxΛ࢖ͬͨ୯ํ޲σʔλϑϩʔΞʔΩςΫνϟ લఏ஌ࣝ
8. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ ©2018 Wantedly, Inc. ͱΓ࣮͋͑ͣ૷ͩ
9. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ ©2018 Wantedly, Inc.
10. ©2018 Wantedly, Inc. ฤूը໘ͷ՝୊
11. ©2018 Wantedly, Inc. ฤूը໘ w ߲໨͋Δ
    w Ϧετܥ͸߲໨
    w Ϧετܥ͸։ดͰ͖Δ
    w ߲໨͝ͱʹϓϥΠόγʔઃఆΛมߋͰ͖Δ ϓϩϑΟʔϧฤूͷ࢓༷ ϦϯΫΛ։͍ͨঢ়ଶ ͢΂ͯดͨ͡ঢ়ଶ
12. ©2018 Wantedly, Inc. ࣅͯΔ͚Ͳத਎͕ҧ͏7JFX w ը໘શମ͸6*4UBDL7JFXʹͳ͍ͬͯͯɺࣗݾ঺հ ΍৬ྺɺֶྺͳͲ߲໨͕"SSBOHFE4VCWJFXͱ ͯ͠ฒΜͰ͍Δɻ
    w ͭͭͷ7JFX͕ελΠϧ͸ಉ͚ͩ͡Ͳදࣔ͢Δ ಺༰͕߲໨ʹΑͬͯҟͳ͍ͬͯΔɻ
    w λοϓ࣌ʹ։͘ը໘΋͢΂ͯҟͳΔɻ
    w ͭͭΧελϜ7JFXΫϥεԽ͢Δͷ͸ϘΠϥʔ ϓϨʔτ͕૿࣮͑ͯ૷ίετ͕ߴͦ͏ɻ ՝୊఺ ϦϯΫ ࣗݾ঺հ ޷͖ͳݴ༿ ৬ྺ ֶྺ ελΠϧ͸ಉ͚ͩ͡Ͳ
    த਎͕શ෦ҧ͏ UIStackView
13. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ ©2018 Wantedly, Inc. δΣωϦΫε࢖͑ͦ͏
14. ©2018 Wantedly, Inc. w ൚༻తʹςΩετͳͲΛઃఆͰ͖Δ7JFXΛ࡞Δ
    w ΞΠίϯɺλΠτϧɺৄࡉςΩετɺΞΫηαϦΞΠίϯʢӈΞΠίϯʣ
    w ϦετΛ؅ཧ͢Δίϯςφ7JFXΛ࡞Δ
    w ͜͜ʹδΣωϦΫεΛ࢖͍ɺ֨ೲͰ͖ΔܕΛܾΊΔΑ͏ʹͨ͠
    w ։ดͷॲཧ͸͜ͷ7JFXͰ΍Δ
    w ։͍͍ͯΔ৔߹͸ߴ͞Մมͷ$PMMFDUJPO7JFXΛදࣔ͢Δ ͱͬͨख๏
15. ©2018 Wantedly, Inc. ͱͬͨख๏ ϦετΛ؅ཧ͢ΔίϯςφView ProfileEditExpandableItemsView ൚༻తͳView ProfileEditItemView
16. ©2018 Wantedly, Inc. Ϧετܥ؅ཧ7JFX
    
    ଞͷ7JFX
17. ©2018 Wantedly, Inc. Ϧετܥ؅ཧ7JFX
    
    7JFX֊૚
18. ©2018 Wantedly, Inc. Ϧετܥ؅ཧ7JFX
    
    σʔλ͔Β7JFXߋ৽
19. ©2018 Wantedly, Inc. Ϧετܥ؅ཧ7JFX
    
    σʔλ͔Β$FMMߋ৽ͱίʔϧόοΫ CollectionViewͱCell
20. ©2018 Wantedly, Inc. ฤूը໘ͷ࣮ྫ ৬ྺͷྫ
21. ©2018 Wantedly, Inc. ৬ྺͷ7JFXߋ৽ྫ
22. ©2018 Wantedly, Inc. ৬ྺͷ$BMMCBDLྫ
23. ©2018 Wantedly, Inc. ΞΠςϜฤूը໘ͷ՝୊
24. ©2018 Wantedly, Inc. ΞΠςϜฤूը໘ w ߲໨ͦΕͧΕʹը໘
    w Ϧετܥ͸௥ՃͱฤूϞʔυ͕͋Δ
    w όϦσʔγϣϯ͕͋Δ
    w ը໘͝ͱʹϑΥʔϜ͕ҟͳΔ ϓϩϑΟʔϧฤूͷ࢓༷ ௥ՃϞʔυ ฤूϞʔυ
25. ©2018 Wantedly, Inc. ը໘࡞Βͳ͍ͱ͍͚ͳ͍ w อଘϘλϯɺด͡ΔϘλϯɺอଘதͷΠϯδέʔ λ͸ڞ௨
    w ฤूϑΥʔϜ͸߲໨ʹΑͬͯશ͘ҧ͏
    w όϦσʔγϣϯ΋ҧ͏
    w ୟ͘ߋ৽"1*΋ҟͳΔ΋ͷ͕͋Δ
    w Ϧετܥͷ΋ͷ͸࡟আ͕Ͱ͖Δ ՝୊఺ ֶྺ ৬ྺ
26. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ ©2018 Wantedly, Inc. ڞ௨෦෼Λ਌
    ͦΕҎ֎Λࢠ✕̍̒Ͱ࡞Ζ͏
    
27. ©2018 Wantedly, Inc. w ڞ௨෦෼͸਌΁
    w ਌7JFX$POUSPMMFSͰ7JFXͱঢ়ଶͷ؅ཧ
    w ࢠͷঢ়ଶΛ0CTFSWFͯ͠อଘϘλϯͷঢ়ଶมߋͳͲ͢Δ
    w อଘ"1*ίʔϧ͸ࢠͷΠϯλʔϑΣʔεΛݺΜͰࢠͷํͰߦ͏
    w ϑΥʔϜ΍όϦσʔγϣϯ͸ࢠ΁
    w όϦσʔγϣϯͳͲͷೖྗঢ়ଶ؅ཧ͸ࢠͰߦ͏
    w ࢠͷQSPUPDPMʹ४ڌͤ͞Δ ͱͬͨख๏ ਌ ࢠ✕̍̒
28. ©2018 Wantedly, Inc.  ਌7JFX$POUSPMMFSͱ3FBDUPS
    w DMBTT
    1SPpMF*UFN&EJU7JFX$POUSPMMFS7JFX$POUSPMMFS
    *UFN&EJU7JFX$POUSPMMFS
    w DMBTT
    1SPpMF*UFN&EJU3FBDUPS*UFN3FBDUPS
    *UFN&EJU3FBDUPS
     ࢠ7JFX$POUSPMMFSͱ3FBDUPS
    w QSPUPDPM
    *UFN&EJU7JFX$POUSPMMFS
    7JFX
    XIFSF
    3FBDUPS
    *UFN&EJU3FBDUPS
    w QSPUPDPM
    *UFN&EJU3FBDUPS
    3FBDUPS
    XIFSF
    4UBUF
    *UFN&EJU3FBDUPS4UBUF
    w QSPUPDPM
    *UFN&EJU3FBDUPS4UBUF&EJUBCMF
    ܕͷఆٛ
29. ©2018 Wantedly, Inc. ✕ ࢀরͱδΣωϦΫε ࢀর Observable <Type> δΣωϦΫεͷܕ ਌3FBDUPS
    ࢠ3FBDUPS ਌7JFX$POUSPMMFS
    ࢠ7JFX$POUSPMMFS ࢠ3FBDUPS ࢠ7JFX$POUSPMMFS &EJUBCMF
30. ©2018 Wantedly, Inc. Editable
31. ©2018 Wantedly, Inc. Editable - ྫ Entityͷఆ͔ٛΒ SourceryͰEditableΛੜ੒͍ͯ͠Δ
32. ©2018 Wantedly, Inc. ࢠReactorͱStateͷprotocol
33. ©2018 Wantedly, Inc. ਌Reactor
34. ©2018 Wantedly, Inc. ਌Reactor - ਌ࢠͷ࿈ܞ submit updateSingle state (button.isEnabled) state (Valid, Changed)
35. ©2018 Wantedly, Inc. ਌ViewController - Viewߏ੒
36. ©2018 Wantedly, Inc. ਌ViewController - Reactorͷbind action update views
37. ©2018 Wantedly, Inc. ߲໨ฤूը໘ͷ࣮ྫ ৬ྺͷྫ
38. ©2018 Wantedly, Inc. ৬ྺͷྫ - ࢠReactor ςΩετߋ৽࣌ʹ ͜ͷAction͕౤͛ΒΕΔ
39. ©2018 Wantedly, Inc. ৬ྺͷྫ - ࢠReactorͷߋ৽APIݺͼग़͠ submit updateSingle
40. ©2018 Wantedly, Inc. ৬ྺͷྫ - ViewController όϦσʔγϣϯΤϥʔͷදࣔ
41. ©2018 Wantedly, Inc. ·ͱΊ
42. ©2018 Wantedly, Inc. w 6*ʹ΋δΣωϦΫε͸ར༻Ͱ͖Δ
    w ֎࿮͸ಉ͚ͩ͡Ͳத਎΍$FMM͕ҧ͏ύλʔϯͳͲͰ༗ޮ
    w ৼΔ෣͍Λϓϩτίϧ΍ΫϩʔδϟͰҕৡ͢Δ
    w ΠϕϯτίʔϧόοΫ࣌ʹܕ҆શʹΦϒδΣΫτΛॲཧͰ͖Δ
    w ͞ΒͳΔվળ
    w 6*Ͱͳ͘ΦϒδΣΫτʹ1SPUPDPMΛద༻͢Δ͜ͱͰࣅͨΑ͏ͳ࣮૷͸Մೳ
    w ΋͏গ͠ந৅ԽͰ͖͔ͨ΋
    w 4UPSZCPBSEͰ͸δΣωϦΫε͕࢖͑ͳ͍ͷͰΧελϜ7JFXʴ1SPUPDPMͷ΄͏͕ॊೈ͔΋ ·ͱΊ
43. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ ©2018 Wantedly, Inc.