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

React Native for WebでもOGP対応がしたい! ~ TECH STAND #2 React Native 2020/12/18 ~

React Native for WebでもOGP対応がしたい! ~ TECH STAND #2 React Native 2020/12/18 ~

- 自己紹介と最近作っているもの
- React Native for Webの仕組み
- Expoを使ったセットアップ
- SPAでの課題
- Cloudflare Workersの紹介
- Workersを使ったSPAでのOG画像差し替え
- デモ

17d7df2ee1ecb4ddf6a0ac1261e14bf4?s=128

tatsuaki watanabe

December 18, 2020
Tweet

Transcript

  1. 株式会社クリモ CTO 渡邊達明 React Native for WebでもOGP対応がしたい! ~ TECH STAND

    #2 React Native 2020/12/18 ~
  2. ◉ 自己紹介と最近作っているもの ◉ React Native for Webの仕組み ◉ Expoを使ったセットアップ ◉

    SPAでの課題 ◉ Cloudflare Workersの紹介 ◉ Workersを使ったSPAでのOG画像差し替え ◉ デモ 目次
  3. ◉ 渡邊 達明(わたなべ たつあき) ◉ Twitter,GitHub: @nabettu ◉ 富士通株式会社→面白法人カヤック→独立 ◉

    妻(代表)と二人で法人 ◉ React Nativeアプリ, Webフロント, Firebaseが専門 ◉ 趣味はマンガとボルダリング 自己紹介
  4. AnotionというWebサービスを作ってます

  5. “ みなさん React Native for Web 使ってますか?

  6. 引用元 なかざんさん(@nkzn)のブログ https://blog.nkzn.info/entry/2018/05/29/210030 React Native for Webの仕組み

  7. 超ざっくりいうと React Nativeのこれが Webでこれになるイメージ ※ホントはもっと色々複雑

  8. React Native for Web のセットアップ with Expo $ npm install

    -g expo-cli $ expo init $ expo build:web web-buildディレクトリにブラウザで動く React Native製アプリケーションがビルドされる! S3とかFirebase Hostingにデプロイすればもう動く!
  9. SaaSのExpo(会社) - Expoのコミッターが経営 - Expo ClientやSnack等を開発 - Expoを使ったPush通知やOTA 用サーバーシステム、クラウド ビルド環境などを提供している

    ソフトウェアのExpo - React Nativeをラップして、完全にjsだけ で書けるようにしたツール郡(Xcodeや Android Studioも不要) - React Native for Webも入っててWebで も動く - 基本こっちのことを話します Expoって?
  10. SPAでの課題(Vue.jsやFlutter Webでも) ExpoでビルドするとSPAとして動きます。 しかし質問箱やマシュマロのようなサービスを 作るにはシンプルなSPAではできません。 最近人気のNext.jsを使ってVercelなどにデプ ロイすればできますがアプリとソースを共通化 したい! SPAのままなんとかならんのか!

  11. “ OG画像の差し替えくらいなら、 SSRしなくても出来ます!

  12. Cloudflare Workersの紹介

  13. Cloudflare Workersとは Cloudflare Workersとは、Cloudflare社が提供するCDN(コンテンツデリバリーネット ワーク)のエッジで開発者がJavaScriptを実行できるサーバーレスなサービスです。 Lambdaなどのサーバーレスサービスの問題ともいえるコールドスタート問題です が、Cloudflare Workersでは他のサーバーレスプラットフォームよりコールドスタート のスループットが最大50倍高速となっています。 引用元:Classmethodさんのブログ

    https://dev.classmethod.jp/articles/cloudflare-workers-tutorial/
  14. Workersを使ったSPAでのOG画像差し替え

  15. デモとコード紹介 ※登壇用に書きなぐったコードになっているので、お目 汚しすいません - ネイティブアプリとしても動作する、React Native for WebでできたWebアプリの紹介 - (ただちょっと間に合わず画像アップロードだけアプリだとコケるw)

    - - Cloudflareにデプロイしてるコード
  16. サンプルとデモ - サンプルサイト https://telop-maker.tokyo/ - サンプルリポジトリ https://github.com/nabettu/telop-maker

  17. まとめ - React Native Expoを使ってると、ネイティブアプリ向けで作ってた ソースほとんどそのままでWebでも動く - その場合シンプルなSPAになってしまうので、Edge Workerを使っ てOG画像対応を解決

    プラスの工数を少なく「RNアプリのWeb対応」が可能!
  18. 質問あればTwitterでも https://twitter.com/nabettu YouTubeコメントなどでもどうぞ Thanks!