Cordova で Android の Adaptive Icon を設定



カテゴリー Programming

はじめに

Cordova で Android の Adaptive Icon を設定する方法。

TL;DR

  • Android Studio で Adaptive Icon の画像を作成
  • colors.xml を作成
  • config.xml<platform name="android"> 内にアイコン設定を追記
1
2
3
4
5
<icon
density="..."
background="@color/ic_launcher_background"
foreground="res/icon/android/mipmap-.../ic_launcher_foreground.png"
/>
続きを読む

はじめに

Cordova で QR コードスキャナのプラグイン(bitpay/cordova-plugin-qrscanner)を追加すると、iOS, Android のビルドがエラーになる問題の対応方法。

TL;DR

続きを読む

はじめに

guyromb/cordova-open-native-settings を使って、Cordova アプリから OS の設定アプリを開く方法。

README には「iOS 8/9/10」と記載されているが、iOS 14.4 でも問題なく動作した。

TL;DR

続きを読む

はじめに

Cordova で Repro とカスタム URL スキームを使ってディープリンクを扱う方法。

TL;DR

続きを読む

はじめに

Cordova Android アプリで HTTP(≠ HTTPS) 通信をした際に出る net::ERR_CLEARTEXT_NOT_PERMITTED エラーの解決方法

TL;DR

  • Android P から cleartextTrafficPermitted="false" がデフォルトになった
    • 非暗号化(HTTP)通信がエラーになる
  • AndroidManifest.xmlandroid:usesCleartextTraffic="true" を追加すれば HTTP 通信を許可できる
    • Cordova Android: platforms/android/app/src/main/AndroidManifest.xml
  • config.xmledit-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 でシステムデフォルトのブラウザを呼び出す
  • 他ページで余計な動作をしないように注意
続きを読む

はじめに

Cordova iOS アプリで長押し(ロングタップ, ロングプレス)によるコンテキストメニューを無効化する方法。

TL;DR

  • テキスト選択、3Dタッチを無効化する場合は config.xml を設定
    • SuppressesLongPressGesture, Suppresses3DTouchGesturetrue
  • 画像などの長押しを無効化する場合は CSS で設定
  • 意図通りに動くか、他箇所で不具合が出ないかはしっかり検証が必要
続きを読む

はじめに

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 アプリのビルド時に 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 フックも設定
1
2
3
4
5
6
7
8
9
<?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>
続きを読む

r17n


Softwear Engineer


Fukuoka