Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Keigo Nakao
February 21, 2023

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

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

Keigo Nakao

February 21, 2023
Tweet

More Decks by Keigo Nakao

Other Decks in Programming

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