運用がつらすぎたJAWS-UG公式サイトをリニューアルした話

JAWS-UG 仙台勉強会 [6/23夜]でお話しした「運用がつらすぎたJAWS-UG公式サイトをリニューアルした話」のスライドです。
後ほどブログでフォローアップします。

Transcript

1. ӡ ༻ ͕ ͭ Β͢ ͗ ͨ J A W S - U G ެ ࣜ αΠ τ Λ Ϧ χ ϡ ʔΞϧ ͠ ͨ ࿩ D i g i t a l C u b e I n c . : K a z u e I G A R A S H I J A W S - U G ઋ ୆ ษ ڧ ձ [ 6 / 2 3 ໷ ]
2. h t t p s : / / g e t s h i f t e r. i o / K a z u e I G A R A S H I ʢ ޒ े ཛྷ ࿨ ܙ ʣ @ g a t e s p a c e _ k • http://gatespace.jp/ • http://qiita.com/gatespace • https://github.com/gatespace • DigitalCube Inc. : Code Wrangler / Frontend Engineer • AWS : Advanced Technology Partner • _s (Underscores) : Contributor • JAWS-UG ౦๺ / ໢ݩػಈୂ h t t p s : / / j a . a m i m o t o - a m i . c o m /
3. h t t p s : / / w w w. f a c e b o o k . c o m / G H O S T I N T H E A M I M O T O / h t t p : / / u n d e r s c o re s . m e / h t t p s : / / j a w s - t o h o k u . d o o r k e e p e r. j p /
4. AT T E N T I O N • WebαΠτӡӦऀɺWebσΟϨΫλʔɺ։ൃऀ޲͚ͷ಺༰Ͱ͢ • ٕज़ͷ۩ମతͳ࿩͸ϒϩάʹॻ͘༧ఆͰ͢ • ࢲ͕ൃදͯ͠·͕ٞ͢࿦͸ଟ͘ͷJAWS-UGϝϯόʔ͕ؔΘͬͯ·͢
5. B E F O R E ɿ 
 ط ଘ αΠ τ ͷ ໰ ୊ ఺ ͷ ચ ͍ ग़ ͠ • ඞཁͳ৘ใ͕ܝࡌ͞Ε͍ͯͳ͍ • ߋ৽ʢWordPressʣ͕ͭΒ͍ • ৘ใެ։ϫʔΫϑϩʔͭΒ͍
6. D I S C U S S I O N ɿ ඞ ཁ ͳ ৘ ใ ͕ ܝ ࡌ ͞ Εͯ ͍ ͳ ͍ • ͢΂ͯͷυΩϡϝϯτͷચ͍ग़͠ • Ұൠ޲͚ɾӡӦ޲͚ʢެ։ɾඇެ։໰Θͣʣ • ετʔϦʔͷ૊ΈཱͯʢαΠτΛݟʹདྷΔਓ͸ͲΜͳਓʁʣ • ެ։͢Δίϯςϯπͷऔࣺબ୒
7. A F T E R ɿ ί ϯ ς ϯ π ͷ औ ࣺ બ ୒ • JAWS-UG ͷେ࿮ͷΈܝࡌʢҰൠ޲͚ɾӡӦऀ޲͚Ͱެ։Մೳͳ΋ͷʣ • ඇެ։ͷ΋ͷ͸ Backlog ͳͲͰ؅ཧ • ษڧձ৘ใ͸ Google ΧϨϯμʔͰҰݩԽʢϦϯΫͷΈʣ • ࢧ෦৘ใ͸ϦϯΫͷΈ • ݸผͷ৘ใ഑৴͸֤ࢧ෦ʹ೚ͤΔ
8. D I S C U S S I O N ɿ ߋ ৽ ʢ W O R D P R E S S ʣ ͕ ͭ Β ͍ • WordPress ࢖͍ͮΒ͍ • ׳Εͯͳ͍ɿΤϯϓϥ૚ɾΤϯδχΞҎ֎ͷࢀՃʢ೔ৗతʹCMSΛ࢖Θͳ͍૚ʣ • ίϯςϯπͷऔࣺબ୒ -> ਵ࣌ߋ৽ͷඞཁੑ͋Δʁ -> ੩తαΠτͰྑ͍ • ߋ৽ͷ͠΍͢͞ɻCMS Λ࢖Θͳ͍৔߹ͷϫʔΫϑϩʔ • ϗεςΟϯάઌͷݕ౼ʢίετؚΉʣ • HTTPS Ͱ഑৴͍ͯͨ͠ͷͰͦ͜͸ඞਢ
9. A F T E R ɿ ੩ త αΠ τδΣ ω Ϩ ʔ λ ʔ • Jekyll : ੩తαΠτδΣωϨʔλʔɻςϯϓϨʔτ+ MarkdownʢςΩετʣ • GitHubɿPull request Λར༻ͨ͠ঝೝϫʔΫϑϩʔ • NetlifyɿJekyllͳͲΛϏϧυՄɻ
 ɹɹɹɹGitϦϙδτϦͱͷ࿈ಈՄʢίϛοτ͕͋ΔͱࣗಈͰσϓϩΠʣ
 ɹɹɹɹHTTPSɺHTTP/2ΛαϙʔτɻಠࣗυϝΠϯOKɻ
 ɹɹɹɹ͜ΕΒ͕શͯແྉʢ༗ྉϓϥϯ͸Ͱ͖Δ͜ͱ͕૿͑Δʣ • https://github.com/jaws-ug/jaws-ug.jp
10. ͪ ΐ ͬ ͱ ൺ ֱ JekyllͷϏϧυ GitϦϙδτϦͱͷ࿈ಈ ಠࣗυϝΠϯͰͷHTTPS
 HTTP/2 AWS S3 × ˚
 ʢผͷαʔϏε͕ඞཁʣ ˚
 ʢผͷαʔϏε͕ඞཁʣ GitHub Pages ◦ ◦ ˚
 ʢผͷαʔϏε͕ඞཁʣ Netlify ◦ ◦ ◦
11. D I S C U S S I O N ɿ ৘ ใ ެ ։ ϫ ʔ Ϋ ϑ ϩ ʔ ͭ Β ͍ • INPUT >>ʢӽ͑ΒΕͳ͍นʣ>> OUTPUT • ࢧ෦਺ɹ্ཱͪ͛࣌ɿ10ʙ20ࢧ෦ɹݱࡏɿ70ࢧ෦ʢٳࢭதؚΉʣ • ษڧձ/Πϕϯτ਺ͷ૿େɿݱࡏ͸೥ؒ200લޙ • ΞΧ΢ϯτ؅ཧɺΞΧ΢ϯτΛ͍࣋ͬͯͳ͍ࢧ෦΁ͷରԠ • ίϯςϯπͱϫʔΫϑϩʔͷݟ௚͠ -> ࢧ෦ͷ৘ใ഑৴͸֤ࢧ෦Ͱ • ഑৴खஈ͕खಈͰͦΕͧΕಠཱʢެࣜαΠτɺϝʔϧϚΨδϯɺSNSɺϝσΟΞ΁ͷدߘʣ
12. A F T E R ɿ ࣗ ಈ Խ ͱ ଐ ਓ ੑ ͷ ഉ আ • GitHub -> Travis CI -> NetlifyɿςετɺϏϧυɺσϓϩΠͷࣗಈԽ • ࢧ෦ҰཡɿGoogle εϓϨουγʔτ -> JSONʢGoogle Apps Scriptʣ 
 ɹ-> AJAX ಡΈࠐΈ • ษڧձ৘ใɿGoogle ϑΥʔϜ -> Google ΧϨϯμʔ -> jsͰຒΊࠐΈ • Google ΧϨϯμʔ -> IFTTT -> TwitterɺFacebook PageɺSlack • खॱ΍ΞΧ΢ϯτ৘ใͷυΩϡϝϯτΛ࢒͢
13. h t t p s : / / j a w s - u g . j p / A F T E R