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
OG画像のためだけのFunctionsで、 htmlベタ書き&リダイレクトをやめるんだ
Search
tatsuaki watanabe
December 03, 2019
Technology
3
1.6k
OG画像のためだけのFunctionsで、 htmlベタ書き&リダイレクトをやめるんだ
tatsuaki watanabe
December 03, 2019
Tweet
Share
More Decks by tatsuaki watanabe
See All by tatsuaki watanabe
4:3のスライド
nabettu
0
270
React Native for WebでもOGP対応がしたい! ~ TECH STAND #2 React Native 2020/12/18 ~
nabettu
1
6.5k
React Navigationを使って React Native WebでSPAを試してみた ~ React Native Meetup 2020/5/29 ~
nabettu
8
10k
React Nativeにおける ExpoとFirebaseの活用 Webとの共通化 ~ React Native Tokyo 2019/09/03 ~
nabettu
2
1.4k
A story till the netlify fun book is made
nabettu
0
680
Netlifyはいいぞ #技術同人誌再販Night
nabettu
1
480
Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり
nabettu
3
860
声をかけられるフリーランスエンジニアになるには
nabettu
5
1.3k
2016-01-25いいとも発表Atomパッケージ
nabettu
0
160
Other Decks in Technology
See All in Technology
LIFF CLIとngrokを使ったLIFF/LINEミニアプリのお手軽実機確認
diggymo
0
230
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
1.1k
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
os1ma
9
1.5k
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
860
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
cuebic9bic
3
210
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
300
Claude Codeから我々が学ぶべきこと
s4yuba
6
1.8k
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
290
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
0
160
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
830
【Λ(らむだ)】最近のアプデ情報 / RPALT20250729
lambda
0
230
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
150
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Visualization
eitanlees
146
16k
Raft: Consensus for Rubyists
vanstee
140
7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
2.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Producing Creativity
orderedlist
PRO
346
40k
Code Reviewing Like a Champion
maltzj
524
40k
Transcript
株式会社クリモ CTO 渡邊達明 OG画像のためだけのFunctionsで、 htmlベタ書き&リダイレクトをやめるんだ ~ Firebase Meetup #15 2019/12/03
~
◉ 自己紹介と最近作っているもの ◉ ためしがきの歴史 ◉ Netlifyはいいぞ ◉ Cloud Runを使おう 目次
◉ 渡邊 達明(わたなべ たつあき) ◉ Twitter,GitHub: @nabettu ◉ 富士通株式会社→面白法人カヤック→独立 ◉
妻(代表)と二人で法人 ◉ ネイティブアプリ(React Native with Expo)& Webフロント (Nuxt.js,React.js)& Firebase周りが専門です 自己紹介
NTTコミュニケーションズ 社内ベンチャー発 リアルタイムスポーツ実況解説アプリ サッカーJ1の配信始めます! SpoLive
tabmemo タブで仕分けできるメモアプリ
作ってます
- FirebaseのHostingを使ってSPAで作っている サービス 1年半ほど前のためしがきを作る際の話。。。 フォントをシェアしたらOG画像を変えたい ぞ〜 SPAだけどシェアされる毎にhtmlのmetaを 変えたい。。。
なんとかSPA&サーバーレスでで きないか考えた結果。。。 1. /share/:id のパスだけfunctionsにつなぐ 2. OG画像を含んだmetaだけ書いたhtmlを 返す 3. トップページへリダイレクト
という方式にしよう!
公開したらめちゃバズった Twitterトレンドに載ったりはてブが2000以上ついた りした。 サービスについてブログを書いたら、ブログも500は てブ その後SPAで静的サイトホスティングをしている Firebaseマンのお手軽OG画像書き換え方式デファ クトになっていった・・・
あの頃はよかったが、最近はもっといい代替手段が 出てきているので紹介します。 - レスポンスが遅い・URLリダイレクトを挟む - htmlをfunctions内に書いておくのでメンテもしづら い UXもDXも悪い部分のデメリットも解決! あれから1年半ほどたち、、
NetlifyのPrerenderingを使おう
Netlifyとは ◉ 静的サイトホスティングサービス ◉ GitHubなどのリポジトリと連携して、自動でサイトホ スティングができる ◉ 静的サイト公開のための便利機能がたくさん詰まっ ている
◉ SPAなどのJavaScriptでのレンダリング結果をキャッ シュしておいて、Twitterのクローラなどに返却してく れる機能 ◉ (Netlifyでは https://prerender.io/ を利用していま す。) Prerenderingとは
◉ JavaScriptでページのレンダリング時にmeta情報を 書き換えたhtmlをキャッシュしてくれる これを使うと・・・ SPAなのにOG画像の出し分けができます!
1. Firebase HostingからNetlifyに移行します。 2. share/:id ページを用意して以下のjsを 3. ページ読み込み開始時 window.prerenderReady =
false 3. JavaScriptでmeta情報を書き換えます 4. 3.終了後に window.prerenderReady = true 5. 必要であればtopページへrouterでpush 具体的なSPAでのOG画像の替え方
Netlifyの本を書いているのでぜひ買って下さい! ◉ Amazonで 買えます!!! 宣伝です
実動作してるサンプル #EmojiMashupper https:/ /emoji.nabettu.com/
- FunctionsだとFirestoreのデータをadminSDKで 使えたのが便利だったのに! - 認証情報をごにょごにょしてレンダリングした い! - Netlify便利なんだけどCDN遅いんだよな とかの人は・・・ とはいえFunctionsも便利な部分はあった
CloudRunを使って SSRをしよう
CloudRunとは - こないだGAになった、サーバーレスでコンテナ化したアプ リを展開できるサービス - Nuxt.jsとかのSSRできるSPAライブラリを突っ込んで動かそ う! - Firebase Hostingともつなげられる!
- SSRと別でコンテナ化したAPIサーバーとかも同じドメインでサクッ とおいておける
みなみさんの本がめっちゃ詳しい オススメです! Nuxt.jsとFirebaseの 組み合わせで開発している人 必読! 詳しくはこちらで!
質問あればTwitterでも https://twitter.com/nabettu cometsでもどうぞ→ Thanks!
cometsについて こちらの発表は、専用サイトに コメントするとコメントが 発表者のスライドに表示されます。 https://comets.nabettu.com/?id=FJUG ちなみにFirebaseとNetlifyで動いています。