CSS Nite LP26「CSS Preprocessor Shootout」フォローアップ（7）『環境に合わせて快適コンパイル生活』こもり まさあきさん

2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、こもり まさあきさんの『環境に合わせて快適コンパイル生活』のスライドなどを公開します。

• スライド
• 音声

メッセージ、補足

こもりの担当セッションはツールの紹介に終始しました。既に使い始めている方には物足りない、コマンドラインを敬遠されてる方には理解しにくい内容だったかもしれません。ただ、昨日の皆さんのセッションでもたびたび出てきてたように、Webの制作方法が大きく様変わりしているような時代です。

ツールはいつもコマンドラインで使うものから始まります。GUIのツールというのは、環境の用意や黒い画面で実行しているコマンドにグラフィカルなボタンをつけただけです。コマンドラインといっても、昨日ご覧いただいたように入れるのはせいぜい2、3個。それだけ覚えてしまえば難しいことはありません。

Webがアプリケーション化しているというお話もあったように、仕事の境界線すらあいまいになって複雑化している状況に今後乗り遅れず対応するためにも、そろそろプリプロセッサをその入り口として、通称「黒い画面」にも触れてみてはいかがでしょうか？

本セッションの後半は「Ruby」や「Node.js」のいずれかが必要なものばかりです。付け加えるなら「Git」などもそろそろ導入しておく方が作業の効率化は図れます。いずれも、説明し始めるとそれだけで1日のセッションになってしまうので、簡単なインストーラの所在地だけお伝えしておきます。OS XにはあらかじめRubyは入っているので、そのままのバージョンでよければすぐに「Sass」や「Compass」はコマンドラインから使えるようになります。

※インストール方法や使い方はGoogleなどで検索してください。

• Ruby Installer for Windows ～Windows向けのRubyの簡単インストーラ
• RVM ～Rubyのバージョンマネージャ
• rbenv ～最新のRubyのバージョンマネージャ
• Node.js ～Node.jsのオフィシャルサイト
• nodebrew ～ピクセルグリッドの外村さんが作られてるNode.jsのバージョンマネージャ

最後に、本セッション中で軽く流した「roots」について簡単な操作説明をビデオで用意しました。

CSS Nite LP, Disk 26 roots demo from komori, masaaki on Vimeo.

rootsは、佐藤さんが説明された「Stylus」を使ったWebサイト制作が可能なツールキットです。こういったツールが出てくるということは、Webが使うものに変化していることにあわせて、これまでのような静止画のカンプを用意してからHTML+CSS化するワークフローではなく、いろんな技術を組み合わせてブラウザ内で素早く構築できるような流れになりつつあるということでしょう。 ##ビデオ