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

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

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