- 自己紹介と最近作っているもの - React Native for Webの仕組み - Expoを使ったセットアップ - SPAでの課題 - Cloudflare Workersの紹介 - Workersを使ったSPAでのOG画像差し替え - デモ
株式会社クリモ CTO 渡邊達明React Native for WebでもOGP対応がしたい!~ TECH STAND #2 React Native 2020/12/18 ~
View Slide
◉ 自己紹介と最近作っているもの◉ React Native for Webの仕組み◉ Expoを使ったセットアップ◉ SPAでの課題◉ Cloudflare Workersの紹介◉ Workersを使ったSPAでのOG画像差し替え◉ デモ目次
◉ 渡邊 達明(わたなべ たつあき)◉ Twitter,GitHub: @nabettu◉ 富士通株式会社→面白法人カヤック→独立◉ 妻(代表)と二人で法人◉ React Nativeアプリ, Webフロント, Firebaseが専門◉ 趣味はマンガとボルダリング自己紹介
AnotionというWebサービスを作ってます
“みなさん React Native for Web使ってますか?
引用元 なかざんさん(@nkzn)のブログhttps://blog.nkzn.info/entry/2018/05/29/210030React Native for Webの仕組み
超ざっくりいうとReact Nativeのこれが Webでこれになるイメージ※ホントはもっと色々複雑
React Native for Web のセットアップ with Expo$ npm install -g expo-cli$ expo init$ expo build:webweb-buildディレクトリにブラウザで動くReact Native製アプリケーションがビルドされる!S3とかFirebase Hostingにデプロイすればもう動く!
SaaSのExpo(会社)- Expoのコミッターが経営- Expo ClientやSnack等を開発- Expoを使ったPush通知やOTA用サーバーシステム、クラウドビルド環境などを提供しているソフトウェアのExpo- React Nativeをラップして、完全にjsだけで書けるようにしたツール郡(XcodeやAndroid Studioも不要)- React Native for Webも入っててWebでも動く- 基本こっちのことを話しますExpoって?
SPAでの課題(Vue.jsやFlutter Webでも)ExpoでビルドするとSPAとして動きます。しかし質問箱やマシュマロのようなサービスを作るにはシンプルなSPAではできません。最近人気のNext.jsを使ってVercelなどにデプロイすればできますがアプリとソースを共通化したい!SPAのままなんとかならんのか!
“OG画像の差し替えくらいなら、SSRしなくても出来ます!
Cloudflare Workersの紹介
Cloudflare WorkersとはCloudflare Workersとは、Cloudflare社が提供するCDN(コンテンツデリバリーネットワーク)のエッジで開発者がJavaScriptを実行できるサーバーレスなサービスです。Lambdaなどのサーバーレスサービスの問題ともいえるコールドスタート問題ですが、Cloudflare Workersでは他のサーバーレスプラットフォームよりコールドスタートのスループットが最大50倍高速となっています。引用元:Classmethodさんのブログhttps://dev.classmethod.jp/articles/cloudflare-workers-tutorial/
Workersを使ったSPAでのOG画像差し替え
デモとコード紹介※登壇用に書きなぐったコードになっているので、お目汚しすいません- ネイティブアプリとしても動作する、React Native forWebでできたWebアプリの紹介- (ただちょっと間に合わず画像アップロードだけアプリだとコケるw)-- Cloudflareにデプロイしてるコード
サンプルとデモ- サンプルサイトhttps://telop-maker.tokyo/- サンプルリポジトリhttps://github.com/nabettu/telop-maker
まとめ- React Native Expoを使ってると、ネイティブアプリ向けで作ってたソースほとんどそのままでWebでも動く- その場合シンプルなSPAになってしまうので、Edge Workerを使ってOG画像対応を解決プラスの工数を少なく「RNアプリのWeb対応」が可能!
質問あればTwitterでもhttps://twitter.com/nabettuYouTubeコメントなどでもどうぞThanks!