HTMLをコンパクト化してファイルサイズを小さくします。PHP,JavaScript,CSSの混在もOK。

HTMLをコンパクト化

使い方はとってもシンプル。HTMLをペーストして変換するだけ。PHP,JavaScript,CSSの混在もOK。完全無料、フリーです。
業務で使える。ウェブ屋さんの便利アイテム。

入力:HTMLコードを貼り付け。PHP,JavaScript,CSSの混在可。
変換結果
HTMLをコンパクト化します。PHP,JavaScript,CSSの混在もOK。このサイトでのコンパクト化とは、コメントと削除可能な空白及び改行文字を取り除くことを言います。
コメントや空白や改行を取り除くことで、ファイルサイズを抑える事が可能となり、つまりリクエストに対するデータ転送速度向上を見込めます。
難読化とは異なり、PHPやJavaScriptの変数や関数名を短くするなどの処理は行っていません。
難読化ではありませんが、適度なネスティングが無いとコードが読めませんので、ダウンロードした人は解析を早々に断念する確率が上がるかも知れません。
コンパクト後のJavaScriptが動作しない、または、エラーが出る場合:
変換前のコードでセミコロンが不足している事が考えられます。

変換前の例)
var aaa = 10
function bbb() {
}
このコードは通常問題無く動作します。ただし、aaa = 10の後ろにセミコロンが無いのは正しいシンタックスに反しています。
このコードをコンパクト化すると、
var aaa=10function bbb(){}
となってしまいます。

正しい例)
var aaa = 10;
function bbb() {
}
正しい例のコンパクト化)
var aaa=10;function bbb(){}
さらにファイルサイズを抑えるにはgzip圧縮する事で、サイズを大幅に小さくできる事でしょう。
gzip圧縮した場合は、リクエストヘッダのAccept-Encoding参照によって対応していないリクエストには無圧縮データを送る必要が有りますので、そのあたりは.htaccessでrewriteで設定可能です。
例としてはこんな感じになるでしょうか。

RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} "\.php$"
RewriteRule .+ %{REQUEST_URI}.gz

<FilesMatch "\.js\.gz$">
  ForceType text/plain
  AddEncoding x-gzip .gz
</FilesMatch>

昨今のウェブサイトは単純にHTMLタグだけで構成される事は少なくなり、PHP等のサーバーサイドスクリプトとJavaScriptの混在形式が一般的となってきました。
また、Flashを使用する機会はほとんど無くなり、プログラムコードが直接記述されますので、テキスト量は増えてきました。
テキスト量を簡単に減らす方法として余分な文字を取り去るという発想です。
様々な手法でコンパクト化や最適化を行う手法の一つとしてご利用頂ければ幸いです。
インターネット内の全サイトがコンパクト化されればかなりの省エネルギー化と時間節約、ローコスト化になるのではないかと思います。
サイトの品質とは応答速度も大きな要素です。プロのウェブ屋さんならば100msの時間短縮に喜びを感じてみてはいかがでしょうか。
みなさんHTMLの記述にはどんなソフトをお使いでしょうか?AdobeのDreamweverやホームページビルダーが良く知られています。MicrosoftVisualStudioを使用するという方もおられます。
私はテキストエディタを使用しています。昔、AdobeのGoLiveを使用した事も有りましたが当時はCSSが一般的なものでは無く、機能もお粗末なものでした。今はGoLiveというという製品はありません。DreamWeverがAdobeの製品となったからです。
ウェブサイトの制作を多く手掛けると自分なりのライブラリが沢山完成します。それらライブラリはサイトを作成するにつれてより洗練された物となり、毎回使う部分は部品(モジュール)として1個のファイルとなります。
新規サイトを作成する場合はそれら部品をphpで結合すれば完成です。この作業を行うにはテキストエディタが最速です。
もちろんデザインは目に見える部分ですので流用する事はあまりありません。
テキストエディタはキー入力に対するレスポンスにタイムラグが一切ありません。キーを打てば即座に反映されますので、ウェブサイトビルダーで入力補間の時間を待つぐらいならばキー入力してしまった方が早いと思います。
ただしHTMLタグやCSSをほとんど暗記してしまうことが条件となります。最初は大変ですが、覚えてしまう事で他のソースを読む力も付きますし、綺麗でエレガントなコードを書くことが出来ます。
昨今のウェブサイトはPHPやJavaScriptも混在しますのでシームレスに作業できる事は大変重要なことと考えます。
もうひとつ心がけている事が有ります。
JavaScriptやphpの様々なライブラリを使わずにゼロから書きあげるという事です。
JavaScriptの場合はjQueryが有名ですが、この便利なライブラリに頼ってしまうと様々な文献のコードが読めなくなってしまう事態に陥る可能性が有ります。確かにクロスブラウザ対策は大変ですが、これもプログラミングの楽しみの一つでしょう。
phpの場合もCMSを使用せずに自分で書きあげましょう。某CMSを何回か使用した事が有るのですが、その動作の重さとセキュリティアップデートの多さでメンテナンスが大変でした。カスタマイズ性も自分で作った物に勝る事はありません。
そして自分専用のライブラリを増やしていきましょう。
この記事は2013年5月時点のものです。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。