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.5k
OG画像のためだけのFunctionsで、 htmlベタ書き&リダイレクトをやめるんだ
tatsuaki watanabe
December 03, 2019
Tweet
Share
More Decks by tatsuaki watanabe
See All by tatsuaki watanabe
4:3のスライド
nabettu
0
230
React Native for WebでもOGP対応がしたい! ~ TECH STAND #2 React Native 2020/12/18 ~
nabettu
1
6k
React Navigationを使って React Native WebでSPAを試してみた ~ React Native Meetup 2020/5/29 ~
nabettu
8
8.5k
React Nativeにおける ExpoとFirebaseの活用 Webとの共通化 ~ React Native Tokyo 2019/09/03 ~
nabettu
2
1.2k
A story till the netlify fun book is made
nabettu
0
570
Netlifyはいいぞ #技術同人誌再販Night
nabettu
1
400
Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり
nabettu
3
810
声をかけられるフリーランスエンジニアになるには
nabettu
5
1.3k
2016-01-25いいとも発表Atomパッケージ
nabettu
0
130
Other Decks in Technology
See All in Technology
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
310
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
エンジニア向け会社紹介資料
caddi_eng
14
220k
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
360
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8k
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Designing Experiences People Love
moore
136
23k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
RailsConf 2023
tenderlove
16
720
Thoughts on Productivity
jonyablonski
64
4.1k
Rails Girls Zürich Keynote
gr2m
93
13k
The Invisible Side of Design
smashingmag
294
50k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
How to Ace a Technical Interview
jacobian
274
23k
A Tale of Four Properties
chriscoyier
155
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
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で動いています。