はじめに

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 フックでイベントリスナを 追加/削除

はじめに

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

TL;DR

• テキスト選択、3Dタッチを無効化する場合は config.xml を設定
  • SuppressesLongPressGesture, Suppresses3DTouchGesture を true
• 画像などの長押しを無効化する場合は CSS で設定
  • -webkit-touch-callout: none;
  • -webkit-user-select: none;
  • user-select: none;
• 意図通りに動くか、他箇所で不具合が出ないかはしっかり検証が必要

はじめに

AWS S3 のオブジェクト群を Firebase の Storage (Cloud Storage for Firebase) にコピーする方法。

TL;DR

• 公式手順(参考1, 参考2)があるので、要件を満たせるならそれを使う
• 公式手順でダメな場合は自分でスクリプトを組む
  • Node.js の場合は aws-sdk (aws/aws-sdk-js) と firebase-admin (firebase/firebase-admin-node) を使う
  • 1ファイルをコピーするサンプルコード作った
• 目的の 公式ドキュメント(API リファレンス)にたどり着く追うのが割と大変

はじめに

plotly/plotly.js で、ズームやパン(移動)と連動して Y軸の表示範囲を自動で調整(オートスケール)する方法

TL;DR

• ズームや移動時は plotly_relayout イベントが発火
• .on('plotly_relayout', handler) でハンドラを設定
• 表示する Y 軸範囲を決定し relayout を実行
• Plotly.relayout() で plotly_relayout イベントが発火するので無限ループにならないように注意

はじめに

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

はじめに

NativeScript で tns run ios や tns debug ios 実行時に The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to x.x のエラーになる場合の対処法。

1

warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.0.99. (in target 'Starscream' from project 'Pods')

TL;DR

• app/App_Resources/iOS/build.xcconfig を修正
  • The iOS Simulator deployment target ‘IPHONEOS_DEPLOYMENT_TARGET’ is set to 8.0

はじめに

Vue.js で Lottie を使ったアニメーションを表示する方法。

Vue.js 向けのライブラリとして以下があるがメンテが止まってるようなので、(いまでも問題なく使えるかもしれないが)本記事では airbnb/lottie-web を使う。

• chenqingspring/vue-lottie
  • Latest commit: 2018/04/02
• SuperbuffNL/lottie-vuejs
  • Latest commit: 2019/08/27

※Latest commit は 2020/09/28 時点の確認結果

TL;DR

• npm i lottie-web でインストール
• lottie-web と JSON データを import
• lottie.loadAnimation を実行
• Creative Commons License の要件、対象アニメーションのライセンスを要確認して対応

はじめに

Chart.js (vue-chartjs) でツールチップの表示内容を変更する方法

TL;DR

• テキストは tooltips.callbacks.xxxx で設定
  • tooltips.callbacks.title
  • tooltips.callbacks.label
  • tooltips.callbacks.footer
• 色などを変更する場合は以下、他は Tooltip Configuration を参照
  • tooltips.backgroundColor
  • tooltips.titleFontColor
  • tooltips.bodyFontColor
  • tooltips.footerFontColor
  • tooltips.titleFontStyle
  • etc…

はじめに

Vue で Ivorzk/vue-cli-plugin-app-config を使って、動作環境ごとのコンフィグを設定する方法。

(ユースケースとしては、リリースビルドで動かしたいけど一部設定は開発向けにしたい、など？)

TL;DR

• npm i vue-cli-plugin-app-config でインストール
• app.config.js を作成し、vue.config.js で pluginOptions に追加
• npm run serve --dev, npm run build --prod などで環境(コンフィグ)切り替え可能

はじめに

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