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
Nuxt(SPA)でもOGPしたい/want to render ogp with nuxt ...
Search
果物リン
May 27, 2019
Technology
4
3.4k
Nuxt(SPA)でもOGPしたい/want to render ogp with nuxt spa mode
ここにSPAモードのプロッジェクトがあります。
OGP?はい、1個設定できますね。
ページごとに設定したい?いったいなにをいっているんだ。
果物リン
May 27, 2019
Tweet
Share
More Decks by 果物リン
See All by 果物リン
Electron+Vue+Swift=真のデスクトップアプリ / How to create "Really" desktop app using Electron
fruitriin
0
41
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
87
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
780
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
160
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
120
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
230
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
900
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
360
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
160
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
180
php-conference-nagoya-2025
fuwasegu
0
150
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
160
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
130
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
190
AIエージェント入門
minorun365
PRO
31
18k
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
290
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
実は強い 非ViTな画像認識モデル
tattaka
3
1.3k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Building an army of robots
kneath
303
45k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Transcript
Nuxt(SPA)でも OGPしたい ՌϦϯ@FruitRiin גࣜձࣾΏΊΈ Roppongi.vue #1 2019/05/27
Q. NuxtͰ ϖʔδݸผʹOGPΛ ઃఆ͍ͨ͠Ͱ͢
SSR, UniversalϞʔυ headͰϝλλάઃఆ
Yes! ͦ͏Ͱ͋Δ͖ʂ
ͱ͜ΖͰ ͜͜ʹSPAϞʔυͷ ϓϩδΣΫτ͕͋Γ·͢
ʮͳΜͰSPAϞʔυͳΜ͔͢ʁʯ ʮ༷͔ͩΒɺܦҢΘ͔ΒΜʯ ʮ͍͞Ͱʯ
ΫϥΠΞϯτͷσΟϨ ʮOGPग़ͳ͍ΜͰ͔͢ʁʯ
Ͱ͢ΑͶʔ
͙͵͵͵…… SPA͔ΒUniversalϞʔυͷΓସ͑…… →fetchͰͷwindow objectૢ࡞͕શ໓ Ұ෦ઃܭΓͳ͓͠ ݕূίετܹ૿……
ΫϥΠΞϯτͷΤϯδχΞ ʮNuxtʹ͢લʹExpressͰ HTMLΛվ͟Μ͢Ε ͍͚ΔͷͰʁʯ
ΓɺΓͭ͘Θ͔Δ Θ͔Δ͕……
Nuxt(SPA)でも OGPしたい 闇の魔術に対する防衛術
自己紹介 • ՌϦϯ@FruitRiin • גࣜձࣾΏΊΈ • ·ͳ͘ೖࣾ4ϲ݄ • ϑϩϯτΤϯδχΞɺνʔϜϦʔμʔɺPMʁ •
Vue͍͍ͧʂ
ʮ͍ͬͯ͏ͳΜ͚ͩͲ͞ɺ Ͱ͖Δͱࢥ͏ʁʯ ʮͪΐͬͱௐͯΈ·͠ΐ͏͔ʯ
ʮͰ͖ͦ͏ͳؾ͕͠·͢ʁʯ ʮϚδͰʁʯ
方針:nuxt startしない プロジェクトを目指す • nuxt start͢Δͱαʔόʔ͕ىಈ͢Δ • վ͟Μͷ༨ͳ͠ • expressΛىಈ͢Δapp.js
తͳͷΛͭ͘Δ • nuxt start ͷΘΓʹ node app.js ͢Δ
app.js? • NodeͰಈ͔͢ϓϩάϥϜͱͯ͠ࢦఆ͢ΔϑΝΠϧ • ߏཁ݅ • nuxtΛexpressͷϞδϡʔϧͱͯ͠ॳظԽ • ։ൃϞʔυͷͱ͖ϗοτϦϩʔυ༻ʹϦϏϧυ •
expressʹϦΫΤετ͕དྷͨͱ͖ Nuxt.jsͰϨϯμϦϯά • expressΛࢦఆϙʔτͰػͤ͞Δ
ͳΔ΄Ͳ·ͬͨ͘Θ͔ΒΜ
app.js • ࢀߟจݙ: nuxt.render() https://ja.nuxtjs.org/api/nuxt-render/ • جຊతͳܕͱ্ͯ͠هͷίʔυΛ ͦͷ··ར༻͠·͠ΐ͏
const { Nuxt, Builder } = require('nuxt') const app =
require('express')() const isProd = (process.env.NODE_ENV === 'production') const port = process.env.PORT || 3000 // Nuxt.js ΛΦϓγϣϯͱͱʹΠϯελϯεԽ͢Δ const config = require('./nuxt.config.js') config.dev = !isProd const nuxt = new Nuxt(config) // ͯ͢ͷϧʔτΛ Nuxt.js ͰϨϯμϦϯά͢Δ app.use(nuxt.render) // ϗοτϦϩʔσΟϯά͢Δ։ൃϞʔυͷͱ͖ͷΈϏϧυ͢Δ if (config.dev) { new Builder(nuxt).build() .then(listen) } else { listen() } function listen() { // αʔόʔΛ Listen ͢Δ app.listen(port, '0.0.0.0') console.log('Server listening on `localhost:' + port + '`.') }
ͦ͏͍͏ͷͩͱఘΊͯ͘Ε
備考:create-nuxt-app • Use a custom server framework? ʹ -> express
ͱճ͢Δ • server/index.js Λࣗಈੜͯ͘͠ΕΔʂʂ • ༰ઌఔͷϑΝΠϧͱ֓Ͷಉ͡
HTMLを取得したい • HTMLͷऔಘʹ nuxt.renderRoute() Λ͏ • SPAϞʔυͰ࣮࣭ςϯϓϨʔτ͕औಘͰ͖Δ • ฦΓͷΦϒδΣΫτʹؚ·ΕΔ html
ʹ ϨϯμϦϯά͠Α͏ͱͨ͠HTML͕ೖ͍ͬͯΔ
ಛఆϧʔςΟϯάͷͱ͖ͷΈͷॲཧ • ϧʔςΟϯάͰॲཧΛ͚͍ͨˠapp.get() ͳͲΛ͏ • express ͷgetϝιου • app.get(‘/detail’) ,
app.get(‘/user/:userId’) ͳͲ
const { Nuxt, Builder } = require('nuxt') const app =
require('express')() const isProd = (process.env.NODE_ENV === 'production') const port = process.env.PORT || 3000 // Nuxt.js ΛΦϓγϣϯͱͱʹΠϯελϯεԽ͢Δ const config = require('./nuxt.config.js') config.dev = !isProd const nuxt = new Nuxt(config) // ͯ͢ͷϧʔτΛ Nuxt.js ͰϨϯμϦϯά͢Δ app.use(nuxt.render) // ϗοτϦϩʔσΟϯά͢Δ։ൃϞʔυͷͱ͖ͷΈϏϧυ͢Δ if (config.dev) { new Builder(nuxt).build() .then(listen) } else { listen() } function listen() { // αʔόʔΛ Listen ͢Δ app.listen(port, '0.0.0.0') console.log('Server listening on `localhost:' + port + '`.') } େࣄͦ͏
// Nuxt.js ΛΦϓγϣϯͱͱʹΠϯελϯεԽ͢Δ const config = require('./nuxt.config.js') config.dev = !isProd
const nuxt = new Nuxt(config) // detailͰಛผॲཧ app.get(‘/detail', async (req, res) => { const result = await nuxt.renderRoute('/'); console.log(result.html) }) // ͯ͢ͷϧʔτΛ Nuxt.js ͰϨϯμϦϯά͢Δ app.use(nuxt.render) Ճ͠·ͨ͠ ↑Ͱॲཧ͞Εͳ͚Ε ɹͬͪ͜Ͱॲཧ͢Δ
None
axiosで必要なデータを引っ張る • ͜͜ීஈͱ͋·ΓมΘΒͳ͍ • axios.get() ͳΓͳΜͳΓ
改ざんしてレンダリング • Կߟ͑ͣʹےͰ String.replace() • String.replace(/<meta data-hid=“og:title”.*?>/, 'ʢུʣ') • ஔͨ͠ͷΛ
res.send() ͢Δ
// detailͰಛผॲཧ app.get("/detail", async (req, res) => { const result
= await nuxt.renderRoute("/"); let html = result.html; const meta = await axios.get("/someting-meta") html = html.replace(/<meta data-n-head="true" data-hid=“og:title".*?>/, `<meta title="og:title" content="${meta.title}">`) res.send(html) }); Ճ͠·ͨ͠
None
None
ΊͰͨ͠ɹΊͰͨ͠
メリット • ҠߦʹൺΕݕূίετ͕͍ܰ • طଘͷSPAͷॲཧΛݟ͞ͳͯ͘Α͍ • αʔόʔͰDOMͷܭࢉΛ͠ͳ͍ͰΑ͍ • expressΛىಈ͢Δඞཁ͋ΔͷͰɺ αʔόʔϦιʔεΛ৯Θͳ͍Θ͚Ͱͳ͍
デメリット • UniversalϞʔυͰ͍͍ͳΒ UniversalϞʔυͷ΄͏͕Α͍ • Expressͷ͕ࣝଟগඞཁ • Δ͜ͱ͕టष͍
デメリット2 • ϖʔδίϯϙʔωϯτͷϧʔςΟϯάͱ վ͟ΜॲཧͷϧʔςΟϯά͕Ұக͠ͳ͍ • NuxtͷࣗಈϧʔςΟϯάͷԸܙΛड͚ΒΕͳ͍ • ̍ϖʔδͷॲཧ͕2Օॴʹ͔ΕΔ • ରͷϖʔδ͕૿͑Δͱίʔυ͕ͨΒ͘ͳΔ
͍ͬͯ͏͔ UniversalϞʔυͰ͖ΔͳΒ ຊʹͦͷํ͕͍͍
ཁ݅ʹ߹Θͤͯ SPAϞʔυͰ։ൃΛਐΊ͍͍ͯͷ͔ ࠓҰߟ͑Α͏
SPAϞʔυ͡Ό OGPग़ͳ͍ͧͬʂ