はじめに

HTML で非表示(※)の <input required> に対して「入力が必要」のダイアログを表示する方法。

※厳密には非表示ではないが、人間的には非表示という感じ。詳細は後述。

TL;DR

続きを読む

はじめに

HTML5/JavaScript でファイルのドラッグ&ドロップ、画像ファイルのプレビューの実装方法。

TL;DR

続きを読む

はじめに

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

TL;DR

  • 公式手順(参考1, 参考2)があるので、要件を満たせるならそれを使う
  • 公式手順でダメな場合は自分でスクリプトを組む
  • 目的の 公式ドキュメント(API リファレンス)にたどり着く追うのが割と大変
続きを読む

はじめに

Rails(devise)のユーザーを Firebase Authentication にエクスポートする方法。

TL;DR

続きを読む

はじめに

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 して pickDatepickTime
続きを読む

はじめに

NativeScript で tns run iostns 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 を使ったアニメーションを表示する方法。

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) でツールチップの表示内容を変更する方法

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…
続きを読む

r17n


Softwear Engineer


Fukuoka