プロフィール編集画面の構築 / 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.