Web ToolBox

更新履歴

👀ハイライト

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

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

✨新しいツール

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

🔧 改善点

👀ハイライト

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

新しく「CSSフィルタージェネレーター」ツールがWeb ToolBoxに登場しました！
リアルタイムでフィルターの調整結果を確認でき、ぼかしや明るさ、コントラスト、彩度など多彩なオプションに対応しています。
スライダー操作で簡単に設定を変更でき、生成されたCSSコードをすぐにコピーして活用できます。

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

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

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

その他の更新

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

✨新しいツール

Webアクセシビリティ向上に欠かせない「カラーコントラストチェッカー」を新たに追加しました。テキストと背景色のコントラスト比を瞬時に計算し、WCAG 2.0基準に準拠しているかを確認できます。デザインのアクセシビリティを簡単にチェックしましょう！

🔥ツールカテゴリを整理

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

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

✨新しいツール

新しく「SVG to CSS」ツールを追加しました。
SVGデータをCSSのbackground-imageプロパティとして利用できる形式へ瞬時に変換します！

🔥機能強化

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

ポリシーの改定

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

✨新しいツール

新しく「HTMLエスケープ・アンエスケープ」ツールを追加しました。
HTMLに含まれる特殊文字を簡単にエスケープできます！また、エスケープされたテキストをアンエスケープして復元できます。

その他の変更

  • ツール機能に影響しないいくつかの修正および改善

✨基数変換ツールを改善

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

その他の変更

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

✨新しいツール

新しく「OGPタグジェネレーター」ツールを追加しました。
簡単にOGPタグを生成し、SNSでの見栄えを最大限に引き出せます。SEO効果も向上させるこのツールで、ウェブページの魅力をさらにアップグレードしましょう！

✨新しいツール

新しく「CSS Cursor ビューア」ツールを追加しました。
CSSのcursorプロパティを一覧で確認でき、簡単にプロパティとしてコピー可能です！

その他

  • 細かなUIを調整

✨新しいツール

新しく「JSON to CSV」ツールを追加しました。JSON形式のデータを簡単にCSVへ変換できます！

ツールの強化✨

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

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

その他変更

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

新しいツール✨

テキストDIFFチェッカーを追加しました！
2つのテキスト間の差分を簡単に比較し、変更点を視覚的に確認することができます。
また、比較処理はブラウザ上で完結するため入力されたデータのプライバシーとセキュリティが確保されています。

文書の変更履歴を追跡したり、コードの比較を行ったりする際に便利です。ぜひお試しください！

2024-05-04

🎉VuetifyからNuxtUIへ

昨年以来の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画像シミュレーターで確認可能なOGP画像プレビューをXの最新のデザインへ対応しました！
XのOGPプレビューではライト、ダークブルーのテーマの他にダークテーマでもプレビュー可能に改善しました。

✨文字数カウンター、英単語カウンターを改善

文字数カウンター、英単語カウンターのUIを改善し、カウント結果がより見やすくなりました。
また、バイト数のカウントにも対応しました。

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

ドラッグ&ドロップによるファイルのアップロードに対応しました。

💖ツールのお気に入り機能を追加

ツールをお気に入りに登録できる機能を追加しました。お気に入り登録することでサイドナビゲーション上に、該当のツールにすぐにアクセスできるリンクが追加されます！お気に入りの追加・解除はいつでも自由にできます。
（※ ここでのお気に入りはブラウザのブックマークのことではありません）

🎨テーマ機能を追加(実験的)

Web ToolBoxのテーマを変更できる機能を追加しました。Web ToolBoxのプライマリカラーは藍色(Indigo)ですが、その他の色へ変更することが可能です。
ヘッダーメニューのカラーパレットから変更できます（現時点でIndigo, Blue, Green, Emerald, Amber, Slateの6色）

※テーマ機能は実験的なもので今後削除されることもありえます

2023-11-27

✨新しいツール

新しくULIDジェネレーターを追加しました。ULID(Universally Unique Lexicographically Sortable Identifier)はタイムスタンプとセキュアなランダムビットを組み合わせて生成するユニークIDで、本ツールにより簡単に一括生成することが出来ます。

🔧ツールの改善

抽出対象の見出しタグを指定できるようになりました。

♻️リファクタリング

  • いくつかのツールにおいて内部処理のリファクタリング

2023-11-11

✨新しいツール

新しいツールを2つ追加しました。シンプルですがどちらも便利なツールとなっています。

🔧ツールの改善

いくつかのツールで軽微な機能の改善を行いました。
（開発負荷軽減のため、ツールごとの更新履歴は削除しました。既存ツールの大きな変更はこちらに載せる予定です）

🎨UIの改善

言語切替メニューから国旗を削除しました（様々な理由から言語と国旗は結びつけるべきではないと判断しました）
TwitterのアイコンをXへ差し替えました🤔

その他、サイト全体にわたりUIの調整を行いました😀

🐛バグの修正

いくつかのツールや内部処理で存在していたバグを修正しました。

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

画像Base64エンコードツールの機能改善を行いました。
変換後のBase64データを以下の複数のフォーマットで出力可能になりました

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

これにより、ツールの利便性がさらに向上しました。また、この変更とともに出力結果のUIの調整および処理のリファクタリングを行いツールのパフォーマンスも向上しています。

デザインの変更

サイト全体に渡り、多数の比較的軽微なデザインの調整を行いました。

バグの修正

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

Web Toolbox Next

新規ツールの追加✨

カラーコードに関係する新しい2つのツールを追加しました。

カラースポイト - 画像から色を抽出

カラースポイトツールは画像からスポイトツールを使用して特定の色を抽出できるツールです。
スポイトツールはブラウザのEyeDropper APIを使用して実現しているため、いくつかの制限事項がありますが、お気に入りの画像から簡単に色を特定し抽出することができます😄

カラーコード抽出

カラーコード抽出ツールは画像に使われている色（色コード）を一括で抽出できるツールです。
高度な抽出オプションとともに、簡単で高速に鮮やかな色を抽出することができます🎨

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

※内部的な更新。

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

これにより、サイトのパフォーマンスも向上しています⚡

Web Toolbox Next

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

Web ToolBoxはサービス公開以来、ありがたいことに多くの人に使われてきました。現在まで様々なツールの追加、機能改善、バグフィックス等々アップデートを重ねてきましたが、今回大規模なアップデートを行い公開することができたことを嬉しく思います。

具体的には以下の更新を行いました。

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

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

まず、Nuxt3やVuetify3が正式にリリースされたためです。これらフレームワークの新しいバージョンではパフォーマンスの改善や新機能の追加、脆弱性の修正、その他様々な変更が行われます。Web ToolBoxは常に最新の技術を採用することを目指しているため、新しいバージョンへのアップデートが必要でした。

また、Web ToolBoxの規模が拡大したため、より高度な開発作業を行う必要がありました。新しいフレームワークやライブラリを採用することで、Web ToolBoxの開発がより効率的になり、拡張性が向上しました。

とはいえ、今回のアップデートは困難なものでした。。Nuxt、Vuetifyともにバージョンアップにともなう破壊的変更が多く、関連するライブラリもあわせて旧バージョンから新しいバージョンへのアップグレードは複雑な作業であり、多くの時間を必要としました。
そのため、Web ToolBoxの構成を見直しコードをゼロから書き直すことでこのようなアップデートを成功させることができました。結果として、新しいWeb ToolBoxはより使いやすく、パフォーマンスも向上しています。

以上のように、Web ToolBoxの大規模なアップデートが必要になった理由は、技術の進歩や規模の拡大など様々な要因があります。Web ToolBoxは、常に最新の技術を取り入れ、より優れたツールを提供することを目指しているため、今後も継続的にアップデートを行っていく予定です。

今回は新しいツールの追加はありませんが、、
追加したいツールは多数あり、またツールリクエストも複数いただいていることもあるため遠くないうちに新ツールの追加を考えています😉