Coda 2 ファーストインプレッション

Coda 2 が5月24日の0時に発売され、「本日限り半額（App Storeで ¥4,300）」ということで、発売直後から Twitter でだいぶ盛り上がってましたね。
私もせっかくなので、半額のうちに買いました。

パニック – Coda 2 公式サイト
Mac App Store – Coda 2（私はこちらで買いました）

最近はスクールの準備でちょっと忙しいし、レビューは後日でもいいかなーと思ってたところ Webクリエイターボックスの Mana さんに下記のように脅されたため、泣きながらこの記事を書きました。

@stocker_jp 皆がCoda2のレビュー書かないのは、本日中にナツキさんがうｐするレビュー記事を見てから購入予定だからですよ :) ﾎﾚﾎﾚ…ﾝ?

— Manaさん (@chibimana) 5月 24, 2012

結論から言うと、Coda 2 はかなり気に入りました。
これは、特に CSS 書くのが速くなるのではないでしょうか。

実は私は Coda は体験版しか使ったことがなく、普段 NetBeans（Zen-Cording プラグインあり）でコーディングし、SFTP アップロードは NetBeans、サーバ上のファイルを直接いじる時は ForkLift を使っていました。
ですので、「それ Coda の時からあったよ」という機能も多数紹介しているかもしれません。すみません…

まだ数時間しか使っていませんが、私が「これは良い」と思った部分の解説です。

HTMLなどの階層の深さが視覚的に見れる

最初に「良いな」と思ったのがこれ。
HTML、CSS、PHP など、どんなファイルを編集している時でも行番号の横に水色のバーが表示されますが、どうやらこれは HTML などの階層が深くなるほど色が濃くなっていくようです。

coda2-blue

なかなか分かりやすいですし、インデントを入れずに HTML を書かなければならない案件の時などかなり役立つのではないかと思います。
ただ、行を選択して shift + tab でインデントを解除した時に、まれにこの部分の表示がおかしくなることがありました。

Zen-Cordingも動く

Coda 2 は出たばかりなので Zen-Cording が動かないのでは…と心配していたのですが、以下の Zen Coding for Coda v0.7.1 をダブルクリックで入れたところ無事に動きました。

Zen Coding for Coda v0.7.1

このプラグインを入れると、CSS の width: 100px; の 100 などの数値にカーソルがあった状態で特定のキーを押すと数値を増減することもできるようになります。

初期設定では control + ↑ or ↓ でしたが、Lion の Mission Control のショートカットキーとかぶっているため、私は option + ↑ or ↓ で1ずつ増減、option + shift + ↑ or ↓ で10ずつ増減にしています。

Zen-Cording やこれらのショートカットキーをカスタマイズする時は、Mac のシステム環境設定＞キーボード＞アプリケーションで [+] を押して Coda 2 を追加し、メニューの項目とショートカットキーを設定していきます。

ついでに、標準で設定されている 0.1 ずつ増減を変更しておかないとこれらの設定が有効にならないため、私は command + option + shift + ↑ or ↓ に 0.1ずつ増減を割り当てています。

分割プレビュー便利すぎ

Coda といえば分割プレビューが有名らしいですが、「それって Dreamweaver のライブプレビューと何が違うの？」と思ってました。
Coda 2 で分割プレビューを試してみたら、ようやく意味がわかりました。

Dreamweaver と違い、F5 などを押さなくてもリアルタイムに HTML や CSS の変更が反映されるのですね。

しかし、私は HTML を書く時はブラウザプレビューが必要なく、CSS を書いている時に HTML のブラウザプレビューが欲しいと思っているのですが、CSS を編集しながら HTML をプレビューする方法がわからず困っていたところ、Mana さんから助け舟が。

@stocker_jp いいこと教えるから泣かないで！画面分割した後にindex.htmlをドラッグ＆ドロップでプレビュー見れるです！

— Manaさん (@chibimana) 5月 24, 2012

なるほど！
でもこれ、文章で説明するのが難しい…

分割プレビューのやり方と、CSS の数値を option + ↑ などで変更するたびリアルタイムにプレビューが変更されていくところを動画に撮りましたのでよろしければご覧ください。

ちなみに、下のプレビューはどうやら Safari 完全互換のようで、右クリックで Safari のインスペクタも使用できます。

これは、CSS 書くならどう考えても Coda が速そうですねー

サイト管理（プロジェクト）機能はなかなか便利

肝心のサイト管理機能ですが、Coda（初代）との比較はできないのですがなかなか便利だと思いました。
最初に SFTP などの設定をする必要がありますが、ちゃんとサーバ側でレンダリングされたキャプチャがアイコンとして表示されて綺麗ですね。

ウインドウの上の方には、開いたファイルがサムネイル付きで並びます。
WordPress や PHP でできたサイトの場合はあまり意味がないですが、静的な HTML でできたサイトだと綺麗に表示されそうですね。
もちろん、サムネイルのサイズを小さくしたり、テキスト表示にすることもできます。

HTML、CSS、PHP などを編集し、サイドバーの Publish を表示すると、編集したファイルの一覧が並んでいます。
ここで、[Publish All] をクリックするとサーバにアップされます。

Stocker.jp の場合、さくらの VPS を借りて認証鍵で SSH でしかログインできないようにしているのですが、特に問題なくログインできました。

NetBeans でも同じように認証鍵でログインして更新したファイルのアップロードができるのですが、Coda 2 では Transmit のような SFTPクライアントのタブがあり、サーバ上のファイルを管理したり、素早く開いて編集したりできるのが良いですね。

ターミナルも見やすい

今までは「Mac のターミナルは iTerm 2 が最強」だと思っていたのですが、Coda 2のターミナルもなかなか見やすいですね。
背景は完全な黒ではなく濃いグレーになっており、フォントは Menlo です。

今までは、ローカルでは NetBeans で編集してアップロードし、サーバ上のファイルを管理する時は ForkLift 2 で、サーバ上のファイルを編集する時は CotEditor で、ターミナルは iTerm 2 だったのですが、Coda 2 だけですみそうな気がしてきました。

いまひとつのところ

とまあ、HTML + CSS コーディングならどうやら NetBeans より Coda でコーディングした方がよさそうです。
ただ、PHP 開発や WordPress テーマ制作に関しては NetBeans の方が便利だと感じしました。
理由としては、バリデーション機能と補完です。

Coda では、バリデートはサイドバーの Home＞Validate を表示してる時だけリアルタイムでバリデートしてくれるみたいですが、NetBeans は常にリアルタイムバリデートし、エラーのある行の先頭に警告マークをつけてくれます。

そして、NetBeans は HTML5 だろうが PHP だろうがかなり正確にバリデートしてくれますが、Coda 2 はどうも PHP のバリデートが弱い気がします。
.php ファイルで <?php の <? 部分がエラーになったりとか、特に文法上問題ないはずの箇所で変数の $ を指摘されたりとか。

あと、Twitter を見ていると「WordPress の関数を補完するプラグインを入れよう」みたいな話をされている方もいましたが、NetBeans だとそんなものを入れなくても、WordPress のルートディレクトリをプロジェクトに指定しておけば、WordPress 特有の関数が自動補完されるようになり、関数入力中に、関数につけられている PHP コメントも読んできて表示してくれます。

あと、これは一長一短だとは思いますが、別のサイト（プロジェクト）を開くと、今まで開いていたサイトは保存するか尋ねるダイアログが出てきて、閉じてから新しいサイトを開くことになります。

今まで、複数のプロジェクトを NetBeans で編集している時にタブがごちゃごちゃしていたのが解決されるのは良いですが、以前制作したサイトから新しいサイトにコードの一部を何度もコピペするような時は微妙に不便かもしれませんね。

というわけで、まだ少ししか試していないので浅い記事で申し訳ないですが、今後しばらくは