Cordova QR コードスキャナのプラグイン追加でビルドできない問題の対応方法 2021/03/18 23:05 2021/03/18 23:05 カテゴリー Programming タグ Android Cordova Programming iOS はじめにCordova で QR コードスキャナのプラグイン(bitpay/cordova-plugin-qrscanner)を追加すると、iOS, Android のビルドがエラーになる問題の対応方法。 TL;DR iOS: bitpay/cordova-plugin-qrscanner ではなく danielzen/cordova-plugin-qrscanner をインストール Issue #301 - bitpay/cordova-plugin-qrscanner Android: platforms/android/app/src/main/java/com/bitpay/cordova/qrscanner/QRScanner.java を修正 Issue #335 - bitpay/cordova-plugin-qrscanner 続きを読む
Cordova アプリから OS の設定アプリを開く 2021/03/04 14:00 2021/03/04 14:00 カテゴリー Programming タグ Android Cordova JavaScript Node.js Programming iOS はじめに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 で設定アプリを開くことができる 設定アプリ内のどの機能にアクセスしたいかは以下を参照 Settings Options (iOS) Settings Options (Android) 続きを読む
Cordova で Repro とカスタム URL スキームを使ってディープリンクを扱う 2021/02/26 09:00 2021/02/26 09:00 カテゴリー Programming タグ Android Cordova HTML JavaScript Node.js Programming iOS はじめにCordova で Repro とカスタム URL スキームを使ってディープリンクを扱う方法。 TL;DR EddyVerbruggen/Custom-URL-scheme をインストール Content Security Policy の設定変更 config.xml 変更(allow-intent, config-file 追加) window.handleOpenURL を定義 ディープリンクを設定して Repro プッシュ通知を送信 続きを読む
Cordova Android で net::ERR_CLEARTEXT_NOT_PERMITTED の解決方法 2021/01/16 12:25 2021/01/16 12:25 カテゴリー Programming タグ Android Cordova Programming はじめに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 config.xml に edit-config を追加すれば OK Cordova 9.0 環境だと問題が起きるが、8.0 や 10.0 だと問題ない(っぽい) 続きを読む
Cordova Android で iframe 内のリンクをシステムデフォルトブラウザで開く方法 2021/01/16 12:05 2021/01/16 12:05 カテゴリー Programming タグ Android Cordova HTML JavaScript Node.js Programming Vue.js はじめに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 フックでイベントリスナを 追加/削除 続きを読む
NativeScript で davecoffin/nativescript-modal-datetimepicker を使って DatePicker/TimePicker 2020/10/02 19:40 2020/10/02 19:40 カテゴリー Programming タグ Android JavaScript NativeScript NativeScript-Vue Node.js Programming Vue.js iOS はじめにNativeScript(NativeScript-Vue) で davecoffin/nativescript-modal-datetimepicker で DatePicker/TimePicker を使用する方法 NativeScript 関連記事まとめ NativeScript で Locale を意識した DatePicker/TimePicker TL;DR インストール NS6-: tns plugin add nativescript-modal-datetimepicker@x.y.z NS7+: ns plugin add nativescript-modal-datetimepicker README.md の情報だけだと分かりづらいので、デモ用コードも合わせて見た方が良い import, new して pickDate や pickTime 続きを読む
Cordova でアプリ名やアプリのバージョン情報などを取得 2020/09/24 13:45 2020/09/24 13:45 カテゴリー Programming タグ Android Cordova JavaScript Node.js Programming iOS はじめに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 続きを読む
Cordova Android ビルド時に「'android.useAndroidX' property is not enabled」となる場合の対処方法 2020/08/31 14:00 2020/09/01 12:00 カテゴリー Programming タグ Android Cordova Programming はじめにCordova Android アプリのビルド時に This project uses AndroidX dependencies, but the 'android.useAndroidX' property is not enabled. Set this property to true in the gradle.properties file and retry. のエラーとなる場合の対処方法。 TL;DR platforms/android/gradle.properties を修正する before_compile フックを使うと良い JS ファイルを作成して config.xml に追加 Vue + Cordova で npm run cordova-serve-android を使う場合は after_prepare フックも設定 123456789<?xml version='1.0' encoding='utf-8'?><widget id="example.app" version="1.0.4" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> ... <platform name="android"> ... <hook type="after_prepare" src="scripts/android_before_compile.js" /> <!-- ***追加*** --> <hook type="before_compile" src="scripts/android_before_compile.js" /> <!-- ***追加*** --> </platform></widget> 続きを読む
Cordova アプリに Twitter Timeline の埋め込み 2020/08/28 17:20 2020/08/28 17:20 カテゴリー Programming タグ Android Cordova HTML JavaScript Node.js Programming Twitter Vue.js iOS はじめにCordova iOS アプリ, Android アプリで Twitter Timeline の埋め込みを実現する方法。 TL;DR ライブラリを使わずに自前で実装 tonickkozlov/vue-tweet-embed 使ってたがどうやってもダメだった cordova-plugin-whitelist を使用 config.xml に <allow-navigation /> を追加 1234<allow-navigation href="https://*twitter.com/*" /><allow-navigation href="https://cdn.syndication.twimg.com/*" /><allow-navigation href="about:*" /><!-- <allow-navigation href="*" /> 1つでも OK --> 続きを読む
NativeScript でアプリのバージョン情報などを取得 2020/07/21 15:15 2020/07/24 19:50 カテゴリー Programming タグ Android JavaScript NativeScript Node.js Programming iOS はじめにNativeScript でアプリのバージョン情報などを取得する方法。 NativeScript 関連記事まとめ TL;DR EddyVerbruggen/nativescript-appversion を使う getAppIdSync(): com.hoge.fuga など getVersionNameSync(): 1.0 など getVersionCodeSync(): 1.0.1(iOS), 10001(Android) など 続きを読む