新しく「CSSフィルタージェネレーター」ツールがWeb ToolBoxに登場しました！
リアルタイムでフィルターの調整結果を確認でき、ぼかしや明るさ、コントラスト、彩度など多彩なオプションに対応しています。
スライダー操作で簡単に設定を変更でき、生成されたCSSコードをすぐにコピーして活用できます。
画像比較スライダーツールで、画像の見た目だけでなく、ファイルサイズや更新日時、画像の縦横サイズ等の詳細も簡単に比較できるようになりました！
また、冗長なUIを改善し、より少ないステップでツールを利用できるようになりました。
Webアクセシビリティ向上に欠かせない「カラーコントラストチェッカー」を新たに追加しました。テキストと背景色のコントラスト比を瞬時に計算し、WCAG 2.0基準に準拠しているかを確認できます。デザインのアクセシビリティを簡単にチェックしましょう！
さらに使いやすくするため、新しい「カラーツール」カテゴリを追加しました。このカテゴリでは色に関する便利なツールをまとめてご利用いただけます。また、いくつかのツールを適切なカテゴリに整理し、探しやすさを向上させました。
これからも継続的にツールやカテゴリの改善を行っていきますので、ぜひお試しください！
基数変換ツールに数値のフォーマット切替オプションを追加しました🎉
2進数と16進数は4桁ごと、8進数は3桁ごとに区切ることができます。これにより数値の読みやすさが向上しました。
新しく「OGPタグジェネレーター」ツールを追加しました。
簡単にOGPタグを生成し、SNSでの見栄えを最大限に引き出せます。SEO効果も向上させるこのツールで、ウェブページの魅力をさらにアップグレードしましょう！
新しく「YouTubeサムネイルダウンローダー」ツールを追加しました。
お気に入りのYouTube動画からサムネイル画像を簡単に取得できます！
ヘッダーにツール検索機能を追加しました。全てのツールから目的のツールを簡単に探すことが出来ます！
新しく「JSON to CSV」ツールを追加しました。JSON形式のデータを簡単にCSVへ変換できます！
テキストDIFFチェッカーを追加しました！
2つのテキスト間の差分を簡単に比較し、変更点を視覚的に確認することができます。
また、比較処理はブラウザ上で完結するため入力されたデータのプライバシーとセキュリティが確保されています。
文書の変更履歴を追跡したり、コードの比較を行ったりする際に便利です。ぜひお試しください！
昨年以来のWeb ToolBoxの大規模な更新🙂
これまで更新履歴に記載をしていない細かなアップデートは続けてきましたが、この度大幅なアップデートを行いました。
Web ToolBoxはこれまでUIフレームワークとしてVuetifyを使用してきました。今回Web ToolBoxのコードを書き直し、Vuetifyから新しくNuxtUIへ置き換えました。
Web ToolBoxではVuetifyをv2の頃から使用して開発を行ってきました。Vuetifyを使用すれば必要なコンポーネントのほとんどは賄うことができ、また一つ一つのコンポーネントの完成度も高く、メンテナンスも継続されており、率直に言って大きな動機を伴ってVuetifyを外す理由はあまりありませんでした。
しかしながら、Web ToolBoxをよりカスタマイズ性と柔軟性を高めつつ開発を続けていくためにVuetifyを使い続けるのが少し困難になってきたという事実があります。
私は普段仕事ではTailwindCSSをよく使用していることもあり、今回TailwindCSSベースのNuxtUIへリプレイスしました。
NuxtUIへのリプレイスに伴い、Web ToolBoxのほとんどを書き直し、同時にいくつかのツールで機能追加・改善を行いました（下記にないツールでも細かな修正・改善を実施）
サジェストキーワード抽出ツールでサジェスト検索を行う際に言語コードを指定出来るようになりました。
同じキーワードでも言語コードを変えることで異なる結果になるため、より適した検索結果を取得することが出来ます。
OGPチェッカー、OGP画像シミュレーターで確認可能なOGP画像プレビューをXの最新のデザインへ対応しました！
XのOGPプレビューではライト、ダークブルーのテーマの他にダークテーマでもプレビュー可能に改善しました。
文字数カウンター、英単語カウンターのUIを改善し、カウント結果がより見やすくなりました。
また、バイト数のカウントにも対応しました。
ドラッグ&ドロップによるファイルのアップロードに対応しました。
ツールをお気に入りに登録できる機能を追加しました。お気に入り登録することでサイドナビゲーション上に、該当のツールにすぐにアクセスできるリンクが追加されます！お気に入りの追加・解除はいつでも自由にできます。
（※ ここでのお気に入りはブラウザのブックマークのことではありません）
Web ToolBoxのテーマを変更できる機能を追加しました。Web ToolBoxのプライマリカラーは藍色(Indigo)ですが、その他の色へ変更することが可能です。
ヘッダーメニューのカラーパレットから変更できます（現時点でIndigo, Blue, Green, Emerald, Amber, Slateの6色）
※テーマ機能は実験的なもので今後削除されることもありえます
新しくULIDジェネレーターを追加しました。ULID(Universally Unique Lexicographically Sortable Identifier)はタイムスタンプとセキュアなランダムビットを組み合わせて生成するユニークIDで、本ツールにより簡単に一括生成することが出来ます。
抽出対象の見出しタグを指定できるようになりました。
画像Base64エンコードツールの機能改善を行いました。
変換後のBase64データを以下の複数のフォーマットで出力可能になりました
これにより、ツールの利便性がさらに向上しました。また、この変更とともに出力結果のUIの調整および処理のリファクタリングを行いツールのパフォーマンスも向上しています。
サイト全体に渡り、多数の比較的軽微なデザインの調整を行いました。
カラーコードに関係する新しい2つのツールを追加しました。
カラースポイトツールは画像からスポイトツールを使用して特定の色を抽出できるツールです。
スポイトツールはブラウザのEyeDropper APIを使用して実現しているため、いくつかの制限事項がありますが、お気に入りの画像から簡単に色を特定し抽出することができます😄
カラーコード抽出ツールは画像に使われている色（色コード）を一括で抽出できるツールです。
高度な抽出オプションとともに、簡単で高速に鮮やかな色を抽出することができます🎨
※内部的な更新。
これにより、サイトのパフォーマンスも向上しています⚡
Web ToolBoxはサービス公開以来、ありがたいことに多くの人に使われてきました。現在まで様々なツールの追加、機能改善、バグフィックス等々アップデートを重ねてきましたが、今回大規模なアップデートを行い公開することができたことを嬉しく思います。
具体的には以下の更新を行いました。
まず、Nuxt3やVuetify3が正式にリリースされたためです。これらフレームワークの新しいバージョンではパフォーマンスの改善や新機能の追加、脆弱性の修正、その他様々な変更が行われます。Web ToolBoxは常に最新の技術を採用することを目指しているため、新しいバージョンへのアップデートが必要でした。
また、Web ToolBoxの規模が拡大したため、より高度な開発作業を行う必要がありました。新しいフレームワークやライブラリを採用することで、Web ToolBoxの開発がより効率的になり、拡張性が向上しました。
とはいえ、今回のアップデートは困難なものでした。。Nuxt、Vuetifyともにバージョンアップにともなう破壊的変更が多く、関連するライブラリもあわせて旧バージョンから新しいバージョンへのアップグレードは複雑な作業であり、多くの時間を必要としました。
そのため、Web ToolBoxの構成を見直しコードをゼロから書き直すことでこのようなアップデートを成功させることができました。結果として、新しいWeb ToolBoxはより使いやすく、パフォーマンスも向上しています。
以上のように、Web ToolBoxの大規模なアップデートが必要になった理由は、技術の進歩や規模の拡大など様々な要因があります。Web ToolBoxは、常に最新の技術を取り入れ、より優れたツールを提供することを目指しているため、今後も継続的にアップデートを行っていく予定です。
今回は新しいツールの追加はありませんが、、
追加したいツールは多数あり、またツールリクエストも複数いただいていることもあるため遠くないうちに新ツールの追加を考えています😉
