$30 off During Our Annual Pro Sale. View Details »

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

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

tatsuaki watanabe

December 03, 2019
Tweet

More Decks by tatsuaki watanabe

Other Decks in Technology

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で作っている
    サービス
    1年半ほど前のためしがきを作る際の話。。。
    フォントをシェアしたら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も悪い部分のデメリットも解決!
    あれから1年半ほどたち、、

    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