Web制作に役立つ超便利ツールが登場! HTMLやCSSやJavaScriptのさまざまなツールがひとまとめになったツールボックス -He3

HTMLやCSSやJavaScriptの軽量化・整形、FlexboxやGridやbox-shadowのジェネレーター、各種エンコード・デコード、データの暗号化、ダミーテキスト・ダミーデータ・ファビコン生成、テキスト比較(Diff)など、Web制作に役立つさまざまなツールがまとめて利用できる『He3』を紹介します。

Windows, macOS, Linux対応の無料アプリで、今までオンラインであちこちの各ツールを利用していた人とかにかなり便利なツールだと思います。

Web制作に役立つさまざまなツールがひとまとめになったツールボックス -He3

He3: Modern Developer Toolbox

He3の特徴

He3は、200種類以上のWeb制作に役立つ便利ツールが詰め込まれたデベロッパー向けのツールボックスです。

200種類以上あるツールは、カテゴリ別にまとめられており、スマート検索機能ですぐに目的のツールを見つけることができます。また、クリップボードの検出機能もあり、コピーしたデータに基づいてツールを自動的に表示します。

サイトのキャプチャ

He3: Modern Developer Toolbox

He3のインターフェイスはシンプルで、使い勝手もよいと思います。ライトテーマとダークテーマに対応しており、カテゴリ別にまとめられたツールはドラッグアンドドロップでレイアウトやカテゴリを変更することも簡単です。

CSS Minifyのインターフェイス

CSS Minify: He3

200種類以上あるツールから目的のツールを探すのが大変だ、、、スマート検索機能があるので簡単です。たとえば、CSS軽量化ツールを探すときは「CSS」と入力すれば候補に表示されます。類似キーワードにも対応しており、「json prettify」を検索すると、最初に「JSON Format」ツールが表示されます。

スマート検索機能

スマート検索機能

クリップボードの検出機能も便利で、He3のアルゴリズムがクリップボードの内容を検出し、最適化な推奨ツール推奨がHomeに表示されます。たとえば、CSSのコードをコピーするとCSS関連のツールが表示され、JavaScriptのコードをコピーするとJavaScript関連のツールが表示されます。

クリップボードの検出機能

クリップボードの検出機能

He3は主要な言語をサポートしており、日本語もサポートされています。

多言語をサポート

多言語をサポート

He3のダウンロードとインストール

He3のダウンロードは、下記ページから。
インストーラーをダウンロードしてインストールします。また、Homebrew経由でもインストールできます。

サイトのキャプチャ

He3: Modern Developer Toolbox

上記のページ上部でOSが自動判定されて表示されますが、もし表示されなければページ下部からもダウンロードできます。
Winは64-bit対応、MacはAppleシリコン対応です。

サイトのキャプチャ

ページの最下部

He3の使い方

使い方は、簡単です。サイドバーの「All」または各カテゴリから使用したいツールを選択します。

各ツールはスターをつけておくと「Star」に表示され、使用頻度が高いものは「Home」に表示されるようになります。また、He3自体はホットキーで表示・非表示することもできるので、必要なときにすぐに表示できます。

He3のキャプチャ

「Home」画面

各カテゴリごとのツールは、こんな感じです。
200種類以上あるので、多いですね。不要なのは非表示にすることもできます。

各カテゴリごとのツール

各カテゴリごとのツール

CSSやJavaScriptのツールは「Programing」に入っています。インターフェイスは日本語表示にも対応されており、「CSS Minify」だと「CSS圧縮」と表示されました。個人的には英語表記の方が使いやすいです。

CSS Minify

「CSS Minify」

CSS Flexbox, Grid, Box Shadowのツールは、「Web」に入っています。

CSS Box Shadow Generator

「CSS Box Shadow Generator」

Flexboxのジェネレーターでは、divを必要な数だけ用意し、Flexboxの各プロパティでさまざまなレイアウトのCSSを生成できます。

CSS Flex Generator

「CSS Flex Generator」

ファビコン生成ツールもいざというときに探さなくていいので、便利ですね。

Image To Favicon

「Image To Favicon」

テキスト比較(Diff)もよく使用すると思います。

Text Diff

「Text Diff」

右上の歯車アイコンをクリックすると、設定画面が開きます。インターフェイスを日本語表示にしたり(デフォルトは英語)、ホットキーやテーマを設定できます。

サHe3の設定画面

He3の設定画面

設定画面の「Category」で、サイドバーの各カテゴリの表示などをカスタマイズできます。自分に不要なものは非表示しておくと、すっきりします。

設定画面の「Category」

設定画面の「Category」

何回か使用すると、「Home」画面で自分がよく使用するツールが表示されるようになります。特によく使用するツールは、スターをつけておくと便利です。

「Home」画面

「Home」画面

sponsors

top of page

©2024 coliss