karky7のブログ: WebデザイナーこそGentooを使うべき4つの理由

なぜGentooなのか!?

最近、弊社のデザイン部隊がCSS NiteというWeb系のデザイン関連の勉強会に行ったらしく、スタイルシートが題材の土産話に、こんなことを言っていた。

「これからのWebデザインは、Macで行うのが主流になるんじゃないのぉー、ターミナルとかでコマンドうってさ、コンパイルしちゃったりやったりするんだよぉー」

何て話を、そのチームのリーダーが豪語していました、でもちょっと待って、ターミナルなんてGentooにはディフォルトで備わっているし、コマンドなんていくらでも、どうにでもなるし、そこで一言、私はあえて、その上司に苦言を申し出た

「いや、誤解ですよ××リーダー、Webデザイン、スタイルシート系編集はGentooでやるんです」

スタイルシートコンパイラを導入する

CSSコンパイラがGentooでどこまでイケてるのか知ってもらうためにやってみる

1. LESSのインストール

LESSとは変数、ミックスイン、演算、関数のような動的な処理をCSSに追加拡張できる便利なもの、インストール方法はまずnodejsのマスクを外して、インストールする

karky7 ~ # cat /etc/portage/package.keywords | grep nodejs
net-libs/nodejs ~amd64
karky7 ~ # emerge net-libs/nodejs
karky7 ~ # npm install -g less
npm http GET https://registry.npmjs.org/less
npm http 200 https://registry.npmjs.org/less
npm http GET https://registry.npmjs.org/less/-/less-1.3.3.tgz
npm http 200 https://registry.npmjs.org/less/-/less-1.3.3.tgz
npm http GET https://registry.npmjs.org/ycssmin
npm http 200 https://registry.npmjs.org/ycssmin
npm http GET https://registry.npmjs.org/ycssmin/-/ycssmin-1.0.1.tgz
npm http 200 https://registry.npmjs.org/ycssmin/-/ycssmin-1.0.1.tgz
/usr/bin/lessc -> /usr/lib/node_modules/less/bin/lessc
less@1.3.3 /usr/lib/node_modules/less
└── ycssmin@1.0.1
karky7 ~ # which lessc
/usr/bin/lessc

利用方法

Mixinsなどはこの様にできる、まずlessファイルを作成する

cuomo@karky7 ~ $ cat sample.less 
.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

保存した後に、lesscコマンドでコンパイルすると、CSSが吐き出される

cuomo@karky7 ~ $ lessc sample.less 
#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
cuomo@karky7 ~ $

LESSの詳しい使い方はこちらで

2. sass、scss

CSSを拡張したメタ言語sassとその別文法なscssっていうのがあってこれもCSSを作成する言語らしい

sass、scssが出来ること

変数
セレクタのネスト
ミックスイン
セレクタの継承

とかが出来るらしい、まだ突っ込んで使ったことがないので詳細はそれ系の方の優れた資料にお願いするとしして、とりあえずインストールしてみる。

rubyが必要なのと必要なマスクを外す

karky7 ~ # cat /etc/portage/package.keywords 
dev-ruby/sass ~amd64
virtual/ruby-ffi ~amd64
dev-ruby/listen ~amd64
dev-ruby/rb-inotify ~amd64

rubyのUSEフラグにthreadsを加える

karky7 ~ # cat /etc/portage/package.use
dev-lang/ruby:1.8 threads

karky7 ~ # emerge -pv sass

These are the packages that would be merged, in order:

Calculating dependencies... done!
[ebuild  N     ] virtual/ruby-threads-1:ruby19  RUBY_TARGETS="(ruby19)" 0 kB
[ebuild  N     ] virtual/ruby-threads-0:ruby18  RUBY_TARGETS="(ruby18)" 0 kB
[ebuild  N     ] dev-ruby/syntax-1.0.0-r3  USE="{-test}" RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 15 kB
[ebuild  N     ] dev-ruby/rake-compiler-0.8.1  USE="{-test}" RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 28 kB
[ebuild  N     ] dev-ruby/maruku-0.6.0-r2  USE="doc {-test}" RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 148 kB
[ebuild  N     ] dev-ruby/ffi-1.1.5  USE="doc {-test}" RUBY_TARGETS="ruby18 ruby19 (-ree18)" 874 kB
[ebuild  N     ] dev-ruby/yard-0.8.3  USE="doc {-test}" RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 1,056 kB
[ebuild  N    ~] virtual/ruby-ffi-1  RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 0 kB
[ebuild  N    ~] dev-ruby/rb-inotify-0.9.0  USE="doc {-test}" RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 13 kB
[ebuild  N    ~] dev-ruby/listen-0.7.2-r1  USE="{-test}" RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 34 kB
[ebuild  N    ~] dev-ruby/sass-3.2.5  USE="doc {-test}" RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 247 kB
...

karky7 ~ # emerge dev-ruby/sass

これで、sass、scssコマンドが使えるようになる、使い方はこちらを参照してください

3. compass

これはCSSを書くためのフレームワークららしくgemでインストールする

karky7 ~ # emerge dev-ruby/rubygems

そしたら、こんな感じで

cuomo@karky7 ~ $ gem install compass
Fetching: chunky_png-1.2.7.gem (100%)
Fetching: fssm-0.2.10.gem (100%)
Fetching: compass-0.12.2.gem (100%)
Successfully installed chunky_png-1.2.7
Successfully installed fssm-0.2.10
Successfully installed compass-0.12.2
3 gems installed
Installing ri documentation for chunky_png-1.2.7...
Building YARD (yri) index for chunky_png-1.2.7...
Installing ri documentation for fssm-0.2.10...
Building YARD (yri) index for fssm-0.2.10...
Installing ri documentation for compass-0.12.2...
Building YARD (yri) index for compass-0.12.2...
Installing RDoc documentation for chunky_png-1.2.7...
Installing RDoc documentation for fssm-0.2.10...
Installing RDoc documentation for compass-0.12.2...
cuomo@karky7 ~ $

~/.gem/ruby/1.8/binにcompassコマンドが入るので適当にPATHを通してください。

それからプロジェクトらしき物を作ります

cuomo@karky7 ~ $ mkdir compass_scss
cuomo@karky7 ~ $ cd compass_scss/
cuomo@karky7 ~/compass_sample $ compass create
directory sass/ 
directory stylesheets/ 
   create config.rb 
   create sass/screen.scss 
   create sass/print.scss 
   create sass/ie.scss 
   create stylesheets/screen.css 
   create stylesheets/ie.css 
   create stylesheets/print.css
...
...

sassのシンタックスを使う場合は

cuomo@karky7 ~/compass_sass $ compass create --syntax sass
directory sass/ 
directory stylesheets/ 
   create config.rb 
   create sass/screen.sass 
   create sass/print.sass 
   create sass/ie.sass 
   create stylesheets/screen.css 
   create stylesheets/ie.css 
   create stylesheets/print.css 
...
...

compassのコマンド

compassはこんな感じで使うらしい

cuomo@karky7 ~/compass_scss $ compass compile sass/screen.scss 
   create stylesheets/screen.css

ファイルを監視できて、保存した後に自動でcompileが実行される

cuomo@karky7 ~/compass_scss $ compass watch sass/screen.scss 
>>> Compass is watching for changes. Press Ctrl-C to Stop.
>>> Change detected at 23:52:09 to: screen.scss
overwrite stylesheets/screen.css

ディレクトリ下で、watchするとファイル全部を監視してくれる

cuomo@karky7 ~/compass_scss $ compass watch
>>> Compass is watching for changes. Press Ctrl-C to Stop.
>>> Change detected at 23:53:49 to: screen.scss
identical stylesheets/screen.css 
>>> Change detected at 23:53:58 to: print.scss
identical stylesheets/print.css

詳しくはこちらで確認してください、申し訳ない

4. 最後に、CodeKit

そして最後にCodeKit、これは、....すみません使ったことありませんしGentooにはインストールできないでしょう、こういう綺麗なエディタらしいです、色々出来そうですが、このあたりはMacの先生に聞いてください。

これは、やはりemacsで代用する、

karky7 ~ # emerge app-emacs/css-mode

これだけでイケる、問題ない、こんなに綺麗

やっぱGUIがいいって人には、geditとかbluefishなんかどうでしょう?

karky7 ~ # USE="cjk" emerge bluefish

いろいろなファイルを編集できたような気がします、こんな感じです

いろいろなファイルタイプを編集できます、左のペインにはファイラー的なものもあったりしていいんじゃどうでしょう？　詳しくはこちらで確認してください

やはりWebデザインはGentooという結果が...

知ったかぶって色々書いてみましたが、CSSはよく分かってません、笑...
「インストールはいいから使い方を書けって！」って言われそうですが使い方は分かりません、笑...

確かに最近のMac人気は凄いなって感じます、三島あたりでは、PC開けてる人はほぼMacですからね、なのであえて断言しましょう、WebのデザインはGentooで.....ｷﾘｯ

ちなみに、Gentooを使ってる人を三島近辺でで見たことありません......Orz....

karky7のブログ

2013年2月7日木曜日

WebデザイナーこそGentooを使うべき4つの理由