画像の輪郭が四角くない場合でも、その周りを四角く囲むようにテキストを配置したウェブサイトは、ややまぬけに見える。pngsliceは、画像を細長いスライスに分割し、ウェブブラウザ上で元の画像と同じに見えるようにそれらを並べるための小さなHTMLを生成するツールである。これにより四角形ではない画像をウェブページ上にフロートさせ、その画像の不規則な輪郭に沿ってテキストを配置して、プロっぽくレイアウトすることが可能だ。
同様の効果を得る方法は他にもあるが、どのようなブラウザでも、またブラウザのバージョンが違っても表示可能なウェブサイトを作成したいならば、画像をスライスする方法が効果的だろう。
pngslice 0.65は、Ubuntu Hardy、openSUSE、Fedora向けにパッケージ化されていないが、「./configure && make && sudo make install」という通常のプロセスで簡単にビルドすることができる。
|
| example-image.png |
pngsliceの動作を示すために、ここではexample-image.pngという画像を使用する。この画像ファイルに対し、他に何も引数を指定せずに直接pngsliceを起動すると、この画像をスライスしたexample-image.01.pngからexample-image.17.pngという名前の17個の画像ファイルと、それらを並べてウェブブラウザ上に元の画像を再現するためのexample-image.sliced.htmlという名前のHTMLファイルが生成される。
HTMLファイルでは、パスやURLがない状態で画像を参照する。つまり、ウェブサイトにこのスライスされた画像を表示する場合、画像ファイルはカレントディレクトリに存在するものとみなされる。以下のように-iオプションを指定してコマンドを実行すると、生成されたexample-image.sliced.htmlにおいて、foo.example.com/imagesというURLがパスとして各画像ファイル名の前に付加される。
pngslice -i 'http://foo.example.com/images/' example-image.png