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
550
私が 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.5k
Other Decks in Technology
See All in Technology
XRミーティング 2024-03-20
1ftseabass
PRO
0
100
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.6k
AWS アーキテクチャクイズ
yuu26
2
700
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
CI/CDがあたりまえの今の時代にAPIテスティングツールに求められていること / CI/CD Test Night #7
k1low
12
2.9k
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
210
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
130
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
140
どう買う?Azure
kuniteru
1
190
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.4k
10分でわかるfreeeのQA
freee
0
230
「XX試験の環境作ってよ」と言われた時によく使うAWSのソリューションについて
bun913
0
120
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1353
200k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Raft: Consensus for Rubyists
vanstee
130
6.2k
Designing with Data
zakiwarfel
94
4.8k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
KATA
mclloyd
14
11k
We Have a Design System, Now What?
morganepeng
42
6.7k
The Cult of Friendly URLs
andyhume
73
5.6k
Ruby is Unlike a Banana
tanoku
95
10k
How GitHub (no longer) Works
holman
301
140k
How STYLIGHT went responsive
nonsquared
92
4.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
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 ༷ɺ
ܾࡁߦձ༷ࣾɺ ͍ͭେม͓ੈʹͳ͍ͬͯ·͢ɻ ͓ͦΒ͘͜͜ʹ୭͍ͳ͍Ͱ͕͢ʢসʣ ͜ͷΛआΓͯް͘ޚྱਃ্͛͠·͢ɻ
ʘ͋Γ͕ͱ͏ʗ