7/13 uni-minify 開発記（プレビュー） JS/CSS/HTML軽量化

こんなminify作ってます！

上記事に加えて

• ⭕️ ローカライズ（日本語/英語）

• ⭕️ Prettify（整形）

• ⭕️ UIの調整

• ❌ WPFアプリ化 （優先度：低）

• ⭕️ .jsx .ts .tsx 対応

• ❌ .png⁠ ⁠.jpg⁠ ⁠.jpeg⁠ ⁠.gif⁠ ⁠.webp⁠ ⁠.ico 対応

• ❌ .svg (xml) 対応

• ❌ .json 対応

の実装を進めています。

開発プレビュー版

スクリーンショット

出来はいいですよ！

📝README.md草案（ユーザー向け）

<div align="center">

⚡ uni-minify

パソコンのブラウザで開くだけ！ホームページやアプリのファイルをまとめて小さく・安全にする簡単ツール

<p align="center">
<a href="#-できること主な機能">できること</a> •
<a href="#-はじめかた起動方法">はじめかた</a> •
<a href="#-画面の見方と使いかた">使いかた</a> •
<a href="#-最新版の強力な機能">最新版の機能</a> •
<a href="#-うまく動かないときは注意事項">うまく動かないときは</a> •
<a href="#-⚖️-免責事項">免責事項</a> •
<a href="#-ライセンスなど">ライセンスなど</a>
</p>
</div>

💡 できること（主な機能）

`uni-minify` は、ホームページやWebアプリを構成するファイル（HTML、CSS、JavaScript、さらにTypeScriptやReactファイルまで）を、ボタン一つで「軽量化（サイズ削減）」したり「中身を読み取りにくく（難読化）」したりできる、ブラウザ専用の便利ツールです。

• 🌐 インストール不要、ネット接続も不要: ダウンロードしたファイルをブラウザで開くだけですぐに使えます。データが外部のサーバーに送信されることは一切ないため、大事なソースコードも安全に処理できます。

• 📦 フォルダごとまとめて処理: ファイルを1個ずつ選ぶ必要はありません。ホームページのデータが入ったフォルダを丸ごと読み込ませるだけで、中身を自動で判別して一括処理します。

• 🔒 目的に合わせた5つのモード:

  • 軽量化 (Minify): コード内の無駄な改行やスペース、コメント（メモ書き）を綺麗に消し去り、ファイルサイズをギリギリまで小さくします。

  • 簡略変換 (Shrink): プログラム内の長い名前（変数名など）を短い名前に置き換え、さらにファイルサイズを削ります。

  • 難読化 (Obfuscate): プログラムの仕組みを複雑な暗号のような状態に変換し、他人に中身を盗み見られたり、コピーされたりするのを強力に防ぎます。

  • 整形 (Prettify): 逆に、改行がなくて読みづらいファイルを、人間が見やすいように綺麗に並び替えます（中身の確認用）。

  • そのまま配置 (As-is): 中身を一切いじらず、そのままコピーして出力します。

🚀 はじめかた（起動方法）

本ツールは、お使いのパソコン環境を一切汚さない「ポータブル仕様」です。不要になったらフォルダごとゴミ箱に捨てるだけで完全に削除できます。

1. ダウンロードした ZIP ファイルを、パソコン上の好きな場所に解凍（展開）します。

2. 展開されたフォルダの中にある `minify.html` というファイルを、普段お使いのWebブラウザ（Google Chrome、Microsoft Edge、Safari、Firefoxなど）で開きます（ダブルクリックするか、ブラウザの画面へドラッグ＆ドロップしてください）。

🖼 画面の見方と使いかた

シンプルで直感的な画面（日本語・英語の両対応）で操作できます。

+-------------------------------------------------------------+
|  ⚡ uni-minify  [アプリのバージョン]  [環境・ライブラリ状態]  [EN/JP] |
+-------------------------------------------------------------+
|  [📁 フォルダを選択]  ➔ ここでホームページのフォルダを選ぶ   |
|                                                             |
|  処理モードの選択:                                          |
|  ( ) そのまま  (x) 軽量化  ( ) 簡略変換  ( ) 難読化  ( ) 整形 |
|  ---------------------------------------------------------  |
|  チェック機能（オプション）:                                |
|  [ ] 1つのファイルにまとめる  [ ] さらに強力に圧縮  [ ] 特殊軽量化 |
+-------------------------------------------------------------+
| [ ビルドログ（進行状況） ]     | [ 処理後のファイルプレビュー ] |
|                                |                             |
| どのファイルが何％小さくなった  | ログに出たファイル名をクリック |
| かがリアルタイムで表示されます | すると、ここに中身が表示されて |
|                                | モードに合わせて綺麗に見えます |
+-------------------------------------------------------------+
| [💾 最適化済みZIPを保存] (すべて終わると緑色のボタンが出ます) |
+-------------------------------------------------------------+

📋 基本の操作手順

1. 画面右上の [EN/JP] ボタンで、使いやすい言語（日本語など）に切り替えます。

2. [📁 フォルダを選択] ボタンを押し、処理したいホームページのフォルダを丸ごと選択します（フォルダのドラッグ＆ドロップでも読み込めます）。

3. 選択するとすぐに自動で処理が始まり、画面左側に結果（ファイル名と、どれくらい小さくなったかの「圧縮率」）がズラリと表示されます。

4. すべての処理が終わると、左下に [💾 最適化済みZIPを保存] という緑色のボタンが現れます。これをクリックして、完成したデータをダウンロードしてください。

📦 最新版の強力な機能（安心・快適設計）

1. 進化した「健康状態チェック（環境監視システム）」

画面の最上部に、ツールが正常に動く環境かどうかを自動で診断するインジケーター（例: `[⚡Deflate:OK] [⚡JSZip:OK]...`）が搭載されました。ツールに必要な機能がすべて揃っている時は綺麗な「青色」、何かが足りない時は「赤色」で警告してくれるため、動かない原因がひと目でわかります。

2. TypeScript や React ファイルもそのまま変換可能に！

新しく搭載された高度な内部変換機能（Babel）により、通常のJavaScriptだけでなく、最新のホームページ制作で使われる TypeScript (`.ts` / `.tsx`) や React (`.jsx`) のファイルも自動的に判別し、ブラウザで動く標準的な形へ安全に変換・軽量化できるようになりました。

3. モードに合わせて見やすさが変わる「自動プレビュー」

画面左側のログに表示されたファイル名をクリックすると、右側に処理後のソースコードが即座に表示されます。
「そのまま」や「整形」モードの時は、プログラムの構造（インデント）が崩れないように横スクロールバーで綺麗に表示され、「軽量化」や「難読化」モードの時は、はみ出さないように画面端で自動的に折り返して表示される親切設計です。

4. 動かないリスクを自動で防ぐ「安全機能」

「難読化」や「簡略変換」を行う際、プログラムの文字を縮小したせいでホームページが動かなくなってしまうトラブルがよくあります。
本ツールには動的破壊を自動で防ぐ安全システムが内蔵されており、プログラムを壊してしまいそうな重要なキーワード（文字の組み合わせ）や、HTML内のクリックイベント（`onclick`など）を自動で見つけ出し、その部分だけを賢く保護します。誰でも安心してボタンを押すだけで安全に最適化が行えます。

5. 1つのファイルにまとめる（パッケージング機能）

「ファイルをパッケージング」にチェックを入れてフォルダを読み込ませると、バラバラに分かれていた HTML、CSS、JavaScript を1つの「`.html`」ファイルの中に完全に埋め込み、合体させます。
ファイルを1個配るだけでホームページやアプリが完璧に動くようになるため、配布や管理の手間が劇的に減ります（さらに強力に圧縮する機能も選べます）。

💻 うまく動かないときは（注意事項）

⚠️ 白い画面になったり、ボタンが動かなかったりする場合

本ツールは、近年新しく登場した非常にモダンな仕組みを使って作られています。そのため、数年以上更新されていない古いブラウザでは画面が正常に表示されなかったり、ボタンが動かなかったりする場合があります。
お手数ですが、Google Chrome や Microsoft Edge、Safari などの「最新版」のブラウザを使って開くようにしてください。

⚠️ ドラッグ＆ドロップ等でファイルがうまく読み込めない場合

パソコンの厳格なセキュリティ制限（CORSポリシー）により、ファイルをそのままダブルクリックしてブラウザで開いた状態（URLの先頭が `file:///` になっている状態）では、ブラウザがファイルの読み込みを拒否してしまう場合があります。
もし動作に不具合を感じた場合は、以下のように簡易的なローカルサーバーを起動し、インターネットサイトと同じ形式（`http://localhost`）でアクセスしてご利用ください。

• Pythonがパソコンに入っている場合:
  コマンドプロンプトやターミナルでフォルダを開き、`python -m http.server 8000` を実行。その後、ブラウザで `http://localhost:8000/minify.html` を開きます。

• Node.jsが入っている場合:
  `npx http-server -p 8000` を実行し、同様に `http://localhost:8000/minify.html` を開きます。

⚖️ 免責事項

本ツールの利用にあたっては、以下の点についてあらかじめご了承ください。

1. バックアップのお願い: 本ツールはプログラムを変換・圧縮する性質上、予期せぬ不具合でソースコードの一部が欠損したり、変換後のプログラムが正しく動作しなくなったりする可能性があります。大切な元のデータは、必ず事前にバックアップ（コピー）を取ったうえでご利用ください。

2. 無保証・自己責任: 本ツールは現状有姿（そのままの状態）で提供されており、作者は明示・黙示を問わず、本ツールが正常に動作することや、特定の目的に適合することを含め、いかなる保証もいたしません。

3. 責任の制限: 本ツールの使用、または使用できなかったことによって生じたトラブル、データの消失、業務への支障、損害などについて、作者は一切の責任（賠償・修復等の義務）を負いません。 全て利用者の自己責任においてご利用いただくようお願いいたします。

🤝 クレジット / サードパーティ

本ツールは、世界中で広く使われている以下の素晴らしいオープンソースライブラリ（プログラム）の力を借りて開発されています。

• @babel/standalone: TypeScriptやReactの最新ファイルを、ブラウザで動くJavaScriptへ変換するために使用しています。

• javascript-obfuscator: JavaScriptコードを安全かつ強力に難読化（暗号化）するために使用しています。

• JSZip: 処理した複数のファイルを、ブラウザ上で1つのZIPファイルに綺麗にまとめるために使用しています。

📄 ライセンスなど

本ツールは MIT ライセンス のもとで公開されています。商用利用、改変、再配布などを含め、どなたでも自由にご自由にご利用いただけます。詳細については同梱の LICENSE ファイルをご確認ください。

📝README.md草案（GitHub・開発者向け）