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

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

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

Battle Conference U30 2018 #client_12

negishi miku

April 21, 2018
Tweet

More Decks by negishi miku

Other Decks in Technology

Transcript

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

    "NFCB1BZ5TVLBUUFSV8FC"QQ "CFNB ύʔΧʔΛணͨϐάͶ͗͠ +1:= 0SEFSTVNNBSZ IUUQTXXXOFHJNJDDPNTIPQ 7JTB  /&(*4)*.*,6 1BZNFOUNFUIPE
  2. 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);
  3. &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.
  4. 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();
  5. 8FC$PNQPOFOUTΛ *& &EHF Ͱಈ͔͢ͷେมͩͬͨφʔ ɹɹ*& ͱ &EHF Ͱಈ࡞ՄೳʹͳΔ QPMZpMM ͕ҧͬͨ

    ɹɹ*& Ͱ )5.-&MFNFOU ͕ GVODUJPO ͡Όͳͯ͘ PCKFDU ʹͳΔṖݱ৅ J04$ISPNF ͷ 13" ͷόάͱͷઓ͍ ɹɹ  ԁόά ɹɹ͠;ɹ΍͘όά QBZNFOUTIJNKT ͱͷ߈๷ J04 Ͱ 4BGBSJ ͕ 13" ʹରԠʂͰ΋ɾɾɾ
  6. 8FC$PNQPOFOUTΛ *& &EHF Ͱಈ͔͢ͷେมͩͬͨφʔ Ϛδ͔ʙ Ϛδ͔ʙ ˞ձ࿩͸ΠϝʔδͰ͢ɻ XFCDPNQPOFOUTMJUFKT ࢖ͬͯͶʂ ผͷ΍ͭͩͱಈ͔ͳ͍Αˑϛ

    ࣗ෼ɺXFCDPNQPOFOUTTEDFKT ͡Όͳ͍ͱແཧͬ͢ɻ ͋ɺ͋ͱ๻͚ͩ )5.-&MFNFOU ͕ GVODUJPO͡Όͳͯ͘PCKFDU͔ͩΒˑϛ
  7.   ԁόά   ԁҎ্ͷܾࡁͩͱ 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
  8. J04 Ͱ 4BGBSJ ͕ 13" ʹରԠʂͰ΋ɾɾɾ "NFCB1BZ ͸ CBTJDDBSE ͷΈʢݱ࣌఺ʣ

    4BGBSJ ͷ 13" ͸ QBZNFOUBQQ ͷΈ ʗʈPʈʘŲŕŢƄšŖƃ
  9. νʔϜͷΈΜͳɺ ࣾ಺ͷॾઌഐํɺ JTTVF Λ௨ͯ͠ DISPNJVN ΍ QBZNFOUTIJN ͷ։ൃऀ༷ɺ !BHFLUNS ༷ɺ

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