$30 off During Our Annual Pro Sale. View Details »

Data-Driven 
Service-Oriented Architecture & UI

Altech
November 06, 2018

Data-Driven 
Service-Oriented Architecture & UI

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

Altech

November 06, 2018
Tweet

More Decks by Altech

Other Decks in Design

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. ج൫͍Ζ͍Ζ ©2018 Wantedly, Inc. ΩϟογϡɾγεςϜ σʔλऩूج൫ ػցֶशج൫

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

    Ϣʔβʔ޲͚ͷΠϯλʔϑΣʔεʢUIʣ ΫϥΠΞϯτ޲͚ͷΠϯλʔϑΣʔεʢAPIʣ ΞϓϦέʔγϣϯɾαʔόʔͷ಺෦ΞʔΩςΫνϟ ͦͷαʔϏε͕ఏڙ͢΂͖
 Ձ஋Λ࠷େԽͤ͞ΔͨΊʹଘࡏ i.e. ଞͷαʔϏεͰ΋࢖͑Δ αʔϏεͷੑ࣭ʹґଘ͠ͳ͍
 ൚༻తͳج൫ δϣϒɾγεςϜ
  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. ձࣾΛ୳͢ը໘ ืूҰཡը໘ ▶ ਪનɿϐϡΞʹσʔλͱΞϧΰϦζ ϜͰܾ·Δ ▶ ߜΓࠐΈɿαʔϏεఏڙऀ͕໌ࣔత

    ʹ߲໨Λಋೖ͠ɺձ͕ࣾઃఆ͢Δ ▶ ݕࡧɿߜΓࠐΈͭͭਪન डಈతʹग़ձ͏ /FUqJYͱ͔ͩͱ׬શʹडಈతͳ69͚ͩͲɺ
 ࢓ࣄ୳͠͸΋͏গ͠ڧ͍ϞνϕʔγϣϯΛ
 ͍࣋ͬͯΔϢʔβʔ΋͍ΔͷͰɺೳಈతͳ
 ػೳ΋ଘࡏ͍ͯ͠Δɻ
  8. ©2018 Wantedly, Inc. ΞϓϦέʔγϣϯͷΞʔΩςΫνϟͱ"1*ʹண໨ ©2018 Wantedly, Inc. ΩϟογϡɾγεςϜ σʔλऩूج൫ ػցֶशج൫

    Ϣʔβʔ޲͚ͷΠϯλʔϑΣʔεʢUIʣ ΫϥΠΞϯτ޲͚ͷΠϯλʔϑΣʔεʢAPIʣ ΞϓϦέʔγϣϯɾαʔόʔͷ಺෦ΞʔΩςΫνϟ ͦͷαʔϏε͕ఏڙ͢΂͖
 Ձ஋Λ࠷େԽͤ͞ΔͨΊʹଘࡏ i.e. ଞͷαʔϏεͰ΋࢖͑Δ αʔϏεͷੑ࣭ʹґଘ͠ͳ͍
 ൚༻తͳج൫ δϣϒɾγεςϜ
  9. ©2018 Wantedly, Inc. Example ⾣ ਪનϩδοΫ͸3BJMTͷ.PEFM $POUSPMMFSͰ࣮૷ ⾣ ΢Σϒ޲͚ͷ$POUSPMMFS࣮૷ͱɺΞϓϦ޲͚ͷ$POUSPMMFS࣮૷͕ผʑʹଘࡏ ⾣

    ͦΕͧΕͷ$POUSPMMFSʹฒ΂ସ͑ͷॏཁϩδοΫ͕࣮૷͞Ε͍ͯΔ ⾣ ී௨ʹ3BJMTͰ࣮૷ͨ͠Β͜͏ͳΔͩΖ͏ͱ͍͏ߏ੒ ਪનͷ໰୊఺ ॱংΛ෦෼తʹม͑Δʹ͸྆ํͷमਖ਼͕ඞཁͳΜ͚ͩͲɺ΢Σϒͷ
 ւ֎൛Ͱ͸ಛఆͷॱংϩδοΫ͸ೖ͍ͬͯͳͯ͘ɺɺ
  10. ©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
  11. ©2018 Wantedly, Inc. ⾣ ஍Ҭల։ɾւ֎ల։ɾۀք֦େΛݟਾ͑ͨͱ͖ɺཧ૝తͳ ॊೈੑͰαʔϏεΛมߋ͍͚ͯ͠Δ͔ʁ ߜΓࠐΈͷ໰୊఺ Example ւ֎ల։࣌ɺಛఆͷ౎ࢢ͔ΒαʔϏεల։Λ࢝ΊΔͱ͖ɺ஍Ҭͷߜ ΓࠐΈػೳ͸ෆཁɻ

    Example ืू͕ݸ͔͠ͳ͍ͷʹߴ౓ͳݕࡧػೳΛఏڙͯ͠΋ɺϢʔβʔମ ݧ͸Լ͕Δɻஈ֊తʹ։์͍͖͍ͯͨ͠ɻ ⾣ <ݱ࣮>K2VFSZ IUNMͰ࣮૷ͯ͠ɺJ04ΞϓϦͷΤϯδχΞʹ͓ئ͍ͯ͠ɺ "OESPJEΞϓϦͷΤϯδχΞʹ͓ئ͍ͯ͠ɺΞϓϦͷਁಁΛ଴ͬͯɻɻ
  12. ©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
  13. ©2018 Wantedly, Inc. 3FBDU J04"QQ "OESPJE"QQ $POUFOUT
 4FSWJDF user_id
 country

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

    .BTUFSEBUB "GUFS3FBSDIJUFDUVSJOH $POUSPMMFS 3FDPNNFOE
 4FSWJDF $BDIF4ZTUFN Contents
 JSON ids ΞϧΰϦζϜΛվળ͢Δ ͜ͱͰαʔϏεશମͷ࣭ ͕վળ͢Δߏ଄
  15. ©2018 Wantedly, Inc. ج൫͍Ζ͍Ζ ©2018 Wantedly, Inc. ΩϟογϡɾγεςϜ σʔλऩूج൫ ػցֶशج൫

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

    ΫϥΠΞϯτ޲͚ͷΠϯλʔϑΣʔεʢAPIʣ ΞϓϦέʔγϣϯɾαʔόʔͷ಺෦ΞʔΩςΫνϟ ͦͷαʔϏε͕ఏڙ͢΂͖
 Ձ஋Λ࠷େԽͤ͞ΔͨΊʹଘࡏ i.e. ଞͷαʔϏεͰ΋࢖͑Δ αʔϏεͷੑ࣭ʹґଘ͠ͳ͍
 ൚༻తͳج൫ δϣϒɾγεςϜ ج൫͍Ζ͍Ζ
  17. ©2018 Wantedly, Inc. ⾣ ஍ҬηΫγϣϯ͕͋Δ͚Ͳ۩ମతʹ
 Ͳ͏͍͏ཻ౓Ͱ͋Δͷ͔ؾ͔ͮͳ͍ ⾣ ৬छηΫγϣϯ͕͋Δ͚Ͳʢಉ্ʣ ⾣ ݕࡧͱ͍͏ϙςϯγϟϧͷ͋Δػೳ͕


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

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

    ϑΟϧλ߲໨͸ɺҰ෦͚ͩݟͤͯ expand Մೳʹ͢Δ * Hidden ঢ়ଶͰԿΛݟΔ͔͸Ϣʔβʔ͝ͱʹ API Ͱ੍ޚ * ηΫγϣϯࣗମ΋ಈతʹม͑ΒΕΔ༨஍Λ࢒͢
  20. ©2018 Wantedly, Inc. ج൫͍Ζ͍Ζ ©2018 Wantedly, Inc. ΩϟογϡɾγεςϜ σʔλऩूج൫ ػցֶशج൫

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