はじめに
Laravel で生 SQL を実行する方法。
TL;DR
DB::statement
を使うDB::statement('UPDATE `my_table` SET `a` = `b`')
Laravel で生 SQL を実行する方法。
DB::statement
を使うDB::statement('UPDATE `my_table` SET `a` = `b`')
HTML で非表示(※)の <input required>
に対して「入力が必要」のダイアログを表示する方法。
※厳密には非表示ではないが、人間的には非表示という感じ。詳細は後述。
display: none;
を使わないinput
を(人間的には)見えなくする
HTML5/JavaScript でファイルのドラッグ&ドロップ、画像ファイルのプレビューの実装方法。
dragover
, drop
に対して preventDefault()
が必要dataTransfer.dropEffect
を copy
に設定することで、ファイルドロップ時にファイルを参照できるdrop
内で event.dataTransfer.files
で参照可能dragover
, dragleave
, drop
イベント内で実施FileReader
の readAsDataURL
を使うinput
に 1つのファイルにするために、DataTransfer
を生成して、DataTranfer.items
の add
を利用AWS S3 のオブジェクト群を Firebase の Storage (Cloud Storage for Firebase) にコピーする方法。
aws-sdk
(aws/aws-sdk-js) と firebase-admin
(firebase/firebase-admin-node) を使うRails(devise)のユーザーを Firebase Authentication にエクスポートする方法。
firebase auth:import
でインポートfirebase auth:import users.json --hash-algo=BCRYPT --hash-key="xxxx"
でインポート実行plotly/plotly.js で、ズームやパン(移動)と連動して Y軸の表示範囲を自動で調整(オートスケール)する方法
plotly_relayout
イベントが発火.on('plotly_relayout', handler)
でハンドラを設定relayout
を実行Plotly.relayout()
で plotly_relayout
イベントが発火するので無限ループにならないように注意NativeScript(NativeScript-Vue) で davecoffin/nativescript-modal-datetimepicker で DatePicker/TimePicker を使用する方法
tns plugin add nativescript-modal-datetimepicker@x.y.z
ns plugin add nativescript-modal-datetimepicker
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') |
app/App_Resources/iOS/build.xcconfig
を修正
Vue.js で Lottie を使ったアニメーションを表示する方法。
Vue.js 向けのライブラリとして以下があるがメンテが止まってるようなので、(いまでも問題なく使えるかもしれないが)本記事では airbnb/lottie-web を使う。
※Latest commit は 2020/09/28 時点の確認結果
npm i lottie-web
でインストールlottie-web
と JSON データを import
lottie.loadAnimation
を実行Chart.js (vue-chartjs) でツールチップの表示内容を変更する方法
tooltips.callbacks.xxxx
で設定tooltips.callbacks.title
tooltips.callbacks.label
tooltips.callbacks.footer
tooltips.backgroundColor
tooltips.titleFontColor
tooltips.bodyFontColor
tooltips.footerFontColor
tooltips.titleFontStyle