はじめに
Vue.js を kazupon/vue-i18n が動作しない問題の修正方法。
TL;DR
vue add i18nでプラグイン追加- 環境(バージョン組合せ?)によっては上手く動かないので
src/i18n.jsを修正messages[locale] = locales(key).default->messages[locale] = locales(key)
はじめに
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フックでイベントリスナを 追加/削除
- 今回は Vue なので
はじめに
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
- NS6-:
- README.md の情報だけだと分かりづらいので、デモ用コードも合わせて見た方が良い
import,newしてpickDateやpickTime
はじめに
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 データをimportlottie.loadAnimationを実行- Creative Commons License の要件、対象アニメーションのライセンスを要確認して対応
はじめに
Chart.js (vue-chartjs) でツールチップの表示内容を変更する方法
TL;DR
- テキストは
tooltips.callbacks.xxxxで設定tooltips.callbacks.titletooltips.callbacks.labeltooltips.callbacks.footer
- 色などを変更する場合は以下、他は Tooltip Configuration を参照
tooltips.backgroundColortooltips.titleFontColortooltips.bodyFontColortooltips.footerFontColortooltips.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などで環境(コンフィグ)切り替え可能
はじめに
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 でチャートの高さ(や幅、サイズ)を変更する方法
TL;DR
- チャート要素に
widthやheightを設定- 本家 Chart.js ではなく vue-chartjs のドキュメント に記載
options.responsiveやoptions.maintainAspectRatioも合わせて指定
- 親要素の
widthやheightをvw,vhで指定する方法もある - ウィンドウのリサイズなども考え出すと割と茨の道っぽい
- ベストプラクティスが見つかってない(自分的には)
