1. はじめに
こんにちは、私は沙漠尽头的狼です。
Dotnet工具箱は、純粋なフロントエンドで構成された、オープンソースかつ無料のツールサイトです。週末に、オープンソースプロジェクトit-toolsを参考にして、サイトのUIテキストを日本語にローカライズし、サイトを再デプロイしました。このサイトは10のツールカテゴリに分類され、73個のリアルタイムオンラインツールを提供しています。Vue3で開発されたDotnet工具箱は独自の特徴を持ち、本記事ではその中でも特に注目すべきツールを詳しく紹介し、自身のツールサイトをデプロイする簡単な方法も共有します。ツールサイトに興味のある方は、ぜひDotnet工具箱をチェックしてみてください。
Dotnet工具箱で利用可能なツール一覧:

Dotnet工具箱とit-toolsプロジェクトについて
Dotnet工具箱リポジトリ(it-toolsベース):https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnetools
it-toolsリポジトリ:https://github.com/CorentinTh/it-tools
it-toolsライセンス:GPL-3.0 license
it-toolsオンラインツール:https://it-tools.tech/

本記事執筆時点では、Dotnet工具箱はit-toolsプロジェクトのUIテキストを日本語に翻訳しただけであり、今後は必要に応じてプロジェクトの規約に従い拡張開発を行う予定です。興味のある方は以下をご参照ください。
it-tools開発への参加:https://github.com/CorentinTh/it-tools
Dotnet工具箱開発への参加:https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnetools
Dotnet工具箱の日本語翻訳の修正、Issueの報告、PRの提出はこちら:https://github.com/dotnet9/Dotnet9
2. ツールの紹介
10のツールカテゴリから一部を抜粋し、各カテゴリの一部を紹介します。
2.1. 暗号化・復号化
暗号化・復号化カテゴリには11個のツールがあります。
2.1.1. トークン・ランダムパスワード生成
オンラインツールURL:https://dotnetools.com/token-generator
カスタム長さで、大文字・小文字、数字、記号を含むランダムな文字列を生成します。

2.1.2. ハッシュテキスト生成
オンラインツールURL:https://dotnetools.com/hash-text
MD5、SHA1、SHA256、SHA224、SHA512、SHA384、SHA3、RIPEMD160などのハッシュ関数を使用して、テキスト文字列をハッシュ化します。

2.1.3. テキスト暗号化・復号化
オンラインツールURL:https://dotnetools.com/encryption
AES、TripleDES、Rabbit、RC4などの暗号化アルゴリズムを使用して、プレーンテキストを暗号化・復号化します。

2.1.4. RSA鍵ペア生成
オンラインツールURL:https://dotnetools.com/rsa-key-pair-generator
新しいランダムなRSA秘密鍵と公開鍵(PEM証明書)を生成します。

2.1.5. パスワード強度分析器
オンラインツールURL:https://dotnetools.com/password-strength-analyser
クライアントサイドのみで動作するパスワード強度分析ツールと、パスワード破壊時間推定ツールを使用して、パスワードの強度を確認します。

2.2. 変換ツール
変換ツールカテゴリには15個のツールがあります。
2.2.1. 日時変換
オンラインツールURL:https://dotnetools.com/date-converter
日付と時刻をさまざまな形式に変換します。

2.2.2. 進数変換
オンラインツールURL:https://dotnetools.com/base-converter
2進数、6進数、10進数などの一般的な進数間の変換に加え、50進数、100進数などカスタム進数への変換も可能です。

2.2.3. Base64文字列エンコード/デコード
オンラインツールURL:https://dotnetools.com/base64-string-converter
文字列をBase64表現にエンコード、またはデコードします。

2.2.4. Base64ファイル変換
オンラインツールURL:https://dotnetools.com/base64-file-converter
文字列、ファイル、画像をBase64表現に変換します。
- Base64文字列を貼り付けてファイルとしてダウンロード
- ファイルをアップロードしてBase64文字列を生成しコピー

2.2.5. 色変換
オンラインツールURL:https://dotnetools.com/color-converter
色を異なる形式間(hex, rgb, hsl, CSS名)で変換します。フロントエンド開発(Web、デスクトップ、モバイル)でよく使用されます。

2.2.6. JSON → YAML 変換
オンラインツールURL:https://dotnetools.com/json-to-yaml-converter
JSONをYAMLに変換するオンラインツールです。類似ツールとして YAML→JSON変換、YAML→TOML変換、JSON→TOML変換、リストデータ変換、TOML→JSON変換、TOML→YAML変換も用意されています。

2.3. Webツール
Webツールカテゴリには15個のツールがあります。
2.3.1. URL文字列エンコード/デコード
オンラインツールURL:https://dotnetools.com/url-encoder
URLエンコード形式(パーセントエンコーディング)へのエンコード、またはデコードを行います。

2.3.2. HTMLエンティティ変換
オンラインツールURL:https://dotnetools.com/html-entities
HTMLエンティティのエスケープまたはアンエスケープ(<, >, &, ", ' を対応するHTMLバージョンに置き換え)を行います。主にバックエンドからフロントエンドにWebコンテンツを渡す際に、特殊記号をエスケープする必要がある場合に使用します。

2.3.3. URL解析
オンラインツールURL:https://dotnetools.com/url-parser
URL文字列を解析し、プロトコル、オリジン、パラメータ、ポート、ユーザー名・パスワードなど、すべての部分を取得します。

2.3.4. デバイス情報
オンラインツールURL:https://dotnetools.com/device-information
現在のデバイスに関する情報(画面サイズ、ピクセル比、ユーザーエージェントなど)を取得します。

2.3.5. スラッグ文字列変換
ツール説明:文字列をURL、ファイル名、IDとして安全な形式に変換します。
スラッグの重要性については、「スラッグとは何か?SEOにおける重要性」を参照してください。
スラッグはキーワードSEOにおいて非常に強力です。ユーザーがGoogleで「スラッグとは」を検索した場合、コンテンツのURL構造にキーワードが含まれていることで、そのコンテンツがSERPに含まれるべきであるというシグナルをGoogleに送ります。適切なスラッグがページの内容を明確に示すことで、ユーザー体験が向上します。
本記事でもスラッグ文字列変換ツールを使用しています。スクリーンショットは以下の通りです。

手順:
- 百度翻訳で記事タイトル「Dotnet工具箱:开源、免费的纯前端工具网站,带你探索10大工具分类和73个实时在线小工具」を英訳します。
- 得られた英訳「Dotnet Toolbox: Open source, free pure front-end tool website that takes you to explore 10 major tool categories and 73 real-time online small tools」をスラッグ文字列変換ツールの「変換対象文字列」に入力します。
- 「スラッグをコピー」ボタンをクリックし、変換されたスラッグ文字列を本記事のMarkdownファイルに貼り付けます。ファイル名も変換されたスラッグ(例:
[スラッグ].md)にします。 - スラッグを使用して本記事にアクセス: https://dotnet9.com/2023/10/dotnet-toolbox-open-source-free-pure-front-end-tool-website-that-takes-you-to-explore-10-major-tool-categories-and-73-real-time-online-small-tools
2.3.6. HTTPステータスコード
オンラインツールURL:https://dotnetools.com/http-status-codes
すべてのHTTPステータスコードの一覧と、その名前と意味を表示します。

2.3.7. JSON差分比較
オンラインツールURL:https://dotnetools.com/json-diff
2つのJSONオブジェクトを比較し、それらの差分を取得します。

2.4. 画像と動画
4個のツールがあります。
2.4.1. QRコード生成
オンラインツールURL:https://dotnetools.com/qrcode-generator
URLやテキスト用のQRコードを生成・ダウンロードできます。背景色と前景色をカスタマイズ可能です。

上記の操作で生成されたQRコードです。微信でスキャンするとDotnet工具箱サイトが開きます。

2.4.2. SVGプレースホルダー生成
オンラインツールURL:https://dotnetools.com/svg-placeholder-generator
アプリケーション内でプレースホルダーとして使用するSVG画像を生成します。主にWebサイトで画像が読み込まれる前のプレースホルダーとして利用されます。

2.4.3. カメラレコーダー
オンラインツールURL:https://dotnetools.com/camera-recorder
Webカメラやカメラから写真を撮影したり、動画を録画したりします。

2.5. 開発ツール
開発ツールカテゴリには10個のツールがあります。
2.5.1. Crontab生成
オンラインツールURL:https://dotnetools.com/crontab-generator
crontabを検証・生成し、cronスケジュールの人間可読な説明を取得します。

2.5.2. JSON整形・フォーマット
オンラインツールURL:https://dotnetools.com/json-prettify
JSON文字列を人間に優しい可読形式に整形します。対応ツールとしてJSON圧縮ツールもあります。

2.5.3. SQL整形・フォーマット
オンラインツールURL:https://dotnetools.com/sql-prettify
SQLクエリをオンラインで整形・フォーマットします(さまざまなSQL方言に対応)。

2.5.4. Docker compose変換
オンラインツールURL:https://dotnetools.com/docker-run-to-docker-compose-converter
docker runコマンドをdocker-composeファイルに変換します。

2.5.5. XML整形
オンラインツールURL:https://dotnetools.com/xml-formatter
XML文字列を人間に優しい可読形式に整形します。

2.x. その他のカテゴリ
ツールが多く、すべてを紹介するのは紙面の都合上難しいため、興味のある方はDotnet工具箱 - 開発者のための便利なオンラインツール (dotnetools.com) を訪れてご利用ください。
3. 独自のツールサイトの開発とデプロイ
it-toolsはオープンソースプロジェクトであり、サイト運営者はこれをベースに自身のDotnet工具站を開発・デプロイしました。もちろん、皆さんもit-toolsやDotnet工具站をベースに、独自のツールサイトを開発・デプロイすることができます。ぜひ試してみてください。
3.1. 簡単なデプロイ
it-toolsプロジェクトのREADMEには、プロジェクトに関する詳細な説明やDockerによるサイトデプロイ手順が記載されています。以下は、サイト運営者がDotnet工具箱をパッケージ化・デプロイする際の簡単な手順です。
- プロジェクトをクローン:https://github.com/dotnet9/Dotnet9
- Dotnet工具箱のディレクトリに移動:
./src/Dotnetools - フロントエンド開発に必要な環境をインストール:Node.js
- ターミナルで依存関係をインストール:
npm install - ターミナルでビルド:
npm run build - 公開ディレクトリをサーバーにコピーして完了です。
3.2. 独自ツールの修正または拡張
各ツールのソースコードは ./src/Dotnetools/src/tools/ にあります。

tools ディレクトリ内でツールのディレクトリを追加・削除した場合は、src\tools\index.ts ファイルを修正する必要があります。このファイルでツールディレクトリの一覧を管理しています。

3.3. 翻訳について
一部のツールは多言語ローカライゼーションに対応しており、以下の図のように src\tools\token-generator で言語を追加・管理できます。

src\plugins\i18n.plugin.ts でローカライゼーションに使用する言語を設定します。

しかし、ほとんどのツールは多言語に対応していないため、xx.vue または xxx.ts で直接言語を変更できます(例:src\tools\http-status-codes\http-status-codes.vue)。

Dotnet工具站 の一部の翻訳には問題が含まれている可能性があります。皆さんからのPRによる修正を歓迎します。
4. まとめ
これらのツールはサイト運営者がすべてテスト済みです。安心してご利用ください。ソースコードが気になる方はPRを提出してください。笑。
自宅待機期間中に時間が多くありましたが、翻訳に誤りがあるかもしれません。皆さんのメンテナンス参加をお待ちしています。
it-tools開発への参加:https://github.com/CorentinTh/it-tools
Dotnet工具箱開発への参加:https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnetools
Dotnet工具箱の日本語翻訳の修正、Issueの報告、PRの提出はこちら:https://github.com/dotnet9/Dotnet9
技術交流やグループ参加については、サイト運営者の微信ID:codewf までご連絡ください。