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

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

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アプリの紹介
    - （ただちょっと間に合わず画像アップロードだけアプリだとコケるｗ）
    -
    - 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