Text Editor Actions for Coda v2.0b3

HTML 文章を書くのに Coda を使っています。ハンドコードする上で欠かせないプラグインが「Text Editor Actions for Coda」です。Espresso では標準でインストールされていますが Coda では別途インストールしなければなりません。

何が便利かといいますと、zen coding が使えること。この構文を覚える手間がありますが、習得してしまえば作業効率が格段に向上しますよ。CSS セレクタを理解しているとすぐに使いこなせるようになります。

他にも、コンテンツや要素の選択が簡単にできたり、選択した要素に親要素を追加したり、とかが簡単にできるようになります。わざわざマウスに持ち替える手間がなくて入力できます。

一例として、箇条書きリストを ul 要素でマークアップしてみましょう。

home
about
content

3行を選択した状態から Wrap With Abbreviation (control-shift-A) アクションを使います。コマンド実行シートが表示されるので

ul>li*>a

と入力して実行します。すると

このように要素が補完された状態になります。ビデオを見るともっと理解が早まるかもしれません。

Demo video with current Zen Coding features

Coda で Subversion を試す

Coda 1.5 からバージョン管理システム Subversion を扱えるようになりました。そこで、ローカルでバージョン管理できるように設定してみました。まだ、Subversion については不慣れなので不足している情報があるかもしれません。その時は、指摘してくださると幸いです。

Leopard には標準で svn コマンドがインストールされています。もしくは、Xcode をインストールしなければいけないかもしれません。確認するには、コマンドラインから「$ which svn」と which コマンド で svn コマンドの所在を確かめます。戻り値が「/usr/bin/svn」となっていればインストールされていることになります。もし、戻り値が無ければ Xcode をインストールするかバイナリーパッケージをダウンロードしてインストールしましょう。

では、実行環境が整ったということで話を進めていきます。まず、リポジトリを作成します。リポジトリとは、辞書を引くと「置き場、収納庫」などの意味になります。プロジェクト毎にディレクトリを作成して管理していくことを指しています。実際に作ってみましょう。

$ mkdir -p ~/svn/Project-name
$ svnadmin create ~/svn/Project-name

これでリポジトリの作成は終了です。下準備が整ったので Coda のサイト設定から「ソースのチェックアウト…」ボタンを押してチェックアウトしたいリポジトリのアドレスを入力します。上の例だと、「file:///Users/user-name/svn/Project-name」ということになります。「file:///」の部分は「file://localhost/」の意味です。必要に応じて、ユーザ名とパスワードを入れてください。これでチェックアウトは終了です。

システム環境設定を開き、共有からウェブ共有を有効にして Coda でサイトを開き、動作を確認してください。

Coda: シンボルコメント

Codaには、よく使う文字列を登録しておいて、必要な時にすぐに呼び出せるテキストクリッピング機能が搭載されています。meta要素やlink要素、構造文などを登録するのに使う訳ですが、ちょっと一工夫して使いやすくしてみましょう。

コメントを書き入れる手順を見てみましょう。

1. コメントを書く
2. コメント文字列を選択
3. 選択部分をコメントアウト/解除コマンドを実行

このように3手順が必要な訳ですが、面倒だと感じたことはありませんか? クリップを使えばもっと簡単になります。


creating codaclips

数文字タイプしてタブキーを押せばクリップを呼び出せるので、すぐにコメントを書き入れることができます。

本題の「シンボルコメント」とは、普通のコメントと違いコードナビゲータに表示できるコメントとなります。これまでの検索からコメントを探して飛んで行くのと違って、コードナビゲータからひとっ飛びで目的のコメントへたどり着くことができます。

coda_codenavi.png

コメントの前にエクスクラメーションマーク(ビックリマーク, !)を付けるだけと簡単です。


creating codaclips

coda_clips.png

Getting to know Coda clips and?symbols | Lisa McMillan dot com

Coda: スクリプトで便利に。

Codaは標準のままでも使いやすいエディタですが、これにスクリプトを追加するともっと使いやすくなります。

Beckism.com .:. Textmate Emulation Applescripts for Coda
(ダイレクトリンク)
chipwreck | blog ? archive ? PHP syntax validation for Coda – improved

まずは環境設定からスクリプトメニューを表示させましょう。

coda_pref.png

Codaアプリケーションを終了させ、 `~/Library/Scripts/Applications/Coda/` にディレクトリが存在するかを確認してスクリプト群をコピーして、Codaアプリケーションを起動させます。

スクリプトメニューからスクリプトフォルダを開き、スクリプト群をコピーした後「スクリプトを再読み込み」とすればいいです。

個々のスクリプトへショートカットを割り当てるには、システム環境設定から[キーボードとマウス]→[キーボードショートカット]で行えます。

Coda Clips – クリップコレクション。

HTMLを書くのにCodaを利用しています。このCodaの機能に「クリップ」という機能がありまして、よく使う文字列を登録しておいて素早く呼び出す機能です。また、トリガーとなる文字列を設定して文字列に続いてタブキーを押すことで呼び出すこともできます。

クリップのサンプルだけを扱っているサイトを見つけたのでご紹介。

coda-clips-logo.png

Coda Clips

Codaのクリップ機能がskEditのSnippetみたいに賢くなってくれるということないんですけどね。