サイトアイコン 上尾市のWEBプログラマーによるブログ

「ReactでTodoアプリを作ってみよう」の感想・備忘録3

「ReactでTodoアプリを作ってみよう」の感想・忘備録2の続き

Cordovaのインストール

Cordovaを使うと、ReactアプリをiOS, Androidで実行することができる。

  1. npm install cordova
  2. cordova create myapp
  3. cd myapp; cordova platform add browser
    ※スマホアプリの場合はbrowserではなくiosやandroidを指定する
  4. cordova run browserで実行

Cordovaプラグイン

カメラや位置情報を利用するには、Cordovaプラグインをインストールする必要がある。
https://cordova.apache.org/docs/en/latest/guide/support/index.html

Deviceプラグインのサンプル

  1. cordova plugin add cordova-plugin-device
  2. myapp/www/js/index.jsのonDeviceReadyメソッドに追記
    alert(`model:${device.model}, platform:${device.platform}`);

Cordovaを使ってAndroidでHTML・JavaScriptを表示・実行する

事前にAndroid SDKのインストールとPathの設定が必要。

  1. cordova create cordova-android; cd cordova-android;
  2. cordova platform add android
  3. wwwフォルダにhtmlとjsを格納
    イベントハンドラの登録はonDeviceReadyイベント内で行う必要がある(デフォルトのindex.jsに定義あり)
  4. config.xmlを修正
    <widget id="io.cordova.todoapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>TodoApp</name>
  5. cordova run androidで実行

Cordovaを使ってAndroidでReactアプリを実行する

Reactアプリの作成

  1. create-react-app todo-on-cordova
  2. cd todo-on-cordova; npm install react-router-dom
  3. ReactアプリをCordovaで動かすには以下が2つが必要。
    ※ pakage.jsonに”homepage”: “./”,を追加
    ※ルーティングはHashRouterを使う
  4. npm run build

Cordovaでandroidアプリの作成

  1. cordova create cordova-todo
  2. cd cordova-todo; cordova platform add android
  3. Reactアプリのbuildディレクトリ配下をwwwディレクトリにコピー
  4. androidプロジェクトを作成し、ADVマネージャからエミュレータを起動
  5. cordova run android
モバイルバージョンを終了