Pro Yearly is on sale from $80 to $50! »

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

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

E505897a79eede1a676f92740261e8f8?s=128

Masatoshi Kubode

September 20, 2018
Tweet

Transcript

  1. ©2018 Wantedly, Inc. ϓϩϑΟʔϧฤूը໘ͷߏங δΣωϦΫεΛ࢖ͬͨϓϩϑΟʔϧը໘ͷߏங J04%$3FKFDU$POGFSFODF ٱอग़խढ़ 2018/09/18

  2. ©2018 Wantedly, Inc. ٱอग़խढ़ 8BOUFEMZͰ࿩Λฉ͖ʹߦ͘ମݧΛ࡞Δ8BOUFEMZ7JTJUͷΤϯδχΞͱͯ͠ಇ͍͍ͯ·͢ɻ ϢʔβʔάϩʔεʹϑΥʔΧε͍ͯͯ͠ɺϢʔβʔ਺΍ϢʔβʔମݧΛྑ͘͢ΔͨΊʹ೔ʑ౒ྗ͍ͯ͠·͢ɻ ओʹϞόΠϧΞϓϦͷ։ൃΛ͍ͯ͠·͢ɻ"OESPJE͕ओͰ͕͢ɺJ04΋͜͜൒೥΄ͲܞΘ͍ͬͯ·͢ɻ !TXJ[@BSE ࣗݾ঺հ

  3. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ ©2018 Wantedly, Inc. 8BOUFEMZ7JTJUJ04 ϦχϡʔΞϧ͠·ͨ͠

  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. Ϧετܥ؅ཧ7JFX7JFX֊૚

  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 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 ܕͷఆٛ
  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.