Upgrade to Pro — share decks privately, control downloads, hide ads and more …

OG画像のためだけのFunctionsで、 htmlベタ書き＆リダイレクトをやめるんだ

Avatar for tatsuaki watanabe tatsuaki watanabe
December 03, 2019
Technology
3
1.7k

OG画像のためだけのFunctionsで、 htmlベタ書き＆リダイレクトをやめるんだ

Avatar for tatsuaki watanabe

tatsuaki watanabe

December 03, 2019
Tweet

More Decks by tatsuaki watanabe

See All by tatsuaki watanabe
4:3のスライド
Avatar for tatsuaki watanabe nabettu
0
270
React Native for WebでもOGP対応がしたい！ ~ TECH STAND #2 React Native 2020/12/18 ~
Avatar for tatsuaki watanabe nabettu
1
6.7k
React Navigationを使って React Native WebでSPAを試してみた ~ React Native Meetup 2020/5/29 ~
Avatar for tatsuaki watanabe nabettu
8
10k
React Nativeにおける ExpoとFirebaseの活用 Webとの共通化 ~ React Native Tokyo 2019/09/03 ~
Avatar for tatsuaki watanabe nabettu
2
1.4k
A story till the netlify fun book is made
Avatar for tatsuaki watanabe nabettu
0
710
Netlifyはいいぞ #技術同人誌再販Night
Avatar for tatsuaki watanabe nabettu
1
490
Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり
Avatar for tatsuaki watanabe nabettu
3
870
声をかけられるフリーランスエンジニアになるには
Avatar for tatsuaki watanabe nabettu
5
1.4k
2016-01-25いいとも発表Atomパッケージ
Avatar for tatsuaki watanabe nabettu
0
160

Other Decks in Technology

See All in Technology
Dart and Flutter MCP serverで実現する AI駆動E2Eテスト整備と自動操作
Avatar for Yuki Sakai yukisakai1225
0
540
生成AI時代に若手エンジニアが最初に覚えるべき内容と、その学習法
Avatar for starfish719 starfish719
2
250
AWS オブザーバビリティサービスアップデート
Avatar for o11yfes o11yfes2023
0
120
Flutterにしてよかった？出前館アプリを2年運用して気づいたことを全部話します
Avatar for 株式会社出前館 demaecan
0
200
"おまじない"はもう卒業！ デバッガで探るSpring Bootの裏側と「学び方」の学び方
Avatar for 竹内 雅和 takeuchi_132917
0
170
AIと自動化がもたらす業務効率化の実例： 反社チェック等の調査・業務プロセス自動化
Avatar for enpipi enpipi
0
610
入社したばかりでもできる、 アクセシビリティ改善の第一歩
Avatar for una unachang113
0
120
探求の技術
Avatar for azukiazusa azukiazusa1
7
2.3k
AIでテストプロセスを自動化しよう251113.pdf
Avatar for K_SAK sakatakazunori
0
150
[CV勉強会@関東 ICCV2025 読み会] World4Drive: End-to-End Autonomous Driving via Intention-aware Physical Latent World Model (Zheng+, ICCV 2025)
Avatar for abemii_ abemii
0
230
Introducing RFC9111 / YAPC::Fukuoka 2025
Avatar for Ken’ichiro Oyama k1low
1
250
「O(n log(n))のパフォーマンス」の意味がわかるようになろう
Avatar for dhirabayashi dhirabayashi
0
180

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
2.9k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.2k
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k

Transcript

  1. 株式会社クリモ CTO 渡邊達明 OG画像のためだけのFunctionsで、 htmlベタ書き＆リダイレクトをやめるんだ ~ Firebase Meetup #15 2019/12/03

    ~

  2. ◉ 自己紹介と最近作っているもの ◉ ためしがきの歴史 ◉ Netlifyはいいぞ ◉ Cloud Runを使おう 目次

  3. ◉ 渡邊 達明（わたなべ たつあき） ◉ Twitter,GitHub: @nabettu ◉ 富士通株式会社→面白法人カヤック→独立 ◉

    妻（代表）と二人で法人 ◉ ネイティブアプリ（React Native with Expo）& Webフロント （Nuxt.js,React.js）& Firebase周りが専門です 自己紹介

  4. NTTコミュニケーションズ 社内ベンチャー発 リアルタイムスポーツ実況解説アプリ サッカーJ1の配信始めます！ SpoLive

  5. tabmemo タブで仕分けできるメモアプリ

  6. 作ってます

  7. - FirebaseのHostingを使ってSPAで作っている サービス １年半ほど前のためしがきを作る際の話。。。 フォントをシェアしたらOG画像を変えたい ぞ〜 SPAだけどシェアされる毎にhtmlのmetaを 変えたい。。。

  8. なんとかSPA＆サーバーレスでで きないか考えた結果。。。 1. /share/:id のパスだけfunctionsにつなぐ 2. OG画像を含んだmetaだけ書いたhtmlを 返す 3. トップページへリダイレクト

    という方式にしよう！

  9. 公開したらめちゃバズった Twitterトレンドに載ったりはてブが2000以上ついた りした。 サービスについてブログを書いたら、ブログも500は てブ その後SPAで静的サイトホスティングをしている Firebaseマンのお手軽OG画像書き換え方式デファ クトになっていった・・・

  10. あの頃はよかったが、最近はもっといい代替手段が 出てきているので紹介します。 - レスポンスが遅い・URLリダイレクトを挟む - htmlをfunctions内に書いておくのでメンテもしづら い UXもDXも悪い部分のデメリットも解決！ あれから１年半ほどたち、、

  11. NetlifyのPrerenderingを使おう

  12. Netlifyとは ◉ 静的サイトホスティングサービス ◉ GitHubなどのリポジトリと連携して、自動でサイトホ スティングができる ◉ 静的サイト公開のための便利機能がたくさん詰まっ ている

  13. ◉ SPAなどのJavaScriptでのレンダリング結果をキャッ シュしておいて、Twitterのクローラなどに返却してく れる機能 ◉ (Netlifyでは https://prerender.io/ を利用していま す。) Prerenderingとは

  14. ◉ JavaScriptでページのレンダリング時にmeta情報を 書き換えたhtmlをキャッシュしてくれる これを使うと・・・ SPAなのにOG画像の出し分けができます！

  15. 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画像の替え方

  16. Netlifyの本を書いているのでぜひ買って下さい！ ◉ Amazonで 買えます！！！ 宣伝です

  17. 実動作してるサンプル #EmojiMashupper https:/ /emoji.nabettu.com/

  18. - FunctionsだとFirestoreのデータをadminSDKで 使えたのが便利だったのに！ - 認証情報をごにょごにょしてレンダリングした い！ - Netlify便利なんだけどCDN遅いんだよな とかの人は・・・ とはいえFunctionsも便利な部分はあった

  19. CloudRunを使って SSRをしよう

  20. CloudRunとは - こないだGAになった、サーバーレスでコンテナ化したアプ リを展開できるサービス - Nuxt.jsとかのSSRできるSPAライブラリを突っ込んで動かそ う！ - Firebase Hostingともつなげられる！

    - SSRと別でコンテナ化したAPIサーバーとかも同じドメインでサクッ とおいておける

  21. みなみさんの本がめっちゃ詳しい オススメです！ Nuxt.jsとFirebaseの 組み合わせで開発している人 必読！ 詳しくはこちらで！

  22. 質問あればTwitterでも https://twitter.com/nabettu cometsでもどうぞ→ Thanks!

  23. cometsについて こちらの発表は、専用サイトに コメントするとコメントが 発表者のスライドに表示されます。 https://comets.nabettu.com/?id=FJUG ちなみにFirebaseとNetlifyで動いています。