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
59
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
120
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
830
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
170
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
130
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
240
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
920
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
AI とペアプロしてわかった 3 つのヒューマンエラー
takahiroikegawa
1
530
医療業界に特化した音声認識モデル構築のためのアノテーションの実態
thickstem
0
510
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
6.8k
AWS と定理証明 〜ポリシー言語 Cedar 開発の舞台裏〜 #fp_matsuri / FP Matsuri 2025
ytaka23
7
1.1k
Vibe Codingの裏で、 考える力をどう取り戻すか
csekine
2
540
Kubernetesで作るAIプラットフォーム
oracle4engineer
PRO
2
180
Roo CodeとClaude Code比較してみた
pharma_x_tech
1
170
Java で学ぶ 代数的データ型
ysknsid25
2
1.2k
単一Gitリポジトリから独立しました
lycorptech_jp
PRO
0
370
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.2k
Digitization部 紹介資料
sansan33
PRO
1
4k
「伝える」を加速させるCursor術
naomix
0
340
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Typedesign – Prime Four
hannesfritz
42
2.7k
For a Future-Friendly Web
brad_frost
178
9.8k
Scaling GitHub
holman
459
140k
Visualization
eitanlees
146
16k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Code Review Best Practice
trishagee
68
18k
Building Applications with DynamoDB
mza
95
6.4k
Six Lessons from altMBA
skipperchong
28
3.8k
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ग़ͳ͍ͧͬʂ