Milk+ea

Weblog Is My Hobby.

FailAPIとドロップ機能を使ってHTMLファイルの圧縮サイトを作る

サイト制作

FailAPIが使えないブラウザでも普通にコピペすれば圧縮できます。

作ったサイト - compress :: html

f:id:totora0155:20130623213107p:plain

「Drop to here !」というところにhtmlファイルをドロップすれば、下に圧縮されたコードが挿入されます。
スペースとコメントが削除されます。id="hoge"なんかの後ろにあるスペースも消されます。

以下の様なコードが

<!doctype HTML>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <title>hoge</title>
    <meta name="description" content="(  ´・ω・｀  )">
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body class="body">
    <!-- header -->
    <header role="banner" class="header">
      <nav role="navigation">
        <ul>
          <li>hoge</li>
          <li>hogeo</li>
          <li>hogemaru</li>
        </ul>
      </nav>
    </header>
    
    <!-- main -->
    <div class="main" role="main">
    </div>
    
    <!-- footer -->
    <footer class="footer" role="contentinfo">
    </footer>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  </body>
</html>

なんということでしょう。（長すぎるので適用に改行を入れてます）

<!doctype HTML><html lang="ja"><head><meta charset="utf-8"><title>hoge</title><meta name="description"content="(  ´・ω・｀  )"><link rel="stylesheet"href="./css/style.css">
</head><body class="body"><header role="banner"class="header"><nav role="navigetion"><ul><li>hoge</li><li>hogeo</li><li>hogemaru</li></ul></nav></header><div class="main"role="main">
</div><footer class="footer"role="contentinfo"></footer><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script></body></html>

作ってる時間の半分は、ほんの数行の正規表現にかかりました。途中で分からなすぎてふて寝状態だったんですが、起きたら結構あっさり解決しました。
離れてみるって大事ですなぁ。