• このエントリーをはてなブックマークに追加

はじめに

Perl界隈での12月の風物詩 「JPerl advent calendar」の「Casual track」に1つエントリしたので,こちらでもご報告.

概要

詳しくは上記エントリにて.ここではさらっとさわりだけ.

まとめると,CSS Spriteのための連結画像やCSSを手動で準備するのがメンドイので,1つ1つバラバラな状態の画像や連結方法等を定義したファイルを1つのディレクトリ下に置いて,そのディレクトリを指定するだけで,連結された画像や background-position の値が自動で計算されたCSSなどができあがるようなことをPerlでやってみよう,ということです.

補足

同ディレクトリに,どのように画像をつなげるか,などを定義したファイルを置く(「マニフェストファイル」と呼ぶことにします.まぁ設定ファイルです.)
Image::SizeとImage::Imlib2を使ってCSS Spriteしてみよう – JPerl advent calendar 2010 casual Track

これについて,何パタンかのマニフェストの下で連結してみます.連結対象は,上記エントリと同様,次の16個の個別の画像です.

ss-2010-12-12-01

上記エントリでのマニフェスト

my $m = {
    base => {
        selector => '#navi ul li% a%',
        props => [
            display => 'block',
            width   => '160px',
            height  => '50px',
        ],
    },
 
    image_path => '.',
 
    images => [
        [
            a1 => '',
            b1 => '',
            c1 => '',
            d1 => '',
        ],
        [
            a2 => ['#a1', ':hover'],
            b2 => ['#b1', ':hover'],
            c2 => ['#c1', ':hover'],
            d2 => ['#d1', ':hover'],
        ],
        [
            e1 => '',
            f1 => '',
            g1 => '',
            h1 => '',
        ],
        [
            e2 => ['#e1', ':hover'],
            f2 => ['#f1', ':hover'],
            g2 => ['#g1', ':hover'],
            h2 => ['#h1', ':hover'],
        ],
    ],
};
2010-12-12-02
#navi ul li a {
  background-image: url(./csssprite.png);
  display: block;
  width: 160px;
  height: 50px;
}
#navi ul li#a1 a { background-position: 0px 0px; }
#navi ul li#b1 a { background-position: -160px 0px; }
#navi ul li#c1 a { background-position: -320px 0px; }
#navi ul li#d1 a { background-position: -480px 0px; }
#navi ul li#a1 a:hover { background-position: 0px -50px; }
#navi ul li#b1 a:hover { background-position: -160px -50px; }
#navi ul li#c1 a:hover { background-position: -320px -50px; }
#navi ul li#d1 a:hover { background-position: -480px -50px; }
#navi ul li#e1 a { background-position: 0px -100px; }
#navi ul li#f1 a { background-position: -160px -100px; }
#navi ul li#g1 a { background-position: -320px -100px; }
#navi ul li#h1 a { background-position: -480px -100px; }
#navi ul li#e1 a:hover { background-position: 0px -150px; }
#navi ul li#f1 a:hover { background-position: -160px -150px; }
#navi ul li#g1 a:hover { background-position: -320px -150px; }
#navi ul li#h1 a:hover { background-position: -480px -150px; }

別パタン その1

my $m = {
    base => {
        selector => '#navi ul li% a%',
        props => [
            display => 'block',
            width   => '160px',
            height  => '50px',
        ],
    },
 
    image_path => '.',
 
    images => [
        [
            a1 => '',
            b1 => '',
            c1 => '',
            d1 => '',
            e1 => '',
            f1 => '',
            g1 => '',
            h1 => '',
        ],
        [
            a2 => ['#a1', ':hover'],
            b2 => ['#b1', ':hover'],
            c2 => ['#c1', ':hover'],
            d2 => ['#d1', ':hover'],
            e2 => ['#e1', ':hover'],
            f2 => ['#f1', ':hover'],
            g2 => ['#g1', ':hover'],
            h2 => ['#h1', ':hover'],
        ],
    ],
};
ss-2010-12-13-01
#navi ul li a {
  background-image: url(./ss-2010-12-13-01.png);
  display: block;
  width: 160px;
  height: 50px;
}
#navi ul li#a1 a { background-position: 0px 0px; }
#navi ul li#b1 a { background-position: -160px 0px; }
#navi ul li#c1 a { background-position: -320px 0px; }
#navi ul li#d1 a { background-position: -480px 0px; }
#navi ul li#e1 a { background-position: -640px 0px; }
#navi ul li#f1 a { background-position: -800px 0px; }
#navi ul li#g1 a { background-position: -960px 0px; }
#navi ul li#h1 a { background-position: -1120px 0px; }
#navi ul li#a1 a:hover { background-position: 0px -50px; }
#navi ul li#b1 a:hover { background-position: -160px -50px; }
#navi ul li#c1 a:hover { background-position: -320px -50px; }
#navi ul li#d1 a:hover { background-position: -480px -50px; }
#navi ul li#e1 a:hover { background-position: -640px -50px; }
#navi ul li#f1 a:hover { background-position: -800px -50px; }
#navi ul li#g1 a:hover { background-position: -960px -50px; }
#navi ul li#h1 a:hover { background-position: -1120px -50px; }

別パタン その2

my $m = {
    base => {
        selector => '#navi ul li% a%',
        props => [
            display => 'block',
            width   => '160px',
            height  => '50px',
        ],
    },
 
    image_path => '.',
 
    images => [
        [
            a1 => '',
            b1 => '',
            c1 => '',
            d1 => '',
            a2 => ['#a1', ':hover'],
            b2 => ['#b1', ':hover'],
            c2 => ['#c1', ':hover'],
            d2 => ['#d1', ':hover'],
        ],
        [
            e1 => '',
            f1 => '',
            g1 => '',
            h1 => '',
        ],
        [
            e2 => ['#e1', ':hover'],
            f2 => ['#f1', ':hover'],
            g2 => ['#g1', ':hover'],
            h2 => ['#h1', ':hover'],
        ],
    ],
};
ss-2010-12-13-02
#navi ul li a {
  background-image: url(./ss-2010-12-13-02.png);
  display: block;
  width: 160px;
  height: 50px;
}
#navi ul li#a1 a { background-position: 0px 0px; }
#navi ul li#b1 a { background-position: -160px 0px; }
#navi ul li#c1 a { background-position: -320px 0px; }
#navi ul li#d1 a { background-position: -480px 0px; }
#navi ul li#a1 a:hover { background-position: -640px 0px; }
#navi ul li#b1 a:hover { background-position: -800px 0px; }
#navi ul li#c1 a:hover { background-position: -960px 0px; }
#navi ul li#d1 a:hover { background-position: -1120px 0px; }
#navi ul li#e1 a { background-position: 0px -50px; }
#navi ul li#f1 a { background-position: -160px -50px; }
#navi ul li#g1 a { background-position: -320px -50px; }
#navi ul li#h1 a { background-position: -480px -50px; }
#navi ul li#e1 a:hover { background-position: 0px -100px; }
#navi ul li#f1 a:hover { background-position: -160px -100px; }
#navi ul li#g1 a:hover { background-position: -320px -100px; }
#navi ul li#h1 a:hover { background-position: -480px -100px; }

まとめ

こんな感じで,画像の連結方法をマニフェストで定義し,CSSもそれに従って生成されるようになっています.

モジュール化してみた

以上のような処理部分をモジュール化してみたものを「Image::CSSSprite」としてGitHubに上げました.

そこまで柔軟ではありませんが,単純なケースには対応できるのかな,と思ってます.

おわりに

以上,JPerl advent calendar 2010 の Casual track に,Perlで CSS Sprite的なことをする内容のエントリをしましたよ,というお話でした.

コード書いて,文章書いて,で日曜日をまる一日使ってしまいましたw でもまぁ楽しかったですよ,と.

それでは,Enjoy CSS-spriting!