シンプル体重管理 iOS対応において発生した問題点について

今回は、シンプル体重管理のiOS対応において発生した問題点について、いくつか紹介したいと思います。

Onsen UIにおいて、iPhone 12シリーズでons.platform.isIPhoneX()が機能しない。

iPhone 12シリーズの画面サイズは 390 x 844 または 428 x 926 ですが、onsenui.jsのコードを確認すると、未対応なので常にfalseが返ります。

    /**
     * @method isIPhoneX
     * @signature isIPhoneX()
     * @description
     *   [en]Returns whether the device is iPhone X, XS, XS Max, or XR.[/en]
     *   [ja]iPhone X や XS、XS Max、または XR 上で実行されているかどうかを返します。[/ja]
     * @return {Boolean}
     */

  }, {
    key: 'isIPhoneX',
    value: function isIPhoneX() {
      // iOS WebViews on the same iOS version have the same user agent.
      // We cannot avoid using window.screen.
      // We also cannot use cordova-plugin-device since its behavior is different between simulators and real devices.
      // This works well both in iOS Safari and (UI|WK)WebView of iPhone X.
      return this.isIPhone() && (window.screen.width === 375 && window.screen.height === 812 || // X, XS portrait
      window.screen.width === 812 && window.screen.height === 375 || // X, XS landscape
      window.screen.width === 414 && window.screen.height === 896 || // XS Max, XR portrait
      window.screen.width === 896 && window.screen.height === 414); // XS Max, XR landscape
    }

/**

* @method isIPhoneX

* @signature isIPhoneX()

* @description

* [en]Returns whether the device is iPhone X, XS, XS Max, or XR.[/en]

* [ja]iPhone X や XS、XS Max、または XR 上で実行されているかどうかを返します。[/ja]

* @return {Boolean}

}, {

key: 'isIPhoneX',

value: function isIPhoneX() {

// iOS WebViews on the same iOS version have the same user agent.

// We cannot avoid using window.screen.

// We also cannot use cordova-plugin-device since its behavior is different between simulators and real devices.

// This works well both in iOS Safari and (UI|WK)WebView of iPhone X.

return this.isIPhone() && (window.screen.width === 375 && window.screen.height === 812 || // X, XS portrait

window.screen.width === 812 && window.screen.height === 375 || // X, XS landscape

window.screen.width === 414 && window.screen.height === 896 || // XS Max, XR portrait

window.screen.width === 896 && window.screen.height === 414); // XS Max, XR landscape

}

なので、以下のコードで判定を行います。

function isIPhoneX() {
    return ons.platform.isIPhoneX() || (window.screen.width === 390 && window.screen.height === 844)
        || (window.screen.width === 844 && window.screen.height === 390)
        || (window.screen.width === 428 && window.screen.height === 926)
        || (window.screen.width === 926 && window.screen.height === 428);
}

function isIPhoneX() {

return ons.platform.isIPhoneX() || (window.screen.width === 390 && window.screen.height === 844)

|| (window.screen.width === 844 && window.screen.height === 390)

|| (window.screen.width === 428 && window.screen.height === 926)

|| (window.screen.width === 926 && window.screen.height === 428);

}

Onsen UIにおいて、cordova-plugin-ionic-keyboardプラグインをインストールすると、iPhone 12シリーズで画面下部に隙間が発生する。

全体的に画面がずれ、画面下部に隙間が発生します。
さまざまなブログなどの記事を参考に試行錯誤した結果、キーボード制御に使用しているcordova-plugin-ionic-keyboardプラグインに問題があることが判明しました。
判明するまで１ヵ月もかかりました。
時間的余裕があれば問題解決したいところですが、面倒なのでcordova-plugin-ionic-keyboardプラグインは使用しない方向で進める予定です。

GitHub

GitHub - ionic-team/cordova-plugin-ionic-keyboard: Keyboard Plugin for Cordova

https://github.com/ionic-team/cordova-plugin-ionic-keyboard

Keyboard Plugin for Cordova. Contribute to ionic-team/cordova-plugin-ionic-keyboard development by creating an account on GitHub.

cordova-plugin-admob-freeプラグインのバナー広告が勝手に表示される。

Androidの場合、バナー広告が非表示の状態でアプリが起動しますが、iOSの場合は勝手に表示されてしまいます。
未解決の状態です。

GitHub

GitHub - ratson/cordova-plugin-admob-free: New development has been moved to ...

https://github.com/ratson/cordova-plugin-admob-free

New development has been moved to "admob-plus-cordova", https://github.com/admob-plus/admob-plus/tree/master/packages/cordova - GitHub - ratson/cordova-plugin-admob-free: New development ...

※2021/03/29コード追記

admob.banner.config({
    id: (!isDebug) ? ((isIOS) ? "ca-app-pub-xxx/xxx" : "ca-app-pub-xxx/xxx") : "ca-app-pub-xxx/xxx",
    isTesting: gbl.isDebug,
    autoShow: false,
    bannerAtTop: false,
    overlap: false,
    offsetTopBar: false
});
admob.banner.prepare().then(function () {
    console.log("prepared admob banner");
    $scope.ctrl.isBanner = true;
}).catch(function () {
    console.log("failed admob banner");
    $scope.ctrl.isBanner = false;
});

admob.banner.config({

id: (!isDebug) ? ((isIOS) ? "ca-app-pub-xxx/xxx" : "ca-app-pub-xxx/xxx") : "ca-app-pub-xxx/xxx",

isTesting: gbl.isDebug,

autoShow: false,

bannerAtTop: false,

overlap: false,

offsetTopBar: false

});

admob.banner.prepare().then(function () {

console.log("prepared admob banner");

$scope.ctrl.isBanner = true;

}).catch(function () {

console.log("failed admob banner");

$scope.ctrl.isBanner = false;

});

Android

iOS

cordova-iosがWKWebView対応後、cordova-plugin-crypt-fileプラグインが使用できない。

cordova-iosがWKWebViewに対応しましたが、cordova-plugin-crypt-fileプラグインの更新はしばらく行われておらず、未対応のためにアプリのビルドができない状態です。
ブックオフにてObjective-Cの専門書を買って改造を試みましたが、cordova-iosのAPIが外部からアクセスできない問題で先に進まない状態です。
cordova-ios ver.6.3.0でアクセス可能になるのでは？という噂があるとかないとか・・・

GitHub