CodeKitでWeb制作が快適かつスピーディーになった

もう随分前になるんですが、Web制作をもっと効率よく進めたいなぁと日々考えてる僕は色んな情報を探してネットサーフィンに勤しみ、検討に検討を重ねた結果、CodeKitというアプリを購入しました。もうね、これサイコー。これなくなったら死ぬわ。嘘、泣く。

CodeKitってこんなアプリ

CodeKit — THE Mac App For Web Developers

$25のアプリらしいです。日本円だとね、んー、まぁあれだ、だいたいだ。高くない高くない。無料お試し期間もあるし気にしないで入れてみなって。

• CSSメタ言語のコンパイル
• プロジェクト単位で監視してくれる
• JSのminify化
• ブラウザのオートリロード
• 画像の最適化

こんなことができるアプリです。どうです？凄くない?

具体的には？

僕はCSSメタ言語のコンパイルが一番重宝しています。対応しているCSSメタ言語は

• LESS
• SASS
• Stylus

しかもCompassも使えます。

もちろんプロジェクト単位でファイルの監視もしてくれるので、もう黒い画面は必要ありません。このアプリだけで今からCSSメタ言語生活です。

他にもCoffeeScript、Haml、Jade、Slimと色々コンパイルできるみたいなんですが、僕は使ったことがないものなので「へぇ、色々あるんだぁ、凄いねぇ」くらいの印象です。

あとは地味に嬉しいのがブラウザのオートリロードですかね。グッバイコマンドアール。

で、CSSメタ言語って？

CSSメタ言語とは、CSSをもちょっと構造的にかけたりいつも使う数値や文字列を使い回せるちょっとステキなCSSです。以前に入門的なものを書いてますのでご参考までに。

SS | はじめの一歩！CSSをもっと便利に書けるLESSとは

SS | LESSじゃなくてSASSを使った方が良いな気がしてきたからSASSにします

使い方

まずはプロジェクトを追加しましょう。

追加の方法は、プロジェクトフォルダをアプリにドロップします。

プロジェクトファイルは概ねドキュメントルートになると思うのですがその際はプロジェクト名が「htdocs」とかになってて分かりにくいこともあるかと思います。その際はプロジェクト名を変更できますので右クリックでリネームして下さいね。

次は、プロジェクトフォルダにSASSとかSCSSとかLESSとかのファイルが入っていれば、それらのファイルを保存すればコンパイルされます。

すごいね！！

コンパイル先フォルダとファイルの指定

ただし、そのままだとコンパイルされたファイルの記述方法もコンパイル先ディレクトリもデフォルトのままです。適宜変えましょう。変え方は、プロジェクトを右クリックで「ProjectSettings -> Enable Project-level setting」です。

その中のSASS（別言語だったら別の箇所ね）をクリックして、各項目を設定します。

Output Style

• Nested（デフォ）
• Expanded(普通のCSSっぽい)
• Compact（セレクタと属性を1行にする）
• Compact（圧縮）

とか。

Set the initial output path for new Sass files

出力先をどこにするかを決めます。大抵「/sass/」にsassを置いて「/css/」にcssを置くんじゃないかと思うから、 「To this path」をチェックして「 ../css」でいいんじゃないでしょうか

どう？

凄くね？

「へー、んで？」程度の方はとりあえず無料期間があるので一度試してみると良いと思います。そもそもCSSメタ言語の良さが分かんないよ、って方はまず普通のCSSファイルの拡張子をsassに変えてみて、ちょっとずつ入れ子にしてみたり変数を使ったりしてみると良いと思いますよ。

他には？

他に僕が使ってる機能というか、CodeKitを使うようになってからCompassを使うようになりました。もうね、簡単だしさ。というかCSS Sprite使いたかったんですよね。

CSSスプライトに関してはこちら。僕が以前に書いたやつですけどね。

SS | Compassでお手軽cssスプライト生成！

CSSスプライトは決定打が見つからなくて嘆いてたんですが、今のところCompassを使っています。いや、便利ですよ？

そんな感じですがいかがでしょうかね

おわりに

マルチデバイス対応だとか高速化だとか、プロとしてフロントエンドに求められる要素はかなり多くなっていると感じますね。便利なサービスが数多く出て「Webサイトは誰にでも作れる時代になった。これじゃ俺たちは廃業だ」って言葉も何度ネット上を駆け回ったか分かりません。

でも、僕たちは廃業していないし、これからもきっと廃業しません。それは「簡単に作れるサイトとプロが作るサイトは価値が違う」という事実があり、かつその事実を知っている人がいるからですよね。

でもということはプロであればそれなりのスキルが必要になってくるしそれなりの丁寧な仕事が必須になってきます。

それを少しでも効率よくするためにこういった便利なツールも色々と出てきているので、あくまでも「ツールに使われる」事のないように、ツールを使っていってプロとしての制作を今後もやっていきたいですね−。