CodeKitでWeb制作が快適かつスピーディーになったSTACKSTOCK日々の出来事や感じた事、学んだ事を蓄積(STOCK)して積み上げ(STACK)てますCodeKitでWeb制作が快適かつスピーディーになった2013年02月19日もう随分前になるんですが、Web制作をもっと効率よく進めたいなぁと日々考えてる僕は色んな情報を探してネットサーフィンに勤しみ、検討に検討を重ねた結果、CodeKitというアプリを購入しました。これなくなったら死ぬわ。Developers$25のアプリらしいです。日本円だとね、んー、まぁあれだ、だいたいだ。無料お試し期間もあるし気にしないで入れてみなって。CSSメタ言語のコンパイルプロジェクト単位で監視してくれるJSのminify化ブラウザのオートリロード画像の最適化こんなことができるアプリです。?凄くない?具体的には?僕はCSSメタ言語のコンパイルが一番重宝しています。対応しているCSSメタ言語はLESSSASSStylusしかもCompassも使えます。プロジェクト単位でファイルの監視もしてくれるので、もう黒い画面は必要ありません。このアプリだけで今からCSSメタ言語生活です。他にもCoffeeScript、Haml、Jade、Slimと色々コンパイルできるみたいなんですが、僕は使ったことがないものなので「へぇ、色々あるんだぁ、凄いねぇ」くらいの印象です。あとは地味に嬉しいのがブラウザのオートリロードですかね。グッバイコマンドアール。CSSメタ言語って?CSSメタ言語とは、CSSをもちょっと構造的にかけたりいつも使う数値や文字列を使い回せるちょっとステキなCSSです。以前に入門的なものを書いてますのでご参考までに。LESSじゃなくてSASSを使った方が良いな気がしてきたからSASSにします使い方まずはプロジェクトを追加しましょう。追加の方法は、プロジェクトフォルダをアプリにドロップします。プロジェクトファイルは概ねドキュメントルートになると思うのですがその際はプロジェクト名が「htdocs」とかになってて分かりにくいこともあるかと思います。その際はプロジェクト名を変更できますので右クリックでリネームして下さいね。次は、プロジェクトフォルダにSASSとかSCSSとかLESSとかのファイルが入っていれば、それらのファイルを保存すればコンパイルされます。すごいね!!コンパイル先フォルダとファイルの指定ただし、そのままだとコンパイルされたファイルの記述方法もコンパイル先ディレクトリもデフォルトのままです。setting」です。その中のSASS(別言語だったら別の箇所ね)をクリックして、各項目を設定します。StyleNested(デフォ)Expanded(普通のCSSっぽい)Compact(セレクタと属性を1行にする)Compact(圧縮)とか。files出力先をどこにするかを決めます。../css」でいいんじゃないでしょうかどう?凄くね?「へー、んで?」程度の方はとりあえず無料期間があるので一度試してみると良いと思います。そもそもCSSメタ言語の良さが分かんないよ、って方はまず普通のCSSファイルの拡張子をsassに変えてみて、ちょっとずつ入れ子にしてみたり変数を使ったりしてみると良いと思いますよ。他には?他に僕が使ってる機能というか、CodeKitを使うようになってからCompassを使うようになりました。Sprite使いたかったんですよね。CSSスプライトに関してはこちら。僕が以前に書いたやつですけどね。Compassでお手軽cssスプライト生成!CSSスプライトは決定打が見つからなくて嘆いてたんですが、今のところCompassを使っています。いや、便利ですよ?そんな感じですがいかがでしょうかねおわりにマルチデバイス対応だとか高速化だとか、プロとしてフロントエンドに求められる要素はかなり多くなっていると感じますね。便利なサービスが数多く出て「Webサイトは誰にでも作れる時代になった。これじゃ俺たちは廃業だ」って言葉も何度ネット上を駆け回ったか分かりません。僕たちは廃業していないし、これからもきっと廃業しません。それは「簡単に作れるサイトとプロが作るサイトは価値が違う」という事実があり、かつその事実を知っている人がいるからですよね。いうことはプロであればそれなりのスキルが必要になってくるしそれなりの丁寧な仕事が必須になってきます。それを少しでも効率よくするためにこういった便利なツールも色々と出てきているので、あくまでも「ツールに使われる」事のないように、ツールを使っていってプロとしての制作を今後もやっていきたいですね−。http://t.co/Z6OF8pHFReplyトラックバック/ピンバックはありません。音楽系copyright@STACKSTOCK。