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

text: ONO TAKEHIKO

November 12, 2007 at 09:14 PM

以前から使ってみようかなぁと思いつつDreamweaver（以下DW）があるからいいかと放置していた「Coda」なのですが、使い始めたらDWより相性がよくてDWの出番が格段に減った。こりゃすげーってことでCodaを紹介する連載第2回の今回は、「エディタde気に入った」編。

“Panic Sans”フォント

「ハンドコード派のためのエレガントなエディタ」という触れ込みなのですが、実際使いやすいです。まずデフォルトのフォントが好きになってしまったのですが、Bitstream Veraをベースにした"Panic Sans"というフォントが採用されています。日本語部分はヒラギノ角ゴシックW3で代替されるようですが、かなり見やすい。数字の「0」が中央に.（ドット）のある表現になっていたり、字間が広すぎず狭すぎず、等幅なのもお気に入り。

ちなみにこの"Panic Sans"はCodaのパッケージ内の以下の階層に格納されており、取り出してインストールすればCoda以外のソフトでも使用できるようです。Linotype FontExplorer X経由でインストールしたところ僕の環境では特に問題無く使えています。さっそくDWにも採用したところ良い感じに。ただし、日本語全角の幅と英数字2文字分の幅がノットイコールで、日本語混在の場合には幅が一致しません。メーラーで使用するのは厳しいかもしれませんね。

Coda.app/Contents/Resources/Panic Sans.dfont

コード補完

構文モードとして [ActionScript] [ASP-HTML] [CFML] [CSS] [HTML] [Java] [Javascript] [JSP-HTML] [Perl] [PHP-HTML] [Python] [Ruby] [Smarty] [SQL] [Text] [XML] の16のモードが搭載されています。作成する文書形式に設定しておけば、入力中に上図のような入力候補がインクリメンタルに現れ、タグや属性の補完を行ってくれます。

さらに「文法エラーを表示」にすると、ソースコードにエラーがあった場合にバルーン表示で教えてくれるなど、シンタックスチェック機能もあるのですが、補完機能ともども非常にレスポンスが良く入力中に止まってしまうことは微塵もありません。慣れてしまうととかなり気持ち良くコーディングできます。

残念ながらDWにあるMovable Typeタグ補完拡張機能は用意されていないようですが、パッケージ内を解析したところ下記のファイルにタグを書き込めば（HTMLモードの場合）、Codaのタグ補完機能を拡張できそうです。まだ試してはいませんが、単なるテキストファイルですので多分大丈夫でしょう。Movable Type 4.0に対応した補完機能を実装するカスタムファイルを後日用意したいと思います。（エントリ最後尾参照のこと）

Coda.app/Contents/Resources/Modes/HTML.mode/Contents/Resources/AutocompleteAdditions.txt

その他これはJavaScriptやActionScriptを書いているときにちょっと嬉しい機能ですが、コード中に出てくる開始の中括弧（{）をカーソルが通り過ぎると、それに対応した終了の中括弧（}）がぼうっと小粋なアニメーションを伴ってブルーのリングでハイライトされる。ほんとにちょっとしたことなのですが、気が利いているとしか言えません。

ブロック編集機能

これは言葉で説明するよりも下の図を見た方が早いですね。option+ドラッグでブロック編集モードに入るのですが、すると各行の任意のカーソル位置に同時に文字入力できる。ただし各行の文字数が合っていないと(4)の様に余計なスペースが入ってしまう。処理としては正しいのですが、コードエディタであることを踏まえると、挿入場所が行末かどうか判断する処理を入れてみたらどうでしょう。今のままでも充分なのですが、今後のアップデートに期待。

クリップ

DWで言うところの「スニペット」機能です。よく使うフレーズや文字列を、クリックやドラッグ&ドロップまたはTABトリガで挿入可能。例えば図中の「ハイパーリンク」というクリップに対し"a"キーを割り当てておくと、aを入力した直後にTABキーを押せば、ハイパーリンクのフレーズが挿入できるという仕組みです。

プレースホルダを使用することによりフレーズ挿入後のカーソル位置を決めておくことも可能で、また予め文字列を選択しておけば、その文字列がプレースホルダの位置に挿入されます。http://worldending.onotakehiko.com/を選択した状態で「ハイパーリンク」クリップを挿入すると、<a href="http://worldending.onotakehiko.com/"></a>に置き換えられるようなかたちですね。

リンクを張るのはDWのデザインビューを使った方が早いかも知れませんが、HTML以外にもよく使うJavaScriptやCSSなどのフレーズも登録できるので、カスタマイズしていけば自分にあった環境が作れそうです。ただし僕の場合、こういったよく使うフレーズをGoogleノートブックにまとめていることもあり、この機能に移行させるかは微妙なところ...。クリップを使った方がコピー&ペーストの手間が省ける分圧倒的に速いとは思いますが、Googleノートブックのオンラインで扱える利便性も捨てがたい。