入力を一切送信しない「ブラウザ完結」の小さなツール集を、フレームワークなしで作った
作ったもの
ツール横丁 という、仕事や暮らしで使う小さなツールを集めたサイトを作りました。
- cron式の日本語解説・次回実行日時
- UNIX時間 ⇔ 日本時間
- 正規表現チェッカー(パターンを日本語で解説)
- JSON整形・検証(エラー箇所を日本語で表示)
- Base64・URLエンコード
- 営業日計算(日本の祝日・振替休日対応)、日数計算、時間計算
- 消費税計算、パーセント・割引計算、タイムゾーン変換 など
すべてブラウザの中だけで計算し、入力した内容はサーバーに送りません。
こだわったところ
1. 入力を送らないことを CSP で保証する
「送信しません」と書くだけでなく、Content-Security-Policy で通信先を絞っています。
default-src 'self'; script-src 'self' https://static.cloudflareinsights.com;
connect-src 'self' https://cloudflareinsights.com; form-action 'none'; frame-ancestors 'none'
インラインスクリプトも style 属性も使わず、外部への通信は Cookie を使わないアクセス解析だけです。JSON や正規表現のツールに社内のデータを貼っても、外に出ない作りにしています(とはいえ、APIキーやパスワードは貼らないのが原則です)。
2. フレームワークなし・ビルドは Python 標準ライブラリだけ
HTML・CSS・素の JavaScript と、Python 標準ライブラリだけの小さなビルドスクリプトで作っています。依存パッケージがないので、更新の手間も脆弱性の心配も小さくなります。テストだけ Playwright を使っています。
3. 日本ならではの計算を正しく
- 祝日は内閣府の CSV をもとに持ち、振替休日と国民の休日を見分けています(CSV ではどちらも「休日」)。
- 日本時間は、閲覧者の PC の時計設定に左右されないよう、UTC に固定で +9 時間して計算しています。
- 文字数は
Intl.Segmenterで数え、絵文字や結合文字も見た目どおり1文字にしています。 - 時差は
Intl.DateTimeFormatのtimeZoneを使い、夏時間はブラウザ内蔵のデータで自動判定しています。 - 1坪は 400/121 ㎡ として計算しています。
構成
- ホスティング:Cloudflare Workers(静的アセット)
- 早見表ページ(祝日一覧、都市別の時差など)はビルド時に自動生成し、毎年の更新を楽にしています。
おわりに
「ちょっと計算したいけど、怪しいサイトにデータを貼りたくない」ときに使えるものを目指しています。
不具合や欲しいツールがあれば、コメントで教えてもらえるとうれしいです。