Slide 1
Slide 1 text
HPにEC機能を埋め込む際、
Nuxt.js様のおかげで乗り切れた話
keigo (@Kspace_trk)
Vue.js v-tokyo Meetup #16
Slide 2
Slide 2 text
Vue.js v-tokyo Meetup #16
Keigo Nakao (23)
b 2022年4月にGMOペパボに新卒入i
b カラーミーショップのエンジニP
b 趣味、好きなこX
b DTM (作曲), DJ, カメラ, マジック, ロケットリーグ
@Kspace_trk
Slide 3
Slide 3 text
Vue.js v-tokyo Meetup #16
#1 Vue.jsでカラーミーショップの
フロントエンド開発をしている話
#2 カラーミーショップAPI + Nuxt.js
本日は2本立てで
Slide 4
Slide 4 text
Vue.js v-tokyo Meetup #16
#1 カラーミーショップの開発でVue.jsを導入している話
Slide 5
Slide 5 text
Vue.js v-tokyo Meetup #16
#1 カラーミーショップの開発でVue.jsを導入している話
フロントエンド：Smarty
バックエンド：PHP
従来までのカラーミーショップ
Slide 6
Slide 6 text
Vue.js v-tokyo Meetup #16
#1 カラーミーショップの開発でVue.jsを導入している話
フロントエンド：Smarty + Vue.js
バックエンド：PHP
現在のカラーミーショップ
Slide 7
Slide 7 text
Vue.js v-tokyo Meetup #16
#1 カラーミーショップの開発でVue.jsを導入している話
現在のカラーミーショップ
大体こんな感じ
...
Vue
Smarty
PHP
public
dist
Vueのdist
Slide 8
Slide 8 text
Vue.js v-tokyo Meetup #16
#1 カラーミーショップの開発でVue.jsを導入している話
現在のカラーミーショップ
最近Vue3を導入
...
Vue
Vue3
Smarty
PHP
public
dist
Vueのdist
Slide 9
Slide 9 text
Vue.js v-tokyo Meetup #16
#1 カラーミーショップの開発でVue.jsを導入している話
現在のカラーミーショップ
最近Vue3を導入
現在Vue3に移行中
...
Vue
Vue3
Smarty
PHP
public
dist
Vueのdist
Slide 10
Slide 10 text
Vue.js v-tokyo Meetup #16
#1 Vue.jsでカラーミーショップの
フロントエンド開発をしている話
#2 カラーミーショップAPI + Nuxt.js
本日は2本立てで
Slide 11
Slide 11 text
Vue.js v-tokyo Meetup #16
#2 カラーミーショップAPI + Nuxt.js
クライアントさん
クライアントさん
クライアントさん
クライアントさん
うちのHPにEC機能
埋め込んでよ！笑
こんなデザインで！
フリーランスもしくはWeb制作会社を運営していると、
このようなことがあるかと思います。
Slide 12
Slide 12 text
Vue.js v-tokyo Meetup #16
#2 カラーミーショップAPI + Nuxt.js
色々なAPIがある
https://developer.shop-pro.jp/docs/colorme-api
Slide 13
Slide 13 text
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
カートに入れる
Slide 14
Slide 14 text
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
カートに入れる
Slide 15
Slide 15 text
Vue.js v-tokyo Meetup #16
#2 カラーミーショップAPI + Nuxt.js
ちょっとクセがあったとこ
サイズ
M
カートに入れる
Slide 16
Slide 16 text
Vue.js v-tokyo Meetup #16
#2 カラーミーショップAPI + Nuxt.js
ちょっとクセがあったとこ
サイズ
M
カートに入れる
埋め込みscriptが発行できる
Slide 17
Slide 17 text
Vue.js v-tokyo Meetup #16
#2 カラーミーショップAPI + Nuxt.js
ちょっとクセがあったとこ
色々ついてくるし、Nuxt側でスタイリングしたい
Slide 18
Slide 18 text
Vue.js v-tokyo Meetup #16
#2 カラーミーショップAPI + Nuxt.js
ちょっとクセがあったとこ
色々端折っています
Slide 19
Slide 19 text
Vue.js v-tokyo Meetup #16
#2 カラーミーショップAPI + Nuxt.js
ちょっとクセがあったとこ
Slide 20
Slide 20 text
Vue.js v-tokyo Meetup #16
#2 カラーミーショップAPI + Nuxt.js
ちょっとクセがあったとこ
カラーミーが生成するページを見に行った
Slide 21
Slide 21 text
Vue.js v-tokyo Meetup #16
#2 カラーミーショップAPI + Nuxt.js
ちょっとクセがあったとこ
謎の値が、、しかも謎のカンマが、、
Slide 22
Slide 22 text
Vue.js v-tokyo Meetup #16
#2 カラーミーショップAPI + Nuxt.js
ちょっとクセがあったとこ
←options[num].idかもしれない
APIドキュメントみにきた
Slide 23
Slide 23 text
Vue.js v-tokyo Meetup #16
#2 カラーミーショップAPI + Nuxt.js
ちょっとクセがあったとこ
←options[num].idかもしれない
そうだった
APIドキュメントみにきた
Slide 24
Slide 24 text
Vue.js v-tokyo Meetup #16
#2 カラーミーショップAPI + Nuxt.js
ちょっとクセがあったとこ
しかしAPIで取れるのは、81654775の数字
右のカンマ以降はロジックで錬成しなければ
Slide 25
Slide 25 text
Vue.js v-tokyo Meetup #16
#2 カラーミーショップAPI + Nuxt.js
ちょっとクセがあったとこ
都合よすぎワロタ
Slide 26
Slide 26 text
まとめ
Vue.js v-tokyo Meetup #16
U カラーミーAPI × Nuxt.jsで、見た目フルカスタムECサイトができF
U 今回このようなECサイトを制作したことで、ドキュメントのなさに驚いたc
U もっとスムーズに開発できるよう、たくさん発信や改善していきたい