はじめに

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 でシステムデフォルトのブラウザを呼び出す
  • 他ページで余計な動作をしないように注意
続きを読む

はじめに

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
  • README.md の情報だけだと分かりづらいので、デモ用コードも合わせて見た方が良い
  • import, new して pickDatepickTime
続きを読む

はじめに

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>
続きを読む

はじめに

Cordova iOS アプリ, Android アプリで Twitter Timeline の埋め込みを実現する方法。

TL;DR

1
2
3
4
<allow-navigation href="https://*twitter.com/*" />
<allow-navigation href="https://cdn.syndication.twimg.com/*" />
<allow-navigation href="about:*" />
<!-- <allow-navigation href="*" /> 1つでも OK -->
続きを読む

r17n


Softwear Engineer


Fukuoka