NativeScript で「The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to x.x`」エラーの対処法



カテゴリー Programming
タグ
JavaScript NativeScript Node.js Programming iOS

はじめに

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

続きを読む

Vue.js で Lottie を使ったアニメーションを表示



カテゴリー Programming
タグ
HTML JavaScript Lottie Node.js Programming Vue.js

はじめに

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

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

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

TL;DR

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

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



カテゴリー Programming
タグ
Chart.js HTML JavaScript Node.js Programming Vue.js

はじめに

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 で動作環境ごとのコンフィグを設定



カテゴリー Programming
タグ
Node.js Programming Vue.js

はじめに

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 でアプリ名やアプリのバージョン情報などを取得



カテゴリー 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
続きを読む

Chart.js(vue-chartjs) で凡例の一部を非表示にする方法



カテゴリー Programming
タグ
Chart.js HTML JavaScript Node.js Programming Vue.js

はじめに

Chart.js(vue-chartjs) で凡例の一部を非表示にする方法。

例えば円グラフ(Doughnut, Pie)で、値が 0 のものを取り除く、など。
(※この例だと、そもそも datasets から除外するのが良いけど、他に良い例がパッと思いつかないので…)

TL;DR

  • options.legend.labels.filter で設定
    • item.index や chart.datasets[n].data[item.index] を見て 表示/非表示 を決定
    • return true で表示、return false で非表示
続きを読む

apertureless/vue-chartjs でチャートの高さ(や幅、サイズ)を変更



カテゴリー Programming
タグ
Chart.js HTML JavaScript Node.js Programming Vue.js

はじめに

apertureless/vue-chartjs でチャートの高さ(や幅、サイズ)を変更する方法

TL;DR

  • チャート要素に width や height を設定
  • 親要素の width や height を vw, vh で指定する方法もある
  • ウィンドウのリサイズなども考え出すと割と茨の道っぽい
    • ベストプラクティスが見つかってない(自分的には)
続きを読む

Vue でローソク足(OHLC)チャートをプロット



カテゴリー Programming
タグ
Chart.js HTML JavaScript Node.js Programming Vue.js

はじめに

Vue でローソク足(OHLC)チャートをプロットする方法。

TL;DR

  • npm i chart.js vue-chartjs vue-chartjsfinancial でインストール
  • JS ファイルと Vue ファイルに分けて実装するのが良い
    • リアクティブにグラフを更新できる (癖があるので注意)
  • 全部 from 'vue-chartjs-financial' で import するのが安全そう
  • 細かい設定は chart.js 本家のドキュメントを参照
続きを読む

r17n


Softwear Engineer


Fukuoka