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

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

Transcript

1. HPにEC機能を埋め込む際、
   
   Nuxt.js様のおかげで乗り切れた話
   keigo (@Kspace_trk)
   Vue.js v-tokyo Meetup #16
   

   View Slide

2. Vue.js v-tokyo Meetup #16
   Keigo Nakao (23)
   b 2022年4月にGMOペパボに新卒入i
   b カラーミーショップのエンジニP
   b 趣味、好きなこX
   b DTM (作曲), DJ, カメラ, マジック, ロケットリーグ
   @Kspace_trk
   

   View Slide

3. Vue.js v-tokyo Meetup #16
   #1 Vue.jsでカラーミーショップの
   
   フロントエンド開発をしている話
   
   #2 カラーミーショップAPI + Nuxt.js
   本日は2本立てで
   

   View Slide

4. Vue.js v-tokyo Meetup #16
   #1 カラーミーショップの開発でVue.jsを導入している話
   

   View Slide

5. Vue.js v-tokyo Meetup #16
   #1 カラーミーショップの開発でVue.jsを導入している話
   フロントエンド：Smarty
   
   バックエンド：PHP
   従来までのカラーミーショップ
   

   View Slide

6. Vue.js v-tokyo Meetup #16
   #1 カラーミーショップの開発でVue.jsを導入している話
   フロントエンド：Smarty + Vue.js
   
   バックエンド：PHP
   現在のカラーミーショップ
   

   View Slide

7. Vue.js v-tokyo Meetup #16
   #1 カラーミーショップの開発でVue.jsを導入している話
   現在のカラーミーショップ
   大体こんな感じ
   ...
   Vue
   Smarty
   PHP
   public
   dist
   Vueのdist
   

   View Slide

8. Vue.js v-tokyo Meetup #16
   #1 カラーミーショップの開発でVue.jsを導入している話
   現在のカラーミーショップ
   最近Vue3を導入
   ...
   Vue
   Vue3
   Smarty
   PHP
   public
   dist
   Vueのdist
   

   View Slide

9. Vue.js v-tokyo Meetup #16
   #1 カラーミーショップの開発でVue.jsを導入している話
   現在のカラーミーショップ
   最近Vue3を導入
   現在Vue3に移行中
   ...
   Vue
   Vue3
   Smarty
   PHP
   public
   dist
   Vueのdist
   

   View Slide

10. Vue.js v-tokyo Meetup #16
    #1 Vue.jsでカラーミーショップの
    
    フロントエンド開発をしている話
    
    #2 カラーミーショップAPI + Nuxt.js
    本日は2本立てで
    

    View Slide

11. Vue.js v-tokyo Meetup #16
    #2 カラーミーショップAPI + Nuxt.js
    クライアントさん
    クライアントさん
    クライアントさん
    クライアントさん
    うちのHPにEC機能
    
    埋め込んでよ！笑
    こんなデザインで！
    フリーランスもしくはWeb制作会社を運営していると、
    
    このようなことがあるかと思います。
    

    View Slide

12. Vue.js v-tokyo Meetup #16
    #2 カラーミーショップAPI + Nuxt.js
    色々なAPIがある
    https://developer.shop-pro.jp/docs/colorme-api
    

    View Slide

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
    カートに入れる
    

    View Slide

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
    カートに入れる
    

    View Slide

15. Vue.js v-tokyo Meetup #16
    #2 カラーミーショップAPI + Nuxt.js
    ちょっとクセがあったとこ
    サイズ
    M
    カートに入れる
    

    View Slide

16. Vue.js v-tokyo Meetup #16
    #2 カラーミーショップAPI + Nuxt.js
    ちょっとクセがあったとこ
    サイズ
    M
    カートに入れる
    埋め込みscriptが発行できる
    

    View Slide

17. Vue.js v-tokyo Meetup #16
    #2 カラーミーショップAPI + Nuxt.js
    ちょっとクセがあったとこ
    色々ついてくるし、Nuxt側でスタイリングしたい
    

    View Slide

18. Vue.js v-tokyo Meetup #16
    #2 カラーミーショップAPI + Nuxt.js
    ちょっとクセがあったとこ
    色々端折っています
    
    
    
    

    View Slide

19. Vue.js v-tokyo Meetup #16
    #2 カラーミーショップAPI + Nuxt.js
    ちょっとクセがあったとこ
    
    
    
    
    

    View Slide

20. Vue.js v-tokyo Meetup #16
    #2 カラーミーショップAPI + Nuxt.js
    ちょっとクセがあったとこ
    カラーミーが生成するページを見に行った
    

    View Slide

21. Vue.js v-tokyo Meetup #16
    #2 カラーミーショップAPI + Nuxt.js
    ちょっとクセがあったとこ
    謎の値が、、しかも謎のカンマが、、
    

    View Slide

22. Vue.js v-tokyo Meetup #16
    #2 カラーミーショップAPI + Nuxt.js
    ちょっとクセがあったとこ
    ←options[num].idかもしれない
    APIドキュメントみにきた
    

    View Slide

23. Vue.js v-tokyo Meetup #16
    #2 カラーミーショップAPI + Nuxt.js
    ちょっとクセがあったとこ
    ←options[num].idかもしれない
    そうだった
    APIドキュメントみにきた
    

    View Slide

24. Vue.js v-tokyo Meetup #16
    #2 カラーミーショップAPI + Nuxt.js
    ちょっとクセがあったとこ
    しかしAPIで取れるのは、81654775の数字
    
    右のカンマ以降はロジックで錬成しなければ
    

    View Slide

25. Vue.js v-tokyo Meetup #16
    #2 カラーミーショップAPI + Nuxt.js
    ちょっとクセがあったとこ
    
    都合よすぎワロタ
    

    View Slide

26. まとめ
    Vue.js v-tokyo Meetup #16
    U カラーミーAPI × Nuxt.jsで、見た目フルカスタムECサイトができF
    U 今回このようなECサイトを制作したことで、ドキュメントのなさに驚いたc
    U もっとスムーズに開発できるよう、たくさん発信や改善していきたい
    

    View Slide