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

Transcript

1. 株式会社クリモ CTO 渡邊達明
   OG画像のためだけのFunctionsで、
   htmlベタ書き＆リダイレクトをやめるんだ
   ~ Firebase Meetup #15 2019/12/03 ~
   

   View Slide

2. ◉ 自己紹介と最近作っているもの
   ◉ ためしがきの歴史
   ◉ Netlifyはいいぞ
   ◉ Cloud Runを使おう
   目次
   

   View Slide

3. ◉ 渡邊 達明（わたなべ たつあき）
   ◉ Twitter,GitHub: @nabettu
   ◉ 富士通株式会社→面白法人カヤック→独立
   ◉ 妻（代表）と二人で法人
   ◉ ネイティブアプリ（React Native with Expo）& Webフロント
   （Nuxt.js,React.js）& Firebase周りが専門です
   自己紹介
   

   View Slide

4. NTTコミュニケーションズ
   社内ベンチャー発
   リアルタイムスポーツ実況解説アプリ
   サッカーJ1の配信始めます！
   SpoLive
   

   View Slide

5. tabmemo
   タブで仕分けできるメモアプリ
   

   View Slide

6. 作ってます
   

   View Slide

7. - FirebaseのHostingを使ってSPAで作っている
   サービス
   １年半ほど前のためしがきを作る際の話。。。
   フォントをシェアしたらOG画像を変えたい
   ぞ〜
   SPAだけどシェアされる毎にhtmlのmetaを
   変えたい。。。
   

   View Slide

8. なんとかSPA＆サーバーレスでで
   きないか考えた結果。。。
   1. /share/:id のパスだけfunctionsにつなぐ
   2. OG画像を含んだmetaだけ書いたhtmlを
   返す
   3. トップページへリダイレクト
   という方式にしよう！
   

   View Slide

9. 公開したらめちゃバズった
   Twitterトレンドに載ったりはてブが2000以上ついた
   りした。
   サービスについてブログを書いたら、ブログも500は
   てブ
   その後SPAで静的サイトホスティングをしている
   Firebaseマンのお手軽OG画像書き換え方式デファ
   クトになっていった・・・
   

   View Slide

10. あの頃はよかったが、最近はもっといい代替手段が
    出てきているので紹介します。
    - レスポンスが遅い・URLリダイレクトを挟む
    - htmlをfunctions内に書いておくのでメンテもしづら
    い
    UXもDXも悪い部分のデメリットも解決！
    あれから１年半ほどたち、、
    

    View Slide

11. NetlifyのPrerenderingを使おう
    

    View Slide

12. Netlifyとは
    ◉ 静的サイトホスティングサービス
    ◉ GitHubなどのリポジトリと連携して、自動でサイトホ
    スティングができる
    ◉ 静的サイト公開のための便利機能がたくさん詰まっ
    ている
    

    View Slide

13. ◉ SPAなどのJavaScriptでのレンダリング結果をキャッ
    シュしておいて、Twitterのクローラなどに返却してく
    れる機能
    ◉ (Netlifyでは https://prerender.io/ を利用していま
    す。)
    Prerenderingとは
    

    View Slide

14. ◉ JavaScriptでページのレンダリング時にmeta情報を
    書き換えたhtmlをキャッシュしてくれる
    これを使うと・・・
    SPAなのにOG画像の出し分けができます！
    

    View Slide

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画像の替え方
    

    View Slide

16. Netlifyの本を書いているのでぜひ買って下さい！
    ◉ Amazonで
    買えます！！！
    宣伝です
    

    View Slide

17. 実動作してるサンプル #EmojiMashupper
    https:/
    /emoji.nabettu.com/
    

    View Slide

18. - FunctionsだとFirestoreのデータをadminSDKで
    使えたのが便利だったのに！
    - 認証情報をごにょごにょしてレンダリングした
    い！
    - Netlify便利なんだけどCDN遅いんだよな
    とかの人は・・・
    とはいえFunctionsも便利な部分はあった
    

    View Slide

19. CloudRunを使って
    SSRをしよう
    

    View Slide

20. CloudRunとは
    - こないだGAになった、サーバーレスでコンテナ化したアプ
    リを展開できるサービス
    - Nuxt.jsとかのSSRできるSPAライブラリを突っ込んで動かそ
    う！
    - Firebase Hostingともつなげられる！
    - SSRと別でコンテナ化したAPIサーバーとかも同じドメインでサクッ
    とおいておける
    

    View Slide

21. みなみさんの本がめっちゃ詳しい
    オススメです！
    Nuxt.jsとFirebaseの
    組み合わせで開発している人
    必読！
    詳しくはこちらで！
    

    View Slide

22. 質問あればTwitterでも
    https://twitter.com/nabettu
    cometsでもどうぞ→
    Thanks!
    

    View Slide

23. cometsについて
    こちらの発表は、専用サイトに
    コメントするとコメントが
    発表者のスライドに表示されます。
    https://comets.nabettu.com/?id=FJUG
    ちなみにFirebaseとNetlifyで動いています。
    

    View Slide