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
240
React Native for WebでもOGP対応がしたい! ~ TECH STAND #2 React Native 2020/12/18 ~
nabettu
1
6.1k
React Navigationを使って React Native WebでSPAを試してみた ~ React Native Meetup 2020/5/29 ~
nabettu
8
9k
React Nativeにおける ExpoとFirebaseの活用 Webとの共通化 ~ React Native Tokyo 2019/09/03 ~
nabettu
2
1.3k
A story till the netlify fun book is made
nabettu
0
600
Netlifyはいいぞ #技術同人誌再販Night
nabettu
1
430
Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり
nabettu
3
830
声をかけられるフリーランスエンジニアになるには
nabettu
5
1.3k
2016-01-25いいとも発表Atomパッケージ
nabettu
0
140
Other Decks in Technology
See All in Technology
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.5k
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
170
APIテスト自動化の勘所
yokawasa
7
4.1k
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
440
Emacs x Nostr
hakkadaikon
1
150
君は隠しイベントを見つけれるか?
mujyun
0
270
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
540
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
130
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
160
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
180
アジャイルと契約 エッセンシャル版 / Agile Contracts Essential Edition
fkino
0
110
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
280
34k
BBQ
matthewcrist
85
9.3k
Teambox: Starting and Learning
jrom
132
8.7k
Building Your Own Lightsaber
phodgson
102
6k
Building Adaptive Systems
keathley
38
2.2k
Rails Girls Zürich Keynote
gr2m
93
13k
Happy Clients
brianwarren
97
6.7k
Side Projects
sachag
452
42k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Adopting Sorbet at Scale
ufuk
73
9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
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で動いています。