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

Data-Driven 
Service-Oriented Architecture & UI

6115584ec4554ed71f17effd3e0b6988?s=47 Altech
November 06, 2018

Data-Driven 
Service-Oriented Architecture & UI

Data Driven Developer Meetup #2
https://d3m.connpass.com/event/104858/

6115584ec4554ed71f17effd3e0b6988?s=128

Altech

November 06, 2018
Tweet

Transcript

  1. ©2018 Wantedly, Inc. Data-Driven 
 Service-Oriented Architecture & UI In

    Wantedly Visit. Data Driven Developer Meetup #2 6.Nov.2018 - Sohei Takeno
  2. ©2018 Wantedly, Inc. "CPVUNF Application Engineer. Wantedly, Inc. - Developed

    Wantedly Visit 2 years (Growth Team). - Developing Wantedly People 1 years. Sohei Takeno Altech_2015 Altech
  3. ©2018 Wantedly, Inc. ͷςʔϚɿʮج൫ʯ

  4. ©2018 Wantedly, Inc. ج൫͍Ζ͍Ζ ©2018 Wantedly, Inc. ΩϟογϡɾγεςϜ σʔλऩूج൫ ػցֶशج൫

    Ϣʔβʔ޲͚ͷΠϯλʔϑΣʔεʢUIʣ ΫϥΠΞϯτ޲͚ͷΠϯλʔϑΣʔεʢAPIʣ ΞϓϦέʔγϣϯɾαʔόʔͷ಺෦ΞʔΩςΫνϟ δϣϒɾγεςϜ
  5. ©2018 Wantedly, Inc. ج൫͍Ζ͍Ζ ©2018 Wantedly, Inc. ΩϟογϡɾγεςϜ σʔλऩूج൫ ػցֶशج൫

    Ϣʔβʔ޲͚ͷΠϯλʔϑΣʔεʢUIʣ ΫϥΠΞϯτ޲͚ͷΠϯλʔϑΣʔεʢAPIʣ ΞϓϦέʔγϣϯɾαʔόʔͷ಺෦ΞʔΩςΫνϟ ͦͷαʔϏε͕ఏڙ͢΂͖
 Ձ஋Λ࠷େԽͤ͞ΔͨΊʹଘࡏ i.e. ଞͷαʔϏεͰ΋࢖͑Δ αʔϏεͷੑ࣭ʹґଘ͠ͳ͍
 ൚༻తͳج൫ δϣϒɾγεςϜ
  6. ©2018 Wantedly, Inc. ج൫͍Ζ͍Ζ ©2018 Wantedly, Inc. ΩϟογϡɾγεςϜ σʔλऩूج൫ ػցֶशج൫

    Ϣʔβʔ޲͚ͷΠϯλʔϑΣʔεʢUIʣ ΫϥΠΞϯτ޲͚ͷΠϯλʔϑΣʔεʢAPIʣ ΞϓϦέʔγϣϯɾαʔόʔͷ಺෦ΞʔΩςΫνϟ ͦͷαʔϏε͕ఏڙ͢΂͖
 Ձ஋Λ࠷େԽͤ͞ΔͨΊʹଘࡏ i.e. ଞͷαʔϏεͰ΋࢖͑Δ αʔϏεͷੑ࣭ʹґଘ͠ͳ͍
 ൚༻తͳج൫ δϣϒɾγεςϜ ࠓ೔͓΋ʹѻΘΕΔ಺༰
  7. ©2018 Wantedly, Inc. ج൫͍Ζ͍Ζ ©2018 Wantedly, Inc. ΩϟογϡɾγεςϜ σʔλऩूج൫ ػցֶशج൫

    Ϣʔβʔ޲͚ͷΠϯλʔϑΣʔεʢUIʣ ΫϥΠΞϯτ޲͚ͷΠϯλʔϑΣʔεʢAPIʣ ΞϓϦέʔγϣϯɾαʔόʔͷ಺෦ΞʔΩςΫνϟ ͦͷαʔϏε͕ఏڙ͢΂͖
 Ձ஋Λ࠷େԽͤ͞ΔͨΊʹଘࡏ i.e. ଞͷαʔϏεͰ΋࢖͑Δ αʔϏεͷੑ࣭ʹґଘ͠ͳ͍
 ൚༻తͳج൫ δϣϒɾγεςϜ ͜Ε͔Β࿩͢಺༰ ࠓ೔͓΋ʹѻΘΕΔ಺༰
  8. ©2018 Wantedly, Inc. ͸ͨΒ͘Λ໘ന͘ ༗໊اۀ΍ϕϯνϟʔɺελʔτΞοϓاۀɺؾʹͳΔΦ ϑΟεʹ࿩Λฉ͖ʹ͍͜͏ɻ
 ΩϥͬͱޫΔγΰτ΍ϓϩδΣΫτɺձࣾΛݟ͚ͭͯΤϯ τϦʔ͠·͠ΐ͏ɻ஌Γ߹͍ͷͭͳ͕Γ͕෼͔ͬͯ҆৺Ͱ ͢ɻ

  9. ©2018 Wantedly, Inc. ͸ͨΒ͘Λ໘ന͘ ༗໊اۀ΍ϕϯνϟʔɺελʔτΞοϓاۀɺؾʹͳΔΦ ϑΟεʹ࿩Λฉ͖ʹ͍͜͏ɻ
 ΩϥͬͱޫΔγΰτ΍ϓϩδΣΫτɺձࣾΛݟ͚ͭͯΤϯ τϦʔ͠·͠ΐ͏ɻ஌Γ߹͍ͷͭͳ͕Γ͕෼͔ͬͯ҆৺Ͱ ͢ɻ ⾣

    ਓͱձࣾͷϚονϯάɾαʔϏε
  10. ©2018 Wantedly, Inc. ձࣾΛ୳͢ը໘ ืूҰཡը໘ IUUQTXXXXBOUFEMZDPNQSPKFDUT ▶ ืूΛ௨ͯ͠ձࣾΛ୳͢ϝΠϯػೳ ▶ αʔϏεʮ಺ʯͰͷϚονϯά͸


    ओʹ͜͜ͰߦΘΕΔ
 ▶ SNS Ͱͷ֦ࢄ΍ݕࡧྲྀೖͱݴͬͨ αʔϏεʮ֎ʯͷϚονϯά΋ଘࡏ
  11. ©2018 Wantedly, Inc. ձࣾΛ୳͢ը໘ ืूҰཡը໘

  12. ©2018 Wantedly, Inc. ձࣾΛ୳͢ը໘ ืूҰཡը໘ ▶ ਪનɿϐϡΞʹσʔλͱΞϧΰϦζ ϜͰܾ·Δ ▶ ߜΓࠐΈɿαʔϏεఏڙऀ͕໌ࣔత

    ʹ߲໨Λಋೖ͠ɺձ͕ࣾઃఆ͢Δ ਪન ߜࠐ
  13. ©2018 Wantedly, Inc. ձࣾΛ୳͢ը໘ ืूҰཡը໘ ▶ ਪનɿϐϡΞʹσʔλͱΞϧΰϦζ ϜͰܾ·Δ ▶ ߜΓࠐΈɿαʔϏεఏڙऀ͕໌ࣔత

    ʹ߲໨Λಋೖ͠ɺձ͕ࣾઃఆ͢Δ ਪન ߜࠐ ݕࡧ ▶ ݕࡧɿߜΓࠐΈͭͭਪન
  14. ©2018 Wantedly, Inc. ձࣾΛ୳͢ը໘ ืूҰཡը໘ ▶ ਪનɿϐϡΞʹσʔλͱΞϧΰϦζ ϜͰܾ·Δ ▶ ߜΓࠐΈɿαʔϏεఏڙऀ͕໌ࣔత

    ʹ߲໨Λಋೖ͠ɺձ͕ࣾઃఆ͢Δ ▶ ݕࡧɿߜΓࠐΈͭͭਪન ೳಈతʹ୳͢
  15. ©2018 Wantedly, Inc. ձࣾΛ୳͢ը໘ ืूҰཡը໘ ▶ ਪનɿϐϡΞʹσʔλͱΞϧΰϦζ ϜͰܾ·Δ ▶ ߜΓࠐΈɿαʔϏεఏڙऀ͕໌ࣔత

    ʹ߲໨Λಋೖ͠ɺձ͕ࣾઃఆ͢Δ ▶ ݕࡧɿߜΓࠐΈͭͭਪન डಈతʹग़ձ͏
  16. ©2018 Wantedly, Inc. ձࣾΛ୳͢ը໘ ืूҰཡը໘ ▶ ਪનɿϐϡΞʹσʔλͱΞϧΰϦζ ϜͰܾ·Δ ▶ ߜΓࠐΈɿαʔϏεఏڙऀ͕໌ࣔత

    ʹ߲໨Λಋೖ͠ɺձ͕ࣾઃఆ͢Δ ▶ ݕࡧɿߜΓࠐΈͭͭਪન डಈతʹग़ձ͏ /FUqJYͱ͔ͩͱ׬શʹडಈతͳ69͚ͩͲɺ
 ࢓ࣄ୳͠͸΋͏গ͠ڧ͍ϞνϕʔγϣϯΛ
 ͍࣋ͬͯΔϢʔβʔ΋͍ΔͷͰɺೳಈతͳ
 ػೳ΋ଘࡏ͍ͯ͠Δɻ
  17. ©2018 Wantedly, Inc. ΋ͪΖΜϞόΠϧΞϓϦ΋͋Δ ⾣ J04"QQd ⾣ "OESPJE"QQd

  18. ©2018 Wantedly, Inc. ⾣ 8BOUFEMZ7JTJU͸ຊ࣭తʹ͸ϚονϯάɾαʔϏε ⾣ Ϛονϯάͷ࣭͕ɺαʔϏεͷ࣭ʹ௚݁͢Δ ⾣ ೳಈతʹ୳͢69ͱɺडಈతʹग़ձ͏69ͷࠞ੒ ·ͱΊΔͱɿ

  19. ©2018 Wantedly, Inc. Ͳ͏΍ͬͨΒϚονϯά͕
 ܧଓతʹվળ͞ΕΔ͔ʁ

  20. ©2018 Wantedly, Inc. ΞϓϦέʔγϣϯͷΞʔΩςΫνϟͱ"1*ʹண໨ ©2018 Wantedly, Inc. ΩϟογϡɾγεςϜ σʔλऩूج൫ ػցֶशج൫

    Ϣʔβʔ޲͚ͷΠϯλʔϑΣʔεʢUIʣ ΫϥΠΞϯτ޲͚ͷΠϯλʔϑΣʔεʢAPIʣ ΞϓϦέʔγϣϯɾαʔόʔͷ಺෦ΞʔΩςΫνϟ ͦͷαʔϏε͕ఏڙ͢΂͖
 Ձ஋Λ࠷େԽͤ͞ΔͨΊʹଘࡏ i.e. ଞͷαʔϏεͰ΋࢖͑Δ αʔϏεͷੑ࣭ʹґଘ͠ͳ͍
 ൚༻తͳج൫ δϣϒɾγεςϜ
  21. ©2018 Wantedly, Inc. ⾣ ਪનɿΞϓϦͱ΢ΣϒͰਪનͷ࣮૷͕ͪΐͬͱͣͭҧ͏ ⾣ ߜΓࠐΈɿϚϧνϓϥοτϑΥʔϜʹ·͕ͨΔ6*ͳͷͰɺ
 ɹɹɹɹɹ߲໨Λ௥Ճͨ͠Γมߋ͢Δͷ͕ͱͯ΋େม Θ͔Γ΍͍͢໰୊఺͕̎ͭ͋ͬͨ σʔλΛ׆༻ͨ͠αʔϏεվળͷੜ࢈ੑ͕௿͍ͱɺ


    ೳྗΛൃش͍ͨ͠ΤϯδχΞʹͱͬͯັྗతͰͳ͍
 ͱ͍͏ϝλͳ໰୊ҙࣝ
  22. ©2018 Wantedly, Inc. Example ⾣ ਪનϩδοΫ͸3BJMTͷ.PEFM $POUSPMMFSͰ࣮૷ ⾣ ΢Σϒ޲͚ͷ$POUSPMMFS࣮૷ͱɺΞϓϦ޲͚ͷ$POUSPMMFS࣮૷͕ผʑʹଘࡏ ⾣

    ͦΕͧΕͷ$POUSPMMFSʹฒ΂ସ͑ͷॏཁϩδοΫ͕࣮૷͞Ε͍ͯΔ ⾣ ී௨ʹ3BJMTͰ࣮૷ͨ͠Β͜͏ͳΔͩΖ͏ͱ͍͏ߏ੒ ਪનͷ໰୊఺ ॱংΛ෦෼తʹม͑Δʹ͸྆ํͷमਖ਼͕ඞཁͳΜ͚ͩͲɺ΢Σϒͷ
 ւ֎൛Ͱ͸ಛఆͷॱংϩδοΫ͸ೖ͍ͬͯͳͯ͘ɺɺ
  23. ©2018 Wantedly, Inc. 3FBSDIJUFDUJOH .PEFM $POUSPMMFS $BDIF4ZTUFN &MBTUJDTFBSDI Before Web

    Client Native Client $POUSPMMFS
  24. ©2018 Wantedly, Inc. 3FBSDIJUFDUJOH .PEFM $POUSPMMFS .PEFM $POUSPMMFS 3FDPNNFOE
 4FSWJDF

    &MBTUJDTFBSDI $BDIF4ZTUFN $BDIF4ZTUFN &MBTUJDTFBSDI ɾ4FSWJDFͷϩδοΫΛม͑Ε͹શ͕ͯมΘΔ ɾຊ࣭తʹॏཁੑͷ௿͍BEIPDͳϩδοΫ͕ೖΓʹ͍͘ Before After Web Client Native Client $POUSPMMFS Web Client Native Client $POUSPMMFS
  25. ©2018 Wantedly, Inc. ⾣ ஍Ҭల։ɾւ֎ల։ɾۀք֦େΛݟਾ͑ͨͱ͖ɺཧ૝తͳ ॊೈੑͰαʔϏεΛมߋ͍͚ͯ͠Δ͔ʁ ߜΓࠐΈͷ໰୊఺ Example ւ֎ల։࣌ɺಛఆͷ౎ࢢ͔ΒαʔϏεల։Λ࢝ΊΔͱ͖ɺ஍Ҭͷߜ ΓࠐΈػೳ͸ෆཁɻ

    Example ืू͕ݸ͔͠ͳ͍ͷʹߴ౓ͳݕࡧػೳΛఏڙͯ͠΋ɺϢʔβʔମ ݧ͸Լ͕Δɻஈ֊తʹ։์͍͖͍ͯͨ͠ɻ
  26. ©2018 Wantedly, Inc. ⾣ ஍Ҭల։ɾւ֎ల։ɾۀք֦େΛݟਾ͑ͨͱ͖ɺཧ૝తͳ ॊೈੑͰαʔϏεΛมߋ͍͚ͯ͠Δ͔ʁ ߜΓࠐΈͷ໰୊఺ Example ւ֎ల։࣌ɺಛఆͷ౎ࢢ͔ΒαʔϏεల։Λ࢝ΊΔͱ͖ɺ஍Ҭͷߜ ΓࠐΈػೳ͸ෆཁɻ

    Example ืू͕ݸ͔͠ͳ͍ͷʹߴ౓ͳݕࡧػೳΛఏڙͯ͠΋ɺϢʔβʔମ ݧ͸Լ͕Δɻஈ֊తʹ։์͍͖͍ͯͨ͠ɻ ⾣ <ݱ࣮>K2VFSZ IUNMͰ࣮૷ͯ͠ɺJ04ΞϓϦͷΤϯδχΞʹ͓ئ͍ͯ͠ɺ "OESPJEΞϓϦͷΤϯδχΞʹ͓ئ͍ͯ͠ɺΞϓϦͷਁಁΛ଴ͬͯɻɻ
  27. ©2018 Wantedly, Inc. )5.-K2VFSZ J04"QQ "OESPJE"QQ .BTUFSEBUB 3FBSDIJUFDUJOH .BTUFSEBUB .BTUFSEBUB

    Before
  28. ©2018 Wantedly, Inc. )5.-K2VFSZ J04"QQ "OESPJE"QQ 3FBDU J04"QQ "OESPJE"QQ $POUFOUT


    4FSWJDF user_id
 country Contents JSON Contents JSON = ηΫγϣϯλΠτϧɺ
 ηΫγϣϯ͝ͱͷ߲໨ɺ߲໨͝ͱͷϥϕϧɾύϥϝʔλ౳ .BTUFSEBUB .BTUFSEBUB 3FBSDIJUFDUJOH .BTUFSEBUB .BTUFSEBUB Before After
  29. ©2018 Wantedly, Inc. 3FBDU J04"QQ "OESPJE"QQ $POUFOUT
 4FSWJDF user_id
 country

    .BTUFSEBUB "GUFS3FBSDIJUFDUVSJOH $POUSPMMFS 3FDPNNFOE
 4FSWJDF $BDIF4ZTUFN Contents
 JSON ids
  30. ©2018 Wantedly, Inc. 3FBDU J04"QQ "OESPJE"QQ $POUFOUT
 4FSWJDF user_id
 country

    .BTUFSEBUB "GUFS3FBSDIJUFDUVSJOH $POUSPMMFS 3FDPNNFOE
 4FSWJDF $BDIF4ZTUFN Contents
 JSON ids ΞϧΰϦζϜΛվળ͢Δ ͜ͱͰαʔϏεશମͷ࣭ ͕վળ͢Δߏ଄
  31. ©2018 Wantedly, Inc. ࠶ɿͲ͏΍ͬͨΒϚονϯά͕
 ܧଓతʹվળ͞ΕΔ͔ʁ

  32. ©2018 Wantedly, Inc. ج൫͍Ζ͍Ζ ©2018 Wantedly, Inc. ΩϟογϡɾγεςϜ σʔλऩूج൫ ػցֶशج൫

    Ϣʔβʔ޲͚ͷΠϯλʔϑΣʔεʢUIʣ ΫϥΠΞϯτ޲͚ͷΠϯλʔϑΣʔεʢAPIʣ ΞϓϦέʔγϣϯɾαʔόʔͷ಺෦ΞʔΩςΫνϟ ͦͷαʔϏε͕ఏڙ͢΂͖
 Ձ஋Λ࠷େԽͤ͞ΔͨΊʹଘࡏ i.e. ଞͷαʔϏεͰ΋࢖͑Δ αʔϏεͷੑ࣭ʹґଘ͠ͳ͍
 ൚༻తͳج൫ δϣϒɾγεςϜ
  33. ©2018 Wantedly, Inc. ©2018 Wantedly, Inc. ΩϟογϡɾγεςϜ σʔλऩूج൫ ػցֶशج൫ Ϣʔβʔ޲͚ͷΠϯλʔϑΣʔεʢUIʣ

    ΫϥΠΞϯτ޲͚ͷΠϯλʔϑΣʔεʢAPIʣ ΞϓϦέʔγϣϯɾαʔόʔͷ಺෦ΞʔΩςΫνϟ ͦͷαʔϏε͕ఏڙ͢΂͖
 Ձ஋Λ࠷େԽͤ͞ΔͨΊʹଘࡏ i.e. ଞͷαʔϏεͰ΋࢖͑Δ αʔϏεͷੑ࣭ʹґଘ͠ͳ͍
 ൚༻తͳج൫ δϣϒɾγεςϜ ج൫͍Ζ͍Ζ
  34. ©2018 Wantedly, Inc. ϢʔβʔɾΠϯλʔϑΣʔεʹண໨

  35. ©2018 Wantedly, Inc. ⾣ ஍ҬηΫγϣϯ͕͋Δ͚Ͳ۩ମతʹ
 Ͳ͏͍͏ཻ౓Ͱ͋Δͷ͔ؾ͔ͮͳ͍ ⾣ ৬छηΫγϣϯ͕͋Δ͚Ͳʢಉ্ʣ ⾣ ݕࡧͱ͍͏ϙςϯγϟϧͷ͋Δػೳ͕


    ೖͬͯΔ͚ͲԼͷํʹ͋ΔͷͰվળͯ͠΋
 ΠϯύΫτബ͍ ⾣ ͳͲͳͲɾɾɾ 2೥લͷ Wantedly Visit ͷߜΓࠐΈػೳ
  36. ©2018 Wantedly, Inc. ϩδοΫͰվળ͢ΔલఏͰ6*Λઃܭ͢Δ  * ΩʔϫʔυਪનΛ্෦ʹ഑ஔ * ݕࡧͱߜΓࠐΈΛ౷߹ͨ͠ςΩετϘοΫεΛ഑ஔ͢Δ *

    ϑΟϧλ߲໨͸ɺҰ෦͚ͩݟͤͯ expand Մೳʹ͢Δ * Hidden ঢ়ଶͰԿΛݟΔ͔͸Ϣʔβʔ͝ͱʹ API Ͱ੍ޚ * ηΫγϣϯࣗମ΋ಈతʹม͑ΒΕΔ༨஍Λ࢒͢
  37. ©2018 Wantedly, Inc. ϩδοΫͰվળ͢ΔલఏͰ6*Λઃܭ͢Δ  * ΩʔϫʔυਪનΛ্෦ʹ഑ஔ * ݕࡧͱߜΓࠐΈΛ౷߹ͨ͠ςΩετϘοΫεΛ഑ஔ͢Δ *

    ϑΟϧλ߲໨͸ɺҰ෦͚ͩݟͤͯ expand Մೳʹ͢Δ * Hidden ঢ়ଶͰԿΛݟΔ͔͸Ϣʔβʔ͝ͱʹ API Ͱ੍ޚ * ηΫγϣϯࣗମ΋ಈతʹม͑ΒΕΔ༨஍Λ࢒͢
  38. ©2018 Wantedly, Inc. ϩδοΫͰվળ͢Δલఏͷ UIʢڀۃମʣ: netflix.com Ͳ͏͍͏ηΫγϣϯΛग़͔͢ʁ ͦͷதͰϢʔβʔͰ޷Ή΋ͷ͸ͳʹ͔ʁ /FUqJYͷը໘ʜ

  39. ©2018 Wantedly, Inc. ⾣ ந৅Խ͞Εͨઃܭʹجͮ͘͜ͱͰɺ
 ౷Ұతͳ੍ޚΛՄೳʹ͢Δ ˔ ౷߹͞ΕͨςΩετϘοΫεΛ࠷༏ઌͰఏࣔ ˔ ΩʔϫʔυɾαδΣετ͸ϑΝʔετɾϏϡʔ

    ˔ &YQBOEͱ)JEEFOɺηΫγϣϯͷಈత੍ޚ ΞϓϦͰ͋ͬͯ΋ઃܭࢥ૝ͱ༏ઌ౓͸ڞ௨ʹ͢Δ
  40. ©2018 Wantedly, Inc. ج൫͍Ζ͍Ζ ©2018 Wantedly, Inc. ΩϟογϡɾγεςϜ σʔλऩूج൫ ػցֶशج൫

    Ϣʔβʔ޲͚ͷΠϯλʔϑΣʔεʢUIʣ ΫϥΠΞϯτ޲͚ͷΠϯλʔϑΣʔεʢAPIʣ ΞϓϦέʔγϣϯɾαʔόʔͷ಺෦ΞʔΩςΫνϟ ͦͷαʔϏε͕ఏڙ͢΂͖
 Ձ஋Λ࠷େԽͤ͞ΔͨΊʹଘࡏ i.e. ଞͷαʔϏεͰ΋࢖͑Δ αʔϏεͷੑ࣭ʹґଘ͠ͳ͍
 ൚༻తͳج൫ δϣϒɾγεςϜ ࿩ͨ͠಺༰
  41. ©2018 Wantedly, Inc. ΞϓϦέʔγϣϯɾϨΠϠʔͷ
 ઃܭ΋%BUB%SJWFOͳ
 ڧ͍αʔϏεΛ࡞Δ্Ͱେࣄ ·ͱΊ