はじめに
おつかされまです。tyamonです。
この記事では、私が個人で開発・公開した開発者向けWebツール集サイト「tools.tyamon.com」を紹介します。
以下のような方を対象としています。
- JSON整形やBase64変換など、日常的な開発作業をブラウザでサッと済ませたい
- データをサーバーに送りたくない（セキュリティが気になる）
- インストール不要で使えるツールを探している
執筆の背景
仕事でAWSを使っていると、タイムスタンプの変換・CIDRの計算・JSONの整形など、ちょっとした変換作業が頻繁に発生します。
都度ツールを検索するのが面倒で、しかも入力内容がサーバーに送られているかもしれないWebサービスに業務データを貼り付けるのは不安でした。
そこで「自分が毎日使いたいツールを、自分で作って公開する」というコンセプトでこのサイトを開発しました。
結論（成果物）
tools.tyamon.com として公開しています。全ツールがブラウザ完結で動作し、入力データは外部サーバーに送信されません。
前提条件・環境
本サイトの技術スタックは以下の通りです。
- フロントエンド: React 18 + TypeScript
- スタイリング: Tailwind CSS v4
- ホスティング: AWS Amplify Hosting
- CI/CD: GitHub連携（mainブランチへのpushで自動デプロイ）
- ドメイン: XServer で管理、Amplify のカスタムドメインとして設定
サイトの特徴
ブラウザ完結・データ送信なし
全ての処理はブラウザ（クライアントサイド）で完結します。
JSONの中身・変換したいテキスト・生成したQRコードの内容など、入力データは一切外部に送信されません。
業務で扱う情報も安心して使えます。
ダークモード対応
ヘッダーのボタンでライト/ダークを切り替えられます。
設定はブラウザのローカルストレージに保存されるため、次回アクセス時も引き継がれます。
レスポンシブ対応
スマートフォン・タブレット・PCいずれからでも使えます。
収録ツール一覧
現在公開しているツールは以下の8本です。
| ツール名 | URL | 主な用途 |
|---|---|---|
| JSON整形・バリデーション | /json | APIレスポンスの確認・整形 |
| 日時・UNIX時刻変換 | /datetime | タイムスタンプと日時の相互変換 |
| QRコード生成 | /qr | URLやテキストからQR作成 |
| Base64エンコード/デコード | /base64 | 画像データや認証情報の変換 |
| Cron式ジェネレーター | /cron | スケジュール設定の確認 |
| 差分チェッカー（Diff） | /diff | テキストの変更点確認 |
| CIDR / IPアドレス計算 | /cidr | ネットワーク設計・確認 |
| ガラポン抽選 | /garapon.html | 職場・イベントでの抽選 |
技術スタックの選定理由
React + TypeScript
型安全にUIを構築でき、コンポーネントの再利用がしやすいため選択しました。
各ツールページは React.lazy による動的インポートで遅延読み込みしており、初期表示を軽くしています。
Tailwind CSS v4
ユーティリティファーストで素早くUIを組めます。
shadcn/ui のデザインシステムをベースにしているため、一貫したデザインを保ちやすい点も採用理由のひとつです。
AWS Amplify Hosting
GitHub連携で main ブランチにpushするだけで自動デプロイされます。
静的サイトのホスティングとして十分な機能があり、カスタムドメイン・SSL証明書の管理もコンソールから完結します。
まとめ
今回は開発者向けツールサイト「tools.tyamon.com」を紹介しました。ポイントは以下の通りです。
- 全ツールがブラウザ完結・データ送信なしで動作
- React + TypeScript + Tailwind CSS + AWS Amplify で構築
- JSON整形・日時変換・QR生成・Base64・Cron・Diff・CIDR計算・ガラポン抽選の8ツールを収録
次のステップ
今後も実務で「あったら便利」なツールを順次追加予定です。
各ツールの詳細な使い方・実装の解説は個別の記事で紹介しています。
コメント