ラボ拡張: テキスト処理ツール12個追加とUI改善

導入

前回の計画記事で「テキスト処理系が手薄」と指摘を受けて、追加候補12個をリストアップした。今回はそれを全部実装した。

ついでにカテゴリ体系と一覧ページのUIも見直した。

追加したツール一覧

計画通り12個すべて実装した。

優先度	ツール	説明
高	JSONフォーマッター	整形・minify・バリデーション
高	Base64変換	テキスト・画像のエンコード・デコード
中	YAMLフォーマッター	整形・バリデーション・JSON相互変換
中	テキスト差分比較	2テキストの差分をハイライト表示
中	URLエンコード/デコード	encodeURI/encodeURIComponent対応
中	タイムスタンプ変換	UNIX時間と日時の相互変換
中	HTMLエンティティ変換	エスケープ・アンエスケープ
低	UUID生成	v4ランダム生成
低	ハッシュ生成	MD5/SHA-1/SHA-256/SHA-512
低	JWTデコーダー	ヘッダー・ペイロード・有効期限を表示
低	.envエディター	パース・重複キー検出・整形
低	INIエディター	パース・整形・JSON変換

優先度「低」のツールも含めて全部作った理由は、作り始めると勢いで全部やりたくなったから。

カテゴリ体系の再編成

旧カテゴリは機能ベースで分類していた。

// 旧カテゴリ（機能ベース）
type LabToolCategory =
  | 'image-convert'
  | 'image-transform'
  | 'image-edit'
  | 'image-effect'
  | 'viewer'
  | 'nlp'
  | 'utility';

テキスト処理ツールが増えたことで、画像系・テキスト系で対称性を持たせた「用途ベース」のカテゴリに変更した。

// 新カテゴリ（用途ベース）
type LabToolCategory =
  | 'image-converter'   // 画像変換
  | 'image-editor'      // 画像編集
  | 'image-generator'   // 画像生成
  | 'image-viewer'      // 画像閲覧
  | 'text-converter'    // テキスト変換
  | 'text-formatter'    // テキスト整形
  | 'text-generator'    // テキスト生成
  | 'text-analyzer'     // テキスト分析
  | 'language'          // 言語処理
  | 'qr-code'           // QRコード
  | 'experimental'      // 実験
  | 'utility';          // ユーティリティ

画像系とテキスト系で同じパターン（変換・編集/整形・生成・閲覧/分析）になっているので、フィルターUIも整理しやすくなった。

一覧表示の改善

カード形式の問題点

従来のカード形式は見た目はいいが、ツール数が増えると問題が出てきた。

一覧性が低い（1画面に収まるツール数が少ない）
カード間の余白がスペースを消費する
説明文が中途半端に切れることがある

テーブル形式への変更

ツール数が43個になったので、一覧性を重視してテーブル形式に変更した。

変更前	変更後
カード（画像付き）	テーブル（テキストのみ）
1行あたり2〜3個	1行1ツール
サムネイル表示あり	サムネイルなし

サムネイルはなくなったが特に誰も困らないと思う。
もし気にいなる人がいたらヒーロー画像ギャラリーページがあるのでそちらで見てもらいたい。

ビルドサイズの変化

テキスト処理系は基本的にブラウザ標準APIで実装したので、外部ライブラリの追加は最小限。

js-yaml: YAMLパース用（約30KB gzip）
diff: テキスト差分比較用（約3KB gzip）
js-md5: MD5ハッシュ用（約5KB gzip）

SHA系はWeb Crypto API、UUID v4はcrypto.randomUUID()で対応したのでライブラリ不要だった。

ラボページ: lilting.ch/lab