ChatGPTにHTMLサイトを作ってもらっていると、修正を繰り返すうちにコード量がどんどん増えていくことがあります。
そこで、HTMLをドラッグ＆ドロップするだけで整理・圧縮できるツールを作りました。
整理は修正作業を繰り返す際に、容量・トークンを、ほんの少しだけ抑える目的です。
圧縮はチャットでHTMLを共有する際に、相手が修正作業をせずに開くだけであると考えられる場合に容量を削減する目的です。
※機械的に整理しているため、絶対にバグが出ないという保証はありません。整理後は必ず動作確認をお願いします。
👇サイトはこちら
👇整理のみ版はこちら
👇復元用
できること
このツールには3つのモードがあります。
-
安全版
HTML / CSS / JavaScriptの内容には手を加えず、圧縮だけを行います。 -
挑戦版
連続空白やコメントなどを整理してから、さらに圧縮します。チャットでHTMLを共有する際に、相手がソースコードを直接読まない可能性が高いと思う場合に向いています。 -
整理のみ版
連続する空白やコメントなどの整理のみを行い、通常のHTMLとして保存します。サーバーで公開する場合はこちらがおすすめです。
より高い整理効率を実現できる他社サイトも数多くありますが、この整理では、ChatGPTによる解析の難易度をできるだけ上げず、Reasoningへの影響を最小限に抑えることを重視しています。
ChatGPTとのやり取りにも使える
ChatGPTにHTMLを何度も修正してもらうと、コメントや空白、追加されたコードなどによってファイルサイズが膨らみがちです。
このツールで整理すると、HTMLにもよりますが整理した箇所は体感で1割程度の容量削減が期待できています。
ChatGPTが生成するコードは、もともと比較的読みやすく構造化されていることが多いです。
不要な空白やコメントを減らす程度であれば、コード本体はほぼ維持されるため、Reasoningへの影響も比較的小さいのではないかと考えています
以上の事から、ChatGPTへ再度HTMLを渡す場合、
input / outputのトークン量を少し抑えつつ、reasoningへの影響は比較的小さい
という使い方が期待できると考えています。
output が削減されるというのは、ChatGPTに修正後のHTML全文を生成してもらう場合の話です。
一部を生成して貰う場合は、この限りではありません。
用途によってモードを使い分ける
チャット上でHTMLファイルを共有するだけで、相手が中身を直接読む必要がなさそうなら、挑戦版を使ってさらに容量を小さくするのも選択肢です。
一方、Webサーバーで配布する場合はgzipやBrotliなどの圧縮が自動的に行われることも多いため、自己解凍形式への圧縮はあまりおすすめしません。
その場合は、「整理のみ版」でHTML自体を軽くしてから公開する使い方がおすすめです。
ファイルをドラッグ＆ドロップするだけなので、ChatGPTでHTMLを頻繁に作成・修正している方はぜひ試してみてください。
👇サイトはこちら
👇整理のみ版はこちら
👇復元用
コードを知りたい方
👇GitHub
GitHub の URL は、悪意のあるコードが含まれていないかをご自身で目視確認したい方向けに公開しています。
網羅的な確認はできませんが、ダウンロードして、ChatGPT にコードを添付して、悪意のあるコードが含まれていないか確認してから、ローカルで使う方法も有効です。
ご自身が使いやすいように ChatGPT などを活用してチューニングし、利用することも推奨します。
より使いやすいサイトを作成できた場合は、私も利用したいので公開していただけるとうれしいです。
なお、全面的に作り直したものではなく、本リポジトリを改造して作成したものを公開する場合は、MIT ライセンスの条件に従って公開してください。(著作権表示とMITライセンス文を含めてください)