
昨年以来の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色)
※テーマ機能は実験的なもので今後削除されることもありえます