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
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
660
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
4
1.1k
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
140
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
sarahjwells
0
120
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
150
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
230
スタートアップにおけるこれからの「データ整備」
shomaekawa
1
300
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
380
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
150
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
980
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
170
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
Building Adaptive Systems
keathley
43
2.8k
Six Lessons from altMBA
skipperchong
28
4k
A designer walks into a library…
pauljervisheath
209
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
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 ༷ɺ
ܾࡁߦձ༷ࣾɺ ͍ͭେม͓ੈʹͳ͍ͬͯ·͢ɻ ͓ͦΒ͘͜͜ʹ୭͍ͳ͍Ͱ͕͢ʢসʣ ͜ͷΛआΓͯް͘ޚྱਃ্͛͠·͢ɻ
ʘ͋Γ͕ͱ͏ʗ