skysan's programming notebook

コーディングして思ったことなどを気ままに

Nuxt3アプリ内でページ遷移時に履歴を作らない方法

Nuxt3アプリ(PWA)でページ遷移時にブラウザの履歴を残したくないので調べた。 JavaScript nagigateToメソッドのreplaceオプションを設定する。 navigateTo('/home', { replace: true }) navigateTo · Nuxt Utils HTML要素 RouterLinkもしくはNuxtLinkのrepla…

Nuxt3のビルド時に `Rollup failed to resolve import "vue"` が起きたら

事象 Nuxt3アプリ(Static-Hosting)で ビルド時(nuxt build)にエラーが発生。 尚、nuxt devでは発生しなかった。 $ pnpm nuxt build [vite]: Rollup failed to resolve import "vue" from "(プロジェクトルート)/node_modules/.pnpm/nuxt@3.4.3_@types+node@1…

Volta + pnpm開発環境でグローバルと異なるNode.jsバージョンを利用する際のTIPS

はじめに Volta + pnpm環境でnode.jsのバージョンがグローバルとプロジェクトで異なる開発環境を構築している。 pnpm install コマンドを実行した際に、グローバルのバージョンの方が優先されてしまうので、指定したNode.jsバージョンで実行する方法を調査し…

ブラウザで動くCSV加工アプリ(WASM版SQLite利用)を作ってみた

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

続々々・モーダルなコンポーネントのフォーカス管理(dialog要素)

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

TypeScript + Jestでテストコードのpath設定

はじめに TypeScriptのpaths設定で@/folderのようにパスを指定した。 テストファイルでもmoduleのimportを@でパスを設定して、絶対パスで呼び出したい。 // test/Util/DateUtil.test.ts import { dateFactory } from '@/Util/DateUtil' しかし、そのままテス…

package.jsonのexportsフィールドを設定する(TypeScript)

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

Cookieが必要なWeb API実行にブラウザのDeveloper Toolsを使う

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

JavaScriptでデータ定義とデータアクセス処理を考える

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

LWCにおけるページ遷移とブラウザの履歴の小ネタ

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

小ネタ:Excel JavaScript APIでシート一覧を作ってみた

はじめに 今更Excel JavaScript APIを触ってみたく、Script Labで遊んでみた。 どこでも*1動くので、あると便利な機能を実装してみる。 Script Labについて Microsoftが出しているOfficeアドイン。 https://appsource.microsoft.com/ja/product/office/wa104…

fontawesomeのアニメーションが動かない

はじめに fontawesomeのSpinnerアイコンに回転アニメーションを設定したが、動かない。 MacbookのChromeでは動かないが、iOSのSafariで動いていたので、調査した。

DockerでLWC Dev Serverを起動する

はじめに DockerのSFDX開発環境にLWC ローカル開発サーバをインストールする。 通常sfdxコマンドからプラグインをインストールだけだが、事前に必要なモジュールがいくつかあり調査したので、備忘録として残しておく。 前準備 skysan87.hatenablog.com

Editor.jsとTailwindCSSのスタイルの干渉を解消する

はじめに Nuxt.js + TailwindCSSで作成したアプリにEditor.jsを組み込もうとしたところ、headerプラグインがうまく動かなかった。 原因と解決策を検討する。

Nuxt3(RC)アプリをElectronで表示する

はじめに Nuxt3の勉強がてら、electronアプリで表示するための設定を調べた。 オフラインのデスクトップアプリで使うので、CSR(Client-Side-Rendering)でしてみた。 留意事項 2022/7/18時点では、Static Hosting(静的ホスティング)はまだ試験段階。 This fea…

Firebaseエミュレータを使ってみた(Firestore編)

はじめに Firebaseを利用したWebアプリ開発でDBとしてFirestoreを利用しています。 開発中の動作確認として、FirebaseエミュレータのFirestoreを利用してみました。

フォーカスが外れた時に、編集をキャンセルするコンポーネントを作る

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

VSCodeのリモート開発機能でSalesforceプロジェクト開発を試す(on WSL2 without Docker Desktop)

はじめに 以前VSCodeとDocker Desktopを使用してSalesforce開発環境を作成した。 (以下の記事ではmacOS上に構築) skysan87.hatenablog.com 諸般の事情でWindowsPCのDocker Desktopの利用をやめて、WSL上にDocker環境を作成し、VSCodeのRemote Developmentで…

Auraコンポーネント: 非同期処理の際はライフサイクルに気をつけようという話

はじめに AuraコンポーネントからApexのアクションをコールする際に、Promiseを利用し汎用の非同期メソッドを実装しました。 then()を使ったメソッドチェーンで、レスポンス取得後の処理がうまく行きませんでした。 非公開属性のaura:attributeの値が変更さ…

Nuxt.js + Electronの環境構築(Monorepo風)

はじめに Web(Nuxt.js)側のコードを独立して動かせる環境構築 mainプロセスとrendererプロセス間の通信方法を検証 成果物 https://github.com/skysan87/nuxt-electron-sample 目次 はじめに 成果物 目次 プロジェクトの作成 ディレクトリ構成 作成手順 1. Nu…

Apexで任意のプロパティでリストの並び替え(sort)をしてみる

背景 ApexではListクラスにのみsortメソッドがあるが、ソートの柔軟性がない ソートロジックはこちら 任意のソートロジックを実装するにはCompatibleインターフェースを実装する必要がある(とても面倒くさい) Apexクラス型のListを簡単にソートする方法を検…

docker起動時にシェルスクリプトを実行する

はじめに docker起動時にシェルスクリプトを実行する Dockerfileの仕様を詳しく知らずに書いたらつまづいたので、メモを残す ソースコード Dockerfile FROM amazoncorretto:11 WORKDIR /home # ファイルをコンテナにコピー COPY init.sh . # 実行権限を付与 …

VSCodeのリモート開発機能でSalesforceプロジェクト開発を試す

はじめに 以前Salesforce開発していた頃、ローカル環境が汚れたのが面倒だった。 最近ハマっているVisual Studio Code(以降VSCode)のリモート開発機能の中にSalesforceがあったので、試してみた。 この記事でできるようになること Dockerコンテナ上に開発環…

ドラッグで幅可変なサイドメニューを作った

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

利用しているSandboxのAPIバージョンをスマートに調べる

Summer'20☀️のプレビュー来ましたね。 背景 SandboxのAPIバージョンが更新されたか確認したい。 「salesforce how to know api version」と検索すると、公式の回答はApexクラスの新規作成で調べろがヒットする。 こういう小技的な確認方法ではなく、ちゃんと…

続々・モーダルなコンポーネントのフォーカス管理(Nuxt.js版 2)

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

続・モーダルなコンポーネントのフォーカス管理(Nuxt.js版)

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

LWCでも仮想スクロールしたい!

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

モーダルなコンポーネントのフォーカス管理

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

AWSのS3のリージョンを調べる

背景 AWSのEC2コンテナに乗せたRailsアプリからS3パケットにアクセスするように設定したい アプリにはCarrrierWave + fog-awsを使用 設定ファイルに記載するS3のリージョンの名称がわからないので調査 調査過程 AWS、CarrierWave、S3、regionみたいなワード…