個人開発

てちこまツール公開しました — 日々の作業をちょっと楽にする5本

tools.techikoma.com のポータルページ
tools.techikoma.com ポータルページ

てちこまツールとは

tools.techikoma.com で、日々の作業をちょっと楽にするミニツール集を公開しました。

全ツール無料・登録不要・広告以外は収集なし、入力データはブラウザ内で完結します。ブックマークしてどうぞ。

なぜ作ったか

自分自身が日常的に使うミニツール類を、UI/UX にこだわって自分で作ってみたかった、というのが一番です。ついでに Astro 6 + Cloudflare Workers の練習にもなります。

意識しているポイントはこのあたりです。

  • Material Design 3 + ダークモード で、見た目がモダンで読みやすい
  • 単体テスト網羅 で、境界ケース (うるう年、タイムゾーン、絵文字、機種依存文字など) もできるだけ潰す
  • クライアント完結 で、入力データが外に出ない
  • 単機能特化 で、やりたいことが1画面で完結する

個人運用なのでコストは極小、新しいツールを足しやすい構成にしています。

公開ツール 5本

1. Unix Timestamp 変換

Unix Timestamp 変換ツール
Unix Timestamp ↔ 日時の双方向変換

秒・ミリ秒・マイクロ秒・ナノ秒を桁数から自動判定して、日時と双方向変換します。

  • UTC / JST / 任意タイムゾーン (Intl.supportedValuesOf('timeZone') 全網羅)
  • 2つの時刻の期間計算もできるモード付き
  • URL に ?t=...&tz=... でパラメータ共有

datetime-local input を使わず DatePicker / DateRangePicker を自前実装 したのがポイント。ブラウザ標準は秒/ミリ秒の扱いがバラバラで、タイムゾーンも ISO 以外を受け付けません。単体テスト 140件でエッジケース (うるう年、DST、Pacific/Kiritimati +14 の極端 TZ、負の timestamp) を潰してあります。

2. 文字数カウント

文字数カウントツール
文字数・バイト数・単語数を即時カウント

文字数・バイト数・行数・単語数・Twitter文字数を即時カウント。

日本語の単語数カウントは Intl.Segmenter の word granularity で形態素分割しているので、「こんにちは世界」を こんにちは + 世界 の2語として数えてくれます。スペース区切りが当てにならない日本語でもちゃんと単語単位でカウントできます。

3. JSON整形

JSON整形ツール
JSON 整形・圧縮・検証

JSON を整形・圧縮・検証。インデント幅は 2 / 4 / Tab から選べて、構文エラーは行番号+列位置で指摘します。

バイトオフセットでなく行・列で出すので、そのままエディタでジャンプできるのが地味に便利です。

4. B2クラウド 使えない文字チェッカー

B2クラウド 使えない文字チェッカー
ヤマト運輸 B2クラウドで弾かれる文字を事前検出

ヤマト運輸の発送システム「B2クラウド」でインポート時に弾かれる機種依存文字・囲み数字・合字などを即時検出して、推奨置換を提示します。

  • JIS X 0208 (4124レンジ/8248 BMP char) を埋め込み、二分探索で判定
  • カテゴリ分類: jis3+、囲み数字、ローマ数字、合字、単位記号、半角カナ、制御文字、non-BMP、フィールド固有制限 (住所の半角スペース/ピリオド、電話の数字+ハイフン)
  • 厳格モード: B2クラウドの FAQ で実際に弾かれる ? ？ を追加検出

地味な機能ですが、ヤマトの B2 クラウドを使う EC 事業者さんにはわりとハマるやつかと。

5. PDF 結合・分割

PDF 結合・分割ツール
PDF 結合・分割・並び替え・回転・削除

PDF の結合・分割・ページ並び替え・回転・削除・メタデータ編集をブラウザ内で完結。サーバーにアップロードされません。

  • 複数ファイルのドラッグ&ドロップ
  • サムネイルをドラッグで並び替え
  • ページ間クリックで区切り (プリセット: 中央2分割 / 1ページずつ)
  • パスワード付きPDF対応 (出力時は解除される旨、UIで明示)

pdf-lib 本家は 1.17.1 でメンテが止まっていて暗号化未対応なので、フォーク版の @cantoo/pdf-lib に乗り換えています。これで RC4 / AES-128 / AES-256 に対応。

技術スタック

ブログと同じです。

  • Astro 6 + Tailwind CSS v4 (MD3 トークン)
  • Cloudflare Workers Static Assets — 静的配信。Pages と違って Workers Script と同じダッシュボードで管理できるのが便利
  • pnpm workspace のモノレポ
  • Vitest (lib 層カバレッジ 95%+) / Playwright (E2E 95本)

構成は apps/tools/ 単一 Astro アプリに全ツール同居で、src/pages/<slug>/ と src/components/<slug>/ と src/lib/<slug>/ で namespace 分割しています。

単一サブドメイン vs マルチサブドメイン

最初は unixtime.techikoma.com、counter.techikoma.com… のようにツール単位でサブドメインを切っていました。運用してみたら、

  • おそらくだけど、Chrome の QUIC セッション状態が絡むと cross-subdomain で sec-fetch-site: cross-site 扱いになって、Cloudflare Free plan の DDoS L7 フィルタに引っかかる … という挙動がたまに発生 (確証はなく、症状ベースの推測)
  • SEO 評価もサブドメイン単位で分散する説があり、そこもちょっと気になった
  • ツールが5個を超えた頃から CF ダッシュボードの Worker 一覧が煩雑

で、途中から tools.techikoma.com/<slug>/ に一本化しています。まだリリース直後で SEO 評価ゼロだったので、リダイレクトなしで旧サブドメイン全削除。痛みを伴う決断ではあったけど、複数ツールを抱える構成としてはこっちが正解でした。

カバレッジ目標

lib 層 (純粋ロジック) は line 95% / branch 90% 以上 を閾値に設定しています。UI コードはカバレッジ計測から除外。

UI カバレッジは [Vitest + Testing Library] より、E2E (Playwright) の方が効率がいいので、E2E でブラウザ実挙動を担保しています。

今後追加したいもの

  • 画像圧縮 (WebP / AVIF 変換、EXIF 削除)
  • URL → QRコード (カスタマイズ可、ロゴ埋め込み)

リクエストや不具合報告は各ツールの Footer から Google Form でどうぞ。量が増えてきたら新しいツールを優先したり、既存ツールの改善に反映したりします。

まとめ

tools.techikoma.com で 5 本のミニツール運用中です。

ツールURL
Unix Timestamp 変換tools.techikoma.com/unixtime/
文字数カウントtools.techikoma.com/counter/
JSON整形tools.techikoma.com/json/
B2クラウド 使えない文字チェッカーtools.techikoma.com/b2-shuka/
PDF 結合・分割tools.techikoma.com/pdf/

ツール一覧は tools.techikoma.com から。ブックマークよろしくです。

#個人開発 #Astro #Cloudflare #SEO