😺

Expo + Electron + NativeBase で全部入りクロスプラットフォームアプリ（デスクトップ＋スマホ＋WEB）を夢見る

2022/07/14に公開

Electron

Expo

nativebase

tech

Expo（React Native）は、マルチプラットフォームアプリ（スマホ＋WEB）をテンポよく開発できる夢のあるフレームワークだと思う。

それをさらに欲張ってElectronを加えることで（デスクトップ＋スマホ＋WEB）という全部入りの夢を試してみたいと思った。
見栄えも良くしたいので、イケてるUIオーラ感漂わすNativeBase3も加えてみる。

具体的には「Electron with Expo for Web」でプロジェクトを作成して、WEB・スマホ・デスクトップの各アプリ起動までを確認する。

作業的にはコマンド数個を入力するだけですが、実行環境によってはひっかかるところもあるのかも・・・です。

expo のプロジェクト作成

プロジェクトの新規作成を行う

expo init my-app --template @native-base/expo-template

開発環境（Webpack server）の起動

cd my-app
yarn start

すると開発環境の起動を告げるQRコード等が表示される。

開発環境起動中のコンソール画面

WEBアプリを起動する

上記画面が起動したら、「w」を押す。
するとブラウザが起動し、以下のようなWEBアプリが確認できる。

WEBアプリの画面

スマホアプリ（ネイティブアプリ）を起動する

次にコンソール画面はそのままで（Ctrl+C で終了せずに）
スマホを用意し、スマホ側でexpo（Expo Go）をインストールする。

インストールしたスマホ側のexpoから、「Scan QR code」で、PCモニタのQRコードを読み取る。（瞬間で読み取ってくれるので素敵）
するとスマホ側でアプリが起動する。

ネイティブアプリの画面

QRコードの読み取りは、ノートPCだと百発百中だけど、ちょっと離れたアーム付モニターだとなかなか読み取ってくれなかった・・・。
またターミナルアプリによっては、QRコードのレイアウトが崩れて表示されるケースもあるので注意

ここまでは普通のExpoでのクロスプラットフォーム開発になりますが、
ここからがElectron連携になります。

デスクトップアプリを起動する

コンソールを ctrl+C で止めて、electron-adapterを設定する

yarn add -D @expo/electron-adapter
yarn expo-electron

デスクトップアプリを起動する

yarn expo-electron start

デスクトップアプリの画面

プロジェクト作成の定型的なコマンドを流しただけですが、動く雛形を実際に目にするとテンション上がります。
夢が広がりますね！

現状の見通し

使用した"@expo/electron-adapter"のバージョンは、"0.0.55"
・・・という状態で、安定化や実用化までまだまだこれから・・・という印象を持ちました。
動く範囲を見極めて、その範囲内でお試し的に作っていくのはありだと思います。

また実行環境によってはビルドが不安定になるケースもあり、要因の切り分けまでは進めなかったですが、エラーで実行できずに、環境を何度も作り直す試行錯誤はありました。

プロジェクト新規作成時のライブラリのデフォルトバージョンが上がって動かなることもあると思います。参考までに私が動かしたときのpackage.jsonは以下でした。

package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "keywords": [
    "react",
    "expo",
    "template",
    "nativebase"
  ],
  "license": "MIT",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "electron": "^6.0.12",
    "expo": "^44.0.0",
    "expo-status-bar": "~1.2.0",
    "native-base": "3.4.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-safe-area-context": "3.3.2",
    "react-native-svg": "12.1.1",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@expo/electron-adapter": "^0.0.55",
    "@expo/webpack-config": "^0.16.26"
  },
  "bugs": {
    "url": "https://github.com/GeekyAnts/nativebase-templates/issues"
  },
  "homepage": "https://github.com/GeekyAnts/nativebase-templates#readme",
  "author": "Aditya Jamuar",
  "private": true
}

では、よい夢を！

expo のプロジェクト作成

プロジェクトの新規作成を行う

開発環境（Webpack server）の起動

WEBアプリを起動する

スマホアプリ（ネイティブアプリ）を起動する

デスクトップアプリを起動する

現状の見通し

Discussion