2月
25
2010
1

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
2

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

知らない人は損してる?コーディングが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 | タグ: ,
2月
23
2010
0

Splitwit ver 1.0.0 リリース

Splitwit Ver 1.0.0 をリリースしました。
TwitMgr のデザインをそのまま踏襲したので、思いつきからリリースまで約半日でのスピードリリースになりました。

さてこの Splitwit、何をするためのツールかというと、140 文字の制限がある Twitter の中で、その制限を超えて投稿するためのツールです。
もちろん、既存でも同様の目的を達するためのツールはあるのですが、別サービス上に長い文章を書いて、Twitter への投稿はその冒頭部分だけで、残りはリンクで別サービスに飛んで下さい。というのが普通だったりします。

そもそも、そこまでの長文を書くつもりは無いんだけど、ちょっと長すぎて 140 文字に収まらないような時、わざわざ他の場所に書くのって面倒じゃないですか?
Twitter クライアントで TL を見ている時に、わざわざ外部の URL を開いて投稿の内容を確認しないといけないのって、嫌じゃないですか?

そんなわけで、140文字を超える内容を適宜分割して、連続投稿出来るツールを作りました。

分割といっても、140 文字ぴったりにはこだわらず、なるべく読みやすい位置で分割をするようにしたり、連続投稿といっても、一定のバッファを設けることで、スパム判定されにくくしたり、といった工夫を凝らしています。
また、各投稿にはヘッダとフッタを指定出来るので、連続投稿の関連性を分かりやすくすることも出来ます。

そんなこんなです。ご意見ご感想など、是非お寄せ下さい。

Written by Otchy in: Development | タグ:
2月
05
2010
0

自分向け Chrome 拡張まとめ

Google Chrome v4 で正式対応したエクステンションの自分向けまとめです。
完全に自分向けですが、エクステンションごとにコメントを付けておいたので、誰かの参考になればいいかなぁと思います。
実質的には今使っているエクステンションのリストなので、内容に変化があったら随時更新する予定です。

ブラウズ

Handy Google Shortcuts
単に Google の各サービスへリンクするだけですが、Google に依存しまくっている人は便利。同種のエクステンションだと、Google Apps Shortcuts の方がメジャーなようですが、対応しているサービスがこちらの方が多く、プルダウンから直接新規メールとか作りたいのでなければこちらがお勧め。自分がよく使うサービスだけ表示するように設定変更して使います。
SimpleGoogleBookmarks
ソーシャルブックマークとしてはてブを使う一方、「よく参照するサイト」という本来の意味のブックマークとして Google Bookmarks を使っているので入れてます。タグによる絞り込みの他、日本語対応のインクリメンタルサーチが秀逸。

ツール

Chromed Bird
シンプルに使える Twitter クライアントです。他にも API を使うツールがある場合、初期設定だと API を使い切る事が多いので、設定変更推奨。Firefox の Echofon 代替。
Google Wave Notifier
Google Wave の Notifier (まんますぎる) です。wave は Gmail みたいに常用していないものの、たまーに誰か何か書くので、まさに Notifier が必要。
利用頻度が低すぎだったのと、メール通知が機能追加されたので、無効化。
Hatena Bookmark GoogleChrome extension
はてブ公式エクステンション。今開いているページのはてブ数とコメントを簡単に見るために入れてます。はてブの追加自体は はてブ with Twitter を使いたいので、公式ブックマークレットを使ってます。
Bubble Translate
ページ上にポップアップする辞書。英文を読む時に使ってます。

とりあえずこんなもんです。

更新履歴

2010-02-05
公開
2010-02-10
Bubble Translate を追加
2010-03-05
Google Wave Notifier 削除
Written by Otchy in: Development | タグ:

Powered by WordPress | Aeros Theme | TheBuckmaker.com