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

画面のカードなど、一部の要素だけを PNG にして保存させる方法です。スクリーンショットを撮って切り抜く手間を、ボタン1つで省きたいときに使えます。ref で要素を受け取り、html-to-image の toBlob で画像にします ...

テキストエリアで「@」を打つと名前の候補を出し、選ぶと「@名前 」を入れる入力欄を React と TypeScript で作りました。キャレットの前の文字の調べ方、選んだあとのキャレットの戻し方、一覧を「@」の位置に出す方法を Ch ...

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

PDF.js で読み込んだ PDF を、React で1ページずつ canvas に描き、前後のボタンで送る方法です。速く送るときは前の描画を取り消し、高解像度の画面では倍の画素で描き、フォントを埋め込んでいない日本語の PDF には ...

選んだ複数のファイルを、ブラウザの中で1つの ZIP にまとめて保存させる方法です。JSZip でフォルダ分けして ZIP を作り、進み具合を表示します。既定では圧縮されないこと、同じ名前が上書きされること、取得の失敗への備えも確かめ ...

何もない所からドラッグして四角い枠を描き、枠にかかった項目をまとめて選ぶ仕組みを、ライブラリを使わずに React で作りました。項目の位置は押したときに一度だけ測ります。Shift での追加、クリックとの区別、文字が選択されてしまう ...

ユーザーが選んだ音声ファイルの波形を、ライブラリを使わずに canvas へ描く方法です。Web Audio API で数値の並びにデコードし、canvas の横幅と同じ数の区間ごとに最小値と最大値を取って描きます。再生位置の表示と、 ...

React の video 要素に track 要素で WebVTT の字幕を付け、日本語・英語・オフを select で切り替える方法です。textTracks の mode の扱いと、字幕が出ないときの原因も検証しました。 ...

画像をマウスのホイールで拡大・縮小し、ドラッグで動かせる表示枠を、ライブラリを使わずに React で作りました。カーソルの下の位置を動かさずに拡大する計算と、onWheel では preventDefault が効かずページがスクロ ...