Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
私が WebComponents オネーサン です / WebComponents Woman
Search
negishi miku
April 21, 2018
Technology
0
640
私が WebComponents オネーサン です / WebComponents Woman
Battle Conference U30 2018 #client_12
negishi miku
April 21, 2018
Tweet
Share
More Decks by negishi miku
See All by negishi miku
私が WebComponents オネーサン です
negimic
5
3.8k
Other Decks in Technology
See All in Technology
MobileActOsaka_250704.pdf
akaitadaaki
0
130
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
Geminiとv0による高速プロトタイピング
shinya337
1
270
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
160
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.2k
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
200
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Producing Creativity
orderedlist
PRO
346
40k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Transcript
גࣜձࣾαΠόʔΤʔδΣϯτ ࠜ؛ ະ དྷ ϑϩϯτΤϯυΤϯδχΞ ࢲ͕ 8FC$PNQPOFOUTśŮŖšƃ Ͱ͢
!OFHJNJD ʘϑΥϩʔ͍ͯͩ͘͠͞ʗ
8FC$PNQPOFOUTͱ 1BZNFOU3FRVFTU"1*ʢ13"ʣ Ͱ "NFCB1BZ Λͭͬͨ͘ɻ
"NFCB1BZ ͱʁ
"NFCB ͷ৽͍͠ڞ௨ܾࡁγεςϜ ηΩϡΞͰγϯϓϧͳܾࡁମݧΛఏڙ͢Δ
4IBEPX%0. ΧϓηϧԽ #VUUPO
"NFCB1BZ4%,ʢ13" ͷ࣌ʣ = ߪೖ͢Δ ʘΘʔ͍ʗ 5)"/,:06 = ߪೖ͢Δ &%*5 1":
"NFCB1BZ5TVLBUUFSV8FC"QQ "CFNB ύʔΧʔΛணͨϐάͶ͗͠ +1:= 0SEFSTVNNBSZ IUUQTXXXOFHJNJDDPNTIPQ 7JTB /&(*4)*.*,6 1BZNFOUNFUIPE
"NFCB1BZ4%,ʢϦϯΫλΠϓͷ࣌ʣ = ߪೖ͢Δ ʘΘʔ͍ʗ 5)"/,:06 ςϯϓϨʔτͷඍௐͱɺ TUZMF Λࣗ༝ʹ͋ͯΔ͜ͱ͕Ͱ͖ΔͷͰ Ͱ͖Δ͚ͩγϯϓϧʹɻ ܾࡁߦձࣾͷΧʔυใೖྗͷը໘
ΫϨδοτΧʔυใΛ҆શʹѻ͏˞ 13" ʹΑͬͯࣗࣾαʔϏε͔Βͤͣ؆୯ʹܾࡁྃͰ͖Δ 13" ඇରԠڥͰɺγϯϓϧͰ͔Γ͍ܾ͢ࡁϖʔδΛఏڙ ͍ΖΜͳܾࡁํ๏ΛՃ͍ͯ͘͠ࠓޙͷల ˞αʔϏεఏڙଆͷαʔόͰɺΫϨΧใΛอଘɺॲཧɺ௨աΛ͠ͳ͍ɻ "NFCB1BZ ͷ͍͍ͱ͜Ζ
࠾༻ٕज़ʹ͍ͭͯ
$VTUPN&MFNFOUT BNFCBQBZ ΧελϜཁૉΛొ
4IBEPX%0. ΧϓηϧԽ
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);
None
&4.PEVMFT FYQPSUJNQPSU
export default class AmebaPay extends HTMLElement { ��� } import
AmebaPay from ameba-pay.js;
&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.
1BZNFOU3FRVFTU"1* ܾࡁใೖྗ༻ͷ 6* Λϒϥβ͕ఏڙ͢Δ
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();
֑ӽ͑ʹ͍ͭͯ
8FC$PNQPOFOUTΛ *& &EHF Ͱಈ͔͢ͷେมͩͬͨφʔ ɹɹ*& ͱ &EHF Ͱಈ࡞ՄೳʹͳΔ QPMZpMM ͕ҧͬͨ
ɹɹ*& Ͱ )5.-&MFNFOU ͕ GVODUJPO ͡Όͳͯ͘ PCKFDU ʹͳΔṖݱ J04$ISPNF ͷ 13" ͷόάͱͷઓ͍ ɹɹ ԁόά ɹɹ͠;ɹ͘όά QBZNFOUTIJNKT ͱͷ߈ J04 Ͱ 4BGBSJ ͕ 13" ʹରԠʂͰɾɾɾ
8FC$PNQPOFOUTΛ *& &EHF Ͱಈ͔͢ͷେมͩͬͨφʔ Ϛδ͔ʙ Ϛδ͔ʙ ˞ձΠϝʔδͰ͢ɻ XFCDPNQPOFOUTMJUFKT ͬͯͶʂ ผͷͭͩͱಈ͔ͳ͍Αˑϛ
ࣗɺXFCDPNQPOFOUTTEDFKT ͡Όͳ͍ͱແཧͬ͢ɻ ͋ɺ͋ͱ͚ͩ )5.-&MFNFOU ͕ GVODUJPO͡Όͳͯ͘PCKFDU͔ͩΒˑϛ
J04$ISPNF ͷ 13" ͷόάͱͷઓ͍ ԁόά ͠;ɹ͘όά
ԁόά ԁҎ্ͷܾࡁͩͱ 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
ʘTUBUVT'JYFE ʗ IUUQTCVHTDISPNJVNPSHQDISPNJVNJTTVFTEFUBJM JE ԁόά
͠;ɹ͘όά ͷ෦ʹإจࣈ͕ग़͖ͯͯɺ ʮौ୩۠ʯͬͯଧͱ͏ͱ͢Δͱʮ͠;ɹ͘ʯʹͳΔɻ 13" ͷೖྗϑΥʔϜͰ͕ଧͯͳ͍ࣄ݅
͠;ɹ͘όά
QBZNFOUTIJNKT ͱͷ߈ $ISPNF ͷϓϥΠϕʔτϞʔυͰ "NFCB1BZ ͕ಈ͔ͳ͘ͳͬͨ @ ௐࠪͨ͠ͱ͜Ζɾɾɾ
QBZNFOUTIJNKT ͱͷ߈ ʘ͜Εͩʗ ˞"NFCB1BZ Ͱ 1BZNFOU3FRVFTU ͕ VOEFpOFE ͳΒ 13"
ະ࣮ڥͱ͍͏ఆ
QBZNFOUTIJNKT ͱͷ߈ !BHFLUNS ͞Μͱٞ ʘͳΜͱɺͯͩͬͨ͘͠͞ʂʗ ఆʹ OVMM ΛՃ͢Δ͔ɺTIJN Λ͔͢ɾɾɾ
J04 Ͱ 4BGBSJ ͕ 13" ʹରԠʂͰɾɾɾ "NFCB1BZ CBTJDDBSE ͷΈʢݱ࣌ʣ
4BGBSJ ͷ 13" QBZNFOUBQQ ͷΈ ʗʈPʈʘŲŕŢƄšŖƃ
͍͞͝ʹ
"NFCB1BZ ࣾ 4%, ͳͷͰ͕͢ɺ ຊʹͨ͘͞Μͷํʑͱ͝࿈ܞ͍͍ͤͯͨͩͯ͞ ࡞Γ্͍͛ͯΔϓϩδΣΫτͰ͢ɻ
νʔϜͷΈΜͳɺ ࣾͷॾઌഐํɺ JTTVF Λ௨ͯ͠ DISPNJVN QBZNFOUTIJN ͷ։ൃऀ༷ɺ !BHFLUNS ༷ɺ
ܾࡁߦձ༷ࣾɺ ͍ͭେม͓ੈʹͳ͍ͬͯ·͢ɻ ͓ͦΒ͘͜͜ʹ୭͍ͳ͍Ͱ͕͢ʢসʣ ͜ͷΛआΓͯް͘ޚྱਃ্͛͠·͢ɻ
ʘ͋Γ͕ͱ͏ʗ