このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

CSSスプライトを コマンドで生成 「Glue」の使い方

CSS

2014.08.23

この記事は最終更新日から1年以上が経過しています。

昨今、フロントエンド(バックエンドもそうでしょうが)の技術、環境はめまぐるしく変わってきてます。

CSS3が登場した時多くの人が声を上げて驚いたでしょう。

SASS、Compassが登場した時、手を叩いて喜んだでしょう。

Gruntが登場した時多くの人が泣きわめいたでしょう。

・・・

それはさておき、便利になった故に納得のいかない部分もでてきたりします。

人間はなんて欲深い生き物でしょう。

あ。いや、そんな大袈裟なことではないのですが、今回はCSSスプライトについてです。

compassやGruntでwatchさせているとコンパイルに時間がかかったりで(Rubyで設定で避けられますが。。)

避けたにしろ、ディレクトリに画像ファイルが沢山残ったりで、デプロイ対象外にしたとしても、残っているファイルがどうしても許せないくらいストイックな感情になっていたりして。。。

等のもやっとした感情を抱いていたのですが、それらをサクっと解決してくれそうなツールが既出でした。

Glue

http://glue.readthedocs.org/en/latest/index.html

なんだ、あるじゃないか。

今回はこちらのサイト等を参考にさせて頂きました。mm

速いは正義!CSSスプライトの作成効率を10倍高めるGlueの使い方まとめ

http://creator.dena.jp/archives/29409333.html

Giue 概要

何が出来る?

・Glueをインストールし、コマンドを打つだけで スプライト画像とCSSを出力してくれます。

でも扱い方が難しいんでは?

・Glueの使用方法は至って簡単です。ホンの1行のコマンドでスプライト画像とCSSを出力してくれます。

お高いんでしょう?

・Glueは無料です! 100回でも1000万回でも無料のまま使用出来ます。

あら。使ってみようかしら

・導入方法は以下の通りとなります。

インストール

Glue インストール

http://glue.readthedocs.org/en/latest/installation.html

ドキュメントには、OSX、Debian/Ubuntu、windowsとありますがOSXのみの方法となります。

インストールにはHomebrewが必要となってきます。

ターミナルで

brew -v

と入力し、バージョンが表示せず brew: command not found 的な表示が出たらインストールされていませんのでインストールしましょう。

インストール済みの方は次の「Homebrew インストール」を飛ばしてください。

Homebrewインストール

Homebrew 公式サイトに書かれている方法を用いてインストールを行いましょう。

ソフトウェアをビルドするためにXcodeのインストールが必要となってきます。

xcodeコマンドラインをインストール

前回までは、

「Xcode」→「Preferences」→「Downloads」→「Components」

に存在していたのですが、バージョンアップと共に場所が変わったみたいです。

以下の手順をとると、AppleDevelopers のインストールサイトに飛びます。

「Xcode 」→ 「Open Developer Tool 」→ 「More Developer Tools」

ログインにはAppleIDが必要となってきます。

コマンドラインツール

https://developer.apple.com/downloads/index.action

インストール

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go/install)"

インストールに失敗した場合は、

rm -rf /usr/local/Cellar /usr/local/.git

で、brewをcleanupする必要があるようです。

brewは /usr/local 以下にファイルを生成します。

Celler(セラー)は貯蔵庫となっていてインストールの保存先となります。

成功

Installation successful!

このようにインストール成功しましたら、以下のコマンドで問題がないかチェックしていきましょう。

brew doctor

Glue インストール

いよいよGlueのインストールです。

brew install jpeg
sudo easy_install pip
sudo pip install glue

GlueはPythonのライブラリとなっていまして、pipというPythonのパッケージ管理システムを使ってインストールを行います。

os 10.9.2だと、

File “/System/Library/Frameworks/Python.framework/Versions/2.7/Extras/lib/python/pkg_resources.py”, line 2603, in <module>〜〜〜

等のエラーが出てしまい上手く使用出来ませんでした。

その際は、pythonを再インストールするとよいでしょう。

brew reinstall python

–no-use-wheel オプションをつけてアップデートします。

pip install --upgrade --no-use-wheel setuptools
pip install --upgrade --no-use-wheel pip

Glueを再度インストール

sudo pip uninstall glue
sudo pip install glue

で上手くいきました。

使用方法

インストールが完了しましたら、早速使ってみましょう!

今回はウェブ帳のロゴ4つを用意して、iconディレクトリに格納しました。

これらの画像をスプライト化していきたいと思います。

glueは、Terminalなどのコマンドラインツールを使って操作を行なっていきます。

基本的なコマンドは以下の様な感じです。

glue input output option

glue でglueコマンド実行。

input:スプライト化を行う画像、格納先

output:スプライト化した画像の出力先

option:オプションを使用する際に付与

複数ある場合も後ろに半角スペースで区切って指定できます。また省略も可能です。

では、iconフォルダにある画像を spriteフォルダに出力します。

spriteフォルダは自動的に生成されます。

こんな感じ生成されます。

icon.png

icon.css

この様にスプライト前の元ファイル名が、cssクラスとして出力されます。

主にスマートフォンサイト制作の場合だと、2倍サイズの画像を縮小しレティナ対応を行うのですが、

–retina オプションを付与すると @2x画像として書き出しが可能となっております。

glue icon sprite2 --retina

icon@2x.png と書き出され、cssの方はメディアクエリで出力されます。

–ratios で様々な指定が可能となっております。

先程のは–ratios=2,1 の出力と同様の出力となります。

その他のオプションとして、–watchでwatchしたり、–marginでスプライト画像の余白、–png8でpng8で出力したり、–cachebusterでキャッシュクリアのパラメータを付与したりと様々な事が可能となっております。

オプションの詳細は公式ドキュメントを参考にしてください。

http://glue.readthedocs.org/en/latest/options.html

以上となりますー。


Comment

Related Article

CSSスプライトを コマンドで生成 「Glue」の使い方

2014.08.23

jsdo.it企画 CSSで必殺技に参加しています。

2011.12.07

CSS圧縮 webサービス css compressor

2011.11.26

同一クラスで異なるレイアウト CSS 隣接セレクタ

2011.10.26

css 文頭のみ インデントを適応させない

2011.10.19

CSSをライブラリ化?Sass(scss)のインストール 使用方法 mac

2011.09.05

IE6 クリアーフィックスが効かない時

2011.06.25

CSS ブラウザの縦幅に合わせレイアウト調整

2011.06.05

css リキッドレイアウト スマートフォンでも利用化

2011.02.23

CSSとはなんぞや? (スタイルシート物語)

2010.11.25

CATEGORY LIST

LATEST NEWS

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

Rails5 gemでmysql2が インストールできない

Ruby

2019.05.05

平成最後のお買い物!!「Logicool MX Master 2 Wireless Mouse」と「K780 マルチデバイス BLUETOOTH® キーボード」で快適PC生活。

ubuntu

2019.04.27

Amazon 87時間のビックセール タイムセール祭りで購入したもの

イベント

2019.04.23

Androidに Linuxを簡単にインストールするアプリ「UserLAnd」

Linux

2019.04.16

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

JavaScript

2019.03.24

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US