Slide 1
Slide 1 text
ʮ S H I F T E R ʯ ͬͯ ͳ ʹ ʁ ͱ ࠷ ৽ Ξ ο ϓ σ ʔ τ
S H I F T E R M E E T U P # 4
G o ελ ς Ο ο Ϋ ʂ
#JP_Getshifter
Slide 2
Slide 2 text
ຊ ͷ ༰
Slide 3
Slide 3 text
1 . L I X I L ͞ Μ ͷ We b h o o k Λ ར ༻ ͠ ͨ ӡ ༻ ࣄ ྫ
2 . ଟ ݴ ޠ αΠ τ ର Ԡ
3 . G a t s b y Ͱ b u i l d ͯ͠ N e t l i f y D e p l o y
4 . F o r m s p re e Λ ͬͯ 5 Ͱ ͓ ߹ ͤ ϑ Υ ʔϜ Λ ࣮
5 . ඒ ຯ ͠ ͍ Ϋ ϥ ϑ τ Ϗʔϧ ͱ N Z ϫ Π ϯ
Slide 4
Slide 4 text
S H I F T E R ͱ ʁ
Slide 5
Slide 5 text
S h i f t e r ɺ
୭ ͕ ͍ ׳ Ε ͨ Wo rd P re s s Ͱ ࡞ ͠ ͨ We b αΠ τ Λ
อ क ෆ ཁ ͳ ε λ ςΟ ο Ϋ αΠ τ ʹ ม ͠ C D N Ͱ ߴ ৴
Ͱ ͖ Δ ϗ ε ςΟ ϯ ά ι Ϧ ϡ ʔ γ ϣ ϯ Ͱ ͢ɻ
Slide 6
Slide 6 text
W O R D P R E S S ͱ ?
Slide 7
Slide 7 text
M o s t p o p u l a r c o n t e n t m a n a g e m e n t s y s t e m s
h t t p s : / / w 3 t e c h s . c o m /
s i n c e 1 M a y 2 0 1 9
Usage
Change Since
1 May 2019
Market
Share
Change Since
1 May 2019
1.WordPress 34.0% +0.2% 60.8% +0.2%
2.Joomla 2.8% -0.1% 5.1% -0.1%
3.Drupal 1.9% 2.8% 0.1%
Slide 8
Slide 8 text
– α Π τ ੍ ࡞ ཧ ళ ͷ
“ϝϯςφϯεηΩϡϦςΟ͕ࢹ͞ΕΔ͕….
։ൃऀͷϦιʔεϊϋɺΤϯυ͔ΒͷೲظίετΛߟ͑Δͱ….”
Slide 9
Slide 9 text
– ใ γε ςϜ ୲ ऀ ͷ
“γεࢹͰӡ༻͕ͭΒ͍ͷ͚ͩͲ…..
શ͘ར༻͠ͳ͍Θ͚ʹ͍͔ͳ͍ͷ͕…ݱ࣮”
Slide 10
Slide 10 text
– ϑ ϩ ϯ τ Τ ϯ δχ Ξ ͷ
“WordPressҊ݅ࣄͱͯ҆͠ఆ͍ͯ͠Δ͚Ͳ
SPAJAMstackͷΑ͏ͳϞμϯͳίϯηϓτͷWeb։ൃ͍ͨ͠ͳ͊”
Slide 11
Slide 11 text
㱻
ར ศ ੑ ӡ ༻ ί ε τ
Slide 12
Slide 12 text
W O R D P R E S S ͷ ӡ ༻ ɾ η Ω ϡ Ϧ ςΟ
Slide 13
Slide 13 text
Wo rd P re s s αΠ τ ͷ վ ͟ Μ ඃ 1 5 0 ສ ݅ ʹ
ʮ ࠷ ѱ ڃ ͷ ੬ ऑ ੑ ʯ
Slide 14
Slide 14 text
Wo rd P re s s ࠜ ຊ త ʹ ӡ ༻ η Ω ϡ Ϧ ςΟ ʹ ͕ ͋ Δ ͷ ͔ʁ
Slide 15
Slide 15 text
ɾ Wo rd P re s s C o re ͷ Ξ οϓ σ ʔ τ ͕ ස ൟ ͢ ͗ Δʁ
ɾ Wo rd P re s s P l u g i n ͕ ੬ ऑ ʁ
ɾ Wo rd P re s s T h e m e ͕ ෳ ࡶ Ͱ ϝ ϯ ς ෆ ೳ ʁ
ɾ ͦ ͦ … P H P M y S Q L ͳ Ͳͷ ϛ υϧ Σ Ξ ʹ ʁ
Slide 16
Slide 16 text
“ ݸ ਓ త ͳ ܦ ݧ ͔ Β ݴ ͏ ͱ ܧ ଓ త ͳ ϝ ϯ ς φ ϯε Λ
ߦ ͬͯ ͍ Ε க ໋ త ͳ ʹ ͳ ͬ ͨ ͜ ͱ ͳ ͍ ”
– Զ
Slide 17
Slide 17 text
ɾ ౾ ࣝ
Wo rd P re s s ઐ ͷ Ϛ ω ʔ δ υ ϗ ε ςΟ ϯ ά Λ ར ༻ ͢ Δ ͜ ͱ Ͱ
ϝ ϯ ς φ ϯε ί ε τ φ Ϩ ο δ Λ ڞ ༗ Ͱ ͖ Δ ͷ Ͱ ཧ Ϧ ι ʔε Λ
ܰ ݮ Ͱ ͖ · ͢ɻ
ද త ͳ α ʔ Ϗ ε
- Wo rd P re s s V I P
- W P E n g i n e
- A M I M O T O
ͳ Ͳ ͳ Ͳ …
Slide 18
Slide 18 text
ར ศ ੑ 㱻 ӡ ༻ ί ε τ
Slide 19
Slide 19 text
අ ༻ ର ޮ Ռ ͷ ߴ ͍ બ ࢶ ͕ ཉ ͠ ͍ !
ར ศ ੑ 㱻 ӡ ༻ ί ε τ
Slide 20
Slide 20 text
S H I F T W O R D P R E S S T O S E R V E R L E S S
Slide 21
Slide 21 text
S H I F T E R ͷ ί ϯ η ϓ τ
Slide 22
Slide 22 text
https://jamstack.org/
Slide 23
Slide 23 text
“ΫϥΠΞϯταΠυͷJavaScriptɺ࠶ར༻ՄೳͳAPIɺ
ϏϧυࡁΈͷMarkupʹجͮ͘ϞμϯͳWeb։ൃΞʔΩςΫνϟ”
Slide 24
Slide 24 text
JAMstackʹ֘͠ͳ͍ύλʔϯ
ΫϥΠΞϯτͱαʔό͕ີ݁߹͍ͯ͠Δ͋ΒΏΔϓϩδΣΫτJAMstackͰߏங͞Εͨͱݴ͑·ͤ
ΜɻԼهͷͷؚ͕·ΕΔ͜ͱ͕ଟ͍Ͱ͢ɻ
•WordPressɺDrupalɺJoomlaɺͦͯ͠SquarespaceͷΑ͏ͳαʔόαΠυCMSͰߏங
͞ΕͨαΠτ
• RubyɺNodeଞͷݴޠʹґଘ͢ΔϞϊϦγοΫͳαʔό͕ಈ࡞͢ΔWebΞϓϦέʔγϣϯ
• ࣮ߦ࣌ʹαʔόଆͰϨϯμϦϯάͰϏϡʔΛߏங͢ΔSPA
Slide 25
Slide 25 text
S H I F T E R ͷ ϥ Π ϑ αΠΫϧ ͱ ಛ
Slide 26
Slide 26 text
L I F E C Y C L E
• WordPressͷϩάΠϯ࣌ʹDockerΛىಈ
(Editorʣ
• AWS ͷϦιʔεͰ੩తHTMLʹม
(Generator)
• CDN͔ΒίϯςϯπΛ৴
(Contents Delivery)
F E AT U R E
• ߴ
HTTP2ରԠ, ࣄલʹϏϧυ͞Εͨ੩తϑΝΠϧΛ
ੈք100ΧॴҎ্ͷCDNڌ͔Βߴ৴
• ݎ࿚ͳηΩϡϦςΟ
SSL, ύεϫʔυϨεϩάΠϯ, WordPressৗ࣌ىಈෆཁ
ϋοΫ͞ΕΔཁૉ͕ͳ͍
• ͍҆ίετͰ؆୯ʹεέʔϦϯά
ಥൃతͳεύΠΫ͕དྷͯ҆৺ʂαΠτμϯ͠ͳ͍ɻ
• ϢʔβʔϑϨϯυϦʔ
͍׳ΕͨWordPressͰ։ൃɾӡ༻͕Մೳ
OS/ϛυϧΣΞͷอक࡞ۀɾίετ͕ෆཁ
ϑϩϯτͱόοΫΤϯυͷɺϏδωεʹूதͰ͖Δڥ
Slide 27
Slide 27 text
D E M O
Slide 28
Slide 28 text
1 0 , 0 0 0 ϖʔ δ ͷ Wo rd P re s s Λ G e n e r a t e ͯ͠
ύ ϑ Υ ʔϚ ϯε Λ ଌ ఆ ͠ ͨ ݁ Ռ
https://www.digitalcube.jp/information/4564/
Slide 29
Slide 29 text
S H I F T E R ͷ Ϣʔεέ ʔε
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
S h i f t e r ͷ Ϣ ʔεέ ʔε
Q . S h i f t e r Wo rd P re s s ͷ ۜ ͷ ؙ ʹ ͳ Γ · ͢ ͔ʁ
A . ೦ ͳ ͕ Β ͠ ͍Ͱ ͢ɻ
- ࠷ ద ͳ έ ʔε ɿ
Πϕ ϯ τ ɾ Ω ϟϯϖʔϯ ɾ ϥ ϯ σΟ ϯ άϖʔ δ ɾ ί ʔϙ Ϩ ʔ ταΠ τ ͳ Ͳ
- ෆ ͖ ͳ έ ʔε ɿ
ί ϯ ς ϯ π ͷ ߋ ৽ ͕ ස ൟ ɾ ଟ ਓ Ͱ ར ༻ ͢ Δ ϝ σΟΞ ɾ ձ һ αΠ τ ͳ Ͳ
Slide 42
Slide 42 text
࠷ ৽ ͷ U P D AT E
Slide 43
Slide 43 text
ʮPolylangʯΛͬͨଟݴޠԽରԠαΠτͷ੩తԽʹରԠ
• 40ϲࠃޠҎ্ʹରԠ
• ୯७ͳࣗಈ༁Ͱͳ͘ݴޠ͝ͱʹద
ͳจষΛϢʔβʔଆͰઃఆՄೳ
• ݴޠεΠονϟʔͳͲଟݴޠԽʹඞཁ
ͳػೳΛ؆୯ઃఆ
https://wordpress.org/plugins/polylang/
Slide 44
Slide 44 text
FormspreeΛͬͯ5Ͱ͓߹ͤϑΥʔϜΛ࣮
Formspree は問合せフォームサービス
のプロバイダです。
「静的サイトと最⾼の相性」という彼ら
のキャッチフレーズには、僕らも同意し
ます。
フォームの登録内容が⽬的のあて先に送
信するという点では、他のフォームと同
じではあるものの、Formspree には他
にも多くの機能が備わっています。
https://formspree.io/
https://www.digitalcube.jp/information/4573/
Slide 45
Slide 45 text
GatsbyͰbuildͯ͠NetlifyDeploy
- Moving to a static site with Gatsby + Netlify + Shifter -
• NetlifyͳͲ֎෦ͷϗεςΟϯάڥͷܧଓ
తͳσϓϩΠΛ࣮ݱͰ͖ΔShifter Webhooks
ػೳΛ͞ΒʹਐԽͤͨ͞ͷͰ͢ɻ
• ϢʔβʔShifter্ͷWordPressͰϖʔδΛ
ߋ৽ޙɺShifter WebhooksϘλϯΛΫϦοΫ
͢Δ͚ͩͰɺ
Netlify্ͷGatsbyδΣωϨʔλʔͰWordPess
ͷίϯςϯπσʔλΛϏϧυ͠ɺNetlify্
ͷσϓϩΠ͕ՄೳʹͳΓ·͢ɻ
https://www.gatsbyjs.org/
https://www.netlify.com/
https://www.digitalcube.jp/information/4434/
Slide 46
Slide 46 text
ࠓ ޙ ͷ ϩ ʔ υ Ϛ οϓ
Slide 47
Slide 47 text
• TeamϝϯόʔͷݖݶཧػೳڧԽʢUser Roleʣ
• ΑΓར༻͍͢͠Ձ֨ઃఆͱϓϥϯͷมߋ
• ը૾(Media)ઐ༻ʹCDNΛ
• Dashboard UI ͷΞοϓσʔτ
• ΑΓσΟϕϩούʔϑϨϯυϦʔͳAPI
• SearchɺFormͷΠϯςάϨγϣϯڧԽ
Slide 48
Slide 48 text
Don’t waste another minute.
Sign up for Shifter and let us do the heavy lifting.
https://getshifter.io/
#JP_Getshifter