HPにEC機能を埋め込む際、Nuxt.js様のおかげで乗り切れた話

カラーミーショップAPIを活用してオリジナルのHPなどにEC機能を埋め込む際、Nuxt.js様のおかげでスムーズに乗り越えられたポイントをしゃべります。

Transcript

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