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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for tatsuaki watanabe tatsuaki watanabe
December 03, 2019
Technology
1.7k
3

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

Avatar for tatsuaki watanabe

tatsuaki watanabe

December 03, 2019

More Decks by tatsuaki watanabe

See All by tatsuaki watanabe
4:3のスライド
Avatar for tatsuaki watanabe nabettu
0
290
React Native for WebでもOGP対応がしたい！ ~ TECH STAND #2 React Native 2020/12/18 ~
Avatar for tatsuaki watanabe nabettu
1
6.8k
React Navigationを使って React Native WebでSPAを試してみた ~ React Native Meetup 2020/5/29 ~
Avatar for tatsuaki watanabe nabettu
8
11k
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
750
Netlifyはいいぞ #技術同人誌再販Night
Avatar for tatsuaki watanabe nabettu
1
510
Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり
Avatar for tatsuaki watanabe nabettu
3
890
声をかけられるフリーランスエンジニアになるには
Avatar for tatsuaki watanabe nabettu
5
1.4k
2016-01-25いいとも発表Atomパッケージ
Avatar for tatsuaki watanabe nabettu
0
180

Other Decks in Technology

See All in Technology
[Scram Fest Niigata2026]Quality as Code〜AIにQAの思考を再現させる試み〜
Avatar for Masami Yajiri masamiyajiri
1
240
「誰一人取り残されない」 AIエージェント時代のプロダクト設計思想 Product Management Summit 2026
Avatar for mizushimac mizushimac
1
2.9k
EMから幅を広げるために最近挑戦していること / Recent challenges I'm undertaking to expand my horizons beyond EM
Avatar for hiro-torii hiro_torii
1
180
2026年春のAgentCoreアプデ 細かいやつ全部まとめ
Avatar for みのるん minorun365
3
190
Modernizing Your HCL Connections Experience: Visual Report to chain, Profile Enhancements, and AI Integration
Avatar for Wannes Rams wannesrams
0
280
FessのAI検索モード：検索システムとLLMへの取り組み
Avatar for Shinsuke Sugaya marevol
0
280
「SaaSの次の時代」に重要性を増すステークホルダーマネジメントの要諦 ～解像度を圧倒的に高めPdMの価値を最大化させる方法～
Avatar for KAKEHASHI kakehashi
PRO
3
3.8k
拝啓、あの夏の僕へ〜あなたも知っているApp Runnerの世界〜
Avatar for 荒木 ARK news_it_enj
0
210
生成AIはソフトウェア開発の革命か、ソフトウェア工学の宿題再提出なのか -ソフトウェア品質特性の追加提案-
Avatar for kyonmm kyonmm
PRO
2
840
エージェント時代の UIとAPI、CLI戦略
Avatar for coincheck coincheck_recruit
0
150
もっとコンテンツをよく構造化して理解したいので、LLM 時代こそ Taxonomy の設計品質に目を向けたい〜！
Avatar for MasatoMasaMasa morinota
0
190
自動テストだけで
リリース判断できるチームへ - 鍵はテストの量ではなくリリース判断基準の再設計にあった / Redesigning Release Criteria for Lightweight Releases
Avatar for えわ ewa
7
3.4k

Featured

See All Featured
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
300
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
370
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
6
35k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
7.1k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
510
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
180
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
180

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で動いています。