私が WebComponents オネーサン です / WebComponents Woman

私が WebComponents オネーサン です / WebComponents Woman

Battle Conference U30 2018 #client_12

Cc3c32ee276fd6d180dea4cd59411ee7?s=128

negishi miku

April 21, 2018
Tweet

Transcript

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

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

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

  4. "NFCB1BZ ͱ͸ʁ

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

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

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

    "NFCB1BZ5TVLBUUFSV8FC"QQ "CFNB ύʔΧʔΛணͨϐάͶ͗͠ +1:= 0SEFSTVNNBSZ IUUQTXXXOFHJNJDDPNTIPQ 7JTB  /&(*4)*.*,6 1BZNFOUNFUIPE
  8. "NFCB1BZ4%,ʢϦϯΫλΠϓͷ࣌ʣ = ߪೖ͢Δ ʘΘʔ͍ʗ 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 FYQPSUJNQPSU

  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. 1BZNFOU3FRVFTU"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. ʘ͋Γ͕ͱ͏ʗ