Coda で Zen-Coding を使う

先日をぞーくんに教えてもらった Zen-Coding、Coda でも使えるとのことで試してみました。

Downloads から Zen Coding for Coda v0.3 (Universal Binary) をダウンロード。
解凍すると ZenCoding.codaplugin というファイルが出てくるので、ダブルクリックで Coda が起動してプラグインがインストールされます。

使い方

タグを入力する → control + E →ヽ(・ω・)ノ

使用できるタグ一覧

ですが、なぜか CSS の方は反応しません。
ファイルの構文モードを CSS にしてみたけどダメでした。

自分好みの出力にする

出力内容は lang="ru" などとなっているので ja に変更するなど、自分が使いやすいように編集するとより便利になります。
/Users/ (ユーザ名) /Library/Application Support/Coda/Plug-ins/ZenCoding.codaplugin のパッケージの内容を表示、/Contents/Resources/scripts/zencoding/settings.py が設定ファイルです。
Coda でこのファイルを開いて編集・保存した時点ですぐに反映され、再起動は不要でした。

HTML の設定は 9 行目辺りの 'html': { からスタート。

  • snippets: 複数行対応で、任意の定型文などを挿入するのに使えそうです。オレ様専用新規ページ作成基本セットとか。
  • default_attributes: 要素を入力したときに自動的に挿入されるプロパティの指定で、img なら src と alt とか。
  • aliases: 前半は input:radio とか input:checkbox とか入力できるよってこと?後半は略語だと思われます。
  • expandos: コメントにある通り、入力文字列の後に + をつけた場合の出力内容。基本的なものが登録されていますが使い方次第で便利。
  • empty_elementsblock_elementsinline_elements: 空要素・ブロック要素・インライン要素が列挙されています。編集することはないでしょう。

ロシア語ですが解説もありました。
AptanaCustomizeRu – zen-coding – Настройка Aptana Zen Coding – Google Code

CSS の設定は 218 行目辺りの 'css': {からスタート。
こちらは snippets のみで略語のオンパレードです。覚えたら相当早く入力できるようになりそう!
私は position:(半角スペース)relative となっているのが好きなので、Coda でも CSS の機能が使えるようになったら修正して使おうと思っています。

詳細な入力形式

ZenHTMLSelectorsEn – zen-coding – Selectors and aliases for Zen HTML plugins – Google Code
組み合わせでどんな HTML でもさくっと書けちゃいそうですね!
div#name.one.two とか p.name-$*3 が便利すぎる。

ショートカットキーを変更する

/Contents/Resources/Settings.plist にショートカットキーの設定があります。今のところショートカットキーの設定しかないのでわかりやすい。
control + E だと Cocoa アプリのキーバインド・行末に移動とかぶるので、このプラグインをインストールすると Coda では行末へ移動が使えなくなってしまいます。
そこで適当な使いやすいキーへ変更。

【コラム】OS X ハッキング! (103) Cocoaアプリのキーバインドにこだわる(1) | パソコン | マイコミジャーナル
Cocoa アプリのキーバインドを変更するっていう方法もあるようです。

ロシア語のコメントを外すといいらしい?

数少ない Zen-Coding の情報の中から役に立ちそうなものを発見。

zen-codingですが、私の環境がおかしい?のかうまく動きませんでした・・・。 で、開発者の方にGoogle Code経由で問い合わせてみたりもしてとりあえず動きました。
ポイントは1つ。 ロシア語のコメントを全部はずす。
その状態でAptana HTMLエディタで使えばOK!

AptanaやTextmateでコーディング補完機能が強力になるzen-codingの搭載について | デジタル料理人

この方は Coda ではないですがもしかしたらと思い/Contents/Resources/scripts/zencoding/zen_core.py にあるすべてのロシア語を英語に翻訳してみましたが、やはり CSS の機能は動きませんでした。
他にもいろいろとググってはみたものの、Zen-Coding 自体の情報が少ない上に Coda プラグインの情報はほとんど皆無(´・ω・`)
現在もりもり開発されているようですので、今後の展開に期待して新しい情報とバージョンアップを待つことにします。

「Coda で Zen-Coding を使う」への2件のフィードバック

  1. ピンバック: Web:a piece of cake!;

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です