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

Nuxt.js + microCMS + Netlifyでコーポレートサイトをリニューアルした話

Takayuki
PRO
December 06, 2019

Nuxt.js + microCMS + Netlifyでコーポレートサイトをリニューアルした話

Nuxt.js + microCMS + Netlifyでコーポレートサイトをリニューアルした話

Takayuki
PRO

December 06, 2019
Tweet

More Decks by Takayuki

Other Decks in Programming

Transcript

  1. Nuxt.js + microCMS + Netlifyでコʔポ
    レʔトサイトをリニュʔアルした話
    鈴木孝之

    View Slide

  2. "HFOEB
    ࣗݾ঺հɾձࣾ঺հ
    NJDSP$.4ͱ͸ʁ
    ಋೖํ๏
    %&.0

    View Slide

  3. ࣗݾ঺հɾձࣾ঺հ

    View Slide

  4. 1.ࣗݾ঺հ
    ◆໊લ
    ླ໦ ޹೭(Suzuki Takayuki)
    ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ
    ◆ࣗݾ঺հ
    ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ
    ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ
    ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ
    ɾݱࡏ͸ɺडୗ։ൃΛ΍ΓͭͭɺࣗࣾWebαʔϏεΛ։ൃதɻ
    ◆झຯ
    ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ
    ◆εΩϧ
    PHP,Symfony2,CakePHP3,Laravel5,
    JavaScript,backbone.js,Angular.js

    View Slide

  5. 1.ࣗݾ঺հ

    View Slide

  6. 1.ࣗݾ঺հ

    View Slide

  7. Copyright Re:Build.inc All Rights Reserved.
    1.ձࣾ঺հ
    ◆ձ໊ࣾ
    גࣜձࣾRe:Build
    ◆ॅॴ
    ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕
    ◆ࣄۀ಺༰
    ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ
    ɾडୗ։ൃ
    ◆ࣾһ
    7໊
    ◆ΤϯδχΞͷಇ͖ํ
    ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ

    View Slide

  8. 8
    ࣗࣾ։ൃνʔϜߏ੒
    Suzuki Takayuki
    ਖ਼ࣾһ
    (ि5೔ۈ຿)
    Kakazu Yuki
    (ਖ਼ࣾһ)
    Ϛωδϝϯτ&։ൃ
    ։ൃ
    ϑϦʔϥϯε
    (ि2೔ۈ຿)
    ϑϦʔϥϯε
    (ि2೔ۈ຿)
    ϑϦʔϥϯε
    (ि2೔ۈ຿)
    ϑϦʔϥϯε
    (ि1೔ۈ຿)
    ཁ݅ఆٛ
    UI/UX
    ਖ਼ࣾһ
    (ि5೔ۈ຿)
    ෭ۀ
    (ि1೔ۈ຿)
    ͜ͷϙδγϣϯΛ
    ΍ͬͯ·͢ʂ

    View Slide

  9. 9
    ࣗࣾWebαʔϏεͷ։ൃ
    ɾαʔϏε໊
    Tadoru

    https://tadoru.work/


    ɾγεςϜ֓ཁ
    ΤϯδχΞಉ࢜ͷ࢓ࣄ঺հ
    ίϛϡχςΟ

    View Slide

  10. Re:Build
    اۀͷ୲౰ऀ͕
    ΤʔδΣϯτΛબͿ
    ΤʔδΣϯτ͕ࣗ෼ͷܨ
    ͕Γͷ͋ΔΤϯδχΞ·
    ͨ͸νʔϜʹ੠Λ͔͚Δ
    ΤʔδΣϯτ͸
    ࣄલʹ৹੍ࠪ
    ϫʔΧʔ
    ΤʔδΣϯτ
    اۀ
    ϏδωεϞσϧ
    ࠾༻ใु
    εΩϧ
    ܦݧ
    Քಇঢ়گ
    εΩϧ
    ܦݧ
    Քಇঢ়گ
    εΩϧ
    ܦݧ
    Քಇঢ়گ
    ࢓ࣄΛ঺հ͢Δ
    ˕
    ̋
    ̋
    ×
    ˕
    ̋
    ×
    ̋
    ̋

    View Slide

  11. NJDSP$.4ͱ͸ʁ

    View Slide

  12. NJDSP$.4ͱ͸ʁ
    microCMS͸ϔουϨεCMSͱݺ͹ΕΔ৽͍͠λΠϓͷCMSͰ
    ͢ɻ
    ։ൃऀ΋ฤूऀ΋༷ʑͳ੍໿͔Βղ์͞Εɺૉૣ͘PDCAΛճ
    ͢͜ͱ͕Ͱ͖·͢ɻ
    https://microcms.io/

    View Slide

  13. ैདྷͷ$.4ͱͷҧ͍
    https://microcms.io/

    View Slide

  14. NJDSP$.4ͷಛ௃
    αʔόෆཁ
    ैདྷܕCMSͰ͸։ൃऀࣗ਎͕αʔό΍
    σʔλϕʔεͷϝϯςφϯεΛ͢Δඞཁ
    ͕͋Γ·͕ͨ͠ɺmicroCMS͸Ϋϥ΢υ
    ্ʹߏங͞Ε͍ͯΔͨΊɺαʔό؅ཧ͸
    Ұ੾ෆཁͰ͢ɻ
    APIϕʔε
    ͢΂ͯͷίϯςϯπ͸APIΛܦ༝ͯ͠औ
    Γग़͠·͢ɻϒϥ΢β΍ΞϓϦ౳͔Β
    ௚઀APIΛݺͿ͜ͱ͕Ͱ͖·͢ɻ
    ࢖͍΍͍͢؅ཧը໘
    ௚ײతͳ؅ཧը໘ͰίϯςϯπΛฤ
    ू͢Δ͜ͱ͕Ͱ͖·͢ɻಛఆ࣌ࠁͰ
    ͷ༧໿ߋ৽ͳͲ΋ࣗ༝ࣗࡏͰ͢ɻ
    1 2 3

    View Slide

  15. ಋೖํ๏

    View Slide

  16. αΠτ
    શମߏ੒
    TOPϖʔδ΁
    APIΛୟ͘
    ίϯςϯπ؅ཧ

    View Slide

  17. ಋೖखॱ
    ①Nuxt.jsͰαΠτ੍࡞
    ②microCMSͷAPI࿈ܞɻίϯςϯπ؅ཧ
    ③NetlifyͰNuxt.jsΛσϓϩΠ͢Δ

    View Slide

  18. "1*ͷୟ͖ํ

    View Slide

  19. "1*ͷୟ͖ํ

    View Slide

  20. "1*ͷୟ͖ํ

    View Slide

  21. "1*ͷୟ͖ํ

    View Slide

  22. ؅ཧը໘ͷΠϝʔδ

    View Slide

  23. ؅ཧը໘ͷΠϝʔδ

    View Slide

  24. ର৅ͷ؅ཧ߲໨

    View Slide

  25. WWW.SITE2MAX.PRO
    Free PowerPoint & KeyNote Templates
    4 DEMO
    EC Site
    EC Site
    https://murmuring-tor-53965.herokuapp.com/

    View Slide

  26. ଎౓վળ
    มߋલ มߋޙ

    View Slide

  27. ଎౓վળ
    97఺ʹͳͬͨʂ
    มߋલ มߋޙ

    View Slide

  28. ·ͱΊ

    View Slide

  29. - microCMS͸ίϯςϯπ؅ཧ෦෼ͱϑϩϯτΤϯυͷ࣮૷͕
    ෼཭͞Ε͍ͯ·͢ɻͦͷͨΊɺϑϩϯτΤϯυͷ࣮૷͸׬શ
    ʹࣗ༝Ͱɺ࠷ઌ୺ͷٕज़Λ׆༻Ͱ͖·͢ɻ

    - ϑϩϯτଆΛࣗ༝ʹͰ͖ΔͷͰɺ͚ͬ͜͏ΤϯδχΞϥΠΫ
    ͳҹ৅

    - WordPressͳͲ͕ۤखͳΤϯδχΞ͞Μʹ͸ྑ͍͔΋ɻ
    ·ͱΊ

    View Slide