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
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
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
8k
試作とデモンストレーション / Prototyping and Demonstrations
Avatar for Kenji Saito ks91
PRO
0
200
AI 時代の Platform Engineering
Avatar for Recruit recruitengineers
PRO
1
170
（きっとたぶん）人材育成や教育のような何かの話
Avatar for Takanori Sejima sejima
0
730
「背中を見て育て」からの卒業 〜専門技術としてのテスト設計を軸に、品質保証のバトンを繋ぐ〜 #genda_tech_talk
Avatar for nihonbuson nihonbuson
PRO
3
1.3k
大学職員のための生成AI最前線 ：最前線を、AIガバナンスとして読み直すためのTips
Avatar for gmoriki | 森木銀河 gmoriki
2
4k
Gaussian Splattingの表現力を拡張する — 高周波再構成とインタラクションへのアプローチ —
Avatar for GPU UNITE gpuunite_official
0
160
サンプリングは「作る」のか「使う」のか？ 分散トレースのコストと運用を両立する実践的戦略 / Why you need the tail sampling and why you don't want it
Avatar for ymotongpoo ymotongpoo
4
170
可視化から活用へ — Mesh化・Segmentation・アライメントの研究動向
Avatar for GPU UNITE gpuunite_official
0
190
オライリーイベント登壇資料「鉄リサイクル・産廃業界におけるAI技術実応用のカタチ」
Avatar for Takumi Karasawa takarasawa_
0
400
拝啓、あの夏の僕へ〜あなたも知っているApp Runnerの世界〜
Avatar for 荒木 ARK news_it_enj
0
240
LookerとADKで作る社内AIエージェント
Avatar for chanyou0311 chanyou0311
0
140

Featured

See All Featured
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
920
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
180
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
450
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.2k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
140
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
790
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.1k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
110
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
120
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k

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