はじめに

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

はじめに

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

TL;DR

続きを読む

はじめに

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

TL;DR

続きを読む

はじめに

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


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


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以下だと入力エリアへのフォーカスが効かなくなる
続きを読む

はじめに

NativeScript(NativeScript-Vue) の ListView の表示を強制的に更新する方法。

シチュエーションとしては、「お知らせ一覧」のようなものがあって、詳細を確認したら未読アイコンが消える、というような状況。

「お知らせ詳細」から戻るボタンで ListView に戻ってきても、未読アイコンが消えずにかなりハマった。

なお、Android だと上記の問題は起きなかったため、主に iOS 向けの内容。

TL;DR

  • Pageloaded イベントなどにハンドラを設定
  • ハンドラ内で ListView.refresh() を実行する
  • NativeScript-Vue の場合は $refs を使うと楽
続きを読む

はじめに

NativeScript(NativeScript-Vue) でプラットフォームごとにファイルやプロパティを切り替える方法。

チートシート

種別 iOS Android
View ファイル分割 xx.ios.vue xx.android.vue
View 内で分岐 <ios></ios> <android></android>
プロパティで分岐 ios:prop android:prop
スタイルシートファイル分岐 xx.ios.(s)css xx.android.(s)css
JS ファイル分岐 xx.ios.js xx.android.js
JS 内で分岐 isIOS isAndroid

TL;DR

  • ios, android をファイル名や、プロパティの prefix などに使う
  • 詳細は チートシート や各事例を参照
続きを読む

r17n


Softwear Engineer


Fukuoka