はじめに

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 内のリンクをシステムデフォルトブラウザで開く方法。

前置きなどは 親 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(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 して 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

はじめに

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

• ライブラリを使わずに自前で実装
  • tonickkozlov/vue-tweet-embed 使ってたがどうやってもダメだった
• cordova-plugin-whitelist を使用
  • config.xml に <allow-navigation /> を追加

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 -->

はじめに

NativeScript でアプリのバージョン情報などを取得する方法。

TL;DR

• EddyVerbruggen/nativescript-appversion を使う
  • getAppIdSync(): com.hoge.fuga など
  • getVersionNameSync(): 1.0 など
  • getVersionCodeSync(): 1.0.1(iOS), 10001(Android) など

はじめに

NativeScript でデバイスの輝度(明るさ)を制御する方法。

TL;DR

• NativeScript/nativescript-brightness を使う
• brightness.set({ intensity: <value> }) で輝度設定(0(暗) <-> 100(明))
• brightness.get() で現在の輝度取得
• 以下と組み合わせることで特定画面(or パーツ)の 表示/非表示/遷移 などの際に輝度調整が可能
  • Application Lifecycle の suspendEvent など
  • Page や xxxxLayout などの load や unload イベント
  • Android: Android Activity Events
  • iOS: iOS UIApplicationDelegate (UIApplicationDelegate | Apple Developer Documentation)

はじめに

モバイルアプリ(スマホアプリ)の強制アップデート(アップデートのお知らせ)に関して調べたり、検討したりしたので簡易的なメモを残しておく

強制アップデート(アップデートのお知らせ)とは、↓のようなアプリ起動時に「最新版があるよ」と通知するようなやつ。

iOSアプリのアップデートをお知らせする | スーパーソフトウエア東京 より引用

TL;DR

• 案1: 自サーバ内でバージョン情報を管理
• 案2: Firebase Remote Config
• 案3: アプリ内で App Store, Google Play にアクセス(スクレイピング)
• 案4: 案3’ と 案1(もしくは案2) との組合せ
• 案5: ライブラリを利用して実装
• NativeScript のみ: NativeScript AppSync

はじめに

NativeScript で入力範囲外エリアのタップでキーボードを非表示にする方法

TL;DR

• Android: dismissSoftInput() を使う
• iOS: tns-core-modules/application/ios を使って ios.nativeApp.sendActionToFromForEvent('resignFirstResponder', null, null, null)
• ScrollView あたりに tap イベントのハンドラとして設定
• iOS は以下の問題があるため使用に注意
  • ロングタップによる入力補助が上手く効かなくなる
  • iOS 12以下だと入力エリアへのフォーカスが効かなくなる