[MarsEdit] Zen Coding で高速 HTML コーディング！

さて、サービスメニュー第2弾は、MarsEdit 用 Zen Coding プラグイン(？)です。

Zen Coding とは

Zen Coding は HTML や XML、CSS を高速編集するためのライブラリです。

zen-coding - Project Hosting on Google Code Zen Coding — a new way of writing HTML and CSS code Follow us on Twitter @zen_coding Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. Zen Coding のプロジェクトサイトです。

たとえば、

div#page>div.logo+ul#navigation>li*5>a

を以下のように展開してくれます。
(以下のコードは今回のプラグインで生成しました。めんどくさいのでｗ)

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

Zen Coding の記法の詳細については こちら をご覧下さい。

Zen Coding のプロジェクトサイトではいろいろなエディタ向けのプラグインが公開されていますが、残念ながら MarsEdit 用のプラグインはありません。

そこで、Zen Coding v0.6 の Python 実装を組み込んだサービスメニューを MarsEdit 用に作成しました。

導入手順

1. サービスワークフローの Zip アーカイブをダウンロードする

こちらからダウンロードしてください。

2. Zip アーカイブを展開する

Zipアーカイブを展開すると "Zen Coding.workflow" ファイルが作成されます。

3. ワークフローファイルを /Users/(ログインアカウント)/Library/Services にコピーする

Finder で見ると以下のパスです。


4. キーボードショートカットを設定する

システム環境設定でキーボードショートカットを設定しましょう。

実行例

実行例は 2 つあります。

その1

MarsEdit のエディタを開いた状態で Zen Coding を起動すると、入力を求めるダイアログボックスが表示されますので、省略形を入力して OK ボタンを押してください。

ダイアログボックスに表示されている例を入力した場合、以下のような展開結果がエディタに挿入されます。

その2

選択したテキストにタグ付けをすることもできます。
ここでは番号なし箇条書きのマークアップをしてみましょう。

省略形として "ul>li*" と入力します。

すると、なんと！番号なし箇条書きのマークアップの完成です。

あとがき

ブログを書く場合に使用する HTML タグのほとんどは、階層構造をもたない単純なものになると思います。そのようなタグについては、MarsEdit のマークアップマクロで十分です。
(マークアップマクロの方が早いですし)

Happy-Go-Lucky: MarsEdit のマークアップマクロで簡単マークアップ マークアップマクロを使用することで素早く簡単にマークアップを行うことができます。

しかし、箇条書きやテーブルを使用する場合は、マークアップマクロよりも Zen Coding の方が素早くマークアップを行うことができます。
(現状では、テーブルは一行ずつマークアップすることになると思いますが。)

最初は記法を覚えるのに時間がかかるかもしれませんが、Zen Coding の記法は CSS のセレクタ構文のサブセット+αですので、CSS セレクタ構文がわかっている方ならすぐに覚えられると思います。

なお、ZenCoding v0.6 では、m行n列のテーブルを一発で展開することができませんが、現在 developer preview として公開されている v0.7 では "table>(tr>td*n)*m" と書くことができます。 v0.7 の正式版がリリースされたら、 MarsEdit プラグインにも組み込みたいと思っています。

関連記事

loading..