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
Make good (better) form
Search
Kusamao Abe
October 16, 2018
Technology
0
230
Make good (better) form
Kusamao Abe
October 16, 2018
Tweet
Share
More Decks by Kusamao Abe
See All by Kusamao Abe
Vue builds
kusamao
1
450
Javascript in the past and now
kusamao
1
160
The Essence of UI Design
kusamao
1
1.9k
Making mock-up in web application
kusamao
0
73
Keep a distance from jQuery
kusamao
0
100
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Technology
See All in Technology
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
1
300
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
370
Storybook との上手な向き合い方を考える
re_taro
5
730
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
120
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
SDNという名のデータプレーンプログラミングの歴史
ebiken
PRO
2
120
Platform Engineering for Software Developers and Architects
syntasso
1
520
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
200
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
930
日経電子版のStoreKit2フルリニューアル
shimastripe
1
150
RubyのWebアプリケーションを50倍速くする方法 / How to Make a Ruby Web Application 50 Times Faster
hogelog
3
950
『Firebase Dynamic Links終了に備える』 FlutterアプリでのAdjust導入とDeeplink最適化
techiro
0
160
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Rails Girls Zürich Keynote
gr2m
94
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
RailsConf 2023
tenderlove
29
900
Designing for Performance
lara
604
68k
Producing Creativity
orderedlist
PRO
341
39k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
2018/10/16 JAM plus #03 at tambourine commune ͍͍ϑΥʔϜΛͭ͘Ζ͏
҆෦ຑੜ Kusamao Abe גࣜձࣾλϯόϦϯ ʢtambourine.incʣ ɾςΫχΧϧσΟϨΫλʔ ɾWebΤϯδχΞ
JAM plusͷ͓͞Β͍ w JAMελοΫˠJavaScript API MarkUpΒ͍͠ w MEANελοΫͱ͔LAMPͱ͔ͦ͏͍͏ͭ ϑϩϯτΤϯυΛࢦ͢Β͍͠ w
plusͬͯԿˠ͜ͷϏϧͷ໊લ͕ϓϥεϏϧ w ݄։࠵͍͔͠͠Εͳ͍ʜʜ
ͦ͏ɺͦΖͦΖͷ
౦ژΦϦϯϐοΫ ͍͖ۙͮͯ·ͨ͠
IUUQTOFXTZBIPPDPKQCZMJOFLBOEBUPTIJBLJ
͡Ό͋ྑ͍ϑΥʔϜͬͯʁ
IUUQTVTJUFKQBMFSUCPYXFCGPSNEFTJHO
Kathryn Whitenton͍Θ͘ ͘͠Α͏ɻ ؔ࿈ͷ͋ΔϥϕϧͱೖྗཝάϧʔϓͰ͋ΔͱݟͯΘ͔ΔΑ͏ʹ͠Α͏ɻ ೖྗཝͷϨΠΞτΧϥϜʹ͠Α͏ɻ ཧతͳॱ൪ͰฒΑ͏ɻ
ϓϨʔεϗϧμςΩετར༻͠ͳ͍Α͏ʹ͠Α͏ɻ ೖྗཝೖྗ༰ͷछྨ͞ʹ߹͏ͷʹ͠Α͏ɻ ೖྗ͕ҙͷཝͱඞਢͷཝΛݟ͚ΒΕΔΑ͏ʹ͠Α͏ɻ ೖྗϑΥʔϚοτͷཁ݅ͯ͢આ໌͠Α͏ɻ ʮϦηοτʯϘλϯͱʮΫϦΞʯϘλϯΘͳ͍Α͏ʹ͠Α͏ɻ ʹ͖͘͢ɺ۩ମతͳΤϥʔϝοηʔδΛఏڙ͠Α͏ɻ
͜ΕΛकͬͯΕ͍͍ϑΥʔϜʁ
୭ʹͱͬͯʮ͍͍ʯʁ w ։ൃऀ w ࡞Γ͍͢ w ϝϯς͍͢͠ w ར༻ऀ w
ҟͳΔڥɾ݅ԼͰ͍͍͢ w తΛୡ͢Δͷ͕༰қ w ڙڅଆ w ਖ਼͍͠ใ͕ೖྗ͞ΕΔ w ͕ྃߴ͍
ଟ͘ͷ߹ɺ ʮࡾํྑ͠ʯΉ͔͍ͣ͠ʜ
ϚδͰ͍͍ϑΥʔϜͷڀۃ
ೖྗ͠ͳ͍͍ͯ͘͜ͱͰʁʁʁ
ͦͦೖྗΊΜͲ͍ w Զୡ͋ͱԿճϝʔϧΞυϨεΛೖྗ͠ͳ͍ͱ͍͚ͳ͍ͷ͔ w ࣗಈೖྗ͕ޮ͔ͳ͍ϑΥʔϜͨ͘͞Μ͋Δ w ͳΜ͔͏ͥΜͿɺϐοͱͬͯͰ͖ͳ͍͔ͬ͢ʁʁʁʁʁ
ͨͱ͑Amazon Pay
IUUQTQBZBNB[PODPNKQTIPQQFS
Amazon Pay w AmazonͷΞΧϯτʹొ͞ΕܾͨࡁใͰܾࡁͯ͘͠ΕΔ w ࣄۀऀܾࡁใΛอ͓࣋ͯ͘͠ϦεΫΛऔΒͣʹࡁΉ w ॅॴใ͍ͭͷAmazonͷͭͰ w खྉίϯςϯπͷ4%ʙ4.5%
Apple Payͱ͔ Google Payͦ͏
·͋ͦΕ͔ͬΓ͡Όͳ͍ΑͶ w ࣗͷͱ͜ΖͰΞΧϯτ࡞Βͤͯ*%౷߹ͯ͠."Γ͍ͨΑͶʙ w खྉߴ͍ʂͩʂ w ͨͩͷ͝ҙݟϑΥʔϜ͔ͩΒ͍ͦͦΒΜͷ͕ͩʙ
͍͔͠͠େࣄͳ͜ͱͳΜͰ͢
ਓɺؒҧ͑Δʜʜ
ͷ͕૿͑ΔͱͲ͏ͳΔ͔ w ࡞Δͷ͕ଟ͍ ˠΤϯόάͷՄೳੑ͕૿͑Δ w ೖྗ͢Δͷ͕ଟ͍ ˠೖྗΛؒҧ͑ΔՄೳੑ͕૿͑Δ w ཧ͢Δͷ͕ଟ͍ ˠηΩϡϦςΟࣄނͷՄೳੑ͕૿͑Δ
ͰɺͲ͏ͯ͠ඞཁͳ߲͋Δ w ࡂɾݮࡂ͠Α͏ w ηΩϡϦςΟ্ͷࣄނΛݮΒ͢ w όάΛݮΒ͢ w ೖྗϛεΛݮΒ͢
ϑϩϯτΤϯυΤϯδχΞ ͕Δ͜ͱ
όάΛݮΒ͢ w ͍·͋ͨΓલͳΜ͚͢Ͳ w όϦσʔγϣϯͰ௨͖͢ύλʔϯΛ͍͍ͯͨͱ͔ w ಛఆͷύλʔϯΛ౿ΉͱΛు͍ͯશ෦ೖྗ༰͕ফ͑Δͱ͔ w ૹ৴࣌ʹใ͕ܽམͯͨ͠ͱ͔
ೖྗϛεΛݮΒ͢ w όοΫΤϯυόϦσʔγϣϯϑϩϯτΤϯυόϦσʔγϣϯ ʮ͋ͬͯͨΓલʯʹͳ͖ͬͯͨʢͬͯͳ͍ͳΒΖ͏ͳʣ w ͦͦೖྗΛਖ਼͘͠Ͱ͖ΔΑ͏ʹ͢Δ
ྫɿ༣ศ൪߸ w ܻͷࣈ͔ΒͳΔຊͷ༣ศ൪߸ w ʮܻܻͷೖྗཝʹ͚Α͏ʯ w ʮ֯ࣈ͚ͩڐ༰ͯ͠΄͔Τϥʔʹ͠Α͏ʯ w ʮͦͷ༣ศ൪߸ͰϥΠϒϥϦ͔ΒॅॴҾ͍ͯ ॅॴ͕ଘࡏ͠ͳ͚ΕΤϥʔʹ͠Α͏ʯ
Τϥʔʹ͠ͳ͍ͱ͍͏ख๏ w ςΫϊϩδʔͰղܾͰ͖Δ͜ͱͯ͋͛͠Α͏ w ֯ࣈ͚ͩ͡Όͳ͘ɺશ֯ࣈΛมͯ͋͛͠Α͏ w ඞཁͳ͍จࣈྻ͕ೖͬͯউखʹऔΓআ͘ w ແବʹׂͯ͠ೖྗͤ͞ͳ͍ɺܻͰόϥ͢ͷϓϩάϥϜͰͰ͖Δ w
ˠσʔλܗࣜΛؒҧ͑Α͏͕ͳ͍
None
w jQueryͰόϦσʔγϣϯͶɺͭΒ͍ w ͪΐͬͱͨ͠ϑΥʔϜͰVue.js͏ͱΊͬͬͪΌͪ͘Όָ w σβΠϯͦ͜·Ͱؾʹ͠ͳ͍ͳΒElementUIΛ͏ͱͪΐʙʙʙʙָ
ςΫϊϩδʔͰղܾͰ͖ͳ͍͜ͱ͋Δ͕ w ͨͱ͑ಛघͳ༣ศ൪߸ͱ͍͏ͷ͕ଘࡏ͢Δ w ࠃཱେͷֶੜྈͱ͔ͩͱ൪ʹඥͮ͘ͷͰͳ͘ಛघͳ൪߸͕ඥ͍ͯ ͍ͯɺ༣ศ൪߸͚ͩͰࢪઃ͕ಛఆͰ͖ΔΑ͏ʹͳ͍ͬͯͨΓ͢Δ ʢͦ͏͍͏ͷϥΠϒϥϦͰҾ͚ͳ͍߹͕͋Δʣ w ˠҰ֓ʹϥΠϒϥϦͰҾ͔͔ͬΒͳ͍ͳΒଘࡏ͠ͳ͍༣ศ൪߸ͱݴ͑Δ ͔Θ͔Βͳ͍
IUUQTKBXJLJQFEJBPSHXJLJ&#&#&#'&""&'#
ͰॅॴؒҧͬͯͨΒࠔΔ w Θ͔Δʂʂʂʂʂʂʂʂ w ΫϩωίϠϚτձһαʔϏεొ࣌ʹ࣮ࡍʹొ͞Εͨॅॴʹ๚ͯ͠ ձһΧʔυΛ͢͜ͱͰ͋ΔఔͷޡΓνΣοΫΛ͍ͯͨ͠ w ༣ศ൪߸͕ͳͯ͘ՙखࢴಧ͘ ʢୡॴଆ͕θϯϦϯͷਤཤྺ͔Β֬ೝͨ͠Γ͍ͯ͠Δͷ͕΄ͱΜͲʣ
ؒҧͬͯͨΒ͍ͷΛݟۃΊΖ w ڧݻͳόϦσʔγϣϯʢόοΫɾϑϩϯτʣ w ೖྗϑΥʔϚοτΛ໌ࣔ͠ɺ ؒҧ͍ͬͯΔ߹Ͳ͏ͬͨΒղܾͰ͖Δ͔Λదʹࣔ͢ w ϝʔϧΞυϨε ˠ࣮ࡍʹૹ৴ͯ͠ෆୡνΣοΫ w
ܞଳి൪߸ ˠ4.4ʹΑΔຊਓνΣοΫ w ॅॴ ˠձһূɾొূૹʹΑΔνΣοΫ
Θ͔Γ͍͍͢͞ʁ w ใϦςϥγʔͷ͍ঢ়ଶʢటਲͯ͠Δͱ͔ᐒᐓͱ͍ͯ͠Δͱ͔ʣͷͱ͖ʹ ͑Δ͜ͱ͕ఏڙଆͷෆརӹʹͳΔͷࠔΔ w టਲͰAmazonͰؾ͕େ͖͘ͳͬͪΌͬͯߴֹͳͷΛങ͏ͱ͔ʁ w ωοτόϯΩϯάΛటਲঢ়ଶͰ͑Δ͖ͳͷ͔ʜʁʁʁʁʁʁʁʁ w ϑΥʔϚοτ͕໌ࣔ͞ΕͯΔͱ૯ͨΓ߈ܸͷώϯτΛ૿ͯ͠͠·͏Α͏
ͳؾ͢Δ w ʮ͜ͷϝʔϧΞυϨεొ͞Ε͍ͯ·͢ʯͬͯग़ͪ͠Ό͏ͷ·͍ͣ
ॱ൪͕͋Δ w ηΩϡϦςΟ্ͷݒ೦·ͣઌʹ௵͓ͯ͜͠͏ w ҰͰใ࿙͍͑Έ͍ͨͳΠϯγσϯτ͕͋ͬͨͱ͜ΖΛ͍͍͔ͨͲ͏͔Έͨ ͍ͳʹͳͬͯ͘Δ w ͦͷ্ͰɺఏڙͰ͖Δใఏڙ͠Α͏ʢϑΥʔϚοτखॱͳͲʣ w గਖ਼ՄೳͳͷϓϩάϥϜͰٵऩɺΦϖϨʔγϣϯͰָʹղܾͰ͖Δͷͦͷ·
·ɺͲ͏ͯ͠μϝͳͷʮͲ͏͢ΕͤΔ͔ʯΛ໌ࣔͯ͠ϑΟʔυόοΫ͢Δ w ΫϦςΟΧϧͳ࡞ۀ߲֬ೝμΠΞϩάͳͲͰϫϯΫογϣϯஔ͍ͨΓɺྃޙ ʹྃϝʔϧඈ͢ͱ͔ͰϩάΛ͓ͯ͘͠ʢਓటਲऀͷരങ͍ʹແྗʣ
༨ஊ
ϑΥʔϜ͋Δ͋Δ w ʮσβΠϯͱίʔσΟϯά·Ͱͬͯ͋ͱγεςϜͷਓʹʙʯ w %#ʹอଘ͢ΔʁϝʔϧૹΔʁηΩϡϦςΟͲ͏͢Δʁ w ͍Ζ͍Ζߟ͑Δ͜ͱଟ͍ʢݸਓใѻ͏߹ಛʹʣ
Pardot Form Handler w SalesforceͷʮPardotʯͷForm HandlerΛ͏ͱͦͷ͋ͨΓͪΐͬͱ ָ͔ w طଘͷίʔσΟϯάࡁΈϑΥʔϜͷૹ৴ઌΛPardotʹ͢ΔΠϝʔδ w
Ϧʔυͷ࿈ܞϑϩʔͱͷ࿈ܞ w IUUQTIFMQTBMFTGPSDFDPNBSUJDMF7JFX JEQBSEPU@GPSN@IBOEMFSTIUNUZQF
IUUQTXXXUBNUBNDPKQUJQTOPUFIUNM@DTTQPTUIUNM
Έ͍ͨͳSaaSͱ͔ΊͬͪΌ͋ΔͷͰ ʮ࡞Βͳ͍ʯબࢶ͋ΔΑ
େࣄͳ͜ͱ w ඞཁ͕ͳ͍ͷΛ࡞Βͳ͍ w ࣗͨͪͰ࡞Βͳ͍͍ͯ͘ͳΒ࡞Βͳ͍ʢ͋ΔͷΛ͏ʣ w ࡞Δͱ͖༏ઌॱংΛཱͯͯߟ͑Δʢ୭ͷɾͳΜͷͨΊͷϑΥʔϜʁʣ w jQueryͷόϦσʔγϣϯɺͭΒ͍ w
ϓϩάϥϜ͚ͩͰղܾͤͣ᎕खΛͬͯͭΒΈճආ͍ͯ͘͠ w ೖྗΤϥʔ͕ى͖ͳ͍Α͏ʹɺى͖͙ͯ͢෮ؼͰ͖ΔΑ͏ʹ
͕ࣗϘϥϯςΟΞԠืϑΥʔϜ࡞Δͱ͖ɺ Ͳ͏͢ΔͩΖ͏ͳͱ͓͍·ͨ͠
Thank you!