Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp
Search
kikunantoka
April 25, 2019
Technology
2
480
Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp
- Gatsby.js を採用した背景
- Gatsby.js とは
- どうやって作ったか
- できあがったもの
- リリースしてどうだったか
- 所感など
kikunantoka
April 25, 2019
Tweet
Share
More Decks by kikunantoka
See All by kikunantoka
個人開発しているサービスのインフラをAWSからGCPに載せ替えた話 💪 / kojin_kaihatsu_night_3
kikunantoka
0
790
Gatsby.jsとCloud Functionsで毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話 / gotanda_js_13
kikunantoka
1
2.2k
Gatsby.jsとCloud Functionsで毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話 / frontend_night_1
kikunantoka
3
1.4k
サービスがゼロからN億円規模になるまに実践した7つのやっていき / 7_yatteiki_battle_conference_u30_2019
kikunantoka
1
1.2k
Gatsby.jsとNetlifyとの付き合い方 / gatsby-js-and-netlify
kikunantoka
3
490
Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp
kikunantoka
1
1.7k
今日から始める Flood.io / fuka-taisaku-night-01
kikunantoka
0
250
20万RPMを捌くRailsアプリケーションの作り方
kikunantoka
0
690
MVPに絞ったら個人開発でもちゃんとリリースできた話
kikunantoka
1
480
Other Decks in Technology
See All in Technology
Databricks:『生成AI World Cup』のご案内
databricksjapan
2
150
アプリがつくるNOT A HOTELブランド
hokuts
1
450
PHP"オレ"カンファレンスの告知
ysknsid25
0
360
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
110
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
690
現代CSSフレームワークの内部実装とその仕組み
poteboy
2
540
DevOpsDays History and my DevOps story
kawaguti
PRO
8
1.6k
「ふりかえりのふりかえり」をふりかえり、実のあるふりかえりにする
naitosatoshi
0
220
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
150
反実仮想機械学習とは何か
usaito
PRO
7
2.2k
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
3
2.4k
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
2k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Typedesign – Prime Four
hannesfritz
36
2.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
BBQ
matthewcrist
80
8.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
Documentation Writing (for coders)
carmenintech
59
3.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
The Mythical Team-Month
searls
215
42k
Navigating Team Friction
lara
177
13k
Transcript
Gatsby.js ͰಋೖࣄྫΛ όγόγಡΊΔSPAͳLPΛ࡞ͬͨ @kikunantoka We Are JavaScripters! @31th on 2018/04/25
ࣗݾհ @kikunantoka
ݸਓ։ൃ https://nakamy.com
ϘʔυήʔϜ੍࡞ https://tapir-studio.com
ࣗݾհ about: name: Fumitaka Kikukawa url: https://kikunantoka.com twitter: @kikunantoka job:
engineer work_at: giftee Inc. // giftee is a good company.
ࠓճ͢༰ • Gatsby.js ͕ྲྀߦ͖͍ͬͯͯͯɺݸਓϒϩάͳͲͰΘΕΔ͜ ͱ͕ଟ͘ͳ͖͕ͬͯͨɺͦΕΛۀͰͬͨࣄྫͷհ
͍͑ͨ͜ͱ • Gatsby.js Λ࠾༻ͨ͠എܠ • Gatsby.js ͱ • Ͳ͏ͬͯ࡞͔ͬͨ •
Ͱ͖͕͋ͬͨͷ • ϦϦʔεͯ͠Ͳ͏͔ͩͬͨ • ॴײͳͲ
Gatsby.js Λ࠾༻ͨ͠എܠ
giftee
giftee
giftee
giftee
giftee for Buisness
୲͍ͯ͠ΔϓϩμΫτ ʢࣾͰ($1ͱུ͞Εͩ͢ʜʣ HJGUFFΠϯελϯτΟϯGPS5XJUUFSͷڧΈᶃ நબ͔Βܠͷఏڙ·ͰҰؾ௨؏Ͱ͝ఏڙ நબγεςϜ ʢΠϯελϯτΟϯʣ σδλϧΪϑτͷఏڙ ʢछྨҎ্ͷܠʣ ϦΞϧλΠϜʹநબɺ ͦͷͰܠΛ༩
LINEೝূͷύλʔϯఏڙ HJGUFFΠϯελϯτΟϯGPS-*/&ͷڧΈᶃ ©2018 gi)ee Inc. all rights reserved J நબ͔Βܠͷఏڙ·ͰҰؾ௨؏Ͱ͝ఏڙ
நબγεςϜ ʢΠϯελϯτΟϯʣ σδλϧΪϑτͷఏڙ ʢछྨҎ্ͷܠʣ ϦΞϧλΠϜʹநબɺ ͦͷͰܠΛ༩
ΊͬͪΌΞΫηεདྷΔ • ༑ͩͪ 2300ສͷLINEΞΧϯτͰΩϟϯϖʔϯΛ࣮ࢪͨ݁͠Ռ ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ࠷େ 30ສRPMɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^ʉ
๏ਓ͚ͷLP͕͋ͬͨ • ͕ɺWordPressͷWYSIWYGϓϥάΠϯͰϖʔδ͕ߏ͞Εͯ ͓ΓɺϖʔδͷಡΈࠐΈ͕ΊͬͪΌ͍
՝ײ • αʔόͷอक͞Ε͓ͯΒͣɺPHPͷόʔδϣϯ5ܥͷ·· ͩͬͨ • Α͘མ͍ͪͯͨ • WordPress͕ѱ͍༁Ͱͳ͍
ϦχϡʔΞϧ • ๏ਓ͚ϓϩμΫτΛ୲͍ͯͨ͠ͷͰɺͲ͏ʹ͔͔ͨͬ͠ ͨ • Πϯόϯυͷ͍߹ΘͤͰޮΑ͘ϓϩμΫτΛεέʔϧ ͍͖͔ͤͯͨͬͨ͞ • ϦχϡʔΞϧ͢Δ͜ͱʹ •
ϏδωεαΠυʹ࣮ݱ͍ͨ͜͠ͱɺίϯςϯπͷ༰ΛXDͰ ॻ͖ग़ͯ͠Β͏
XDͷ༰
ཁ݅ • XDʹඳ͍ͨ༰Λެ։͍ͨ͠ • ಋೖࣄྫΛͲΜͲΜ૿͍͖͍ͯͨ͠ • ΠϯϑϥΛؚΊͨอकͷ͕͍
Ͳ͏࣮ͬͯݱ͠Α͏ • ίϯϙʔωϯτԽ͍͚ͯ͠ɺ্ख͍͘·Θͤͦ͏ • ϏδωεαΠυHTMLɺCSSॻ͚Δ͠ɺίϯϙʔωϯτ͑͞ ࡞ͬͯ͠·͑ɺΈ߹ΘͤͯϖʔδΛ࡞ΕΔͷͰઆ • Gitؤுͬͯڭ͑Α͏
Ͳ͏࣮ͬͯݱ͠Α͏ • ͦͦLPͬͯ੩తίϯςϯπͩ͠ɺ੩తαΠτδΣωϨʔ λͰྑ͍ͷͰ • ϗεςΟϯάNetlifyΛ͑ɺϏϧυ&σϓϩΠϑϩʔ ͤΒΕΔ͠ɺ૬ੑ͕ྑ͍ͷͰ
ͦ͏ͩɺGatsby.js ͩ
Gatsby.js ʹ͍ͭͯ
Gatsby.jsͱ • ੩తαΠτδΣωϨʔλ • React Ͱॻ͚Δ • SPAͳ੩తαΠτΛੜͰ͖Δ • StaticGen
ΛݟΔݶΓɺ࠷ۙϗοτͳٕज़
Gatsby.jsͱ
Gatsby.jsͱ
Ͳ͏ͬͯ࡞͔ͬͨ
Starter ͷબఆ • ଞͷҊ݅Ͱ͍ͬͯΔͷͰɺSemantic UIΛ͍͔ͨͬͨ • Semantic UI React ؚ͕·Ε͍ͯΔStarterΛબΜͩ
• https://github.com/pretzelhands/gatsby-starter-semantic-ui
Starter ͷબఆ • ެࣜͰ୳ͤΔΑ͏ʹͳ͍ͬͯΔ • v2ͷͷΛ୳͢ͱྑ͍ • https://www.gatsbyjs.org/starters/?v=2
ͻͨ͢ΒίϯϙʔωϯτΛ࡞͍ͬͯ͘ • XDΛݟͳ͕ΒΓͳ͍෦Λఆٛͯ͠ɺ࣮͍ͯ͘͠ • ͳΔ͘൚༻తʹͳΔΑ͏ʹઃܭ • 35ݸ͙Β͍ͷίϯϙʔωϯτʹͳͬͨ
ϏδωεαΠυϖʔδΛ࡞͍ͬͯ͘ • Կݸ͔࡞ͬͨαϯϓϧϖʔδΛݩʹɺจݴΛม͑ͨΓɺίϯ ϙʔωϯτΛม͑ͨΓ • ίϯϙʔωϯτΛ͜͏͏ͱ͜͏ͳΔΑɺͷαϯϓϧ͕͋Δ ͱɺҙ֎ͱͭ·͔ͮͣʹϖʔδ͕Ͱ͖͍ͯͬͨ • GitGUIͰ͔Γ͍͢GitHub DesktopΛೖΕͯΒͬͨ
Q. CSSʁ
A. CSS ModulesΛͬͨ • ଞͷҊ݅Ͱ༻͍ͯ͠ΔSassΛͦͷ··͍͔ͨͬͨ • `gatsby-plugin-sass` ͱ `node-sass` ΛೖΕΔͱྑ͍
A. CSS ModulesΛͬͨ • ͿͬͪΌ͚Έͷ෦͋Δ • ϑΝΠϧ͚͍ͨ • Կ͠ͳͯ͘ɺϑΝΠϧͷγϯλοΫεϋΠϥΠτ͕ޮ͍ͯཉ ͍͠
• ଞͷબࢶͱͯ͜͠ͷล • Styled Components • CSS in JS
A. CSS ModulesΛͬͨ • ίϯϙʔωϯτͷjsϑΝΠϧͱ1ର1ରԠ • footer.js / footer.module.sass •
pages/ ͰCSSΛॻ͔ͳ͍Α͏ʹઃܭͨ͠ • ίϯϙʔωϯτଆͰελΠϧͷࠩΛΧόʔ͢Δ • ίϯϙʔωϯτΛ͏͚ͩͰϖʔδ͕͢Δ • CSS͕อकͰ͖ͳ͘ͳΔͷΛ͙
Q. ը૾ͷ࠷దԽʁ
A. gatsby-imageΛͬͨ • ಡΈࠐΈʹΑΔΨλπΩΛ͛Δ • ͦͷ·· <img> λάͰը૾ΛಡΈࠐΉͱΨλπΫ • ը૾ͷϦαΠζ&ѹॖͬͯ͘ΕΔ
• .webp ʹରԠͯ͘͠ΕΔ • ϨΠδʔϩʔυͬͯ͘ΕΔ • ߥΒͷBase64Λઌग़ͨ͠͠ΓɺTransitionΛՃ͑ͨΓ
A. gatsby-imageΛͬͨ • Before
A. gatsby-imageΛͬͨ • After
Q. ϗεςΟϯάʁ
A. Netlify Λͬͨ
A. Netlify Λͬͨ • GitHubͷϦϙδτϦΛඥ͚Δ͚ͩͰɺϏϧυ & σϓϩΠ͕ Ͱ͖Δ • ΧελϜυϝΠϯ
& SSLԽରԠແྉͰͰ͖Δ • Ϗϧυ͕͚͜ΔίϛοτΛͯ͠ɺຊ൪ڥͪΌΜͱಈ࡞ ͨ͠··ͷঢ়ଶ͕อͨΕΔ • ϏδωεαΠυ҆৺ͯ͠ίϛοτͰ͖Δ
A. Netlify Λͬͨ • READMEʹόοδΛ͚Δ͜ͱͰσϓϩΠ͕ޭ͍ͯ͠Δ͔ Λڞ༗Ͱ͖Δ
A. Netlify Λͬͨ • ϦμΠϨΫτઃఆͰ͖Δ • ࠓճͷΑ͏ʹϦχϡʔΞϧͱ͔ͰچαΠτͷߏͱ৽αΠ τͷߏ͕ҧ͏߹ॏๅ͢Δ • ͪΌΜͱઃఆ͢Δ͜ͱͰSEOԼ͕Γʹ͍͘
Netlify ͷҙ • ͜ͷઃఆؾΛ͚ͭͨํ͕ྑ͍ • σϑΥϧτ͕ ʮAutomatically build…ʯʹͳ͍ͬͯΔ
Netlify ͷҙ • PRΛ࡞ͬͨ࣌ʹϨϏϡʔ༻ͷڥΛཱͯͯ͘ΕΔ • ΊͬͪΌศརʂ • ͕ɺ͔͠͠ɺϚʔδ͞ΕͨޙΓଓ͚Δ • ͔͠ɺফͤͳ͍
Netlify ͷҙ • ҰԠɺϩϘοτͳͲʹิ͞Εͳ͍Α͏ʹͳ͍ͬͯΔ ͕ɺաڈͷ։ൃ్தͷͷ͕ݟΕͯ͠·͏ • ͔͠ɺਪଌ͍͢͠URL • https://deploy-preview-1--your-domain.netlify.com/ •
Λए͍ͯ͘͘͠ͱɺͲΜͲΜॳظͷը໘͕…
Netlify ͷҙ • ެࣜʹ࣭ͯ͠Έͨ • ͕ɺҰɺڥ͝ͱফ͠ ͯɺཱ͔ͯ͢͠ͳ͍ɺ ͱͷ͜ͱ
Q. ͦͷଞʁ
A. ॾʑἧ͖͍ͬͯͯ·͢ • OGPHelmetΛ͏ • ֤ϖʔδͰΦʔόʔϥΠυͰ͖Δ • Google Analytics
`gatsby-plugin-google-analytics` Λ͏ • Google Tag Manager `gatsby-plugin-google- tagmanager`
Ͱ͖͕͋ͬͨͷ
Ͱ͖͕͋ͬͨͷ ✨ https://giftee.biz
Ͱ͖͕͋ͬͨͷ ✨ • ͱʹ͔͘ੈͷதʹग़ͯ͠ɺվળ • ϝΠϯͷαʔϏεͷ։ൃΛ͠ͳ͕Β3ϲ݄͘Β͍ • ը૾ͷ࠷దԽ·ͩҰ෦ͷϖʔδ͔͠Ͱ͖͍ͯͳ͍ • ΞΫηεͷଟ͍ϖʔδ͔Βվળ͍ͯ͘͠
• ʑɺগͣͭ͠վળ͍͍ͯͬͯ͠Δ࠷த • ಋೖࣄྫͳͲͷίϯςϯπ૿͍͍ͯͬͯ͠Δ
ಋೖࣄྫΛͲ͏࣮ͬͯݱ͔ͨ͠ • ཁ݅ • λάΛ͚͍ͨ • λάͰݕࡧͯ͠ಋೖࣄྫΛݟ͍͖͍ͯͨ • ֤ϖʔδͷ༰ଞͷϖʔδͱಉ༷ʹίϯϙʔωϯτͷ Έ߹ΘͤͰࣗ༝ʹϨΠΞτΛ͍ͨ͠
ಋೖࣄྫΛͲ͏࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷΈΛԠ༻ͨ͠ • gatsby-source-filesystem ͰϚʔΫμϯΛύʔεͯ͠λΠ τϧλάͳͲͷใΛऔಘ --- path: "/cases/tsutaya"
date: "2019-02-01" title: "TSUTAYA様|新感染Twitterキャンペーン" pointText: "広告出稿なしにオーガニックのみに拡散でCPRT約47円を実現" componentPath: "src/cases/tsutaya/index.js" image: "images/tsutaya.png" tags: ["Twitter", "ファミリーマート"] --- src/cases/tsutaya/index.md
ಋೖࣄྫΛͲ͏࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷΈΛԠ༻ͨ͠ • componentPathΛ࣋ͭ͜ͱͰɺ༰ࣗ༝ʹΓସ͑ΒΕ ΔΑ͏ʹͨ͠ --- path: "/cases/tsutaya" date:
"2019-02-01" title: "TSUTAYA様|新感染Twitterキャンペーン" pointText: "広告出稿なしにオーガニックのみに拡散でCPRT約47円を実現" componentPath: "src/cases/tsutaya/index.js" image: "images/tsutaya.png" tags: ["Twitter", "ファミリーマート"] --- src/cases/tsutaya/index.md
ಋೖࣄྫΛͲ͏࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷΈΛԠ༻ͨ͠ • componentʹઌఔͷcomponentPathΛ৯ͤ͞Δ͜ͱͰ ֤ϖʔδ͕ࣗ༝ͳίϯϙʔωϯτΛಡΈࠐΊΔ gatsby-node.js cases.forEach(({ node })
=> { createPage({ path: node.frontmatter.path, component: path.resolve(node.frontmatter.componentPath), context: {}, // additional data can be passed via context }) })
ಋೖࣄྫΛͲ͏࣮ͬͯݱ͔ͨ͠
ಋೖࣄྫΛͲ͏࣮ͬͯݱ͔ͨ͠ // Tag pages: let tags = [] _.each(cases, edge
=> { if (_.get(edge, 'node.frontmatter.tags')) { tags = tags.concat(edge.node.frontmatter.tags) } }) tags = _.uniq(tags) tags.forEach(tag => { createPage({ path: `/cases/tags/${_.kebabCase(tag)}/`, component: tagTemplate, context: { tag, }, }) }) gatsby-node.js
ಋೖࣄྫΛͲ͏࣮ͬͯݱ͔ͨ͠
ϦϦʔεͯ͠Ͳ͏͔ͩͬͨ
PV • 2/21ʹϦϦʔεΛͨ͠ • 10,000 PV / ݄͙Β͍৳ͼͨ • ճ༡͕૿͑ͨʢʁʣ
SEO • ৳ͼ͍ͯΔϫʔυ͋Εɺམ͍ͪͯΔϫʔυ͋ͬͨ • ίϯςϯπΛΨϥοͱม͑ͨͷͰ͜ͷลҰఆํ͕ͳ͍ • Gatsby.js Λ͔ͬͨΒSEO͕ҰؾʹԼ͕ͬͨɺͱ͍͏͜ͱ ͳ͍
ίϯόʔδϣϯ • ͍߹Θͤ • ঃʑʹ৳ͼ͍ͯΔ • ͱ͍͏͜ͱӨڹ͋Γͦ͏ͳͷͰɺظతʹ Υον͍ͯ͘͠
ॴײͳͲ
ॴײͳͲ • Gatsby + Netlify ͷΈ߹Θͤศར • ։ൃମݧͱͯ͠ྑ͔ͬͨ • Ұ௨ΓඞཁͳϓϥάΠϯ͕ἧ͖͍ͬͯͯΔ
• νϡʔτϦΞϧ͕ॆ࣮͍ͯͯ͠ɺΓ͍ͨ͜ͱେମެࣜʹ ॻ͍ͯ͋Δ • ϏδωεαΠυʹReactΛ৮ͬͯΒ͏͜ͱͰ͖ͨ
ࠓճͨ͠༰ • Gatsby.js ͕ྲྀߦ͖͍ͬͯͯͯɺݸਓϒϩάͳͲͰΘΕΔ͜ ͱ͕ଟ͘ͳ͖͕ͬͯͨɺͦΕΛۀͰͬͨࣄྫͷհ
ίϚʔγϟϧ • We are hiring!!! - Ұॹʹಇؒ͘Λืूதʂ ձһສਓಥഁʂ ࠃ/PͷΧδϡΞϧΪϑταʔϏε