はじめに
Cordova で Android の Adaptive Icon を設定する方法。
TL;DR
- Android Studio で Adaptive Icon の画像を作成
colors.xmlを作成config.xmlの<platform name="android">内にアイコン設定を追記
1 | <icon |
はじめに
Android aab ファイルから versionName, versionCode を 抽出/確認 する方法。
TL;DR
bundletoolを使うbundletool dump manifest --bundle /path/to/aab/example_app.aab
はじめに
Cordova で iOS, Android で異なる ID を使う方法。(特殊な事情がない限りは iOS, Android で同じ ID を使うと思う)
TL;DR
config.xmlのwidgetに以下を設定- iOS:
ios-CFBundleIdentifier - Android:
android-packageName
- iOS:
はじめに
Cordova で QR コードスキャナのプラグイン(bitpay/cordova-plugin-qrscanner)を追加すると、iOS, Android のビルドがエラーになる問題の対応方法。
TL;DR
- iOS: bitpay/cordova-plugin-qrscanner ではなく danielzen/cordova-plugin-qrscanner をインストール
- Android:
platforms/android/app/src/main/java/com/bitpay/cordova/qrscanner/QRScanner.javaを修正
はじめに
guyromb/cordova-open-native-settings を使って、Cordova アプリから OS の設定アプリを開く方法。
README には「iOS 8/9/10」と記載されているが、iOS 14.4 でも問題なく動作した。
TL;DR
cordova plugin add cordova-open-native-settingsでプラグイン追加cordova.plugins.settings.openで設定アプリを開くことができる- 設定アプリ内のどの機能にアクセスしたいかは以下を参照
はじめに
Cordova で Repro とカスタム URL スキームを使ってディープリンクを扱う方法。
TL;DR
- EddyVerbruggen/Custom-URL-scheme をインストール
- Content Security Policy の設定変更
config.xml変更(allow-intent,config-file追加)window.handleOpenURLを定義
- ディープリンクを設定して Repro プッシュ通知を送信
はじめに
Cordova Android アプリで HTTP(≠ HTTPS) 通信をした際に出る net::ERR_CLEARTEXT_NOT_PERMITTED エラーの解決方法
TL;DR
- Android P から
cleartextTrafficPermitted="false"がデフォルトになった- 非暗号化(HTTP)通信がエラーになる
AndroidManifest.xmlにandroid:usesCleartextTraffic="true"を追加すれば HTTP 通信を許可できる- Cordova Android:
platforms/android/app/src/main/AndroidManifest.xml
- Cordova Android:
config.xmlにedit-configを追加すれば OK- Cordova 9.0 環境だと問題が起きるが、8.0 や 10.0 だと問題ない(っぽい)
はじめに
Cordova Android で iframe 内のリンクをシステムデフォルトブラウザで開く方法。
前置きなどは 親 Window で iframe からのデータ受信、イベント検出する方法 の「前置き」と同じ。
以下はとあるプロジェクトの要件など。
- Cordova で iOS/Android まとめて開発
- コンテンツ内部は先方が作成
- コンテンツ内に先方管理外のサイトへのリンクがある
- ガワはこちらで作成して、コンテンツを
iframeで読み込むiframe内のリンクをシステムデフォルトブラウザで開きたいiOS は問題なかった(意図通りに動作した)が、Android だけ上手く動かなかった。具体的には、リンクをタップすると
iframe内で開こうとするが、X-Frame-Options の設定によりnet::ERR_BLOCKED_BY_RESPONSEとなる、というもの。
TL;DR
iframe側:postMessageでリンク先 URL を送信- 送信後
preventDefaultで元イベント(リンク先をiframe内で開こうとするアクション)を抑止
- 送信後
- アプリ(Cordova App)側: apache/cordova-plugin-inappbrowser でシステムデフォルトのブラウザを呼び出す
- 他ページで余計な動作をしないように注意
- 今回は Vue なので
created,beforeDestroyフックでイベントリスナを 追加/削除
- 今回は Vue なので
はじめに
NativeScript(NativeScript-Vue) で davecoffin/nativescript-modal-datetimepicker で DatePicker/TimePicker を使用する方法
TL;DR
- インストール
- NS6-:
tns plugin add nativescript-modal-datetimepicker@x.y.z - NS7+:
ns plugin add nativescript-modal-datetimepicker
- NS6-:
- README.md の情報だけだと分かりづらいので、デモ用コードも合わせて見た方が良い
import,newしてpickDateやpickTime
はじめに
Cordova で whiteoctober/cordova-plugin-app-version を使って、アプリ名やアプリのバージョン情報などを取得する方法。
TL;DR
cordova plugin add cordova-plugin-app-versionでプラグイン追加- 以下で情報取得
- アプリ名:
cordova.getAppVersion.getAppName() - パッケージ名:
cordova.getAppVersion.getPackageName() - バージョンコード:
cordova.getAppVersion.getVersionCode() - バージョン番号:
cordova.getAppVersion.getVersionNumber()
- アプリ名:
- async/await でも記述可能
- OS, OS Version の取得は apache/cordova-plugin-device
