Slide 1
Slide 1 text
株式会社クリモ CTO 渡邊達明
OG画像のためだけのFunctionsで、
htmlベタ書き＆リダイレクトをやめるんだ
~ Firebase Meetup #15 2019/12/03 ~
Slide 2
Slide 2 text
◉ 自己紹介と最近作っているもの
◉ ためしがきの歴史
◉ Netlifyはいいぞ
◉ Cloud Runを使おう
目次
Slide 3
Slide 3 text
◉ 渡邊 達明（わたなべ たつあき）
◉ Twitter,GitHub: @nabettu
◉ 富士通株式会社→面白法人カヤック→独立
◉ 妻（代表）と二人で法人
◉ ネイティブアプリ（React Native with Expo）& Webフロント
（Nuxt.js,React.js）& Firebase周りが専門です
自己紹介
Slide 4
Slide 4 text
NTTコミュニケーションズ
社内ベンチャー発
リアルタイムスポーツ実況解説アプリ
サッカーJ1の配信始めます！
SpoLive
Slide 5
Slide 5 text
tabmemo
タブで仕分けできるメモアプリ
Slide 6
Slide 6 text
作ってます
Slide 7
Slide 7 text
- FirebaseのHostingを使ってSPAで作っている
サービス
１年半ほど前のためしがきを作る際の話。。。
フォントをシェアしたらOG画像を変えたい
ぞ〜
SPAだけどシェアされる毎にhtmlのmetaを
変えたい。。。
Slide 8
Slide 8 text
なんとかSPA＆サーバーレスでで
きないか考えた結果。。。
1. /share/:id のパスだけfunctionsにつなぐ
2. OG画像を含んだmetaだけ書いたhtmlを
返す
3. トップページへリダイレクト
という方式にしよう！
Slide 9
Slide 9 text
公開したらめちゃバズった
Twitterトレンドに載ったりはてブが2000以上ついた
りした。
サービスについてブログを書いたら、ブログも500は
てブ
その後SPAで静的サイトホスティングをしている
Firebaseマンのお手軽OG画像書き換え方式デファ
クトになっていった・・・
Slide 10
Slide 10 text
あの頃はよかったが、最近はもっといい代替手段が
出てきているので紹介します。
- レスポンスが遅い・URLリダイレクトを挟む
- htmlをfunctions内に書いておくのでメンテもしづら
い
UXもDXも悪い部分のデメリットも解決！
あれから１年半ほどたち、、
Slide 11
Slide 11 text
NetlifyのPrerenderingを使おう
Slide 12
Slide 12 text
Netlifyとは
◉ 静的サイトホスティングサービス
◉ GitHubなどのリポジトリと連携して、自動でサイトホ
スティングができる
◉ 静的サイト公開のための便利機能がたくさん詰まっ
ている
Slide 13
Slide 13 text
◉ SPAなどのJavaScriptでのレンダリング結果をキャッ
シュしておいて、Twitterのクローラなどに返却してく
れる機能
◉ (Netlifyでは https://prerender.io/ を利用していま
す。)
Prerenderingとは
Slide 14
Slide 14 text
◉ JavaScriptでページのレンダリング時にmeta情報を
書き換えたhtmlをキャッシュしてくれる
これを使うと・・・
SPAなのにOG画像の出し分けができます！
Slide 15
Slide 15 text
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画像の替え方
Slide 16
Slide 16 text
Netlifyの本を書いているのでぜひ買って下さい！
◉ Amazonで
買えます！！！
宣伝です
Slide 17
Slide 17 text
実動作してるサンプル #EmojiMashupper
https:/
/emoji.nabettu.com/
Slide 18
Slide 18 text
- FunctionsだとFirestoreのデータをadminSDKで
使えたのが便利だったのに！
- 認証情報をごにょごにょしてレンダリングした
い！
- Netlify便利なんだけどCDN遅いんだよな
とかの人は・・・
とはいえFunctionsも便利な部分はあった
Slide 19
Slide 19 text
CloudRunを使って
SSRをしよう
Slide 20
Slide 20 text
CloudRunとは
- こないだGAになった、サーバーレスでコンテナ化したアプ
リを展開できるサービス
- Nuxt.jsとかのSSRできるSPAライブラリを突っ込んで動かそ
う！
- Firebase Hostingともつなげられる！
- SSRと別でコンテナ化したAPIサーバーとかも同じドメインでサクッ
とおいておける
Slide 21
Slide 21 text
みなみさんの本がめっちゃ詳しい
オススメです！
Nuxt.jsとFirebaseの
組み合わせで開発している人
必読！
詳しくはこちらで！
Slide 22
Slide 22 text
質問あればTwitterでも
https://twitter.com/nabettu
cometsでもどうぞ→
Thanks!
Slide 23
Slide 23 text
cometsについて
こちらの発表は、専用サイトに
コメントするとコメントが
発表者のスライドに表示されます。
https://comets.nabettu.com/?id=FJUG
ちなみにFirebaseとNetlifyで動いています。