ダウンロード中にプログレスバーで進み具合を見せたいときに使える方法です。fetch の本文を getReader() で少しずつ読み、受け取った量と Content-Length から進み具合を progress 要素に表示します。C ...

ブラウザの getDisplayMedia() で画面を共有してもらい、MediaRecorder で録画して、ダウンロードのリンクを出す部品を React で作りました。録画の形式の選び方、ブラウザの「共有を停止」で止められたときの ...

ブラウザの EyeDropper API を使い、画面の好きな場所の色をスポイトで取る部品を React で作りました。開けるのはクリックの直後だけであること、取り消し方、値が rgba() で返る場合、使えないブラウザで代わりに色の ...

開きっぱなしの React の画面に、新しい版の公開を知らせて読み込み直してもらう方法です。デプロイのあとも古い画面を開いたままの人に、新しい版へ移ってもらいたいときに使えます。ビルドのたびに版の名前を画面と version.json ...

操作がないまま一定時間たつと自動でログアウトする画面に、残り時間を出す警告のダイアログと「ログインを続ける」ボタンを付けます。期限と現在時刻の差で状態を決めるフックを作り、警告中の操作や複数のタブでの動きを検証環境で確かめました。

画像を小さく canvas に描き、getImageData で読んだピクセルの色を数えて、いちばん多い色を代表色にする React のコードです。平均色との違い、色をまとめる段階の数、透明な部分、別のオリジンの画像で起きるエラーも確 ...

2秒ごとにサーバーへ問い合わせる画面で、別のタブを見ているあいだは問い合わせを止め、戻った瞬間に1回問い合わせ直すフックを作りました。setInterval のままの書き方や、TanStack Query の設定による違いも、Chro ...

未読が3件あるとき、タブに「(3) 猫のメモ」と出し、ファビコンに件数を描く方法です。React 19 の title と canvas で作り、100件以上を「99+」にする場合、件数が続けて変わる場合、アイコンが別オリジンにある場 ...

Reactの画面を、ヘッダーやボタンを消した印刷用のレイアウトで印刷する方法です。@media print と @page でA4の紙に合わせます。入力欄を文字にするやり方、背景色、ページ番号、改ページの扱いも書きます。画面の一部だけ ...

入力が1秒止まったらサーバーに保存し、「保存中…」「13:05 に保存しました」と表示するカスタムフックを React で作りました。メモや下書きを、保存ボタンを押さずに残したいときに使えます。保存の最中に続きを打っても古い内容で上書 ...