Nuxt.js + microCMS + Netlifyでコーポレートサイトをリニューアルした話

by Takayuki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ࣗݾ঺հɾձࣾ঺հ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

1.ࣗݾ঺հ

Slide 6

Slide 6 text

1.ࣗݾ঺հ

Slide 7

Slide 7 text

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

9 ࣗࣾWebαʔϏεͷ։ൃ ɾαʔϏε໊ Tadoru  https://tadoru.work/    ɾγεςϜ֓ཁ ΤϯδχΞಉ࢜ͷ࢓ࣄ঺հ ίϛϡχςΟ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

NJDSP$.4ͱ͸ʁ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

ैདྷͷ$.4ͱͷҧ͍ https://microcms.io/

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ಋೖํ๏

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

"1*ͷୟ͖ํ

Slide 19

Slide 19 text

"1*ͷୟ͖ํ

Slide 20

Slide 20 text

"1*ͷୟ͖ํ

Slide 21

Slide 21 text

"1*ͷୟ͖ํ

Slide 22

Slide 22 text

؅ཧը໘ͷΠϝʔδ

Slide 23

Slide 23 text

؅ཧը໘ͷΠϝʔδ

Slide 24

Slide 24 text

ର৅ͷ؅ཧ߲໨

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

଎౓վળ มߋલ มߋޙ

Slide 27

Slide 27 text

଎౓վળ 97఺ʹͳͬͨʂ มߋલ มߋޙ

Slide 28

Slide 28 text

·ͱΊ

Slide 29

Slide 29 text

- microCMS͸ίϯςϯπ؅ཧ෦෼ͱϑϩϯτΤϯυͷ࣮૷͕ ෼཭͞Ε͍ͯ·͢ɻͦͷͨΊɺϑϩϯτΤϯυͷ࣮૷͸׬શ ʹࣗ༝Ͱɺ࠷ઌ୺ͷٕज़Λ׆༻Ͱ͖·͢ɻ  - ϑϩϯτଆΛࣗ༝ʹͰ͖ΔͷͰɺ͚ͬ͜͏ΤϯδχΞϥΠΫ ͳҹ৅  - WordPressͳͲ͕ۤखͳΤϯδχΞ͞Μʹ͸ྑ͍͔΋ɻ ·ͱΊ