Web ToolBox

更新履歴

💅 UI/UX

  • カラースポイトの色抽出UIを改善しました
    • プレビュー上でクロスヘアと拡大レンズを見ながら色を選べるようにしました
    • 画像上を続けてクリックしながら、必要な色を連続して抽出できるようにしました

英単語カウンター機能強化

英単語カウンターに新機能を追加し、より詳細なテキスト分析が可能になりました。

新機能

  • 読書速度（WPM）設定 - 100〜600の範囲で調整可能。読了時間の計算に反映されます
  • ストップワード除外 - the, is, atなどの機能語を単語出現頻度から除外できるようになりました
  • 大文字小文字の区別オプション - 単語出現頻度で大文字・小文字を区別するか選択可能に。※デフォルトが「区別しない」に変更されました（破壊的変更）。従来の動作が必要な場合はオプションをONにしてください

改善

  • 文の検出精度を向上（Dr.やMr.などの略語、省略符号を正しく処理）
  • UIレイアウトを改善し、カウント結果をグリッド形式で見やすく表示

UIを改善しました

  • 全体的にツールのデザインを改善しました
  • ツールドキュメントのスタイルを調整し、読みやすくしました

✨ 新機能

  • ピクセルアート変換ツールを追加しました
    • 写真やイラストをレトロなドット絵風に変換（2つの変換モードと7段階のサイズ調整）
    • リアルタイムプレビューで設定を変更しながら仕上がりを確認

🚀 インフラの変更

ユーザーの皆さまには直接関わることではないのですが、サイトのインフラをAWS（S3 + Lambda）からCloudflare Workersに移行しました😁

フロントエンドとバックエンドのコードベースが統一できるようになり、開発効率の向上や、これまでにない新しいツールなども提供できるかもしれません。

※皆さまには特別な対応は不要で、これまで通りご利用いただけます。

✨ 機能強化

  • 英単語カウンターの機能強化
    • テキスト分析機能を強化し、さらに詳細な情報を表示するようになりました
    • 段落分析と文分析の項目を追加し、文章構造の把握が容易になりました
  • カラーテーマの強化
    • よりモダンでコントラストの高い、shadcn-ライクなBlackテーマを追加しました

🐛 バグ修正

  • いくつかの軽微なUIの問題を修正し、ユーザーエクスペリエンスを向上させました

✨ 新機能

  • **テキスト行結合ツール**を追加しました
    • 複数行のテキストを一行に結合でき、区切り文字の指定や空行の自動スキップにも対応しています
  • **テキスト重複行除去ツール**を追加しました
    • テキスト内の重複行を削除でき、大文字小文字の区別や空白行の扱いも調整できます

🔧 改善点

  • ツールのカテゴリ分類を見直し、より直感的なナビゲーションを実現
    • 関連性の高いツール同士をグループ化
    • カテゴリラベルの最適化
    • ツール検索機能の精度向上

👀ハイライト

UIフレームワークをNuxt UI v3に更新しました！
更新にともない、サイト全体のコードを見直し、いくつかのツールで内部処理の改善をしています。

また、トップページのデザインをリニューアルしました😊

✨ 新しいツール

数値順・アルファベット順・カスタム順序など様々な条件でテキストを並び替えします。

🔧 改善点

👀ハイライト

✨ CSSフィルタージェネレーターが追加されました

  • CSSフィルタージェネレーター
    • リアルタイムでフィルターの調整結果を確認できます
    • ぼかし、明るさ、コントラスト、彩度などをスライダーで調整できます

✨画像比較スライダーツールを強化

画像比較スライダーツールで、画像の見た目だけでなく、ファイルサイズや更新日時、画像の縦横サイズ等の詳細も簡単に比較できるようになりました！

また、冗長なUIを改善し、より少ないステップでツールを利用できるようになりました。

その他の更新

  • 画像Base64エンコードツールで複数の画像を変換する際のパフォーマンスが向上しました。

✨ 新しいツール

🔥ツールカテゴリを整理

さらに使いやすくするため、新しい「カラーツール」カテゴリを追加しました。このカテゴリでは色に関する便利なツールをまとめてご利用いただけます。また、いくつかのツールを適切なカテゴリに整理し、探しやすさを向上させました。

これからも継続的にツールやカテゴリの改善を行っていきますので、ぜひお試しください！

✨ 新しいツール

  • SVG to CSS
    • SVGデータをCSSのbackground-imageとして使える形式へ変換できます

🔥機能強化

テキストエリアを使用するツールに、新たに「ファイルからの入力」機能を追加しました。これにより、直接テキストを入力するだけでなく、ファイルをアップロードしてその内容を簡単に読み込むことができます。複数のファイルソースに対応しており、効率的なデータ入力が可能になりました！

ポリシーの改定

プライバシーポリシーおよび、免責事項について一部の記載を更新しました。

✨基数変換ツールを改善

基数変換ツールに数値のフォーマット切替オプションを追加しました🎉
2進数と16進数は4桁ごと、8進数は3桁ごとに区切ることができます。これにより数値の読みやすさが向上しました。

その他の変更

  • サイトの様々なUIを改善

ツールの強化✨

利便性向上の理由で、JSON・YAML相互変換ツールをそれぞれの一方への変換を行う2つのツールへ分離しました。

また、JSON to YAMLツールは変換時にいくつかのオプションを指定可能になりました。

その他変更

  • サイト全体のUIを調整
  • ライブラリのアップデート
  • 新しいOGイメージ

✨ 新しいツール

  • テキストDIFFチェッカーを追加しました
    • 2つのテキストを並べて比較し、差分を視覚的に確認できます
    • 文書の変更確認やコードの比較など、細かな違いを見たい場面で使えます
    • 比較処理はブラウザ内で完結するため、入力データを手元でそのまま扱えます

👀 ハイライト

Web ToolBoxのUIフレームワークをVuetifyからNuxtUIへ移行し、サイト全体を大きく見直しました。
見た目だけでなく、操作しやすさや今後の改善・拡張のしやすさも含めて土台から更新しています。

この更新にあわせてコードベースも広く整理し、多くの画面やツールを再構成しました。ここに載せていない細かな改善も含めて、全体の使い勝手を整えています。

🔧 ツールの改善

💖 お気に入り機能を追加

ツールをお気に入り登録できるようになりました。
登録したツールはサイドナビゲーションからすぐに開けるため、よく使うツールへアクセスしやすくなっています。

🎨 テーマ機能を追加（実験的）

サイトのテーマカラーを切り替えられる機能を追加しました。
ヘッダーメニューのカラーパレットから、Indigo、Blue、Green、Emerald、Amber、Slateの6色を選べます。

※テーマ機能は実験的なため、今後内容が変わる可能性があります

✨ 新しいツール

どちらもシンプルに使えるツールで、日常的なテキスト処理やURL確認に役立ちます。

🔧 ツールの改善

  • いくつかのツールで機能や内部処理を見直しました
  • 細かな変更の掲載は整理し、今後は大きな更新をこのページで追いやすくしました

🎨 UIの改善

  • 言語切替メニューから国旗表示を外しました
  • TwitterのアイコンをXへ差し替えました
  • そのほか、サイト全体のUIを細かく調整しました

🐛 バグの修正

  • いくつかのツールと内部処理の不具合を修正しました

画像Base64エンコードツールを改善

画像Base64エンコードツールの出力形式を拡張し、変換後のBase64データを複数のフォーマットで使えるようにしました。

  • Base64生データ
  • Data URI付きBase64データ
  • HTMLのIMGタグ
  • CSSのbackground-imageプロパティ

用途にあわせて形式を選びやすくなり、画像をそのままWeb制作や実装作業へ流用しやすくなっています。
あわせて出力結果まわりのUIや内部処理も見直し、使い勝手とパフォーマンスを改善しました。

デザインの変更

サイト全体のデザインも細かく調整しました。

バグの修正

  • OGP画像シミュレーターツールで正しくOGP画像が描画されない場合がある事象を修正
  • Base64エンコードツールで常にURLセーフ形式の変換となっていたバグを修正
  • そのほか、細かな不具合も修正しました

✨ 新しいツール

色の確認や抽出に使える2つのツールを追加しました。

  • カラースポイト - 画像から色を抽出
    • 画像上の気になる色をスポイトで拾い、そのまま色コードとして確認できるツールです
    • ブラウザのEyeDropper APIを利用しているため一部制限はありますが、画像から色を手早く確認したいときに便利です
  • カラーコード抽出
    • 画像に使われている色をまとめて抽出できるツールです
    • 抽出オプションを調整しながら、画像に含まれる色の傾向をすばやく確認できます

フレームワークのアップグレード

内部的な更新として、利用しているフレームワークも見直しました。

  • フレームワーク(Nuxt)を現時点の最新へアップグレード
  • UIフレームワーク(Vuetify)を現時点の最新へアップグレード

これにより、サイト全体のパフォーマンス向上にもつながっています。

サービス公開以来の最大のアップデート

Web ToolBoxの公開以来でも、特に大きな更新となりました。
これまで積み重ねてきたツール追加や機能改善に加えて、今回はサイト全体の土台から見直しています。

主な変更点は次のとおりです。

  • Nuxt2(Nuxt bridge)からNuxt3へのアップデート
  • Vuetify2からVuetify3へのアップデート
  • 各種ライブラリのアップデート
  • ツールの機能強化・改善
  • パフォーマンスの改善
  • よりユーザーフレンドリーなインタフェース・カラー

大規模アップデートの理由

今回の更新では、Nuxt3やVuetify3への移行を中心に、古くなっていた構成をまとめて見直しました。
新しいバージョンへの追従だけでなく、今後もツールを追加・改善しやすい形へ整えることが目的です。

移行にあたっては破壊的変更も多く、関連ライブラリの更新も含めて大きな作業になりましたが、構成を整理しながらコードベースを全面的に見直すことで、使いやすさとパフォーマンスの両方を改善できました。

今回は新しいツールの追加はありませんが、今後に向けた土台づくりとして大きな節目になる更新です。
追加したいツールやいただいているリクエストもあるため、今後も少しずつ拡充していく予定です。