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

Battle Conference U30 2018 #client_12

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