私が WebComponents ｵﾈｰｻﾝ です / WebComponents Woman

Transcript

1. גࣜձࣾαΠόʔΤʔδΣϯτ ࠜ؛ ະ དྷ ϑϩϯτΤϯυΤϯδχΞ ࢲ͕ 8FC$PNQPOFOUT
   śŮŖšƃ Ͱ͢

2. !OFHJNJD ʘ
   ϑΥϩʔ͍ͯͩ͘͠͞
   ʗ

3. 8FC$PNQPOFOUT
   ͱ 1BZNFOU3FRVFTU"1*ʢ13"ʣ
   Ͱ "NFCB1BZ Λͭͬͨ͘࿩ɻ

4. "NFCB1BZ ͱ͸ʁ

5. "NFCB ͷ৽͍͠ڞ௨ܾࡁγεςϜ ηΩϡΞͰγϯϓϧͳܾࡁମݧΛఏڙ͢Δ

6. 4IBEPX%0. ΧϓηϧԽ #VUUPO

7. "NFCB1BZ
   4%,ʢ13" ͷ࣌ʣ = ߪೖ͢Δ ʘ
   Θʔ͍
   ʗ 5)"/,
   :06 = ߪೖ͢Δ &%*5 1":

   "NFCB1BZ
   5TVLBUUFSV
   8FC"QQ "CFNB ύʔΧʔΛணͨϐάͶ͗͠ +1:
   = 0SEFS
   TVNNBSZ IUUQTXXXOFHJNJDDPNTIPQ 7JTB
   
   /&(*4)*
   .*,6 1BZNFOU
   NFUIPE

8. "NFCB1BZ
   4%,ʢϦϯΫλΠϓͷ࣌ʣ = ߪೖ͢Δ ʘ
   Θʔ͍
   ʗ 5)"/,
   :06 ςϯϓϨʔτͷඍௐ੔ͱɺ TUZMF Λࣗ༝ʹ͋ͯΔ͜ͱ͕Ͱ͖ΔͷͰ Ͱ͖Δ͚ͩγϯϓϧʹɻ ܾࡁ୅ߦձࣾͷΧʔυ৘ใೖྗͷը໘

9. 
   ΫϨδοτΧʔυ৘ใΛ҆શʹѻ͏
   ˞ 
   13" ʹΑͬͯࣗࣾαʔϏε͔Β཭୤ͤͣ؆୯ʹܾࡁ׬ྃͰ͖Δ 
   13" ඇରԠ؀ڥͰ΋ɺγϯϓϧͰ෼͔Γ΍͍ܾ͢ࡁϖʔδΛఏڙ 
   ͍ΖΜͳܾࡁํ๏Λ௥Ճ͍ͯ͘͠ࠓޙͷల๬ ˞
   
   αʔϏεఏڙଆͷαʔόͰɺΫϨΧ৘ใΛอଘɺॲཧɺ௨աΛ͠ͳ͍ɻ "NFCB1BZ ͷ͍͍ͱ͜Ζ

10. ࠾༻ٕज़
    ʹ͍ͭͯ

11. $VTUPN&MFNFOUT BNFCBQBZ ΧελϜཁૉΛొ࿥

12. 4IBEPX%0. ΧϓηϧԽ

13. class AmebaPay extends HTMLElement { constructor() { super(); this.attachShadow({ mode:

    ὆open὆ }).innerHTML = AmebaPay.template; this.button = this.shadowRoot.querySelector(὆button὆); } connectedCallback() { this.button.addEventListener(὆click὆, this.onClick); } ��� } customElements.define(὆ameba-pay὆, AmebaPay);
14. None

15. &4.PEVMFT FYQPSU
    
    JNQPSU

16. export default class AmebaPay extends HTMLElement { ��� } import

    AmebaPay from ὆ameba-pay.js὆;

17. &4. ରԠϒϥ΢β <script type=” module” src=” dist/sdk.js” ></script> <script nomodule

    src=” dist/bundle.js” ></script> &4. ඇରԠϒϥ΢β <script type=” module” src=” dist/sdk.js” ></script> <script nomodule src=” dist/bundle.js” ></script> &4. &4.

18. 1BZNFOU
    3FRVFTU
    "1* ܾࡁ৘ใೖྗ༻ͷ 6* Λϒϥ΢β͕ఏڙ͢Δ

19. const paymentRequest = new PaymentRequest([{ supportedMethods: [὆basic-card὆], data: { supportedNetworks:

    [὆visa὆, ὆mastercard὆] } }], { displayItems: [{ label: this.itemName, amount: { currency: ὆JPY὆, value: this.price } }], total: { label: ὆߹ܭ὆, amount: { currency: ὆JPY὆, value: total } } }); new PaymentRequest();

20. ֑ӽ͑
    ʹ͍ͭͯ

21. 
    8FC$PNQPOFOUT
    Λ *&
    &EHF Ͱಈ͔͢ͷେมͩͬͨφʔ ɹɹ
    *& ͱ &EHF Ͱಈ࡞ՄೳʹͳΔ QPMZpMM ͕ҧͬͨ

    ɹɹ
    *& Ͱ )5.-&MFNFOU ͕ GVODUJPO ͡Όͳͯ͘ PCKFDU ʹͳΔṖݱ৅ 
    J04
    $ISPNF ͷ 13" ͷόάͱͷઓ͍ ɹɹ
      ԁόά ɹɹ
    ͠;ɹ
    ΍͘όά 
    QBZNFOUTIJNKT ͱͷ߈๷ 
    J04 Ͱ 4BGBSJ ͕ 13" ʹରԠʂͰ΋ɾɾɾ

22. 8FC$PNQPOFOUT
    Λ *&
    &EHF Ͱಈ͔͢ͷେมͩͬͨφʔ Ϛδ͔ʙ Ϛδ͔ʙ ˞ձ࿩͸ΠϝʔδͰ͢ɻ XFCDPNQPOFOUTMJUFKT ࢖ͬͯͶʂ ผͷ΍ͭͩͱಈ͔ͳ͍Αˑϛ

    ࣗ෼ɺXFCDPNQPOFOUTTEDFKT ͡Όͳ͍ͱແཧͬ͢ɻ ͋ɺ͋ͱ๻͚ͩ )5.-&MFNFOU ͕ GVODUJPO͡Όͳͯ͘PCKFDU
    ͔ͩΒˑϛ

23. J04
    $ISPNF ͷ 13" ͷόάͱͷઓ͍   ԁόά ͠;ɹ
    ΍͘όά

24.   ԁόά   ԁҎ্ͷܾࡁͩͱ 13" ͕ಈ࡞͠ͳ͍ࣄ݅ /ios/chrome/browser/web/resources/payment_request.js amount.value

    = String(amount.value); if (amount.value > ��gCrWeb['paymentRequestManager'].MAX_STRING_LENGTH) { throw new TypeError( amountName + ' value cannot be longer than ' + ��gCrWeb['paymentRequestManager'].MAX_STRING_LENGTH + ' characters'); } '1025' > 1024

25. ʘ
    TUBUVT
    'JYFE ʗ IUUQTCVHTDISPNJVNPSHQDISPNJVNJTTVFTEFUBJM JE   ԁόά

26. ͠;ɹ
    ΍͘όά ୙఺ͷ෦෼ʹإจࣈ͕ग़͖ͯͯɺ ʮौ୩۠ʯͬͯଧͱ͏ͱ͢Δͱʮ͠;ɹ
    ΍͘ʯʹͳΔɻ 13" ͷೖྗϑΥʔϜͰ୙఺͕ଧͯͳ͍ࣄ݅

27. ͠;ɹ
    ΍͘όά

28. QBZNFOUTIJNKT ͱͷ߈๷ $ISPNF ͷϓϥΠϕʔτϞʔυͰ "NFCB1BZ ͕ಈ͔ͳ͘ͳͬͨ 
    @
    
    ௐࠪͨ͠ͱ͜Ζɾɾɾ

29. QBZNFOUTIJNKT ͱͷ߈๷ ʘ
    ͜Εͩ
    ʗ ˞"NFCB1BZ Ͱ͸ 1BZNFOU3FRVFTU ͕ VOEFpOFE ͳΒ 13"

    ະ࣮૷؀ڥͱ͍͏൑ఆ

30. QBZNFOUTIJNKT ͱͷ߈๷ !BHFLUNS ͞Μͱٞ࿦ ʘ
    ͳΜͱɺ௚ͯͩͬͨ͘͠͞ʂ
    ʗ ൑ఆʹ OVMM Λ௥Ճ͢Δ͔ɺTIJN Λ௚͔͢ɾɾɾ

31. J04 Ͱ 4BGBSJ ͕ 13" ʹରԠʂͰ΋ɾɾɾ "NFCB1BZ ͸ CBTJDDBSE ͷΈʢݱ࣌఺ʣ

    4BGBSJ ͷ 13" ͸ QBZNFOUBQQ ͷΈ ʗʈPʈʘŲŕŢƄšŖƃ

32. ͍͞͝ʹ

33. "NFCB1BZ ͸ࣾ಺ 4%, ͳͷͰ͕͢ɺ ຊ౰ʹͨ͘͞Μͷํʑͱ͝࿈ܞ͍͍ͤͯͨͩͯ͞ ࡞Γ্͍͛ͯΔϓϩδΣΫτͰ͢ɻ

34. νʔϜͷΈΜͳɺ ࣾ಺ͷॾઌഐํɺ JTTVF Λ௨ͯ͠ DISPNJVN ΍ QBZNFOUTIJN ͷ։ൃऀ༷ɺ !BHFLUNS ༷ɺ

    ܾࡁ୅ߦձ༷ࣾɺ ͍ͭ΋େม͓ੈ࿩ʹͳ͍ͬͯ·͢ɻ ͓ͦΒ͘͜͜ʹ͸୭΋͍ͳ͍Ͱ͕͢ʢসʣ ͜ͷ৔ΛआΓͯް͘ޚྱਃ্͛͠·͢ɻ

35. ʘ
    ͋Γ͕ͱ͏
    ʗ