TopWebSEO > 2012年6月
2012年6月19日

ウェブサイトをgzip圧縮で高速化する

June 19,2012 1:55 AM
Tag:[, ]
Permalink

ウェブサイトをgzip圧縮を使って高速化するカスタマイズを紹介します。当サイトでもgzip圧縮を利用しています。

1.gzip圧縮によるウェブサイト高速化のイメージ

gzip圧縮によるウェブサイト高速化のイメージをご覧ください。

(クリックすれば拡大します)

クライアント(ブラウザ)から、あるウェブサイトの「index.html」にアクセスしたとき、リクエストを受信したサーバでは、HTTPリクエストの分析や、「index.html」の圧縮ファイル「index.html.gz」の有無などをチェックして、圧縮ファイルが返却可能であれば「index.html.gz」を返却します。

返却できない場合は通常の「index.html」をレスポンスで返却します。

圧縮ファイルを返却できれば、データの転送量を減らすことができるので、これによりウェブサイトの高速化につながります。

圧縮ファイルは受信したブラウザ側で展開することができます。主要なモダンブラウザはほぼこの機能を有しています。

2.圧縮ファイル形式

圧縮ファイル形式はgzipです。ファイルの拡張子は「.gz」になります。deflate圧縮もありますが、本エントリーでは割愛しています。

gzip圧縮する方法については、以下の記事を参考にしてください。

gzipコマンドの使い方

gzipはLinuxコマンドです。

Windowsでgzipを利用する場合、UnxUtilsやUnxUpdatesをインストールすれば、コマンドプロンプトから利用可能になります。The gzip home pageからもツールをダウンロードできるようです。WinRARでも大丈夫みたいです。

Windowsでソースコードの差分を取得する方法

Macはターミナルコマンドで普通に使えると思います。

3.圧縮可能なファイル形式

HTMLファイル、CSSファイル、JavaScriptファイルなどが圧縮可能です。

PHPも圧縮可能ですが、最初から圧縮された状態でサーバ上に配置していると肝心のサーバサイドPHP処理ができなくなるので、PHP処理を行ってから圧縮するという手はあるかもしれません。

WordPressであれば「GZIP Output」というプラグインがあります。

Movable Typeでは当ブログで「GzipFilePublisherプラグイン」を公開しています。

4.HTTPでgzip圧縮ファイルが利用可能な理由

1項で「圧縮ファイルは受信したブラウザ側で展開します」と書きましたが、そもそもブラウザが圧縮ファイルをサポートしている場合、HTTPリクエストに次のような「Accept-Encoding」ヘッダを付加します。

GET user-domain/index.html HTTP/1.1
Host: user-domain
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:12.0) Gecko/20100101 Firefox/12.0
Accept: */*
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

上のリクエストは、要するに「(index.htmlについて)gzip圧縮やdeflate圧縮ファイルを受けつけられますよ」ということをサーバに伝えています。

このリクエストを受信したサーバは、圧縮ファイルを返却できる場合、次のような「Content-Encoding」ヘッダを付与したレスポンス(と圧縮したファイル)を返却します。

HTTP/1.1 200 OK
Date: Thu, 31 May 2012 10:02:44 GMT
Server: Apache/2.2.8 (Win32) DAV/2 mod_ssl/2.2.8 OpenSSL/0.9.8g mod_autoindex_color mod_fastcgi/2.4.6 PHP/5.2.5
Last-Modified: Sat, 16 Jun 2012 06:24:56 GMT
Etag: "8000000043450-25c3-4c111066fbeff"
Accept-Ranges: bytes
Content-Length: 9667
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/javascript; charset=utf-8
Content-Encoding: gzip

レスポンスを受信したクライアント(ブラウザ)は、Content-Encodingヘッダーを見て「gzip」と設定されているので受信したファイルをgzipファイルと認識して、展開します。

5.HTMLタグの書き方

調べていてよく分からなかったのがHTMLタグの書き方です。

CSSファイルやJavaScriptファイルを圧縮した場合、link要素やscript要素に圧縮ファイル名をそのまま書くものと思ってましたが、そうではないようです。

非推奨な例

<link rel="stylesheet" href="http://user-domain/style.css.gz" type="text/css" title="Default" media="screen,tv" />
<script src="http://user-domain/foo.js.gz"></script>

圧縮ファイルを利用する場合、HTMLタグの変更は必要ありません。

推奨する例

<link rel="stylesheet" href="http://user-domain/style.css" type="text/css" title="Default" media="screen,tv" />
<script src="http://user-domain/foo.js"></script>

6.圧縮ファイルを読み込む

では圧縮ファイルはどうやって読み込むのかというと、.htaccessを利用し、リクエストされたURLの末尾に「.gz」を付与して読み込みます。

.htaccessには次のような判定条件を設定します。

  • HTTPリクエストで圧縮ファイルを許容しているか(=Accept-Encodingヘッダで「gzip」が許容されているか)
  • HTTPリクエストの末尾が「.gz」でないか
  • リクエストの末尾に「.gz」を付与したファイルがサーバに存在するか

すべての条件を満たした場合、リクエストURLの末尾に「.gz」を付与します。つまり圧縮ファイルが呼び出されたものとみなして圧縮ファイルを返却します。

条件を満たさない場合はURLの末尾に「.gz」を付与しません。

7..htaccessの解説

以下の内容を記述した.htaccessを用意し、サーバのディレクトリにアップロードします。サーバ上でviエディタ等で直接作成してもOKです。

書き方は色々あるので、他サイトの設定例も色々調べてみるといいでしょう。

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
<files *.html.gz>
AddType "text/html;charset=utf-8" .gz
</files>
<files *.js.gz>
AddType "text/javascript;charset=utf-8" .gz
</files>
<files *.css.gz>
AddType "text/css" .gz
</files>
AddEncoding x-gzip .gz

6項の説明の繰り返しになりますが、設定内容の解説です。

まず、RewriteEngineディレクティブに「on」を設定することで、Webサーバ(Apache)での書き換えエンジンを有効にします。

1つめのRewriteCondディレクティブで、HTTPの「Accept-Encoding」ヘッダでgzipが許容されていれば次に進みます。gzipをサポートしていないブラウザなどからのリクエストで、このヘッダが付与されていなければ、ここで処理が終わって非圧縮ファイルを返却します。

RewriteCond %{HTTP:Accept-Encoding} gzip

2つめのRewriteCondディレクティブで、拡張子が「.gz」でなければ次に進みます。

RewriteCond %{REQUEST_FILENAME} !\.gz$

3つめのRewriteCondディレクティブで、元のファイルの末尾に「.gz」を付与したファイルが存在すれば次に進みます。

RewriteCond %{REQUEST_FILENAME}\.gz -s

上記3つの条件を満たしたリクエストについて、RewriteRuleディレクティブでURIの末尾に「.gz」を付与して処理をおこないます。

RewriteRule .+ %{REQUEST_URI}.gz

ファイル名の末尾が「.gz」のファイルについては、ファイル種別に応じて振り分けてAddTypeディレクティブでHTTPレスポンスの「Content-Type」ヘッダを付与します。HTMLファイルには「text/html」を、CSSファイルには「text/css」を、JavaScriptファイルには「text/javascript」を付与します。「charset=utf-8」は必要に応じて設定してください。

<files *.html.gz>
AddType "text/html;charset=utf-8" .gz
</files>
<files *.js.gz>
AddType "text/javascript;charset=utf-8" .gz
</files>
<files *.css.gz>
AddType "text/css" .gz
</files>

最後にAddEncodingディレクティブを使って、HTTPレスポンスに「Content-Encoging: gzip」を付与します。

AddEncoding x-gzip .gz

すでに.htaccessを使っている場合は、ファイルの末尾または先頭に上記の内容を追加してください。

8.gzip圧縮で通信されていることを確認する

Firefoxのアドオン「Live HTTP Headers」などで確認できます。

LiveHTTPHeaders(Firefox 機能拡張)でHTTP ヘッダを表示する

普通にリロードすると304が返却される可能性があるので、Windowsの場合は「Ctrl+F5」で強制リロードするとよいでしょう。

9.CDNサービスのファイルはgzip圧縮されている

ご存知かもしれませんが、Google CDNサービスなどはgzip圧縮されたファイルを返却します。

GET /ajax/libs/jquery/1.7.2/jquery.min.js HTTP/1.1
Host: ajax.googleapis.com
User-Agent: Mozilla/5.0 (Windows NT 6.0; rv:13.0) Gecko/20100101 Firefox/13.0.1
Accept: */*
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: http://user-domain/
Pragma: no-cache
Cache-Control: no-cache
HTTP/1.1 200 OK
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Type: text/javascript; charset=UTF-8
Last-Modified: Thu, 29 Mar 2012 18:19:50 GMT
Date: Thu, 14 Jun 2012 14:53:48 GMT
Expires: Fri, 14 Jun 2013 14:53:48 GMT
x-content-type-options: nosniff
Server: sffe
Content-Length: 33673
x-xss-protection: 1; mode=block
Cache-Control: public, max-age=31536000
Age: 344451

Google AnalyticsやGoogle Adsenseのコードも圧縮されています。

10.参考サイト

参考サイトは下記です。ありがとうございました。

11.mod_deflateについて

本題からそれますが、はてなブックマークコメントで「mod_deflateじゃダメなの?」とありました。mod_deflateはサーバでコンテンツ圧縮を行うための機能です。

ざっと調べたところ、以下の理由により、一定の条件を満たす場合のみ有効であると思われます。

  • レンタルサーバによってはmod_deflateが有効になっていない
  • サーバで圧縮を行うため圧縮コストがかかる。
Comments [0] | Trackbacks [0]
2012年6月13日

CDNでウェブサイトを高速化するためのまとめ

June 13,2012 12:55 AM
Tag:[, ]
Permalink

CDNでウェブサイトを高速化するためのまとめです。

「そんなの知ってるよ」という方も多いと思いますが、バージョンの指定方法や、キャッシュ・フォールバックなど、CDNに関する情報を集めましたのでご覧いただければ幸いです。

認識誤り等ありましたらどこかでつぶやいてください。

1.CDNとは

CDNとは「Contents Delivery Network(コンテンツデリバリネットワーク)」または「Contents Distribution Network(コンテンツディストリビューションネットワーク)」のことで(注)、コンテンツを配信するために最適化されたネットワークを指します。

Wikipediaの「コンテンツデリバリネットワーク」の説明によると、次のサービス(企業)が著名な商用CDNサービスを提供しているようです。

また、次のページで有料CDNサービスの一覧を確認できます。

上記に商用CDNサービスをざっと紹介しましたが、なじみ深いのはGoogleのCDNサービス「Google Libraries API」ではないでしょうか。

Google Libraries API
Google Libraries API

ということで、以降は「Google Libraries API」について説明を進めます。

Google CDNサービスの具体的な利用方法は、script要素のURLにGoogleで配信するライブラリのURLを指定するだけです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

各ライブラリのURL(=script要素のコード)は、上記ページのリンク先に掲載されているので、そこから取得するか、6項で紹介する「scriptsrc」から取得してください。

2.CDNを利用するメリット

CDNを利用するメリットはタイトルのとおり、ウェブサイトを高速化できる可能性があることです。

同じサイズのファイルでも自サーバから取得するよりも、CDNを利用した方がダウンロード時間が短くなる可能性があります。結果的にウェブサイトの高速化に結びつきます。

また、多くのユーザーが同じファイルを利用することで、ユーザーのブラウザにキャッシュされる可能性も高くなります。

3.フォールバック

CDNサービスを利用することで2項のメリットを享受できますが、CDNサービスが故障した場合、ウェブサイトが共倒れにならないよう、フォールバックを行うことを推奨します。

フォールバックとは、「代替手段への切替」を意味します。

jQueryの場合、次の2行目の指定を行うことで、(1行目で)CDNサービスからコンテンツを読み込めなかった場合でも、自サーバのコンテンツを読み込むことができます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.7.2.min.js"><\/script>')</script>

4.バージョンの省略指定

Google CDNサービスでは、バージョンの指定を省略することで、最新バージョンを取得することができます。

次のように「1.7」を指定すれば、2012年6月現在の最新バージョン「1.7.2」を取得できます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

次のように「1」を指定しても、2012年6月現在では「1.7.2」が取得できますが、「1.8」がリリースされれば「1.7」指定よりさらに最新のバージョンが取得できるはずです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

ライブラリの最新バージョンで動作確認を行いたい場合などは、この指定方法がよいでしょう。

5.バージョン指定によるキャッシュの違い

4項ではバージョン指定を変更することで最新バージョンを取得できる方法を紹介しましたが、マイナーバージョンを指定しないとキャッシュが短くなります。

具体的には、jQueryの場合では「1.7.2」を指定すれば1年キャッシュされますが、「1.7」や「1」を指定すると、24時間しかキャッシュされません。

以下はFirefoxのLive HTTP Headersを使ってキャプチャしたバージョン別指定のHTTPリクエスト・レスポンスです。

「1.7.2」を指定

GET /ajax/libs/jquery/1.7.2/jquery.min.js HTTP/1.1
Host: ajax.googleapis.com
User-Agent: Mozilla/5.0 (Windows NT 6.0; rv:13.0) Gecko/20100101 Firefox/13.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 200 OK
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Type: text/javascript; charset=UTF-8
Last-Modified: Thu, 29 Mar 2012 18:19:50 GMT
Date: Thu, 07 Jun 2012 06:25:13 GMT
Expires: Fri, 07 Jun 2013 06:25:13 GMT
x-content-type-options: nosniff
Server: sffe
Content-Length: 33673
x-xss-protection: 1; mode=block
Cache-Control: public, max-age=31536000
Age: 461047

「1.7」を指定

GET /ajax/libs/jquery/1.7/jquery.min.js HTTP/1.1
Host: ajax.googleapis.com
User-Agent: Mozilla/5.0 (Windows NT 6.0; rv:13.0) Gecko/20100101 Firefox/13.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 200 OK
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Type: text/javascript; charset=UTF-8
Last-Modified: Thu, 29 Mar 2012 18:19:50 GMT
Date: Tue, 12 Jun 2012 14:00:22 GMT
Expires: Fri, 08 Jun 2012 19:40:33 GMT
x-content-type-options: nosniff
Server: sffe
Content-Length: 33673
x-xss-protection: 1; mode=block
Age: 1891
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=3600

「1」を指定

GET /ajax/libs/jquery/1/jquery.min.js HTTP/1.1
Host: ajax.googleapis.com
User-Agent: Mozilla/5.0 (Windows NT 6.0; rv:13.0) Gecko/20100101 Firefox/13.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 200 OK
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Type: text/javascript; charset=UTF-8
Last-Modified: Thu, 29 Mar 2012 18:19:50 GMT
Date: Tue, 12 Jun 2012 13:51:32 GMT
Expires: Fri, 08 Jun 2012 19:39:52 GMT
x-content-type-options: nosniff
Server: sffe
Content-Length: 33673
x-xss-protection: 1; mode=block
Age: 2455
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=3600

また、最新バージョンを取得することで互換性がなくなる可能性もあります。

よって、運用で利用する場合は末端のマイナーバージョンまで指定することを推奨します。

6.CDNのscript要素を簡単に取得できる「scriptsrc」

最後に、Google CDNサービスのscript要素を簡単に取得できる「scriptsrc」を紹介します。

scriptsrc
scriptsrc

Windowsの場合、「copy」をクリックすればscript要素(最新マイナーバージョン指定)がクリップボードにコピーされます。

scriptsrc

これを利用すればscript要素を手入力したり、どこかのサイトからコピーする必要がなくなります。

7.参考サイト

参考サイトは下記です。ありがとうございました。


注:「Contents Delivery Network」が一般的なようですが、Google Libraries API - Developer's Guideの説明には、「content distribution network」と記載されています。

Comments [0] | Trackbacks [1]
2012年6月12日

data URI Schemeを使ってHTTPリクエストを削減する

June 12,2012 1:23 AM
Tag:[, , , ]
Permalink

data URI Schemeを使ってHTTPリクエストを削減する方法を紹介します。

1.概略

HTMLで画像を表示する場合、

<img src="http://user-domain/foo.jpg" />

という風に、httpを使ってサーバ上の画像ファイルを表示させるのが一般的ですが、httpの代わりにdata URI Schemeを使えば、HTMLファイルに埋め込んだインラインデータで画像を表示することができます。

2.data URI Schemeとは

RFCの規定上、http、https、ftpなどは「URI Scheme(スキーム)」と呼ばれます。

data URI Schemeは、「http」にあたる部分が「data」であるURI Schemeのことを指し、RFC2397で規定されています。

3.data URI Schemeの構文とサンプル

data URI Schemeの構文は次のようになります。

data:[<メディアタイプ>][;base64],<データ>

「<データ>」には、Base64エンコードしたデータを設定します(エンコードツールは後方で紹介)。「メディアタイプ」はMIMEタイプのことです。

下はRFC2397に掲載されているdata URI Scheme(赤色部分)を利用したimg要素のサンプルです(分かりにくいので改行をいれて折り返してます)。

<img src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///
          ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu
          5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhR
          NzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TP
          g7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnyc
          QZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK
          05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7
          tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx
          4dbgYKAAA7" alt="Larry" />

上記のimg要素は次のように表示されます(罫線はCSSで指定しています)。

Larry

data URI SchemeはCSSでも利用できます。

background-img: url("data:image/gif;base64,R0lG...AA7");

data URI Schemeは画像以外にも、即値として利用したいさまざまなデータを扱うことができます。

下はCSSの例です。

<link rel="stylesheet" type="text/css" href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

下はJavaScriptの例です。

<script src="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

メディアタイプにはパラメータを含めることができます。次の例はcharsetパラメータを含んだ例です。

data:text/plain;charset=iso-8859-7,%be%fg%be

4.対応ブラウザ

この技術は古くからあるのですが、IEが対応していなかったという理由でながらく使われていなかったようです。

主要ブラウザの対応状況は次のとおりです。

  • Firefox2以降
  • Google Chrome
  • IE8以降
  • Opera 7.2以降
  • Safari

最近、data URI Schemeをふんだんに使っている普通のウェブサイトをみつけたのですが、見失ってしまいました。運よくみつけたらここに掲載しておきます。 →ありました。

アイデアマンズ株式会社

5.注意事項

RFC2397ではdata URI Schemeを「短い値に適用することが有益である」としています。

言い換えると、表示データをインラインで埋め込むため、ファイルサイズが大きくなるとファイルロードに時間がかかってしまい、本末転倒になってしまいます。

背景画像はCSS Spriteを利用してHTTPリクエストを削減する手段もあるので、要は「バランスを考えて利用しましょう」ということです。

なお、RFC2397では、RFC1866で規定するLITLEN(表記の長さ)を1024バイト、TAGLEN(開始タグの長さ)が2100バイトとなっており、指定可能な長さに制限があるようです。

またネットで調べた感じではブラウザによってもファイルサイズに制限があるようです。

6.Base64エンコードするツール

データをBase64にするツールは探せばいろいろあるようです。

ここでは「Binary File to Base64 Encoder / Translator」を紹介しておきます。

Binary File to Base64 Encoder / Translator
Binary File to Base64 Encoder / Translator

Base64エンコードしたいデータのURLを入力して「送信」をクリックすれば、データのMIMEタイプに応じたdata URI Schemeを生成してくれます。

Comments [0] | Trackbacks [0]
2012年6月 6日

img要素でCSS Spriteする方法

June 6,2012 11:55 PM
Tag:[, ]
Permalink

「CSS Sprite」は背景画像などの複数の画像ファイルをひとつの画像にまとめて、画像の中から表示させたい部分の座標をbackground-positionプロパティで指定するという手法です。これにより画像ファイルのHTTPリクエスト数を減らすことができます。

この手法は背景画像での利用が一般的なのですが、img要素でも利用することができるようなので、本エントリーで紹介します。

本エントリーでは、次のソーシャルブックマークボタン用の4つの画像を1つにまとめて、CSS Spriteを行ってみます。

完成イメージ

背景画像の場合はbackground-positionプロパティでさくっと表示できるのですが、img要素として表示させるのにかなり苦労しました。ということで、コピペで使えそうなサンプルも用意しました。

「そういう場合、背景画像に変更するのが本来では?」というツッコミはなしでお願いします(笑)。

1.スプライト画像の作成

まず、スプライト画像(ばらばらの画像をひとつの画像にマージしたもの)にしたい複数の画像を、zipツールなどで圧縮しておきます。

ここでは次の4つの画像を圧縮して「sprite.zip」を作っておきます。

4つの画像

スプライト画像の作成には、定番の「CSS Sprite Generator」を利用します。言語が選択できるので、「日本語」を選択しておくといいいでしょう。


CSS Sprite Generator

CSS Sprite Generator

さきほど圧縮した「sprite.zip」を指定します。

画像を指定

各種設定も備忘録的に残しておきます。「重複する画像」「元画像をリサイズ」はデフォルトのままにします。

設定1

「スプライト画像設定」では、オフセットや連結方向、保存フォーマットなどを設定します。ここではスクリーンショットの設定にしました。背景画像で「repeat-x」の指定をする場合は縦方向に、「repeat-y」の指定をする場合は横方向に連結してください。

設定2

「CSS設定」もデフォルトのままとします。

設定2

「スプライト画像とCSSを作成」をクリック。

設定2

表示された画面で、CSSルールとスプライト画像のダウンロードが行えます。

設定2

ダウンロードした画像ファイルは「sprite.gif」など、適当にリネームしてください。

また、表示されたCSSルールは背景画像用です。今回は背景画像に用いるのではありませんが、利用したい値が含まれているので、どこかにメモしておきましょう。

下は完成したスプライト画像です(便宜上、枠線とパディングはCSSでつけています)。

スプライト画像

2.HTMLとCSSの設定(画像リンクの場合)

リンクつき画像のHTMLは次のようになります。

<ul id="sbm_icon">
  <li>
    <a href="http://.../">
      <img src="sprite.gif" width="16" height="73" class="sprite-hatena" />
    </a>
  </li>
  <li>
    <a href="http://.../">
      <img src="sprite.gif" width="16" height="73" class="sprite-delicious" />
    </a>
  </li>
  <li>
    <a href="http://.../">
      <img src="sprite.gif" width="16" height="73" class="sprite-livedoor" />
    </a>
  </li>
  <li>
    <a href="http://.../">
      <img src="sprite.gif" width="16" height="73" class="sprite-yahoo" />
    </a>
  </li>
</ul>

マークアップのポイントは以下のとおりです。

  • a要素・img要素はブロックレベル要素内に記述
  • img要素のsrc属性にスプライト画像を指定
  • img要素に表示位置調整用のclass属性を指定
  • img要素にwidth属性・height属性を記述する場合は、スプライト画像のサイズを記述(表示したい画像サイズを記述すると、縮小された画像が表示されてしまいます)

CSSは次のとおりです。

#sbm_icon li {
    display: inline-block;
}
#sbm_icon a {
    width: 16px;
    height: 16px;
    float: left;
    overflow: hidden;
}
#sbm_icon a img {
    border: none;
}
.sprite-hatena {
    margin-top: 0; /* 不要 */
}
.sprite-delicious {
    margin-top: -19px;
}
.sprite-livedoor {
    margin-top: -38px;
}
.sprite-yahoo {
    margin-top: -57px;
}

a要素にwidthプロパティとheightプロパティで表示サイズを指定し、「overflow: hidden」で画像の表示範囲を制限しています。ここではすべて同じ値なので、ひとつのセレクタに丸めてますが、サイズが異なる場合は「sprite-xxx」のclass属性をa要素に格上げして、個別に指定してください。

また、classセレクタのmargin-topプロパティの値はCSS Sprite Generatorで出力したCSSのbackground-positionプロパティをそのまま使います。

スプライト画像の一番上の画像表示にmargin-topプロパティは不要ですが、一応書いておきました。

動作サンプルも用意しています。

サンプル

3.HTMLとCSSの設定(画像のみ)

画像のみの場合のHTMLは次のようになります。

<ul id="sbm_icon">
  <li>
    <img src="sprite.gif" width="16" height="73" class="sprite-hatena" />
  </li>
  <li>
    <img src="sprite.gif" width="16" height="73" class="sprite-delicious" />
  </li>
  <li>
    <img src="sprite.gif" width="16" height="73" class="sprite-livedoor" />
  </li>
  <li>
    <img src="sprite.gif" width="16" height="73" class="sprite-yahoo" />
  </li>
</ul>

CSSは次のとおりです。2項でaセレクタに指定していたプロパティをliセレクタに移動しています。

#sbm_icon li {
    display: inline-block;
    overflow: hidden;
    width: 16px;
    height: 16px;
}
.sprite-hatena {
    margin-top: 0; /* 不要 */
}
.sprite-delicious {
    margin-top: -19px;
}
.sprite-livedoor {
    margin-top: -38px;
}
.sprite-yahoo {
    margin-top: -57px;
}

こちらも動作サンプルを用意しています。

サンプル

4.IEの対処

CSS Spriteの話ではありませんが、上記のサンプルでは「display: inline-block;」の指定を行っていて、過去バージョンのIEでは正常に動作しません。

その場合、次のような条件付きコメントを設定すると良いでしょう(間違っていたらご指摘ください)。

<!--[if lte IE 7]>
<style>
#sbm_icon li {
    display: inline;
    zoom: 1;
</style>
<![endif]-->
Comments [0] | Trackbacks [0]
2012年6月 5日

複数のJavaScriptファイルを簡単にマージできるオンラインサービス「JMerge」

June 5,2012 11:55 PM
Tag:[, ]
Permalink

ウェブサイトのパフォーマンスを向上させるテクニックの1つに、HTTPリクエスト数を減らす方法があります。

複数のJavaScriptファイルを1つにまとめるのもその1つですが、複数のファイルを1つにまとめる作業はちょっと面倒です。

が、本エントリーで紹介するオンラインサービス「JMerge」を利用すれば、ウェブサイトで利用している複数のJavaScriptファイルを簡単にマージすることができます。

JMerge
JMerge

ページ内にマージしたくないJavaScriptファイルがある場合も、簡単に除外できます。

使い方

フォームの「URL:」に、ウェブサイトのURLを入力して「Continue」をクリック。

URLを入力

ウェブサイトで使われているJavaScriptファイルを上から順番に検索し、一覧として表示します。ここに表示されているファイルがマージ候補になります。

JavaScriptファイル

表示されたURLをクリックすれば、マージしたくないCDNやAdsense、Analyticsなどのコードを削除できます。

JavaScriptファイル(削除後)

最後に「Combine them!」をクリックすれば、マージしたソースコードが表示されます(IEの場合はファイルのダウンロード)。

Combine

単にマージするだけでなく、ファイルを取捨選択できるという、かゆいところに手が届くサービスですね。

Comments [0] | Trackbacks [0]
2012年6月 3日

Movable Typeの再構築で圧縮ファイルを出力する「GzipFilePublisherプラグイン」

Movable Typeの再構築時にgzip圧縮したファイルを出力する「GzipFilePublisherプラグイン」を公開します。

1.機能

このプラグインでは、テンプレートの再構築時に圧縮ファイルを同時に出力します。例えばメインインデックス「index.html」を再構築した場合、「index.html.gz」も同時に出力します。

圧縮ファイルの出力有無は、テンプレートの中にある次の行で判断します。

<mt:ignore>gzip</mt:ignore>

2.プラグインのダウンロード・インストール

下記のリンクをクリックして、プラグインアーカイブをダウンロードします。

GzipFilePublisher_0_01.zip

プラグインアーカイブを展開し、中にあるGzipFilePublisherフォルダごと、Movable Type のアプリケーションディレクトリのpluginsディレクトリにアップロードします。

システム管理画面のプラグイン設定画面で、「GzipFilePublisher~」が表示されればインストール完了です。

プラグイン設定画面

3.設定

冒頭に記したとおり、圧縮ファイルを出力させたいテンプレートの任意の位置に、次の内容を記載してください。

<mt:ignore>gzip</mt:ignore>

4.注意事項

圧縮ファイルを出力するタイミングは、再構築で通常のファイルが出力された時点となります。出力ファイルの内容に変更がない場合は通常のファイルが出力されないのと同様、圧縮ファイルも出力されません(本プラグインのMTIgnoreタグを挿入しても、ファイル内容の変更にはなりません)。

Comments [0] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3