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
3
410
@vite-pwa/nuxt を用いた、PWA実装のリアル
kspace
0
40
もう二度と迷走しない!極端なタスク分割 実践編
kspace
2
200
Nuxt Serverと$fetchを 組み合わせたTypeScript開発体験
kspace
4
2.4k
IGAによるメロディ生成
kspace
0
300
ECテックカンファレンス2023
kspace
1
1.3k
Other Decks in Programming
See All in Programming
Ruby Parser progress report 2025
yui_knk
1
460
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
130
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Cache Me If You Can
ryunen344
2
4k
為你自己學 Python - 冷知識篇
eddie
1
350
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Kiroで始めるAI-DLC
kaonash
2
630
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
790
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
旅行プランAIエージェント開発の裏側
ippo012
2
930
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Being A Developer After 40
akosma
90
590k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Unsuck your backbone
ammeep
671
58k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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 もっとスムーズに開発できるよう、たくさん発信や改善していきたい