概要
開発中に必要になる変換、整形、生成、検証などの小さな作業を、ブラウザ上ですぐに実行できる 「DevToys Web」を公開しました。
インストールやアカウント登録は不要です。PCへ専用アプリを導入しにくい環境でも、Webブラウザ さえあれば利用できます。
DevToys Webとは
DevToys Webは、開発者が日常的に使う小さなユーティリティを1つのサイトへまとめたWeb アプリケーションです。
2022年にNext.jsで作成したDevToys風Webアプリを刷新し、現在は12カテゴリ、 全74種類のツールを日本語・英語で提供しています。
トップページの検索欄やカテゴリから目的のツールを選べるほか、⌘KまたはCtrl+Kで
コマンドパレットを開いて、ツール名やキーワードから素早く移動できます。ライト・ダーク
テーマ、最近使ったツールの表示、作業領域の最大化にも対応しています。
主なツール
すべてを紹介すると長くなるため、ここでは代表的なものを挙げます。
| カテゴリ | ツールの例 |
|---|---|
| 変換 | cURL・コード変換、JSON ↔ CSV、YAML ↔ JSON、基数・単位・Unix時間変換 |
| エンコード | Base64、URL、HTMLエスケープ、JWT署名検証、HMAC生成 |
| 整形 | JSON、SQL、XML、YAML、CSS、HTML |
| 生成 | UUID・ULID、テストデータ、パスワード、ハッシュ、QRコード |
| テスト | JavaScript・TypeScript実行、正規表現、JSONPath・Schema、XPath、glob |
| テキスト | 文字化け復元、ケース変換、Diff、Markdownプレビュー、Mermaidエディタ |
| 画像 | リサイズ・圧縮、形式変換、PNG透過、HEIC変換、EXIF確認・削除 |
| ネットワーク | サブネット・CIDR計算、URL解析、DNS・TLS・HTTP診断、WHOIS、SEOチェック |
このほかにも電卓、タイマー、世界時計、Google・GitHub・Gmailの検索条件ビルダー、 カメラや位置情報など、用途の異なるツールをまとめています。
用途別のおすすめ
ツール数が多いため、利用場面から逆引きすると見つけやすくなります。
| やりたいこと | 最初に試すツール |
|---|---|
| APIのレスポンスを読みやすくしたい | JSON Formatter、JSON ↔ YAML |
| curlをアプリケーションコードへ移したい | cURL Converter |
| JWTの内容や署名を確認したい | JWT Decoder / Signature Verifier |
| ログの時刻を現地時間へ直したい | Unix Time Converter |
| CIDRの範囲を確認したい | Subnet Calculator |
| 2つの設定ファイルの差分を見たい | Text Diff |
| 画像を共有前に軽くしたい | Image Resize / Compress、EXIF Remover |
| READMEの図を調整したい | Markdown Preview、Mermaid Editor |
検索欄はツール名だけでなく関連キーワードでも絞り込めます。頻繁に使うツールは個別URLを ブックマークしておくと、トップページを経由せずに開けます。
使い方
基本的な使い方は、目的のツールを開いて入力欄へ値を貼り付けるだけです。
たとえばJSON整形では、圧縮されたJSONを入力すると読みやすい形式へ整形できます。Base64や URLのエンコード・デコード、YAMLとJSONの相互変換なども、同じように入力と結果を並べて確認し、 結果をコピーボタンで取得できます。
ツールごとに独立したURLがあるため、よく使うページをブックマークしたり、チーム内でリンクを 共有したりする使い方もできます。
コマンドパレットから開く
⌘KまたはCtrl+Kを押すと、現在のカテゴリに関係なくツールを検索できます。マウス操作を
減らしたい場合や、ツール名の一部だけ覚えている場合に便利です。検索結果はキーボードで
移動し、Enterで開けます。
入力と出力を切り分ける
変換系ツールは、入力を変更して結果を確認し、問題がなければコピーボタンで取得する流れに 統一しています。エラーの場合は処理を止め、入力のどこを確認すべきか表示します。元データを 直接書き換えないため、変換前後を比較しながら試せます。
ブラウザ内で完結する処理
文字列の変換や整形、画像処理など、多くの機能はブラウザ内で実行します。入力したデータを 変換のたびにサーバーへ送らずに利用できるため、待ち時間が少なく、手元のデータを扱いやすい 構成です。
一方、DNS・TLS・HTTP診断、WHOIS、OGP・SEOチェック、JWT署名検証など、外部アクセスや サーバー側の処理が必要な機能はAPIを利用します。秘密情報を含むデータを扱う場合は、各ツールの 性質を確認したうえで利用してください。
秘密情報を扱う前に確認する
「ブラウザで動く」ことと「必ず外部送信されない」ことは同じではありません。次の順番で 判断してください。
- 対象ツールの説明でAPI利用の有無を確認する
- JWT、秘密鍵、アクセストークン、本番データは可能ならダミーへ置き換える
- 画像は位置情報などのEXIFを含む可能性を考慮する
- 組織のセキュリティポリシーで外部サイトへの貼り付けが許可されているか確認する
Base64は暗号化ではありません。エンコード後の文字列も元データと同じ機密度として扱います。
技術構成
DevToys Webは、次のような構成で開発しています。
- フロントエンド: Next.js App Router、React、TypeScript
- UI: Tailwind CSS、shadcn/ui
- API: Hono、AWS Lambda
- ホスティング: Amazon S3、CloudFront
- インフラ管理: AWS CDK
- モノレポ管理: pnpm、Turborepo
フロントエンドは静的サイトとして出力し、S3とCloudFrontから配信しています。サーバー処理が 必要な機能だけをLambda APIへ分離することで、多くのツールを軽量なクライアントサイド処理 として提供しています。
フロントエンドとAPIの分離
DevToys Webでは、ツールの大半を静的なフロントエンドへ置き、ネットワークアクセスが必要な 機能だけをHono APIへ分離しています。
Browser
├─ 文字列変換・画像処理 ──> ブラウザ内で完結
└─ DNS / TLS / WHOIS等 ──> CloudFront /api/* ──> Lambdaこの分離により、すべての操作をサーバーへ送る構成よりレスポンスを速くし、APIの運用範囲を 限定できます。APIの入出力は共有スキーマで検証し、想定外のレスポンスを画面へそのまま 渡さないようにしています。
ローカル開発とAPIモック
リポジトリはpnpm workspaceとTurborepoでWeb、API、共有パッケージ、CDKを管理しています。
git clone https://github.com/s-yoshiki/DevToysWeb.git
cd DevToysWeb
pnpm install
pnpm devDNS・TLS・HTTP診断などは、本物の外部サービスをテストから呼ばず、MSWのモックで正常系と 異常系を再現できます。
pnpm --filter @devtoys/web dev:mock到達不能、リダイレクト後の404、メタタグ不足、プライベートIPに対するSSRFガードなどを 決められたfixtureで確認します。外部ネットワークの状態にテスト結果を左右されないことが 狙いです。
デプロイ構成
静的サイトは非公開S3バケットへ配置し、CloudFrontから配信します。/api/*だけをLambda
Function URLへ転送し、CDKでdev/prdの構成を管理しています。
- CloudFront用証明書は
us-east-1へ分離 - GitHub ActionsはOIDCでAWSロールを引き受ける
- 長期アクセスキーをGitHubへ保存しない
- mainへのpushは検証後にprdへデプロイ
- 静的コンテンツだけを更新するworkflowも用意
インフラ更新とコンテンツ更新を分けることで、小さな文言変更のたびに全CDKスタックを 更新しなくて済むようにしています。
制限事項
- ブラウザのメモリへ載らない巨大ファイルの処理には向きません
- APIを使う診断系ツールはネットワーク障害や対象サイトの制限を受けます
- 変換結果は必ず利用先の仕様と照合してください
- 暗号・パスワード関連ツールの出力だけでシステム全体の安全性は保証できません
- ブラウザ拡張や端末管理ポリシーによってClipboard、Camera等が利用できない場合があります
フィードバックとコントリビューション
不具合を報告する際は、利用したツール名、入力を再現できる最小データ、期待した結果、実際の 結果、ブラウザ情報を添えてください。機密情報はIssueへ貼らず、同じ問題を再現できるダミーへ 置き換えます。
ソースコードはGitHubで公開しています。不具合報告や新しいツールの提案があれば、Issueや Pull Requestからお知らせください。
まとめ
DevToys Webは、形式変換のために毎回スクリプトを書いたり、用途ごとに別のサイトを探したり する手間を減らすための道具箱です。
日々の開発で「少しだけ変換したい」「すぐに確認したい」という場面があれば、ぜひ DevToys Webを試してみてください。
