Cordova で iOS, Android で異なる ID を使う

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 を使用する方法

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 フックも設定

<?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 /> を追加

<allow-navigation href="https://*twitter.com/*" />
<allow-navigation href="https://cdn.syndication.twimg.com/*" />
<allow-navigation href="about:*" />
<!-- <allow-navigation href="*" /> 1つでも OK -->

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

r17n

Hexo でブログを作成して Netlify で公開するまで

はじめに

TL;DR

目的・やったこと

Python で MySQL の操作が可能な ORM peewee

はじめに

Git で#から始まるコミットメッセージを登録

はじめに

TL;DR

目的・やったこと

Python requests で画像をダウンロードして保存する方法

はじめに

TL;DR

目的・やったこと

Rails で既存の DB を利用するアプリケーションの作成方法(DB 参照のみ)

はじめに

TL;DR

目的・やったこと

Python boto3 で AWS S3 を操作する

はじめに

TL;DR

目的・やったこと

Python requests + boto3 で AWS S3 に画像を直接アップロード

はじめに

TL;DR

目的・やったこと

Node.js で BTC の単位変換する satoshi-bitcoin

はじめに

TL;DR

目的・やったこと

JavaScript で setTimeout や addEventListener のコールバック関数に引数を渡す方法

はじめに

TL;DR

目的・やったこと

Node.js でディレクトリごとにバージョンを変更する nodenv

はじめに

TL;DR

目的・やったこと