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

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