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
650
私が 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
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
200
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
150
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
130
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
130
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
140
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
350
Introdução a Service Mesh usando o Istio
aeciopires
0
210
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
240
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
500
組織改革から開発効率向上まで! - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
shift_evolve
PRO
1
110
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Producing Creativity
orderedlist
PRO
347
40k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Statistics for Hackers
jakevdp
799
220k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Building Applications with DynamoDB
mza
96
6.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Six Lessons from altMBA
skipperchong
29
4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
The Cult of Friendly URLs
andyhume
79
6.6k
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 ༷ɺ
ܾࡁߦձ༷ࣾɺ ͍ͭେม͓ੈʹͳ͍ͬͯ·͢ɻ ͓ͦΒ͘͜͜ʹ୭͍ͳ͍Ͱ͕͢ʢসʣ ͜ͷΛआΓͯް͘ޚྱਃ্͛͠·͢ɻ
ʘ͋Γ͕ͱ͏ʗ