Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

nabeliwo

April 24, 2023
Tweet

More Decks by nabeliwo

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. ࠓ೔࿩͢͜ͱ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. ࣮ࡍʹ࢖ͬͯΈͯͲ͏͔ͩͬͨ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. 4NBSU)36* 8FC$PNQPOFOUT

    View Slide

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

    View Slide

  35. ࠓޙͷ1'ࣄۀͷٕज़తͳల๬

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. ࠷ޙʹ

    View Slide

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

    View Slide

  42. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide