ionicでiOSアプリの内容をそのままAndroidアプリでも動くように試み中

はじめに

先日、ionic使ってiOSアプリをリリースしました。
そのままAndroidアプリでも動くように挑戦中ですが、そこで詰まったところを備忘録がてら載せます。

なお、Android開発は初めてですが、以前 Android Studio の環境構築は済ませてしまっているため、Javaとかはすでに入っているところからのスタートです。

Android setup

$ ionic cordova platform add android --save

はい、この1コマンドだけでもうAndroidのプロジェクトが完成しました。恐ろしい・・・

とりあえずブラウザから開発ツールでスタイルを確認

$ npm run ionic:serve

これで自動的にブラウザが立ち上がるので、/ionic-labとか Path に追加すると同時にiOSアプリとAndroidアプリの動きを確認できます。（ネイティブ機能は除く）

ボタンに英語があると全部大文字に！

そういう仕様らしいですね。googleがGOOGLEとか、twitterがTWITTERとか、大文字になってました。とりあえず、スタイルに以下を付与して解消。

text-transform: none;

参考
https://stackoverflow.com/questions/41364677/ionic-v2-button-text-in-caps
https://qiita.com/tomoima525/items/3158320777a08e6c7ade

iOSだと左にあったボタンがAndroidだと右に全部移動してしまう

ヘッダタイトルの左側に「←」で戻るボタンを作ってたけど、Androidは全て右側に移動しててなんだか気持ち悪い感じに・・・・「✗」ボタンに変更しちゃいました。
md-arrow-round-back → md-close

<ion-header no-border>
  <ion-navbar hideBackButton="true">
    <ion-buttons start>
      <button ion-button (click)="onBackPage()">
        <ion-icon name="md-close"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>投稿</ion-title>
  </ion-navbar>
</ion-header>

Running My App！！・・・ Cordova android emulator “cannot read property 'replace' of undefined”

$ ionic cordova run android --device

エミュレータ立ち上げて確認しようとしたらエラーが出ました。

Cordova android emulator “cannot read property 'replace' of undefined”

/platforms/android/cordova/lib/emulator.js line 202: を以下のように書き換えたら動きました。

var num = target.split('(API level ')1.replace(')', '');
↓ 書き換え
var num = target.match(/\d+/)[0];

エミュレータでネットワークにつながらない

一度 cordova 側でビルドしたら解決。

$ cordova build android

ソーシャルログイン系、後ネイティブ機能の呼び出しで少しいじる必要がありそうですが、それ以外は全然問題なく動いていそう・・・・
また随時更新します。