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
280
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
720
Netlifyはいいぞ #技術同人誌再販Night
Avatar for tatsuaki watanabe nabettu
1
500
Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり
Avatar for tatsuaki watanabe nabettu
3
880
声をかけられるフリーランスエンジニアになるには
Avatar for tatsuaki watanabe nabettu
5
1.4k
2016-01-25いいとも発表Atomパッケージ
Avatar for tatsuaki watanabe nabettu
0
170

Other Decks in Technology

See All in Technology
旬のブリと旬の技術で楽しむ AI エージェント設計開発レシピ
Avatar for Akira Inoue chack411
1
160
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
21k
産業的変化も組織的変化も乗り越えられるチームへの成長 〜チームの変化から見出す明るい未来〜
Avatar for KAKEHASHI kakehashi
PRO
1
420
#22 CA × atmaCup 3rd 1st Place Solution
Avatar for yumizu yumizu
1
140
AI時代のアジャイルチームを目指して ー スクラムというコンフォートゾーンからの脱却 ー / Toward Agile Teams in the Age of AI
Avatar for TAKAKING22 takaking22
11
5.6k
「アウトプット脳からユーザー価値脳へ」がそんなに簡単にできたら苦労しない #RSGT2026
Avatar for Aki / @LoveIdahoBurger aki_iinuma
9
4.5k
2025年のデザインシステムとAI 活用を振り返る
Avatar for Tech Leverages leveragestech
0
750
AWS re:Invent 2025 を振り返る
Avatar for kazzpapa3 kazzpapa3
2
110
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
I tried making a solo advent calendar!
Avatar for otsuka zzzzico
0
140
次世代AIコーディング：OpenAI Codex の最新動向 進行スライド/nikkei-tech-talk-40
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
110
歴史から学ぶ、Goのメモリ管理基礎
Avatar for Takuto Nagami logica0419
12
2.5k

Featured

See All Featured
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
420
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
0
140
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
47
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
720
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
76
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
140
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
320
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k

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