はじめに 適度なデータ量のCSVの集計する機会があり、WebAssembly版のSQLiteを使ってブラウザでCSVを加工する簡単なWebアプリを作ってみた。 成果物 ローカルHTMLファイルで実行

はじめに これまでモーダルを表示したときのTABによるフォーカス移動でバックグラウンドに移動するのを防ぐための実装をしてきた。この方法は「フォーカストラップ」と呼ぶらしい。*1 注釈のサイトにユーザビリティやスクリーンリーダによるTAB移動問題の指…

はじめに 自作のnpmパッケージを参照するときにエントリポイントを複数公開して、別のパッケージでimportしたかった。しかし、モジュール '***/***/***' またはそれに対応する型宣言が見つかりません。となり、importに失敗したため、調査結果をメモする。 …

はじめに Web APIを実行するときに、Cookieに認証情報を保持している場合、PostmanやVSCodeのREST ClientなどのツールでAPI実行がうまくいかなかった。 ブラウザのDeveloper ToolsからJavaScriptでAPIを実行する方法で解決できたので、メモする。 前提条件 …

はじめに フロントサイドでデータアクセス処理する場合、以下のような懸念がある(もしくは、そういった経験がある) JSONでデータ処理していてデータ定義が不明瞭 localStorageやsessionStorageに直接JSONを保存している こういった問題を解消するため、DAOパ…

はじめに LWCで構築されたExperience Builder Siteでブラウザの履歴操作をさせたくないケースがあったので、検証してみた。 方法 [NavigationMixin.Navigate](pageReference,[replace])の第二引数をtrueに設定する。 To dispatch the navigation request, ca…

はじめに Trelloのチェックリストは、フォーカスが外れたときに編集内容がキャンセルされる 単純にinputのblurイベントをコールするのではなく、関連機能にフォーカスがある場合はキャンセルされない 対象コンポーネント（textbox、OKボタン、キャンセルボタ…

はじめに SlackやVisual Studio Codeのようにサイドメニューの幅をドラッグで調整できるサンプルを作った。 先に結果

前回の反省 カスタムディレクティブで作ってみたが、ダイアログが埋め込んであるページに遷移する度にfocusinイベント登録が発生してしまう。 skysan87.hatenablog.com 今回やりたいこと カスタムディレクティブをやめる。 以下のサイトを参考にダイアログを…

やりたいこと Nuxt.jsでもVue.js同じようなフォーカス管理をしたい。 skysan87.hatenablog.com 背景 Vue.jsで作ったものを利用しようとすると以下のエラーが出てしまい、うまくいかない。 document undefined 公式の回避方法もうまくいかない。 解決策 カス…

あけましておめでとうございます。 Lightning Web Components(以下、LWC)で仮想スクロールのサンプルを作りました。

やりたいこと Vue.jsでモーダルダイアログ表示中にTab移動した時、フォーカスがモーダルダイアログ外に行かないようにしたい。 ※ただし、Webページ外(ブラウザのアドレスバーなど)からのTab移動は除く。 成果物 Before Tab移動すると、ダイアログ外に移動し…

背景 最近フロントエンドに再入門しました。 commonjsとかそこらへんも全然わかってはいません。 JavaScript(ES6)の勉強を学習サイトの入門コースでやってみたのですが、import/exportに触れていなかったので軽くやってみました。 この記事でやること 制限事…

背景 社内SNSに気象警報を流したかった。 気象庁防災情報XMLフォーマット形式電文（PULL型）が公開されていたので、GASでヘッドラインのみ取得してみた。（今更） 取得するデータ Atomフィード：高頻度フィード(随時) 東京都の"気象特別警報・警報・注意報"…