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

React Native for WebでもOGP対応がしたい! ~ TECH STAND ...

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. ◉ 自己紹介と最近作っているもの ◉ React Native for Webの仕組み ◉ Expoを使ったセットアップ ◉

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

    妻(代表)と二人で法人 ◉ React Nativeアプリ, Webフロント, Firebaseが専門 ◉ 趣味はマンガとボルダリング 自己紹介
  3. React Native for Web のセットアップ with Expo $ npm install

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

    ソフトウェアのExpo - React Nativeをラップして、完全にjsだけ で書けるようにしたツール郡(Xcodeや Android Studioも不要) - React Native for Webも入っててWebで も動く - 基本こっちのことを話します Expoって?