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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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.9k
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
パーソルキャリア IT/テクノロジー職向け 会社紹介資料｜Company Introduction Deck
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
210
データモデリング通り #5オンライン勉強会： AIに『ビジネスの文脈』を教え込むデータモデリング
Avatar for データ横丁 datayokocho
0
290
社内RAGの導入で気を付けたポイント
Avatar for やくも yakumo
1
120
サイボウズ、プラットフォームエンジニアリング始めるってよ ― プラットフォームチームの事業貢献と組織アラインメントの強化
Avatar for Shin'ya Ueoka ueokande
0
120
ワールドカフェ再び、そしてゴール・ルール・ロール・ツール / World Café Revisited, and the Goals-Rules-Roles-Tools
Avatar for Kenji Saito ks91
PRO
0
180
エムスリーテクノロジーズ株式会社 エンジニア向け紹介資料 / M3 Technologies Company Deck
Avatar for M3 Engineering m3_engineering
0
180
Oracle Cloud Infrastructure presents managed, serverless MCP Servers for Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
1
360
アプリブロック機能のつくりかたと、AIとHTMLの不合理な相性の良さについて
Avatar for kumamotone kumamotone
1
260
会社説明資料｜株式会社ギークプラス ソフトウェア事業部
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
300
RedmineをAIで効率的に使う検証
Avatar for Takayuki Yoshioka yoshiokacb
0
140
20260513_生成AIを専属DSに_AI分析結果の検品テクニック_ハンズオン_交通事故データ
Avatar for NobuakiOshiro doradora09
PRO
0
230
SLI/SLO、「完全に理解した」から「チョットデキル」へ
Avatar for maru maruloop
5
560

Featured

See All Featured
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
180
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
820
A Soul's Torment
Avatar for Nat Ma seathinner
6
2.8k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
170
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
190
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
130

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