【Monaca】InAppBrowserで表示したサイト上にFAB風の[閉じる]ボタンを設置する

以前、私がStackOverFlowで投稿した回答を修正して、FAB(Floating Action Button)風の[閉じる]ボタンを設置してみた。
動作の詳しい内容は、webページからローカルに戻る方法を参照。

※最小限のテンプレート + InAppBrowserプラグインが必要。

初期画面。

[show browser]ボタンを押下すると、Yahoo!JAPANが表示され、右下に[close]ボタンが設置される。

スクロールしても[close]ボタンの位置は変わらない。

[close]ボタンを押下すると、アプリに戻り、メッセージが表示される。

[html]












[/html]

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

新品価格
¥1,899から

【Monaca】Basicプランでは解決できず!InAppBrowser Google OAuth2認証の問題

【Monaca】アプリリリース後の問題について」で記載したInAppBrowserを使用したGoogle OAuth2認証の問題だが、海外のサイトなどいろいろと調査した結果、cordova-plugin-googleplusを導入すれば解決できることがわかった。
しかし、無料のMonaca Basicプランではプラグインが使用できず、結果的に解決できない事態となった。

Cordovaの開発環境を構築し、MonacaからCordovaへ環境を移行するしか方法がないようだ。

【Monaca】ベーシックプランでInAppBrowserのバージョンを変更する方法

前回、「【Monaca】Cordova 6.2対応で問題発生!」において、InAppBrowserプラグインがv1.4.0のため、Android 4.0.4上で動作しない件を掲載した。

ベーシックプランでは、プラグインのバージョンを変更することができない。
2016100202

しかし、ある方法でベーシックプランでもプラグインのバージョンを変更することができる。
今回は、InAppBrowserプラグインをv1.4.0からv1.5.0に変更する方法を説明する。
※この記事を掲載後にMonaca側が何らかの対策を行った場合、変更できない可能性があるのでご注意いただきたい。

①「ファイル」→「Cordovaプラグインの管理」と選択し、Cordovaバージョン:CLIバージョンを「6.2.0」を選択する。
②6.2.0に変更後、「ファイル」→「プロジェクトをエクスポート」と選択し、エクスポートを実行する。
③エクスポートしたzipファイルを解凍し、「.monaca」フォルダにある「project_info.json」をメモ帳などで開く。
[javascript]
{
“plugins”: [
“mobi.monaca.plugins.Monaca@3.0.0”,
“mobi.monaca.plugins.datepicker@1.0.1”
],
“framework_version”: “3.5”,
“xcode_version”: “7”,
“cordova_version”: “6.2”,
“plugin_settings”: {
“cordova-plugin-crosswalk-webview”: {
“variables”: [
“XWALK_VERSION=18.48.477.13”
]
}
},
“external_plugins”: [
“cordova-plugin-splashscreen@3.2.2”,
“cordova-plugin-inappbrowser@1.4.0”,
“cordova-plugin-file@4.2.0”,
“cordova-plugin-whitelist@1.2.2”,
“cordova-plugin-globalization@1.0.3”,
“cordova-custom-config@2.0.3”
],
“title-ja”: “”,
“title-en”: “”,
“description-ja”: “”,
“description-en”: “”,
“category”: “User Template”,
“platform”: [],
“name”: “generated-1475382335-57df4100fd1734cf2ab0b508”
}
[/javascript]
④18行目の“cordova-plugin-inappbrowser@1.4.0”,“cordova-plugin-inappbrowser@1.5.0”,に変更して保存する。
⑤解凍して作成されたフォルダやファイルを圧縮する。
⑥Monacaの「Import Project」を選択し、「プロジェクトのパッケージをアップロード」で圧縮したファイルを選択し、インポートを行う。
⑦InAppBrowserプラグインがv1.5.0であることを確認する。
2016100201

Android 4.0.4の端末で動作確認済み。
おそらくこの方法で問題ないと思われる。

今、楽天モバイルでASUS ZenFone 2 Laser 16GBモデルが税別7,800円で購入できます。

【Monaca】Cordova 6.2対応で問題発生!

MonacaがCordova 6.2に正式に対応し、シンプル体重管理の最新版をCordova 6.2でリリースする予定だったが、思わぬところで問題が発生した。

アプリをリリースする場合、Android 4.0.4・4.4.4・5.1.1上で必ず動作チェックを行っているが、Android 4.0.4だけGoogle Driveのバックアップ・リカバリー機能が動作しない。
処理を一つ一つ検証したところ、オーソライズを行うためにwindow.open(authUrl, “_blank”, features)を実行している箇所が動作しない。

Cordova 6.2対応でアップデートしたInAppBrowserプラグイン v1.4.0の問題と思い、「InAppBrowser Android 4.0.4」で検索したところ、やはり思ったとおりだった。

InAppBrowser doesn’t open on Android 4.0.4 (regression)

最近リリースされたv1.5.0でfixされたようだが、問題はMonaca側がこの件に対応するかどうか。
この件についてMonacaのお問い合わせから送信したが、不具合等の報告、技術的な質問はStackOverflowに誘導しているため、相手にされない可能性もある。

現状では月額5,000円のゴールドプランに入り、技術サポートチケットを使って対応してもらうか、独自でv1.5.0のブラグインを組み込むしか方法はなさそうだ。
※9/20追記
技術的な問題のため、Monaca側の回答を引用させていただく。

貴重な情報、ありがとうございます。
弊社でも検証させていただき、対応を検討させていただきます。
InAppBrowserプラグイン1.5.0をMonacaでご利用になる場合は、
InAppBrowserプラグインの設定にある「プライグインのバージョン」で「1.5.0」を選択し、
ご利用ください。

現状では月額5,000円のゴールドプランに入り、プラグインのバージョンを変更するしか方法はないようだ。
万が一、ほかのプラグインも不具合が発生した場合に対応できないとなれば、安定して動作しているCordova 5.2でリリースするしかない。

今、楽天モバイルでASUS ZenFone 2 Laser 16GBモデルが税別7,800円で購入できます。