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