Data-Driven  Service-Oriented Architecture & UI

©2018 Wantedly, Inc. Data-Driven   Service-Oriented Architecture & UI In
Wantedly Visit. Data Driven Developer Meetup #2 6.Nov.2018 - Sohei Takeno

©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

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

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

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

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

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

©2018 Wantedly, Inc. ձࣾΛ୳͢ը໘ ืूҰཡը໘ IUUQTXXXXBOUFEMZDPNQSPKFDUT ▶ ืूΛ௨ͯ͠ձࣾΛ୳͢ϝΠϯػೳ ▶ αʔϏεʮ಺ʯͰͷϚονϯά͸ 
ओʹ͜͜ͰߦΘΕΔ  ▶ SNS Ͱͷ֦ࢄ΍ݕࡧྲྀೖͱݴͬͨ αʔϏεʮ֎ʯͷϚονϯά΋ଘࡏ

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

ʹ߲໨Λಋೖ͠ɺձ͕ࣾઃఆ͢Δ ਪન ߜࠐ ݕࡧ ▶ ݕࡧɿߜΓࠐΈͭͭਪન

ʹ߲໨Λಋೖ͠ɺձ͕ࣾઃఆ͢Δ ▶ ݕࡧɿߜΓࠐΈͭͭਪન ೳಈతʹ୳͢

ʹ߲໨Λಋೖ͠ɺձ͕ࣾઃఆ͢Δ ▶ ݕࡧɿߜΓࠐΈͭͭਪન डಈతʹग़ձ͏

ʹ߲໨Λಋೖ͠ɺձ͕ࣾઃఆ͢Δ ▶ ݕࡧɿߜΓࠐΈͭͭਪન डಈతʹग़ձ͏ /FUqJYͱ͔ͩͱ׬શʹडಈతͳ69͚ͩͲɺ  ࢓ࣄ୳͠͸΋͏গ͠ڧ͍ϞνϕʔγϣϯΛ  ͍࣋ͬͯΔϢʔβʔ΋͍ΔͷͰɺೳಈతͳ  ػೳ΋ଘࡏ͍ͯ͠Δɻ

©2018 Wantedly, Inc. ⾣ ਪનɿΞϓϦͱ΢ΣϒͰਪનͷ࣮૷͕ͪΐͬͱͣͭҧ͏ ⾣ ߜΓࠐΈɿϚϧνϓϥοτϑΥʔϜʹ·͕ͨΔ6*ͳͷͰɺ  ɹɹɹɹɹ߲໨Λ௥Ճͨ͠Γมߋ͢Δͷ͕ͱͯ΋େม Θ͔Γ΍͍͢໰୊఺͕̎ͭ͋ͬͨ σʔλΛ׆༻ͨ͠αʔϏεվળͷੜ࢈ੑ͕௿͍ͱɺ 
ೳྗΛൃش͍ͨ͠ΤϯδχΞʹͱͬͯັྗతͰͳ͍  ͱ͍͏ϝλͳ໰୊ҙࣝ

©2018 Wantedly, Inc. Example ⾣ ਪનϩδοΫ͸3BJMTͷ.PEFM $POUSPMMFSͰ࣮૷ ⾣ ΢Σϒ޲͚ͷ$POUSPMMFS࣮૷ͱɺΞϓϦ޲͚ͷ$POUSPMMFS࣮૷͕ผʑʹଘࡏ ⾣
ͦΕͧΕͷ$POUSPMMFSʹฒ΂ସ͑ͷॏཁϩδοΫ͕࣮૷͞Ε͍ͯΔ ⾣ ී௨ʹ3BJMTͰ࣮૷ͨ͠Β͜͏ͳΔͩΖ͏ͱ͍͏ߏ੒ ਪનͷ໰୊఺ ॱংΛ෦෼తʹม͑Δʹ͸྆ํͷमਖ਼͕ඞཁͳΜ͚ͩͲɺ΢Σϒͷ  ւ֎൛Ͱ͸ಛఆͷॱংϩδοΫ͸ೖ͍ͬͯͳͯ͘ɺɺ

©2018 Wantedly, Inc. 3FBSDIJUFDUJOH .PEFM $POUSPMMFS $BDIF4ZTUFN &MBTUJDTFBSDI Before Web
Client Native Client $POUSPMMFS

©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

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

©2018 Wantedly, Inc. ⾣ ஍Ҭల։ɾւ֎ల։ɾۀք֦େΛݟਾ͑ͨͱ͖ɺཧ૝తͳ ॊೈੑͰαʔϏεΛมߋ͍͚ͯ͠Δ͔ʁ ߜΓࠐΈͷ໰୊఺ Example ւ֎ల։࣌ɺಛఆͷ౎ࢢ͔ΒαʔϏεల։Λ࢝ΊΔͱ͖ɺ஍Ҭͷߜ ΓࠐΈػೳ͸ෆཁɻ
Example ืू͕ݸ͔͠ͳ͍ͷʹߴ౓ͳݕࡧػೳΛఏڙͯ͠΋ɺϢʔβʔମ ݧ͸Լ͕Δɻஈ֊తʹ։์͍͖͍ͯͨ͠ɻ ⾣ <ݱ࣮>K2VFSZ IUNMͰ࣮૷ͯ͠ɺJ04ΞϓϦͷΤϯδχΞʹ͓ئ͍ͯ͠ɺ "OESPJEΞϓϦͷΤϯδχΞʹ͓ئ͍ͯ͠ɺΞϓϦͷਁಁΛ଴ͬͯɻɻ

©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

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

©2018 Wantedly, Inc. 3FBDU J04"QQ "OESPJE"QQ $POUFOUT  4FSWJDF user_id  country
.BTUFSEBUB "GUFS3FBSDIJUFDUVSJOH $POUSPMMFS 3FDPNNFOE  4FSWJDF $BDIF4ZTUFN Contents  JSON ids ΞϧΰϦζϜΛվળ͢Δ ͜ͱͰαʔϏεશମͷ࣭ ͕վળ͢Δߏ଄

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

©2018 Wantedly, Inc. ⾣ ஍ҬηΫγϣϯ͕͋Δ͚Ͳ۩ମతʹ  Ͳ͏͍͏ཻ౓Ͱ͋Δͷ͔ؾ͔ͮͳ͍ ⾣ ৬छηΫγϣϯ͕͋Δ͚Ͳʢಉ্ʣ ⾣ ݕࡧͱ͍͏ϙςϯγϟϧͷ͋Δػೳ͕ 
ೖͬͯΔ͚ͲԼͷํʹ͋ΔͷͰվળͯ͠΋  ΠϯύΫτബ͍ ⾣ ͳͲͳͲɾɾɾ 2೥લͷ Wantedly Visit ͷߜΓࠐΈػೳ

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

©2018 Wantedly, Inc. ⾣ ந৅Խ͞Εͨઃܭʹجͮ͘͜ͱͰɺ  ౷Ұతͳ੍ޚΛՄೳʹ͢Δ ˔ ౷߹͞ΕͨςΩετϘοΫεΛ࠷༏ઌͰఏࣔ ˔ ΩʔϫʔυɾαδΣετ͸ϑΝʔετɾϏϡʔ
˔ &YQBOEͱ)JEEFOɺηΫγϣϯͷಈత੍ޚ ΞϓϦͰ͋ͬͯ΋ઃܭࢥ૝ͱ༏ઌ౓͸ڞ௨ʹ͢Δ

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

Data-Driven Service-Oriented Architecture & UI

Data-Driven Service-Oriented Architecture & UI

More Decks by Altech

Other Decks in Design

Featured

Transcript

Data-Driven  Service-Oriented Architecture & UI

Data-Driven  Service-Oriented Architecture & UI