IONIC4 で Android用がビルドできない。

またまた、ハイブリッドアプリを作ることになり IONIC の登場です。

IONIC に限ったことではありませんがOSSのソフトってガンガンバージョンアップするのはいいのですが互換性が…もっとも仕様変更よりもバグで動かなくなることが多々あるとは思うのですが…

前回の IONIC3 を使ったハイブリットアプリ作成時も Android Studio のバージョンがあがってあれこれ小細工しないとビルドできず苦労しました。なんとかリリースにこぎつけたのですが、その後、変更以来が来てちょこっと直してビルドしようとしたらエラー＞＜；自分が普段使っているマシンはどんどんバージョンアップしてしまいます…

いやはや…ということで、それからは開発環境をまるごと仮想マシン化して環境をそのまま保存することにしました。

今回ははじめから仮想マシン上に Xubuntu 18.04 で開発環境を作りビルドはこの仮想マシンにて行い、コーディングとデバッグは sshfs にて接続して普段遣いのマシンで行うことにしました。

さて本題です。諸々を新規インストールして空のアプリをビルドすると「Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio」

あらあら、例によって Android Studio の Gradle が見つからないと…
find で探してみます。

[kiya@coins-dev coins]$ find / -name "gradle" -type f 2>/dev/null
/snap/android-studio/73/android-studio/gradle/gradle-4.10.1/bin/gradle
/home/kiya/.gradle/wrapper/dists/gradle-4.10.1-all/455itskqi2qtf0v2sja68alqd/gradle-4.10.1/bin/gradle
/home/kiya/.gradle/wrapper/dists/gradle-4.10.3-all/81msde2dx9p4vji0mjgtvxkcb/gradle-4.10.3/bin/gradle

なんか変なところにあるけど ~/.profile にパスを追加
# ちなみに /snap の方は実行権

# Android SDK のパス
export ANDROID_SDK_ROOT=${HOME}/Android/sdk
# avdmanager, sdkmanager
export PATH=${PATH}:$ANDROID_SDK_ROOT/tools/bin
# adb, logcat
export PATH=${PATH}:$ANDROID_SDK_ROOT/platform-tools
# emulator
export PATH=${PATH}:$ANDROID_SDK_ROOT/emulator
# gradle
export GRADLE_ROOT=${HOME}/.gradle/wrapper/dists/gradle-4.10.3-all/81msde2dx9p4vji0mjgtvxkcb/gradle-4.10.3
export PATH=${PATH}:$GRADLE_ROOT/bin

無事ビルドできました。

ionic3 で HTTP 通信

基本的なことは下記のページに書かれています。

Ionic Native - HTTP

$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install --save @ionic-native/http

これで準備は完了。

let url = 'http://hoge.hoge.com/test.php';

let body = {
  'sid': this.data.server.siteID,
  'tac': this.data.terminal.account,
  'tpw': this.data.terminal.password,
};

let headers = {};

this.http.post(url, body, headers).then((res: HTTPResponse) => {
  // 成功
  console.log(res);
  resolve(res);
}).catch((res: any) => {
  // エラーが発生した
  console.log(res);
  resolve(res);
});

利用も簡単！

なんて楽ちんなんだろうと思ったら大間違いでした…

Android ではなんの問題もなく通信できたのですが、iOS では then() にも catch() にも来ません？？？

XCode のコンソール出力を見ると、cordovaHTTP is not defined と出力されています？？？
なんでだろうと散々調べたのですがさっぱりわからず。念の為 cordova-plugin-advanced-http をremove 後に、再度 add。
cordovaHTTP is not defined は出なくなり、http.post() 呼び出し後リクエストの送信は行われるのですが、相変わらず then() にも catch() にも来ません＞＜；

先に種明かしすると、この原因は content-type でした。

クライアントからのリクエストもサーバーからのレザルトも単なるテキストなので、plain/text を返していたのですが、application/json を返さないとサーバーからのレザルトを受け取らないようです。

いやはやマイナーOSは情報少ない上に癖が強くてホント苦労させられる＞＜；

ionic3 で iOS 版のアプリタイトルを日本語にする方法

config.xml にて設定してやると *-Info.plist を書き換えられると書かれているページが複数あり、よく見かけるタイプは config-file というタグでした。それを加工して下記みたいにしてみたわけですが、全く効果なし…

<config-file parent="CFBundleDisplayName" platform="ios" target="*-Info.plist">
    <string>アプリ名</string>
</config-file>

何だろうなぁと思っていましたが、動かないものは仕方ないので、トランスパイル後 XCode でコンパイルする前に *-Info.plist を手動で書き換えていました。（操作性最悪の iMac でこれやるのってほんとめんどくさい）

例によって Android では問題なく動くものが iOS で動かない現象に遭遇しまして、あれこれ調べていると下記の edit-config というタグの説明を発見！

お！っと思い下記を試すと大成功でした＼(^_^)／

<edit-config file="*-Info.plist" mode="merge" target="CFBundleDisplayName">
    <string>アプリ名</string>
</edit-config>

ちなみに Android では、 ./platforms/android/app/src/main/res/ に values-ja というフォルダーを作り、 ./platforms/android/app/src/main/res/values/string.xml をコピって、書き換えてやれば多言語対応できます。

ionic ビルド時に大量のエラー＞＜；

開発も順調に進みそろそろ実機で動かしてみるかと試してみると

$ ionic cordova run android
Running app-scripts build: --platform android --target cordova
--中略--
:compileDebugJavaWithJavac
/home/kiya/JobFiles/mieta1/platforms/android/src/com/tangide/statusbar/StatusBar/StatusBar.java:76: error: cannot find symbol
--以下大量のエラー--

げげ！エラー！何が起きたんだろうとあれこれ調べてみると

$ ionic cordova plugin list
cordova plugin ls
com.tangide.statusbar 1.0.0 "StatusBar"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-device-motion 1.2.5 "Device Motion"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

？？？ com.tangide.statusbar 1.0.0 "StatusBar" ってなんだ？

どうやら、cordova-plugin-statusbar をインストールする際に間違えて入れてしまったようだ

$ ionic cordova plugin rm com.tangide.statusbar
> cordova plugin remove com.tangide.statusbar --save
--中略--
Removing com.tangide.statusbar from package.json

無事ビルドできました。