Addicted to Mac

こころおどるコンピュータ。

Codaの使い勝手は絶品〈その1〉

text:
Coda

少し前からなのですが、Mac OS X用シングルウインドウWeb開発環境である「Coda」というソフトを使っています。登場した当初、まずそのリッチなインターフェースで話題になったかと思うのですが、内容もかなりリッチでした。すんごく使いやすい。ふと思えば、Dreamweaver立ち上げる機会がとんと減った。

Codaは一口に言えばコードを書くためのツールなわけですが、「テキストエディタ + FTPツール + CSSエディタ + ターミナル + 電子ブック」が一つになったような欲張りソフト。WebサイトをWYSIWYGモードではなく、ソースコードを手で書いて制作しているプロフェッショナルな人たちには、かなりおすすめです。個人的感想から言えばDreamweaver(以下DW)より軽いし使いやすい。Macならではの美しいインターフェースも、あぁこのソフト使えて嬉しい、と思わせてくれます。

シェアウェアで79ドル(約9,200円)と価格はまぁそこそこではあるのですが、DWの49,800円に比べればかわいいもの。DWより機能的に劣る部分は当然ありますが逆にCodaの方が優れている部分もあるわけで、どちらかが要らないということではありません。ただし一般的な企業サイトやキャンペーンサイトなど小規模なものを制作する際にはCodaの方がやりやすいなぁ。大きな案件ではCodaでベースコーディングしてその後Dreamweaverに受け渡すというアプローチも良さそう。

例によって「うほっ!」と思ったところだけ機能紹介。機能が多く長くなりそうなので数回に分けることにしました。ちなみに、まだまだDW CS3を使いこなしていないもので、もしかしたらDWでも出来ることを出来ないと誤って伝えている部分があるかもしれませんが、そういったところはご指摘下さい。そうすりゃDWの使い勝手も上がって嬉しい。

美しいインターフェース

CodaのWebサイトからしてそうなのですが、Mac向けのソフトであること全開のインターフェースデザインです。細部に渡って凝っていて、Codaを使う行為に気持ちの良ささえ感じさせます。いろいろな場面でアニメーションによるエフェクトも表示されますが、作業を邪魔するようなストレスフルなものではなく、Macのソフトであることをよく理解した上でデザインされたという印象。まず使う気にさせるところが上手いです。

右図の様に、サイトを登録すれば自動的にトップページのキャプチャを拾ってきてアイコン化してくれるなど、気が利いた仕掛けもあり素敵です。

自由度の高い画面レイアウト

DWで不満に思っていたのが、CS3になっても一向に上がらない画面レイアウトの自由度。使っている人が多いので説明するほどでも無いかもしれませんがDWの表示モードには「コードビュー」「デザインビュー」「分割ビュー」の3種類があり、「コードビュー」はそのままソースコードを表示するモードで、「デザインビュー」はWYSIWYGモード。「分割ビュー」はそのどちらも表示するモード。

僕は書いたソースコードがどのように表示されるかリアルタイムに確認しながら作業を行いたいタイプなので、大抵は「分割ビュー」モードを使用しています。DWの場合分割表示ができるのは、開いている(X)HTMLファイルのデザインビューとそのソースコードのみで、外部で管理しているCSSファイルなどは同一タブ内には表示できません。CSSをサイドパネルで編集することは出来ますが、ファイルとして開く場合には別タブで開く必要があります。つまり、CSSコーディングしている間タブを行き来しなければならずかなり不便です。

またワイドディスプレイ時代だというのに、分割のレイアウトは水平のみ。縦にもうちょっと広く見たいという不満を覚える機会も少なくありません。

それが、Codaで一気に解決される。

上記は一例ですが、一つのタブ内に、開いた(X)HTMLファイルのプレビューとそのソースコード、および外部のCSSファイルを同じ画面で開くことができます。もちろん上記のようにPreview - XHTML - CSSの順である必要はなく並び順は自由ですし、水平・垂直のどちらの分割方法を選ぶことも可能です。こうすると(X)HTMLソースコードを見ながらCSSを編集して、その結果をリアルタイムにプレビューすることが出来て、かなりというか超快適なのです。

分割できる数は水平・垂直ともに4つまでですが、さらに別のCSSやJavaScriptファイルだって同時に開くことが可能です。それだけでなく、後述するターミナルや電子ブックについても表示対象として選択できますので、自分にあった画面レイアウトを必ず作れるでしょうね。

プレビュー

DWの「デザインビュー」はプレビューと編集を兼ねたWYSIWYGですが、Codaはその機能名称のとおり「プレビュー」に機能を絞っています。なので、プレビュー画面上に直接テキストを入力したり画像を貼り込むことは出来ません。しかし「Codaがコードを書くためのツール」であることを踏まえれば、そこに不満を覚えることはありませんでした。むしろDWの場合には編集機能を兼ねてしまっているせいでデザインビューのレンダリングが微妙で、実際には崩れないはずなのに崩れてしまって見えたりする場合があるのでアテに出来ません。ブラウザでの表示結果を見たければ別途ブラウザウィンドウを開いて、編集中のファイルを読み込む必要があり非常に面倒。

その点Codaのプレビューは優秀で、SafariのレンダリングエンジンであるWebKitが採用されています。したがってプレビューに表示される結果はすなわちSafariでの表示結果に等しく、Codaのウィンドウ内でSafariの検証を同時に行えるようなものです。ブラウザとして優秀なSafariですから、Codaのプレビューで上手く表示されているのであればレンダリングエンジンが異なるものの、大抵の場合FirefoxやOperaでも問題ないでしょう。気にすれば良いのはInternet Fucking Explorerだけ、とけっこうな効率アップにつながります。

しかもプレビューされるのは何も表示結果だけではありません。リンクをクリックすればページの遷移だって可能ですし、ソースコードに記述したJavaScriptやAjaxも書いたその場でプレビューに反映されて動作するのです。これサイコー。

また、DOMインスペクタをオンにした状態で各要素にマウスカーソルを合わせると、ぼうっとブルーの枠が出てサイトの構成要素の階層をヴィジュアル化してくれます。ウインドウ下部のパスバーにも現在位置を表示してくれるほか、もし分割でソースコードを開いているのであれば、要素をクリックした瞬間に該当部分のソースコードがハイライトされる仕組み。これまたサイコーなのですが、残念ながら関連したCSSファイルの方にはハイライトが行かない。これが実現されたら言うことなしだな。