はじめに
NativeScript(NativeScript-Vue) で履歴をクリアしつつページ遷移する方法。
TL;DR
clearHistory: trueを設定するthis.$navigateTo(Page, { clearHistory: true });
- Manual Routing - NativeScript-Vue には記載がないため、本家 NatvieScript のドキュメントもあわせて見るように意識すると良い
はじめに
Docker(Docker-Compose) で Node.js をバージョン指定してインストールする際に、以下エラーが表示される場合の対処法。
1 | E: Version 'x.y.z-1nodesource1' for 'nodejs' was not found |
※Docker 関係なくて、単に Ubuntu/Debian の問題な気もするが未確認
TL;DR
- Docker/Ubuntu で
apt-get install -y nodejs=x.y.z-1nodesource1実行でエラーE: Version 'x.y.z-1nodesource1' for 'nodejs' was not found
- パッチバージョンでアップデートが無いか確認
- ex:
https://deb.nodesource.com/node_13.x/pool/main/n/nodejs/
- ex:
- アップデートがある場合は
apt-get箇所のバージョンを修正する
はじめに
Node.js, express, axios で JWT(JSON Web Tokens) を利用する方法を整理した。
ざっくり以下の流れ。
- ログイン時にサーバで Token を 発行/送付
- クライアントが API 利用時に Token を Request Headers なり Body なりで送付
- サーバ側で Token の正当性を検証
TL;DR
- auth0/node-jsonwebtoken を使用
sign()で JWT 発行- axios/axios の
configに{ headers: { Authorization: `Bearer ${token}` } }で設定 verify()で JWT 検証app.use()で JWT 検証処理を定義
はじめに
Vue.js で矢印キーや Enter キーによるキーボード操作が可能なコンテキストメニュー(右クリックメニュー)を表示する方法。
調査/検証 したところ rawilk/vue-context を使うのが一番楽だったので、基本的には vue-context の使い方についてのまとめ。
TL;DR
- rawilk/vue-context だとキーボード操作にデフォルトで対応
- ネストは
li.v-context__subとul.v-contextを使う←,→キーによる階層の移動が可能
- スタイルは
.v-context li,.v-context li a:hover,.v-context li a:focusあたりで変更
はじめに
Vue.js で入力フォーム フォーカス中に Enter キーで Submit させる方法について整理した。
ほぼ参考サイトの通り。
TL;DR
- 単純に
@keyup.enterを使うと、日本語変換での確定 Enter も対象になる @keypress.enterだと、日本語変換での確定 Enter は発火しない- 組み合わせてフラグ管理することで実現
はじめに
Vue.js でキーボード操作で要素間を移動させる方法について整理した。
イメージとしてはツリービューみたいなやつとかを、↑ ↓ → ← キーで移動するような感じ。
TL;DR
tabindexを移動させたい要素に設定@keyup.up.exact,@keyup.down.exactでイベントハンドラを設定- ハンドラ内で次要素の
tabindexを算出してfocus
はじめに
PHPOffice/PhpSpreadsheet を使って、エクセルファイルを操作する方法(読み込み系)を整理した。
TL;DR
composer require phpoffice/phpspreadsheetでインストールloadでファイル読み込み,getSheetByNameでシート選択getRowIterator&getColumnIteratorやrangeToArrayでデータ取得
はじめに
特殊な要件だが、Tippy Instance を生成せずに隠す方法を調べた。
TL;DR
- Tippy with Click Trigger, … Issue #437
- 対象ツールチップは
_tippyにインスタンスを保持しているのでそれを利用 - ツールチップを非表示にしたいタイミングで、
hide()を実行
はじめに
PHP で azuyalabs/yasumi を使って祝日を判定する方法を整理した。
TL;DR
composer require azuyalabs/yasumiでインストールYasumi::createでインスタンス生成isHolidayで祝日判定addHolidayで独自の祝日追加
はじめに
NativeScript(NativeScript-Vue) で ボトムタブバーによるナビゲーションを行う方法。
TL;DR
- ボトムタブバーによるナビゲーションを行う方法を整理
TabViewで実装する- もしくは
BottomNavigationで実装可能
