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

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画像差し替え
- デモ

tatsuaki watanabe

December 18, 2020
Tweet

More Decks by tatsuaki watanabe

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  3. ◉ 渡邊 達明(わたなべ たつあき)
    ◉ Twitter,GitHub: @nabettu
    ◉ 富士通株式会社→面白法人カヤック→独立
    ◉ 妻(代表)と二人で法人
    ◉ React Nativeアプリ, Webフロント, Firebaseが専門
    ◉ 趣味はマンガとボルダリング
    自己紹介

    View Slide

  4. AnotionというWebサービスを作ってます

    View Slide


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

    View Slide

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

    View Slide

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

    View Slide

  8. React Native for Web のセットアップ with Expo
    $ npm install -g expo-cli
    $ expo init
    $ expo build:web
    web-buildディレクトリにブラウザで動く
    React Native製アプリケーションがビルドされる!
    S3とかFirebase Hostingにデプロイすればもう動く!

    View Slide

  9. SaaSのExpo(会社)
    - Expoのコミッターが経営
    - Expo ClientやSnack等を開発
    - Expoを使ったPush通知やOTA
    用サーバーシステム、クラウド
    ビルド環境などを提供している
    ソフトウェアのExpo
    - React Nativeをラップして、完全にjsだけ
    で書けるようにしたツール郡(Xcodeや
    Android Studioも不要)
    - React Native for Webも入っててWebで
    も動く
    - 基本こっちのことを話します
    Expoって?

    View Slide

  10. SPAでの課題(Vue.jsやFlutter Webでも)
    ExpoでビルドするとSPAとして動きます。
    しかし質問箱やマシュマロのようなサービスを
    作るにはシンプルなSPAではできません。
    最近人気のNext.jsを使ってVercelなどにデプ
    ロイすればできますがアプリとソースを共通化
    したい!
    SPAのままなんとかならんのか!

    View Slide


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

    View Slide

  12. Cloudflare Workersの紹介

    View Slide

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

    View Slide

  14. Workersを使ったSPAでのOG画像差し替え

    View Slide

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

    View Slide

  16. サンプルとデモ
    - サンプルサイト
    https://telop-maker.tokyo/
    - サンプルリポジトリ
    https://github.com/nabettu/telop-maker

    View Slide

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

    View Slide

  18. 質問あればTwitterでも
    https://twitter.com/nabettu
    YouTubeコメントなどでもどうぞ
    Thanks!

    View Slide