前回までPhonegapを使ってましたがGUIを使わなくなったのと、phonegapコマンドを打っても結局cordovaコマンドが呼び出されるだけなので乗り換え。
またMV_フレームワークとしてvue.jsも使ってみたのですが、Angularjsと大きく変わらず作法さえ覚えればすぐに使えるような利便性の高いものでした。
逆にReactはとにかくとっつきにくいのに同じくらい人気があるのが何故なのか気になって、それを体験するまで使ってみようと決めました。
まず今回使うツールをインストールしておきます。
|
1 2 3 4 5 6 |
//CORDOVAインストール npm install -g cordova //Reactプロジェクト作成 npm install -g create-react-app //パッケージマネージャー npm install -g yarn |
実装に当たって２つのプロジェクトが混在します。
方法としてはCordovaプロジェクトにReactプロジェクトを入れるか、その逆か。
手順が簡単な前者でやることにします。
まずはCordovaプロジェクトの設定。
（windowsの場合mklinkのために管理者権限でコマンドプロンプトを実行）
|
1 2 3 |
cordova create forder_name jp.co.narumium.xxxxx app_name cd folder_name cordova platform add android |
次にCordovaプロジェクト内でreactプロジェクトを作成します。
|
1 2 3 4 5 6 7 |
create-react-app src cd src //package.jsonに "homepage": "./", を追加する yarn build //以下でブラウザデバッグできる yarn start |
ここでsrc/package.jsonにbaseパスを追記する必要があります。
ビルドしたらreactプロジェクト成果物をcordovaで参照できるようにする。
|
1 2 3 4 5 6 |
//linux ln -s src/build/ www //windows //lnコマンドを使える状態でもシンボリックリンクにならない mklink /D www src\build |
最後にCordovaプロジェクトのビルド。
|
1 |
cordova build [android] [--release] |
出来たものをNOXで実行してみても何故か真っ白の画面になりました。
原因を散々調べてもわからず、試しに実機にインストールしたら普通に動きました。
理由はわかりませんが動作テストをするときは、srcフォルダ内でyarn startしてブラウザで確認するか、実機につないでcordova run androdでテスト可能です。
白くなるのが仮想デバイスの問題ならいいんですが、機種依存だと困るのでもう少し調べてみます。
ちなみに逆のパターン(Reactの中にCordova)の手順ではReactプロジェクトの中にconfig.xmlを用意して、プラットフォームの追加。後は大体同じです。
今後はReactプロジェクト内でindex.htmlに<script type="text/javascript" src="cordova.js"></script>を追加してApp.jsを編集するなどして開発をします。