2月
25
2010
3

Zen Coding の Perl 実装書きました

今、最高にアツい Zen Coding (ソースは自分) の Perl 実装を書きました。
これがあれば、(今すぐではありませんが) 手に馴染んだ任意のエディタ全てで、Zen Coding を使用することが出来るようになります。
何故かって…?

その種明かしはちょっと後に回しておいて、とりあえずどんなことが出来るモジュールなのかを紹介します。

こうやって実行すると…

use SSSCoding;

print SSSCoding::expand('div') . "\n";
print SSSCoding::expand('a') . "\n";
print SSSCoding::expand('a:mail') . "\n";
print SSSCoding::expand('div#id.class1.class2') . "\n";
print SSSCoding::expand('#head+#body+#foot') . "\n";
print SSSCoding::expand('div#id>ul>li') . "\n";
print SSSCoding::expand('ul>li#id$*5') . "\n";

こう出力されます!

<div></div>
<a href=""></a>
<a href="mailto:"></a>
<div id="id" class="class1 class2"></div>
<div id="head"></div><div id="body"></div><div id="foot"></div>
<div id="id"><ul><li></li></ul></div>
<ul><li id="id1"></li><li id="id2"></li><li id="id3"></li><li id="id4"></li><li id="id5"></li></ul>

本来の Zen Coding には色々な機能がありますが、とりあえず CSS っぽい記述を HTML に展開する機能のみ実装しています。
というか、自分が使いたいのがそこだけなので。

サポートしている識別子は、id を指定する “#”、class を指定する “.”、繰り返しを指定する “*”、繰り返し回数を出力する “$”、子エレメントを指定する “>”、兄弟エレメントを指定する “+” です。
評価順を指定する “()” については実装が面倒だったので未サポートです。書くと変な感じになります。
後述の目的のため、改行などを入れて整形する機能もないので、”()” を使うほど大袈裟な利用はしないだろう、という目論見でもあります。
今後使ってみて、必要を感じたら実装するかも知れません。

また、文法エラーのチェックはしていないため、誤った文法を渡すとメチャクチャな結果になりますが、そこは了承の上で使って下さい。

任意のエディタで Zen Coding を使う

さあ、ここが本来の目的です。
種明かしをすると、この Perl モジュールを使って、ATOK のプラグインを作ればいいのです。
そうすれば、任意のエディタで Zen Coding が利用可能になりますね。

br とか a とか頻繁に使うタグを、辞書登録したことがある人は多いんじゃないでしょうか?
それを動的に行う、超強力版といったイメージです。

もちろんエディタのみならず、ブラウザのテキストエリアでも使えるので、ブログを書く時とか便利かも知れません。
その気になれば、Word でだって Excel でだって利用可能です。

そんなわけで、最終目的は ATOK プラグイン化なのですが、実はまだ出来ていません。
とりあえず Perl 単体で動く状態になったので公開しようと思った次第です。
プラグイン化が完了したらまたアップしたいと思います。

まだ ATOK 16 を使っていてプラグインが使えないので、まずは ATOK のバージョンを上げないと…。

ダウンロード

SSSCoding.pm

ライセンス

ライセンスは MIT License (日本版 wikipedia の項) で公開します。

その他

Perl で実装しているので CGI にもしやすいかと思います。ウェブサービスを作ってみてもいいですね。
あるいは PHP とか、他の言語への移植も簡単では無いでしょうか。ニーズはさておき。

SSSCoding.pm の中で、閉じタグを使わないエレメントは、%SSSCoding::SINGLES で、各エレメントに追加する属性については、%SSSCoding::ATTRS で定義されています。
必要に応じて修正して使って下さい。

モジュール名について

Zen Coding を名乗るには実装が中途半端ですし、名前がぶつかって何らか問題になるのも嫌だったので、モジュール名自体は全く別の名前にしました。
“Style Sheet” Style Coding の略で、SSSCoding としています。

Written by Otchy in: Development | タグ: ,
2月
24
2010
4

Aptana 以外の Eclipse で Zen-Coding を有効にする方法

【2011-05-27 追記】
EC studio さんで紹介されているからか、未だに多くアクセスがあるんですが、現在であれば ぼんずーず : eclipse + zen-coding プラグイン3.6Helios動作確認済み「eclipse-zencoding」 で紹介されている方法の方が推奨です。

知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた – EC studio デザインブログ で紹介されていた、Zen-Coding が激しく気になって、常用している Eclipse で使いたいと思ったのですが、どうも Aptana で無いとすんなりとは動いてくれない様子。

調べていくと、Zen-Coding は、Aptana 自体の機能ではなく、Eclipse Monkey なる Eclipse プラグインの機能を用いて実現しているようだったので、普通の Eclipse でもちゃんと設定すれば動作するのではないかと踏んで、試してみました。
以下、普通の Eclipse で Zen-Coding を有効にする方法です。

Eclipse Monkey のインストール

  • ヘルプ → ソフトウェア更新 → 検索およびインストール
  • サイトの追加 → http://download.eclipse.org/technology/dash/update/
  • 「Eclipse Monkey」「Mozilla Rhino」をインストール
  • しばし待つ → Eclipse 再起動

[参考]Part4 Eclipse Monkeyで統合開発環境に機能を追加 – マクロで始める実用プログラミング:ITpro

Zen-Coding (Eclipse Monkey スクリプト) の導入

  • Downloads – zen-coding – Project Hosting on Google Code
  • 「Zen Coding for Aptana v0.6.0.1」をダウンロード
  • Eclipse 上、任意のプロジェクト直下に、scripts フォルダを作成
  • ダウンロードしたファイルの中身を scripts フォルダ内に展開
  • Eclipse 再起動

[参考]知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた – EC studio デザインブログ

動作確認とショートカット変更

導入が成功すれば、メニューに「スクリプト」が追加され、導入済みのスクリプト一覧が表示されているはずです。
このメニューから選択しても、Zen-Coding の各機能を使うことが出来ます。

ショートカットの設定が適切であれば、メニュー内にもショートカットが表示されるのですが、元々 Eclipse には大量のショートカットが設定されているため、そのどれかとバッティングしていると、Zen-Coding のショートカットは使用することが出来ません。

ショートカットを利用するためには、参考リンク先にもあるように、Eclipse 側のショートカットを逃がすか、Zen-Coding のショートカットを変更する必要があります。
ここでは、Zen-Coding 側のショートカットを変更する方法を紹介します。

ショートカットの変更は、scripts フォルダ以下にある *.js ファイルを編集して行います。
例えば、HTML の展開だったら、”Expand Abbreviation.js” です。

冒頭 5 行目に Key: という値があり、ここでショートカットが定義されています。この辺は Zen-Coding の設定と言うよりも、Eclipse Monkey の設定ですね。
ここでショートカットを変更して *.js ファイルを保存すれば、即座に反映されるので、スクリプトメニューで確認して下さい。
また、仮想キーについては、下記のエイリアスが設定されているようです。

M1 = Ctrl
M2 = Shift
M3 = Alt

…と思ったら、CTRL、SHIFT、ALT と直接書いても大丈夫でした。こっちの方が分かりやすいですね。

[参考] Zen-Codingのショートカットをまとめてみました – EC studio デザインブログ

以上で、すんなりと動作させることが出来ました。
Zen-Coding すげぇ面白いし楽ちんです。素晴らしい!

Written by Otchy in: Development | タグ: ,

Powered by WordPress | Aeros Theme | TheBuckmaker.com