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

    View Slide

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

    View Slide

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

    View Slide

  4. "NFCB1BZ ͱ͸ʁ

    View Slide

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

    View Slide

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

    View Slide

  7. "NFCB1BZ4%,ʢ13" ͷ࣌ʣ
    =
    ߪೖ͢Δ
    ʘΘʔ͍ʗ
    5)"/,:06
    =
    ߪೖ͢Δ
    &%*5 1":
    "NFCB1BZ5TVLBUUFSV8FC"QQ
    "CFNB ύʔΧʔΛணͨϐάͶ͗͠ +1:=
    0SEFSTVNNBSZ
    IUUQTXXXOFHJNJDDPNTIPQ
    7JTB /&(*4)*.*,6
    1BZNFOUNFUIPE

    View Slide

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

    View Slide

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

    View Slide

  10. ࠾༻ٕज़ʹ͍ͭͯ

    View Slide

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

    View Slide

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

    View Slide

  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);

    View Slide

  14. View Slide

  15. &4.PEVMFT
    FYQPSUJNQPSU

    View Slide

  16. export default class AmebaPay extends HTMLElement {
    ���
    }
    import AmebaPay from ὆ameba-pay.js὆;

    View Slide

  17. &4. ରԠϒϥ΢β


    &4. ඇରԠϒϥ΢β


    &4.
    &4.

    View Slide

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

    View Slide

  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();

    View Slide

  20. ֑ӽ͑ʹ͍ͭͯ

    View Slide

  21. 8FC$PNQPOFOUTΛ *& &EHF Ͱಈ͔͢ͷେมͩͬͨφʔ
    ɹɹ*& ͱ &EHF Ͱಈ࡞ՄೳʹͳΔ QPMZpMM ͕ҧͬͨ
    ɹɹ*& Ͱ )5.-&MFNFOU ͕ GVODUJPO ͡Όͳͯ͘ PCKFDU ʹͳΔṖݱ৅
    J04$ISPNF ͷ 13" ͷόάͱͷઓ͍
    ɹɹ ԁόά
    ɹɹ͠;ɹ΍͘όά
    QBZNFOUTIJNKT ͱͷ߈๷
    J04 Ͱ 4BGBSJ ͕ 13" ʹରԠʂͰ΋ɾɾɾ

    View Slide

  22. 8FC$PNQPOFOUTΛ *& &EHF Ͱಈ͔͢ͷେมͩͬͨφʔ
    Ϛδ͔ʙ
    Ϛδ͔ʙ
    ˞ձ࿩͸ΠϝʔδͰ͢ɻ
    XFCDPNQPOFOUTMJUFKT ࢖ͬͯͶʂ
    ผͷ΍ͭͩͱಈ͔ͳ͍Αˑϛ
    ࣗ෼ɺXFCDPNQPOFOUTTEDFKT
    ͡Όͳ͍ͱແཧͬ͢ɻ
    ͋ɺ͋ͱ๻͚ͩ )5.-&MFNFOU ͕
    GVODUJPO͡Όͳͯ͘PCKFDU͔ͩΒˑϛ

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  27. ͠;ɹ΍͘όά

    View Slide

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

    ௐࠪͨ͠ͱ͜Ζɾɾɾ

    View Slide

  29. QBZNFOUTIJNKT ͱͷ߈๷
    ʘ͜Εͩʗ
    ˞"NFCB1BZ Ͱ͸ 1BZNFOU3FRVFTU ͕ VOEFpOFE ͳΒ 13" ະ࣮૷؀ڥͱ͍͏൑ఆ

    View Slide

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

    View Slide

  31. J04 Ͱ 4BGBSJ ͕ 13" ʹରԠʂͰ΋ɾɾɾ
    "NFCB1BZ ͸ CBTJDDBSE ͷΈʢݱ࣌఺ʣ
    4BGBSJ ͷ 13" ͸ QBZNFOUBQQ ͷΈ
    ʗʈPʈʘŲŕŢƄšŖƃ

    View Slide

  32. ͍͞͝ʹ

    View Slide

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

    View Slide

  34. νʔϜͷΈΜͳɺ
    ࣾ಺ͷॾઌഐํɺ
    JTTVF Λ௨ͯ͠ DISPNJVN ΍ QBZNFOUTIJN ͷ։ൃऀ༷ɺ
    !BHFLUNS ༷ɺ
    ܾࡁ୅ߦձ༷ࣾɺ
    ͍ͭ΋େม͓ੈ࿩ʹͳ͍ͬͯ·͢ɻ
    ͓ͦΒ͘͜͜ʹ͸୭΋͍ͳ͍Ͱ͕͢ʢসʣ
    ͜ͷ৔ΛआΓͯް͘ޚྱਃ্͛͠·͢ɻ

    View Slide

  35. ʘ͋Γ͕ͱ͏ʗ

    View Slide