Codekit 2.0 ファーストインプレッション

Category: App, Mac, Sass | Tags: , , ,
codekit2とジジイ

マカーお馴染みの高機能GUIコンパイラー Codekit がバージョン2になり、色々刷新されました。
いきなり新バージョンがリリースされたんでびっくりです。とりあえず買ってみたんで全部機能試してはいないですが、ひと通り触ってみた感想をつらつらと。

Codekitとは

CodeKit: THE Mac App For Web Developers
CodeKit: THE Mac App For Web Developers

CodekitとはMac専用のGUIコンパイラーのアプリのことで、SassやらLessやらCompassやらこーひーすくりぷとやらをコンパイルしてくれたり、ブラウザをオートリロードしてくれたり、画像最適化してくれたりと、黒い画面が苦手な方安心◎のコーディングお助けツールです。

2でさらにビルトインサーバーやアセットなど機能が追加してパワーアップ。

Codekitを知らない人は、このまぼろしの木村さん西畑さんのスライド見れば全てわかります。


CSS Nite LP26 CodeKitで始める次世代Web制作 from Maboroshi.inc

値段・仕様

140306-0008
お値段はバージョン2になりさらに値上がりし$29〜$38(任意)。
なかなかお高い。でもその価値は間違いなくあるアプリです。10日間の試用期間があります。
1をもっているユーザーは$18でアップグレードできます。
OSX10.8(Mountain Lion)以上に対応だそうで。

先日、CSSNITEでSassのことについてお話させていただいたのですが、その時にCodekitは高機能で便利だよ!なんてことを話したので買った人いたらごめんなさい。

追記:2013年12月頃以降の購入者は無料アップグレードできるそうです。

新機能

Splash Screen

UIからアイコンから大幅に変わりました。全体的に丸みをもってかわいくなった印象。
UIについては変わったというより色々増えた印象です。基本的な操作は一緒なのですんなり馴染めそうです。

新UI
最初サイドバーなくて、いちいち左上のアイコンで切り替えかよ!?って思ったらメニューありました。
ビューをショートカットで色々切り替えられます。

プロジェクト設定
Finderからフォルダを投げ込むとプロジェクトが登録され、右上の歯車アイコンでプロジェクト設定ができます。前バージョンより細かく設定できるようです。

また、前バージョンではプロジェクトを有効にしないと設定はできなかったのですが、今回はフォルダ投げこめば全てプロジェクト扱いになるみたいです。
登録したフォルダにすぐ「config.codekit」という設定ファイルが作成されてました。

プロジェクトアイコンの画像が謎すぎて( ゚д゚)ポカーン

対応言語

対応言語

対応言語はバージョン1からほとんどのメタ言語に対応していたので、現状維持でTypescriptが増えたくらいです。

それよりもびっくりしたのが、内蔵のSassやCompassが rc版 / α版 というアグレッシブな仕様です。
CompassのバージョンはUnknownておい。確認したら1.0.alpha18みたい。

If you have Sass 3.2 and/or Compass 0.12 installed on your system, you may see an error about a "superclass mismatch for class Literal" when performing any Compass actions in CodeKit. To resolve this, run gem uninstall compass and gem uninstall sass on the command line to remove earlier versions of these gems from your system.

CodeKit — Version History

公式サイトによると、すでにマシンに現行バージョンのSass3.2やCompass0.12が入っている場合はgemでアンインストールしてねって書いてあります。え?

追記[2014.8.20]:Sass3.4もCompassも1.0もリリースされたのでこの項はもう不要ですね。

フレームワーク

ファンデーション

ZURB Foundationがプロジェクトでインストールできるようになりました。
SassのFoundationはインストールに黒い画面が必要だったので少し楽になりますね。

インストールふぁんでーしょん

他にもSassのグリッドシステムでBourbon NeatSusy、StylusのライブラリであるNibなどが追加されています。

Bower

ぼうあー
目玉の新機能としてBowerが使えます。
Bowerはパッケージマネージャってやつで、簡単にいうとjQueryとかWordPressとか毎回サイトで最新版をダウンロードしていたものを、この鳥ちゃんが一括で管理してくれるコンビニみたいなやつです。

右上の「ASSETS」ボタンから画面を切り替えれます。
assets

タブが3つあって、「Components」がBowerに登録されている全てのパッケージ。「Favorites」がお気に入り。「Installed」がそのプロジェクトにインストール済のもの。

最初からお気に入りの中に、よく使いそうなものは入ってました。
ASSETS Favorites
雲のアイコンからインストールすればプロジェクトにダウンロードされます。まぁ楽チン。

ビルトインサーバー

ビルトインサーバー

今まではオートリロードの機能はChromeかSafariで開いておけば、全部のタブがリロードされる雑な仕様でしたが、今回からは内蔵のサーバーでサイトを確認できるようになりました。
画面右上の「PREVIEW」ボタンを押すとブラウザが立ち上がります。

http://マシン名.local:5757

というローカルURLでプロジェクトを確認できます。ポート番号は会社名かな。
ローカルでは動かないjsなんかの確認が便利ですね。

いままではWebkit系ブラウザ限定でしたが、どのブラウザでも見れるようになり、同じネットワークに繋がっていればスマホやタブレットでも確認できます。

External Server
MAMPなど、すでに別のローカルサーバーで動かしているものはプロジェクト設定の「External Server」の箇所にURLを指定するとCodekitのURLにオーバーライドされます。

ちょっと気になったのが、このCodekitのURLは一つしかないので、プロジェクトを切り替えるとブラウザも同じURLで各プロジェクトのサイトに切り替わりました。
これだと複数のプロジェクトをいちいち切り替えないといけないのかな?
同時にやりたい時はどうすればいいのでしょうかね。

また前バージョンでは、MAMPを使っている時なんかは、WordPressのThemeフォルダをプロジェクト登録しておけば、それだけでローカルサーバーをオートリロードできたのですが、今回から「External Server」にURLを登録しなきゃいけないのがちょっと面倒ですね。前バージョンの雑なオートリロードが便利な時にあったので残しておいて欲しかったなぁ。
オートリロードするドメインの一部も指定できなくなったし。

プロジェクトのリロード設定に「Also reload file:// URLs in all browsers on my Mac」というチェックがあるのでチェックしてもfiles://アドレスのローカルのファイルは更新されませんでした。なぜだろう?

追記[2014.03.13]:「Animate CSS changes」のチェックを外して、「Also reload file:// URLs in all browsers on my Mac」にチェックを入れたらローカルのファイルもオートリロードされました。挙動がよくわかんない。。

Hooks

hooks
コンパイルする前か後に任意のコマンドやAppleScriptを実行できる。らしい。未確認。

言語別の新機能

言語別なんて言っても、ほぼSassしか試してませんが欲しかった機能が色々追加されました。
画面右のチェックでオン・オフできます。

sass-codekit2

Source Map

Sass, Less, Stylus, Coffeeに対応。Typescriptも多分。
ソースマップとは、コンパイルやMinifyされたファイルでも、デベロッパーツールなどでコードの位置を確認できるファイルです。

詳しくはこの記事あたりを。
Firefoxも29からサポートするらすい。

Libsass

通常はRubyでコンパイルするSassをC++でコンパイルすることで速いらしい。
しかしまだ完全に機能しないそうで、アルファ機能扱いだそうです。
10倍くらい速くなるとかどうとか。とりあえずコンパイルはできたけど詳しくは未検証。

Libsass | A C implementation of a Sass compiler

Autoprefixer

ベンダープレフィックスをいい感じに直してくれるやーつーです。この機能付いたのは嬉しい。
現在のブラウザには適したプレフィックスを付与または削除してくれます。

Compassは不要なプレフィックスが付くことが多いので(α版未検証)、Autoprefixerはマストなツールです。が、いまのところCompassは未対応だそうで(´・ω・`)ガックリ

AutoprefixerついたならCSScombとか、メディアクエリのやつとか、ポストプロセッサはもっと付けて欲しいですね。

Bless

これは前バージョンからありましたが、IE9までのセレクタ4095個問題を分割CSSにして解決してくれるツールです。

まとめてきな

てな感じでアイコン以外は素晴らしい進化を遂げたCodekit。
さらに黒い画面いらずで色々できてしまいますね。

上書きしなければ別アプリ扱いで前バージョンと共存できるので、既存ユーザーも使い比べることができます。

まだアルファ扱いの機能などがあるので早いとこ実装してほしいものです。

search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status image gallery music video category tag chat quote googleplus facebook instagram twitter rss