2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

入力を一切送信しない「ブラウザ完結」の小さなツール集を、フレームワークなしで作った

2
Posted at

入力を一切送信しない「ブラウザ完結」の小さなツール集を、フレームワークなしで作った

作ったもの

ツール横丁 という、仕事や暮らしで使う小さなツールを集めたサイトを作りました。

  • 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(静的アセット)
  • 早見表ページ(祝日一覧、都市別の時差など)はビルド時に自動生成し、毎年の更新を楽にしています。

おわりに

「ちょっと計算したいけど、怪しいサイトにデータを貼りたくない」ときに使えるものを目指しています。
不具合や欲しいツールがあれば、コメントで教えてもらえるとうれしいです。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?