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

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

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

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

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

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

リストの行を指やマウスで左へ引くと削除される仕組みを、ライブラリを使わずに React で作りました。少し引いただけなら元に戻し、縦の動きはページのスクロールに任せます。touch-action の値でタッチ操作がどう変わるかも、Ch ...

ブラウザのネットワークが切れたら「13:19 からオフラインです」と出し、つながったら「オンラインに戻りました」を3秒だけ出す表示を React で作りました。navigator.onLine が true でもサーバーに届かない場合 ...

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

2つの文章を比べ、消えた部分を赤、増えた部分を緑で表示するコンポーネントを React で作りました。書き直す前と後の差分を見せたいときに使えます。jsdiff の diffWords に Intl.Segmenter を渡すと、日本 ...