Codaの使い勝手は絶品〈その2〉
以前から使ってみようかなぁと思いつつ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キーを押せば、ハイパーリンクのフレーズが挿入できるという仕組みです。
プレースホルダを使用することによりフレーズ挿入後のカーソル位置を決めておくことも可能で、また予め文字列を選択しておけば、その文字列がプレースホルダの位置に挿入されます。https://worldending.onotakehiko.com/を選択した状態で「ハイパーリンク」クリップを挿入すると、<a href="https://worldending.onotakehiko.com/"></a>に置き換えられるようなかたちですね。
リンクを張るのはDWのデザインビューを使った方が早いかも知れませんが、HTML以外にもよく使うJavaScriptやCSSなどのフレーズも登録できるので、カスタマイズしていけば自分にあった環境が作れそうです。ただし僕の場合、こういったよく使うフレーズをGoogleノートブックにまとめていることもあり、この機能に移行させるかは微妙なところ...。クリップを使った方がコピー&ペーストの手間が省ける分圧倒的に速いとは思いますが、Googleノートブックのオンラインで扱える利便性も捨てがたい。
強力な検索・置換機能
grep・Perl・Rubyなど様々な正規表現構文をサポートしています。...と言いつつお恥ずかしい話、僕はあまり正規表現が分かっていません。しかしここでもプレースホルダが活躍。大抵の置換作業はこれで済むかなと。
プレースホルダを使用すれば「width="" height=""」を「width="" height=""」で置き換えれば、widthとheightの値をページ全体にわたって置換することも可能です。このような置換をかける機会があるかは謎ですが。
検索結果の表示は上図のように、控えめなアニメーションを伴うポップアップでハイライトされ、非常に視認性が良いです。LeopardのSafari 3と同じような表現を思い浮かべると分かりやすいですかね。
不満に思うのは検索用の窓が1行表示分しかなく、複数行の文字列の検索がしにくいということ(出来ないわけではない)。
コラボレーション
Bonjourなどのネットワークを介し、ひとつのファイルを複数人で同時編集することが可能。Codaを使っている人なら、隣の席の人とはもちろん、地球の裏側にいる人とでも。
SubEthaEditでも採用されているSubetha Engineが使われているとのことですが、この機能を試すための他のCodaユーザと、そのシチュエーションが無くて未体験です。凄く便利な気もするけどコード書きながら喧嘩にならないんでしょうか。。
2007.11.13 補完機能の拡張について
上記テキストファイルに必要なタグや属性を追記することで機能を拡張できると思ったのですが、そうではありませんでした。同階層にあるCodaCompletion.plistにタグと属性の関係性など複雑に定義を行う必要があるらしく、簡単には実現出来そうにありません。つまりそれだけ高度な処理で補完機能が働いているということです。MTタグの補完機能誰か作ってくれないかしら。
COMMENTS
ADD YOUR COMMENTgoogleから来ましたー。
すごく凝ったブログですね。すてきです。
実はこちらのサイトに来たのは「coda」について調べていて、だったのですが、サイトの「ローカルURL」という設定項目の設定の仕方について、よくわからず困っています。
この項目って、「src="/v1/img/title.gif"」みたいな書き方をしたときもcoda内のプレビューに反映される機能だと思っているのですが、そうなんでしょうか?
そしてそこに「file:///Volumes/Macintosh%20HD/Users/maha/Documents/works/hoge/html/」
などと入れているのですが、なかなかうまく動きません。
もしご存知でしたら教えて下さい。
この機能があれば、ぜひcodaを使いたいのですが・・。
いきなり質問してしまい申し訳ありませんが、よろしくお願い致します。
>マーハーさん
> 「src="/v1/img/title.gif"」みたいな書き方をしたときもcoda内のプレビューに反映される
これは「ドメイン名省略の絶対パスを指定可能にする」という意味合いで良いですか?
だとするとCodaで出来る・出来ないの話というよりも、ローカルにWebサーバーが立てられるかどうかという話になると思います。Mac OS Xなら[システム環境設定]-[共有]にある[Web共有]という機能を使ってWebサーバーが立てられますよ〜。ちょっとここで解説までは出来無くて申し訳ないのですが、検索するとその手の情報が沢山ひっかかると思いますので参考にしてみてください。
あとはMacに手軽にApache, MySQL, PHPの環境を構築できるMAMPなんてツールもありますよ。
http://www.mamp.info/en/mamp.html
回答ありがとうございます。
>これは「ドメイン名省略の絶対パスを指定可能にする」という意味合いで良いですか?
そうですね。ルートパスなどと言われていると思います。
mac OSでウェブサーバを立ち上げれば見えるとどこかでも読んだのですが、やり方がわからず(笑)、codaのこの設定を使えばプレビューできるのかと思って格闘していました。
ひとまず、codaは置いといて(ちなみにsKEdit+CSSEditを使っています)、教えて頂いた方法でやってみたいと思います。
ありがとうございました!