はじめに
YouTube で複数のドラフトを一括公開するスクリプト。
TL;DR
- Chrome DevTools | Google Developers を開く
- 「Console」タブを開く
- 記事中のスクリプトを貼り付けて Enter
はじめに
HTML5/JavaScript でファイルのドラッグ＆ドロップ、画像ファイルのプレビューの実装方法。
TL;DR
- ドラッグ＆ドロップ 使いたい場合は、
dragover,dropに対してpreventDefault()が必要 dataTransfer.dropEffectをcopyに設定することで、ファイルドロップ時にファイルを参照できる- ドロップされたファイルは
drop内でevent.dataTransfer.filesで参照可能 - ドラッグ中の UI 変更は
dragover,dragleave,dropイベント内で実施 - 画像プレビューは
FileReaderのreadAsDataURLを使う - 1つの
inputに 1つのファイルにするために、DataTransferを生成して、DataTranfer.itemsのaddを利用
はじめに
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ファイルをコピーするサンプルコード作った
- Node.js の場合は
- 目的の 公式ドキュメント(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
- NS6-:
- 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を修正
はじめに
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…
はじめに
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) で凡例の一部を非表示にする方法。
例えば円グラフ(Doughnut, Pie)で、値が 0 のものを取り除く、など。
(※この例だと、そもそも datasets から除外するのが良いけど、他に良い例がパッと思いつかないので…)
TL;DR
options.legend.labels.filterで設定item.indexやchart.datasets[n].data[item.index]を見て 表示/非表示 を決定return trueで表示、return falseで非表示
