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
February 21, 2023
Programming
0
790
HPにEC機能を埋め込む際、Nuxt.js様のおかげで乗り切れた話
カラーミーショップAPIを活用してオリジナルのHPなどにEC機能を埋め込む際、Nuxt.js様のおかげでスムーズに乗り越えられたポイントをしゃべります。
keigo
February 21, 2023
Tweet
Share
More Decks by keigo
See All by keigo
ドキュメント化が必要な広報作業に、AIを取り入れる
kspace
1
140
@vite-pwa/nuxt を用いた、PWA実装のリアル
kspace
0
31
もう二度と迷走しない!極端なタスク分割 実践編
kspace
2
190
Nuxt Serverと$fetchを 組み合わせたTypeScript開発体験
kspace
4
2.4k
IGAによるメロディ生成
kspace
0
290
ECテックカンファレンス2023
kspace
1
1.3k
Other Decks in Programming
See All in Programming
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2.3k
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
200
Updates on MLS on Ruby (and maybe more)
sylph01
1
120
AIコーディングAgentとの向き合い方
eycjur
0
240
AHC051解法紹介
eijirou
0
630
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
140
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
920
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
210
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
280
rage against annotate_predecessor
junk0612
0
100
The State of Fluid (2025)
s2b
0
200
旅行プランAIエージェント開発の裏側
ippo012
1
370
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Designing for humans not robots
tammielis
253
25k
Optimizing for Happiness
mojombo
379
70k
Bash Introduction
62gerente
614
210k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Site-Speed That Sticks
csswizardry
10
790
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Language of Interfaces
destraynor
160
25k
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 もっとスムーズに開発できるよう、たくさん発信や改善していきたい