Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
私が WebComponents オネーサン です / WebComponents Woman
negishi miku
April 21, 2018
Technology
0
390
私が 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.3k
Other Decks in Technology
See All in Technology
データチームの境界を考える
yummydum
0
170
LINEのB2Bプラットフォームにおけるトラブルシューティング2選
line_developers
PRO
3
280
ログ基盤をCloudWatchLogからNewRelic Logs + S3に変えたら 利便性も上がってコストも下がった話
onohiroshi1
0
150
サーバレスECにおける Step Functions の使い方 〜ステートマシン全部見せます!〜
miu_crescent
0
170
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
cybozuinsideout
PRO
2
1.5k
インタラクティブなメディアの地図投影法: WebメルカトルからAdaptive Projectionsへ / MIERUNE 社内勉強会 #033
sorami
2
210
miisan's career talk
mii3king
0
220
JJUG2022_spring_Keycloak (Red Hat Single Sign-on)
tinoue
0
190
1人目SETとして入社して2ヶ月の間におこなったこと
tarappo
3
400
現状のFedCMの動作解説と OIDCとの親和性について- OpenID TechNight vol.19
ritou
2
420
ノーメンテナンス運用実現のためのノウハウ/ColoplTech-05-02
colopl
0
160
Security Hub のマルチアカウント 管理・運用をサーバレスでやってみる
ch6noota
0
520
Featured
See All Featured
Optimizing for Happiness
mojombo
365
63k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
23
15k
The Art of Programming - Codeland 2020
erikaheidi
32
9.9k
Become a Pro
speakerdeck
PRO
3
830
Designing Experiences People Love
moore
130
22k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
Unsuck your backbone
ammeep
659
55k
Embracing the Ebb and Flow
colly
73
3.4k
Bash Introduction
62gerente
597
210k
Designing for Performance
lara
597
63k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
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 ༷ɺ
ܾࡁߦձ༷ࣾɺ ͍ͭେม͓ੈʹͳ͍ͬͯ·͢ɻ ͓ͦΒ͘͜͜ʹ୭͍ͳ͍Ͱ͕͢ʢসʣ ͜ͷΛआΓͯް͘ޚྱਃ্͛͠·͢ɻ
ʘ͋Γ͕ͱ͏ʗ