Data-Driven Service-Oriented Architecture & UI

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

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. "CPVU
   NF 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
    "QQ
    
    d
    ⾣ "OESPJE
    "QQ
    
    d
18. ©2018 Wantedly, Inc. ⾣ 8BOUFEMZ
    7JTJU
    ͸ຊ࣭తʹ͸ϚονϯάɾαʔϏε
    ⾣ Ϛονϯάͷ࣭͕ɺαʔϏεͷ࣭ʹ௚݁͢Δ
    ⾣ ೳಈతʹ୳͢
    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 $BDIF
    4ZTUFN &MBTUJDTFBSDI Before Web Client Native Client $POUSPMMFS
24. ©2018 Wantedly, Inc. 3FBSDIJUFDUJOH
     .PEFM $POUSPMMFS .PEFM $POUSPMMFS 3FDPNNFOE
 4FSWJDF &MBTUJDTFBSDI $BDIF
    4ZTUFN $BDIF
    4ZTUFN &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 .BTUFS
    EBUB 3FBSDIJUFDUJOH
     .BTUFS
    EBUB .BTUFS
    EBUB 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 = ηΫγϣϯλΠτϧɺ
 ηΫγϣϯ͝ͱͷ߲໨ɺ߲໨͝ͱͷϥϕϧɾύϥϝʔλ౳ .BTUFS
    EBUB .BTUFS
    EBUB 3FBSDIJUFDUJOH
     .BTUFS
    EBUB .BTUFS
    EBUB Before After
29. ©2018 Wantedly, Inc. 3FBDU J04
    "QQ "OESPJE
    "QQ $POUFOUT
 4FSWJDF user_id
 country .BTUFS
    EBUB "GUFS
    3FBSDIJUFDUVSJOH $POUSPMMFS 3FDPNNFOE
 4FSWJDF $BDIF
    4ZTUFN Contents
 JSON ids
30. ©2018 Wantedly, Inc. 3FBDU J04
    "QQ "OESPJE
    "QQ $POUFOUT
 4FSWJDF user_id
 country .BTUFS
    EBUB "GUFS
    3FBSDIJUFDUVSJOH $POUSPMMFS 3FDPNNFOE
 4FSWJDF $BDIF
    4ZTUFN 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
    ͳ
 ڧ͍αʔϏεΛ࡞Δ্Ͱେࣄ
    ·ͱΊ