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
HPにEC機能を埋め込む際、Nuxt.js様のおかげで乗り切れた話
Search
Keigo Nakao
February 21, 2023
Programming
0
630
HPにEC機能を埋め込む際、Nuxt.js様のおかげで乗り切れた話
カラーミーショップAPIを活用してオリジナルのHPなどにEC機能を埋め込む際、Nuxt.js様のおかげでスムーズに乗り越えられたポイントをしゃべります。
Keigo Nakao
February 21, 2023
Tweet
Share
More Decks by Keigo Nakao
See All by Keigo Nakao
Nuxt Serverと$fetchを 組み合わせたTypeScript開発体験
kspace
4
1.7k
IGAによるメロディ生成
kspace
0
190
ECテックカンファレンス2023
kspace
1
1k
Other Decks in Programming
See All in Programming
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
20240706_CDKConf
takuyay0ne
0
1.2k
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
CSC307 Lecture 10
javiergs
PRO
0
310
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
Rust.Nagoya #1
codemountains
0
170
最近追加した型の紹介とその振り返り
aki19035vc
0
170
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Web development in the modern age
philhawksworth
203
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Thoughts on Productivity
jonyablonski
64
4.1k
Design by the Numbers
sachag
277
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Teambox: Starting and Learning
jrom
130
8.6k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
What's in a price? How to price your products and services
michaelherold
239
11k
Transcript
HPにEC機能を埋め込む際、 Nuxt.js様のおかげで乗り切れた話 keigo (@Kspace_trk) Vue.js v-tokyo Meetup #16
Vue.js v-tokyo Meetup #16 Keigo Nakao (23) b 2022年4月にGMOペパボに新卒入i b
カラーミーショップのエンジニP b 趣味、好きなこX b DTM (作曲), DJ, カメラ, マジック, ロケットリーグ @Kspace_trk
Vue.js v-tokyo Meetup #16 #1 Vue.jsでカラーミーショップの フロントエンド開発をしている話 #2 カラーミーショップAPI +
Nuxt.js 本日は2本立てで
Vue.js v-tokyo Meetup #16 #1 カラーミーショップの開発でVue.jsを導入している話
Vue.js v-tokyo Meetup #16 #1 カラーミーショップの開発でVue.jsを導入している話 フロントエンド:Smarty バックエンド:PHP 従来までのカラーミーショップ
Vue.js v-tokyo Meetup #16 #1 カラーミーショップの開発でVue.jsを導入している話 フロントエンド:Smarty + Vue.js バックエンド:PHP
現在のカラーミーショップ
Vue.js v-tokyo Meetup #16 #1 カラーミーショップの開発でVue.jsを導入している話 現在のカラーミーショップ 大体こんな感じ ... Vue
Smarty PHP public dist Vueのdist
Vue.js v-tokyo Meetup #16 #1 カラーミーショップの開発でVue.jsを導入している話 現在のカラーミーショップ 最近Vue3を導入 ... Vue
Vue3 Smarty PHP public dist Vueのdist
Vue.js v-tokyo Meetup #16 #1 カラーミーショップの開発でVue.jsを導入している話 現在のカラーミーショップ 最近Vue3を導入 現在Vue3に移行中 ...
Vue Vue3 Smarty PHP public dist Vueのdist
Vue.js v-tokyo Meetup #16 #1 Vue.jsでカラーミーショップの フロントエンド開発をしている話 #2 カラーミーショップAPI +
Nuxt.js 本日は2本立てで
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js クライアントさん クライアントさん
クライアントさん クライアントさん うちのHPにEC機能 埋め込んでよ!笑 こんなデザインで! フリーランスもしくはWeb制作会社を運営していると、 このようなことがあるかと思います。
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js 色々なAPIがある https://developer.shop-pro.jp/docs/colorme-api
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js 作るもの (ざっくり)
LOGO menu menu menu LOGO menu menu menu https://hoge.com/products https://hoge.com/product/{productId} 商品名 1,000円 いい感じのTシャツです。 サイズ:M カートに入れる
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js 作るもの (APIでいい感じにやるだけかと思いきや)
LOGO menu menu menu LOGO menu menu menu https://hoge.com/products https://hoge.com/product/{productId} ここがちょっとクセモノ 商品名 1,000円 いい感じのTシャツです。 サイズ:M カートに入れる
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ サイズ
M カートに入れる
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ サイズ
M カートに入れる 埋め込みscriptが発行できる
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ 色々ついてくるし、Nuxt側でスタイリングしたい
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ <form
action=”カートのURL”> 色々端折っています </form> <input type=”submit”> <option value=”サイズID”>
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ <form
action=”カートのURL”> </form> <input type=”submit”> <option value=”サイズID”>
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ カラーミーが生成するページを見に行った
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ 謎の値が、、しかも謎のカンマが、、
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ ←options[num].idかもしれない
APIドキュメントみにきた
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ ←options[num].idかもしれない
そうだった APIドキュメントみにきた
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ しかしAPIで取れるのは、81654775の数字
右のカンマ以降はロジックで錬成しなければ
Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ <option
v-for=”第2引数でindexとる” :value=”APIで取った数字 + ‘,’ + index”> 都合よすぎワロタ
まとめ Vue.js v-tokyo Meetup #16 U カラーミーAPI × Nuxt.jsで、見た目フルカスタムECサイトができF U
今回このようなECサイトを制作したことで、ドキュメントのなさに驚いたc U もっとスムーズに開発できるよう、たくさん発信や改善していきたい