はじめに
Vue.js でキーボード操作で要素間を移動させる方法について整理した。
イメージとしてはツリービューみたいなやつとかを、↑
↓
→
←
キーで移動するような感じ。
TL;DR
tabindex
を移動させたい要素に設定@keyup.up.exact
,@keyup.down.exact
でイベントハンドラを設定- ハンドラ内で次要素の
tabindex
を算出してfocus
Vue.js でキーボード操作で要素間を移動させる方法について整理した。
イメージとしてはツリービューみたいなやつとかを、↑
↓
→
←
キーで移動するような感じ。
tabindex
を移動させたい要素に設定@keyup.up.exact
, @keyup.down.exact
でイベントハンドラを設定tabindex
を算出して focus
特殊な要件だが、Tippy Instance を生成せずに隠す方法を調べた。
_tippy
にインスタンスを保持しているのでそれを利用hide()
を実行NativeScript + Firebase でプッシュ通知を行う方法。
multiDexEnabled true
を追加
NativeScript でデータの 保存/読み出し を行う方法を整理した。
ApplicationSettings
を使うconst appSettings = require("tns-core-modules/application-settings");
appSettings.getXXXX
, appSettings.setXXXX
, appSettings.hasKey
, etcVue.js を使ってネイテイブアプリの開発が可能な NativeScript-Vue について整理した。
セットアップから、Vue Router を使ったページ遷移、モーダルの表示などについて。
続きを読むVue.js で画像プレビューする方法を整理した。
基本的に たった2ステップ!Vue.js で選択画像をプレビューする方法(サンプルDL可) – console dot log の通り。
<input type="file">
に @change
でイベントハンドラを設定FileReader
の readAsDataURL
で data: url
として読み込みdata
に data: url
を設定<img :src="dataUrl
>` のようにバインドして表示Laravel の Form::select
で空の選択肢ありのセレクトボックスを出す方法をまとめた。
['placeholder' => '選択してください']
を追加するprepend('選択してください', '')
を使うcollect()
などで Collection に要変換ページ中の複数の画像を zip に圧縮してローカルにダウンロードする方法を整理した。
※JavaScript で画像をローカルにダウンロード の続き
await Promise.all()
ですべての非同期リクエストが完了したら zip 生成処理を実施folder()
, folder.file()
, generateAsync()
で、zip ファイルの生成createObjectURL
→ <a href="..." download="xxxx.zip">
→ クリック&削除JavaScript で画像をローカルにダウンロードする方法を整理した。
img
タグで表示されている画像を JS 実行で保存するような処理を想定。
参考: zip にまとめてダウンロード編: JavaScript で複数画像を zip に圧縮してローカルにダウンロード
XMLHttpRequest
でのリクエスト時に responseType = "blob"
でリクエストcreateObjectURL
でオブジェクト URL を生成a
タグの download
属性でファイルを保存revokeObjectURL
でオブジェクト URL を開放