CSSによる画像分割を行うSprite画像を生成する「SpriteMe」
小さなアイコンを多数集めて一つの画像にし、CSSで分割するCSS Spriceという技術については何度か紹介したい。Tonttuもその代表ソフトウェアの一つだ。ブラウザからサーバに対するアクセス数が減るのが最も大きな効果で、小さなアイコンを数多く使っているサイトほど有効だ。
生成したい画像をドロップする
Tonttuの場合、アイコンが手元にある状態から開始する。逆にWebサイトからアイコンを抽出するのがSpriteMeだ。
今回紹介するオープンソース・ソフトウェアはSpriteMe、既存サイトからSprite画像を生成するソフトウェアだ。
SpriteMeはPHPで作られたソフトウェアで、ブックマークレットを使って動作する。任意のWebサイトにてブックマークレットを実行すると、フローティングウィンドウが表示されてそこで表示されている画像を抽出する。そしてリストアップされている画像の中でSprite画像にしたいものをドラッグアンドドロップで登録し、新しく画像を作成する。
生成中。しかしこの後の反応が返ってこなかった
というのが流れになるのだが、Google Codeで公開されているものはCGIにアクセスする部分があり利用できない(CGIはソースコードに含まれていない)。SpriteMe.orgで公開されているJavaScriptコードはCGIに関するURLが消えており、利用はできるのだが画像の生成がうまくいかなかった。
ということで現状では生成されたSprite画像を確認することができなかった。とは言えコードを修正すればうまくいくかも知れない。既存のWebサイトに幾つ画像があるのか、といった確認は面倒でその画像を集めてSprite画像にするというのは手間のかかる作業だ。SpriteMeを使えればそのような作業はきっと簡単になるはずだ。
spriteme - Project Hosting on Google Code