🛠️

開発者向けに30のWebツールを詰め合わせた、ツール集サイト「Easegis Tools」を作成しました

に公開
Web
個人開発
ツール
idea

はじめに

普段10サイトぐらいお気に入り登録してWebツールを利用させてもらっていたんですが、
新しいツールが見つかるたびにお気に入りが増えていくのも面倒だなぁと思っていたので、
じゃぁ作っちゃえということで、開発ツールを1つのサイトにまとめた「Easegis Tools」を作りました。

この記事では、このツール集サイトの技術スタックや特徴的な機能について解説します。

デモ

搭載ツール

テキストツール 画像・デザインツール カラーツール
------------------- ------------- --------------
テキストエンコーダー/
デコーダー		 画像リサイズ カラーバリエーション
テキストカウンター 画像圧縮 カラースケール生成
ケース変換 背景削除 カラースキーム生成
Lorem Ipsum生成 SVG変換 画像カラーピッカー
テキストハイライター スプライト生成 コントラストチェッカー
テキスト要約 SVGパターン生成 グラデーション生成
改行変換 フォントペアリング シャドウ生成
デバイスモックアップ
コード・開発ツール ネットワーク・URLツール セキュリティツール
------------------- ------------- --------------
JSON整形 QRコード生成 JWTデコーダー
XML変換 URL短縮
Markdown変換 CIDR計算
ダミーデータ生成

技術スタック

Next.js
Firebase Hosting
Github Actions

masterブランチへのpushでGithub ActionsへCI/CDを実行する構成です。
Firebaseはライトにサービスの配信ができるのでだいぶ速くて楽ですね。

※Next.jsのSSGで配信することで、高速に表示されるので最近はかなりお気に入りです。

一押しツール

[カラーバリエーション]

見た目が面白いです。
色をグリグリ変えて遊べます。

[CIDR計算]

ipの範囲とSubnetの範囲をビジュアルで確認できます。

[デバイスモックアップ]

広告用の画像作成にどうぞ。
※今後複数画像に対応予定です。

その他こだわり

  • API無しで動作します　安心して画像などご利用ください
    ※アクセス情報収集のため、使用統計のみGoogle Analyticsで収集しています
  • デザイン面は簡素ながらポップな感じにしました

今後の拡張予定

  • より多くのツール追加（50種類以上を目標）
  • 既存ツールの使いやすさ向上
  • 多言語対応

まとめ

「Easegis Tools」の簡単な説明と実装の工夫を解説しました。
今後個別機能についても紹介記事を上げていきたいと思います。

便利に使っていただけると嬉しいです！
改善要望やこんなツールも欲しいなどあればご意見ください！

Discussion