JavaScriptを圧縮するツール「Minify JavaScript」

スタイルシートを圧縮するツール「Minify CSS」に続いて、JavaScriptを圧縮するツール「Minify JavaScript」もつくってみた。

ファイルをアップロードするか、ソースを貼り付けるだけで圧縮してくれます。ファイルは複数アップロード可能でソースをまとめて圧縮、出力してくれます。ソースを符号化する Packer には未対応です。

続きを読む

スタイルシートを圧縮するツール「Minify CSS」

ウェブサイトやウェブアプリの表示の最適化を求められている昨今。Google の検索エンジンもウェブページの表示の高速化を考慮に入れたり、ウェブサイトのパフォーマンス如何でアクセス数やコンバージョン率、売上に影響を与えつつあり、パフォーマンス向上のため、最適化の必要性が高まっている。

スタイルシートは、HTML5 の普及につれて表現が豊かになりつつあるが、その反面スタイルシートの記述が複雑になり、ファイルサイズも大きくなりつつある。

まず、スタイルシートの最適化に大きく期待できる、2つのポイントを押さえておきたい。

  • 複数の外部ファイルをまとめて HTTP リクエスト数を減らす
  • スタイルシートファイルを圧縮してダウンロードサイズを減らす

ということで、スタイルシートを圧縮するツールをつくってみた。ファイルをアップロードするか、ソースを貼り付けるだけでスタイルシートを圧縮してくれます。ファイルは複数アップロード可能。

続きを読む

画像をBase64に変換するツール (data URI scheme)

Google のウェブ検索結果でウェブページのスクリーンショットに使われている data URI scheme。

data:[<mediatype>][;base64],<data> 形式のデータ (data URI scheme) を生成してウェブページに埋め込むことで HTTP リクエストを減らせるメリットがある。ただ、バイナリデータより3割ほどデータサイズが増える。

ファイルサイズが小さいアイコンを直接埋め込んだり、ブラウザが PC より対応しているスマートフォンでも使われ出している。ということで、画像のバイナリデータを Base64 にエンコードするツールをつくった。出力形式も HTML の img、CSS、JavaScript、生データに対応。

続きを読む

スタイルシートを切り替えるJavaScript「CssSwitcher」

スタイルシートを切り替える JavaScript に「styleswitcher.js」があります。styleswitcher.js は、おもに文字の大きさを変えたりするのによく使われて便利。JavaScript で link 要素の代替スタイルシート (Alternate stylesheet) を切り替える形で実装している。

またスタイルシートは、フォントサイズ、レイアウト、カラーなど複数のスタイルシートを適用することを仕様で定めている。その場合は、link要素のグループ化 (Preferred style sheet) でできる仕様だが、ブラウザ毎に実装がまちまちのようだ (詳細)。ほか、フォントサイズ×レイアウト×カラーの組み合わせを実現したいが、グループ化では固定されてしまう。別々に設定できない。やろうとすると、それぞれの組み合わせの分だけのスタイルシートを用意するなど管理面でも面倒。

ということで、あらたな設計で「CssSwitcher」をつくってみた。

続きを読む

最近の投稿

カテゴリー

アーカイブ