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

Battle Conference U30 2018 #client_12

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);
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. ʘ
    ͋Γ͕ͱ͏
    ʗ