Web Componentsを使ったウィジェット埋め込みの話

8FC$PNQPOFOUTΛ࢖ͬͨ ΢ΟδΣοτຒΊࠐΈͷ࿩ 5VF"OPUIFSXPSLTY4NBSU)3'SPOU&OE%FFQ%JWF OBCFMJXP 4NBSU)3ϓϩμΫτΤϯδχΞ

ࣗݾ঺հ OBCFMJXP 4NBSU)3 ϓϩμΫτΤϯδχΞάϧʔϓ ϓϥοτϑΥʔϜ։ൃϢχοτ ϑϩϯτΤϯυΤϯδχΞ 5ZQF4DSJQU 3FBDU /FYUKTͳͲ

ϓϥοτϑΥʔϜࣄۀͷ͝঺հ

CONFIDENTIAL ͜͜ʹηΫγϣϯλΠτϧΛ ೖΕͯΈΑ͏ʂ

4NBSU)31MVTЌ൛ͱ͸ w 4NBSU)3Λ΋ͬͱศརʹ׆༻͢ΔͨΊͷ֎෦ ΞϓϦέʔγϣϯΛಋೖͰ͖ΔΞϓϦετΞ w Ϣʔβʔͱ֎෦ΞϓϦέʔγϣϯύʔτφʔ Λͭͳ͙ͨΊͷ৽͍͠ίϛϡχέʔγϣϯ νϟωϧ

ࠓ೔࿩͢͜ͱ

ࠓ೔࿩͢͜ͱ w 1'ࣄۀͰ8FC$PNQPOFOUTΛ࠾༻ͨ͠࿩ w ͳͥ8FC$PNQPOFOUTΛ࠾༻ͨ͠ͷ͔ w ࣮ࡍʹ࢖ͬͯΈͯͲ͏͔ͩͬͨ w ࠓޙͷ1'ࣄۀͷٕज़తͳల๬

8FC$PNQPOFOUTͬͯ ͦ΋ͦ΋ͳΜ͚ͩͬͷ͓͞Β͍

8FC$PNQPOFOUTͱ͸ w ࠶ར༻ՄೳͳΧελϜཁૉ w 4IBEPX%0.ʹΑΔΧϓηϧԽ w )5.-ςϯϓϨʔτʹΑΔϚʔΫΞοϓ w ΢Σϒඪ४

8FC$PNQPOFOUTͷ"1*Λϥοϓͯ͠؆୯ʹѻ͑ ΔΑ͏ʹͨ͠ϥΠϒϥϦɻ 4NBSU)3Ͱ͸-JUΛ࢖༻ͯ͠ΧελϜཁૉΛ࡞ͬͯ ͍·͢ɻ

1'ࣄۀͰ8FC$PNQPOFOUT Λ࠾༻ͨ͠࿩

௨ۈܦ࿏ݕࡧ w ग़ൃ஍ɺ໨త஍ɺ௨ۈखஈΛೖྗ͢Δͱࣗಈ Ͱ௨ۈܦ࿏΍௨ۈඅΛग़ͯ͘͠ΕΔ w /"7*5*.&ͱ(PPHMF.BQͷ"1*Λ࢖༻ͯ͠ ͍Δ w طଘͷैۀһฤूը໘Λ֦ு͢Δ

ΦϓγϣϯػೳΛΠϯετʔϧ

ैۀһ߲໨͕ΧελϚΠζ͞ΕΔ

௨ۈܦ࿏ݕࡧػೳͷٕज़తͳ࢓༷ w Πϯετʔϧ͠ͳ͍ͱ࢖͑ͳ͍ w Πϯετʔϧ͢Δͱैۀһ৘ใฤूը໘ʹ௨ ۈܦ࿏༻ͷϑΥʔϜ΢ΟδΣοτ͕֎෦͔Βຒ Ίࠐ·ΕΔ w ΢ΟδΣοτͷ࣮૷͸4NBSU)3಺ʹ͸ͳ͍

΢ΟδΣοτͷ࣮૷͕֎ʹ͋Δཧ༝ w ࠓޙ΋ΦϓγϣϯػೳͰΠϯετʔϧ͞Εͨػೳ͕ 4NBSU)3಺ʹຒΊࠐ·Ε͍ͯ͘ w શͯ4NBSU)3಺ʹ࣮૷͍ͯ͘͠ͱΦϓγϣϯػೳ௥ Ճͷ౓ʹ4NBSU)3Ͱ৽ن࣮૷͠ͳ͍ͱ͍͚ͳ͍ w ࠓޙSEύʔςΟ੡ΞϓϦΛ૿΍͍ͯ͘͠ w
֎ͷΞϓϦଆͰ΢ΟδΣοτΛ࡞Δܗʹ͍ͨ͠

ຒΊࠐΈ΢ΟδΣοτΛ 8FC$PNQPOFOUTͰ࣮૷͍ͯ͠·͢

ͳͥ8FC$PNQPOFOUTΛ ࠾༻ͨ͠ͷ͔

8FC$PNQPOFOUT࠾༻ཧ༝ w 4NBSU)3ଆͷ΢ΟδΣοτຒΊࠐΈͷهड़Λ γϯϓϧʹ͔ͨͬͨ͠ w ΢ΟδΣοτ͸֎͔ΒͷӨڹΛड͚ͣɺ֎ʹӨ ڹΛ༩͑ͳ͍ܗʹ͔ͨͬͨ͠ w 4NBSU)3ͷϑϩϯτΤϯυͷෳࡶੑͷഎܠ

΢ΟδΣοτຒΊࠐΈΛγϯϓϧʹ w ࠓޙຒΊࠐΈ͍ͨΞϓϦͷ਺ɺ΢ΟδΣοτͷ ਺͸ͲΜͲΜ૿͍͑ͯ͘૝ఆ w ͭͳ͗͜Έ෦෼Λγϯϓϧʹ͠ͱ͔ͳ͍ͱޙʑ ා͍ w 8FC$PNQPOFOUTͰ͋Ε͹4NBSU)3ଆ͸ +4ΛಡΈࠐΜͰΧελϜཁૉΛݺͿ͚ͩ

ຒΊࠐΈ࣮૷ͷྲྀΕ w ຒΊࠐΈ͍ͨΞϓϦଆͰίϯϙʔωϯτΛ࣮૷ ͢Δ w ΧελϜཁૉ໊ͱϏϧυͨ͠+4ͷύεΛ 4NBSU)3ʹ౉͢ w 4NBSU)3ଆ͸΋Βͬͨ৘ใΛઃఆϑΝΠϧͰ ؅ཧ͢Δ

˞IBNMͰ͢ ˞આ໌͠΍͍͢Α͏৭ʑม͑ͯॻ͍ͯ·͢

4NBSU)3 ௨ۈܦ࿏ݕࡧ ϑΥʔϜ࣮૷ σʔλϕʔε 8FC$PNQPOFOUT ʹΑΔΧελϜ ϑΥʔϜ࣮૷ Ϗϧυͨ͠+4 ૢ࡞ Ϗϧυ
$IBOHF&WFOU %JTQBUDI 4VCTDSJCF ߋ৽

௨ۈܦ࿏ݕࡧػೳͷ8FC$PNQPOFOUTͱ 4NBSU)3ͷ΍ΓऔΓ͸ ΠϕϯτͷEJTQBUDIͱTVCTDSJCFͷΈ

ӨڹΛ༩͑ͳ͍ܗʹ͔ͨͬͨ͠ w 8FC$PNQPOFOUTͰ͋Ε͹ΧελϜԽ͞Εͯ ͍ΔͷͰɺ4NBSU)3ଆͷάϩʔόϧͳελΠ ϧͷӨڹΛड͚ͳ͍ w 8FC$PNQPOFOUT಺ͷ࣮૷ʹΑΓ4NBSU)3 ଆͷ6*Λյ͞ͳ͍

ͦΕͬͯ3FBDUͰྑ͍ͷͰ͸ʜʁ

4NBSU)3ͷϑϩϯτΤϯυͷෳࡶੑ w ैۀһ৘ใΛมߋ͢Δํ๏͸ैۀһ৘ใฤूը໘ ͱਃ੥ϑΥʔϜͷ௨Γ͋Δ w ैۀһ৘ใฤूը໘͸IBNM K2VFSZɺਃ੥ ϑΥʔϜ͸3FBDUͰಈ͍͍ͯΔ w ͲͪΒͷύλʔϯͰ΋ಉ͡ܗࣜͰѻ͏ͨΊʹ
8FC$PNQPOFOUTʹ͍ͯ͠Δ

࣮ࡍʹ࢖ͬͯΈͯͲ͏͔ͩͬͨ

ྑ͔ͬͨͱ͜Ζ w બఆཧ༝ʹॻ͍࣮ͨݱ͍ͨ͜͠ͱ͸શͯ໰୊ͳ͘ ࣮ݱͰ͖ͨ w 4NBSU)3ͷෳࡶͳࣄ৘Λ8FC$PNQPOFOUT ଆ͕഑ྀ͢Δඞཁ͕ͳ͍ w γϯϓϧͳΠϯλʔϑΣʔε

೉͍͠ͱ͜Ζ w 4NBSU)36*͕࢖͑ͳ͍😭 w %JTQBUDIͱ4VCTDSJCFͷΈͱ͍͏औΓܾΊ͸͠ ͯΔ͕ɺϧʔϧ͸؆୯ʹ΍ΔͿ͜ͱ͕Ͱ͖Δͷ ͰSEύʔςΟʹಉ͡΍ΓํΛͤ͞Δͷ͸ةͳ͍

w 4NBSU)3ͷϓϩμΫτͰ൚༻తʹ࢖͑Δ3FBDU ίϯϙʔωϯτू w #VUUPO *OQVUͳͲͷγϯϓϧͳཁૉ͸΋ͪΖ Μɺ%JBMPH΍%SPQEPXO %BUF1JDLFSͷΑ͏ͳ ෳࡶͳ΋ͷ΋͋Γͱͯ΋ศར

4NBSU)36*͕࢖͑ͳ͍😭 w 4NBSU)3ͷ6*ͷ$44Λίϐʔͯ͠࢖͏Έ͍ͨ ͳ͜ͱΛ͍ͯͨ͠ w ෳࡶͳ΋ͷ͸೉͍͠ͷͰɺಉ͡%BUF1JDLFSͳͷ ʹϑΥʔϜ͝ͱʹݟͨ໨ҧ͏ͱ͍͏͜ͱʹͳͬͯ ͠·ͬͨ

4NBSU)36* 8FC$PNQPOFOUT

ࠓޙΛݟਾ͑ͨ੬ऑੑͷ࿩ w 8FC$PNQPOFOUT಺ͷίʔυ͕4NBSU)3಺Ͱ ࣮ߦ͞ΕΔͨΊɺ΍Ζ͏ͱࢥ͑͹ͳΜͰ΋Ͱ͖Δ w SEύʔςΟʹຒΊࠐΈ΢ΟδΣοτΛ։์͢Δ ͱ͖͸αϯυϘοΫεԽͷ࢓૊ΈΛ༻ҙ͠ͳ͍ͱ ͍͚ͳ͍

ࠓޙͷ1'ࣄۀͷٕज़తͳల๬

w 4NBSU)36*ͷ8FC$PNQPOFOUTԽ w αϯυϘοΫεԽͷٕज़ݕ౼

4NBSU)36*ͷ8FC$PNQPOFOUTԽ w 3FBDU 7VF 7BOJMMB FUDʜͲ͔͜ΒͰ΋࢖͑Δ Α͏ʹ͍ͨ͠ w 4NBSU)36*Λγϡοͱ8FC$PNQPOFOUTʹ ஔ͖׵͑Δͷ͸೉͍͠
w ·ͣ͸CVUUPOͳͲͷ؆୯ͳ6*Λม͍͑ͯ͘ͳ ͲΛͯ͠ࢼ͍͖͍ͯͨ͠

αϯυϘοΫεԽͷٕज़ݕ౼ w JGSBNF w 2VJDL+4Λ8BTNԽ͢Δ w 8FC8PSLFS w 4IBEPX3FBMN"1*

ࠓޙͷϓϥοτϑΥʔϜͷల։ʹ ͝ظ଴͍ͩ͘͞ʂʂʂʂ

࠷ޙʹ

4NBSU)3͸ΤϯδχΞΛืू͍ͯ͠·͢ʂʂ 4NBSU)3ΤϯδχΞ࠾༻<ݕࡧ>

͋Γ͕ͱ͏͍͟͝·ͨ͠

Web Componentsを使ったウィジェット埋め込みの話

Web Componentsを使ったウィジェット埋め込みの話

More Decks by nabeliwo

Other Decks in Technology

Featured

Transcript