攻略! ツール・ド・プログラミング (21) Aptana StudioおよびEclipseでZen-Codingを利用する

ニュース
トップ

【コラム】

攻略! ツール・ド・プログラミング

21 Aptana StudioおよびEclipseでZen-Codingを利用する

杉山貴章  [2010/05/13]

21/61

Aptana StudioでZen-Codingを使う

テキストエディタのプラグインとして提供され、HTMLやCSSのコーディング効率を飛躍的に向上させてくれる「Zen-Coding」。単体のテキストエディタでなく、統合開発環境でZen-Codingがサポートされているツールとしては「Aptana Studio(以下、Aptana)」がある。AptabnaはWebアプリケーション開発用のEclipseベースの統合開発環境で、HTMLやJavaScriptの利用を手助けするさまざまな機能を備えている。Aptanaはこのサイトで無料で公開されており、スタンドアロンのアプリケーションとしても、Eclipseのプラグインとしてもインストールできる。

Aptana用のZen-Codingプラグインは、公式サイトのダウンロードページにある「Zen Coding for Aptana」がそれだ。このファイルはEclipseのプラグイン形式ではなく、Webアプリケーション・プロジェクトに対するJavaScriptライブラリという形になっている。

したがってこれを利用するには、Aptana上で任意のプロジェクトを作った上で、その直下に「scripts」というフォルダを作成する。そしてこのフォルダに、ダウンロードしたファイルの中身を展開する(図1)。その上でAptanaを再起動すれば、図2のように[Scripts]-[Zen Coding]というメニューが追加されており、エディタ上ではZen-Codingによるコードの展開が利用できるようになっているはずだ。

図1 scriptsフォルダ下に展開されたファイル群

図2 Aptana再起動後、Zen-Codingが利用可能に

ところで、Aptana版Zen-Codingによるコード展開のデフォルトのショートカットキーは[Ctrl]+Eだが、Aptanaのような多機能なIDEの場合にはこれは他の機能のショートカットとして設定されている場合がある。その場合はAptana側のキー設定を変えるか、Zen-Codingの設定を変更する必要がある。Aptana版Zen-Codingの設定はscriptsフォルダ以下の各JavaScriptファイルに分かれているが、コード展開のためのショートカットキーが設定されているのはそのうちの「Expand Abbreviation.js」である。このファイルのコメント部にある「Key: M1+E」を変更することで、ショートカットキーの設定を変えられる。

このファイルでは、「M1」「M2」「M3」が、それぞれ「Ctrl」「Shift」「Alt」を表すエイリアスになっている。したがって、たとえばショートカットを[Alt]+Eに変更したい場合には、この1行を次のように書き換える。

リスト1 ショートカットを[Alt]+Eに変更

 * Key: M3+E

コードの展開に関する設定は「zen _settings.js」ファイルにある。このファイルの中身はNotepad++のstart.jsの該当部分と同様のコードなので、まったく同じ感覚でカスタマイズすることができる。

EclipseでZen-Codingを使う

Aptana Studioではなく、通常のEclipseでZen-Codingは使えるだろうか。実はAptana版のZen-Codingは、Aptana本体の機能ではなく、「Eclipse Monkey」というプラグインの機能を利用して実装されている。Eclipse Monkeyは、Eclipseに対してJavaScriptを利用したマクロ機能を追加するためのプラグインである。Eclipse Monkeyそのものの使い方はこの記事に詳しく解説されているので、そちらを参照してもらうといいだろう。

Eclipse Menkeyはアップデートサイト経由でインストールすることができる。Eclipse Monkey本体のほかにMozilla Rhinoも必要なので、両方ともインストールしよう(図3)。

図3 Eclipse MonkeyとMozilla Rhinoをインストール

インストール後Eclipseを再起動すると、メニューバーにScriptsメニューが追加されているはずだ。あとはAptanaの場合と同様に、Zen-Codingのスクリプトファイルを追加すればよい。

EmacsでZen-Coding(っぽい機能)を利用する

最近は高機能なテキストエディタやIDEの選択肢が広がっているが、依然としてEmacsを使っているユーザもいることだろう。そこで、EmacsでもZen-Codingが使えたらと考えるのは自然なことだ。実はEmacsにも、Emacs Lispで実装した「ZenCodingモード」が公開されている。ただし利用できるのは一部のコード展開の機能のみであり、しかも筆者の環境では動作しない略語パターンが多かった。しかし、今後への期待も込めてここで紹介しておきたい。

EmacsのZenCodingモードはこのサイトで公開されている。ページ中ほどにあるリンクか、GitHubのリポジトリより「zencoding-mode.el」をダウンロードし、任意の場所に保存する。そして.emacsなどの設定ファイルに、リスト2の設定を追加する。これは「~/emacs/zencoding/」にzencoding-mode.elを配置した場合の例である。

リスト2

;------ for Zen-Coding mode ----
(add-to-list 'load-path "~/emacs/zencoding/")
(require 'zencoding-mode)

(add-hook 'sgml-mode-hook 'zencoding-mode) ;; Auto-start on any markup modes
(add-hook 'xml-mode-hook 'zencoding-mode)
(add-hook 'html-mode-hook 'zencoding-mode)

コメントを除く上の2行はZenCodingモードを読み込む設定で、下の3行はそれぞれSGMLモード、XMLモード、HTMLモードの場合に、自動的にZenCodingモードを有効にするという設定である。なお、コード展開のためのデフォルトのショートカットキーは『[Ctrl]+[Enter]』となっている。

以前も書いたように、今回紹介した以外にもさまざまなエディタでZen-Codingがサポートされている。まずは自分の使い慣れたエディタに導入して試してみるといいだろう。きっと手放せなくなるのではないかと思う。

21/61

インデックス

連載目次
第61回 ユニットテスト用モック作成ツール「EasyMock」によるメソッド呼び出し検証
第60回 ユニットテストのためのモックを簡単に作成できる「EasyMock」
第59回 スタンドアロンでのTymeleafテンプレートの利用
第58回 Java用テンプレートエンジン「Thymeleaf」の標準文法セットを利用する
第57回 XHTML/XML/HTML5をサポートしたテンプレートエンジン「Thymeleaf」
第56回 「renderSnake」をサーバサイドで利用する
第55回 直感的なHTMLコードの生成が可能な「renderSnake」
第54回 「PrimeFaces」でUIとサーバ側のManagedBeanを連携させる
第53回 収録数は100以上! JSF用軽量コンポーネントスイート「PrimeFaces」
第52回 Googleが開発した高速圧縮ライブラリ「Snappy」をJavaで使う
第51回 JSFコンポーネントライブラリ「OpenFaces」でグラフを表示する
第50回 Ajaxを利用したJSFコンポーネントライブラリ「OpenFaces」
第49回 Java用RIAフレームワーク「Vaadin」でのイベント処理
第48回 Java用RIAフレームワーク「Vaadin」を利用したWebアプリケーション開発
第47回 GWTベースのJava用RIAフレームワーク「Vaadin」
第46回 「StringSearch」による文字クラス/ミスマッチ文字を含む文字列検索
第45回 Javaライブラリ「StringSearch」による文字列検索
第44回 高速な文字列検索を実現するJavaライブラリ「StringSearch」
第43回 「AsyncHttpClient」でゼロコピー・アップロード/ダウンロードを実現する
第42回 AsyncHttpClientを用いたJavaプログラムによる非同期HTTP通信
第41回 Javaで非同期なHTTP通信を行うための「AsyncHttpClient」
第40回 AWT/SwingアプリをAjax Webアプリに変換する「AjaxSwing」
第39回 Java用IMライブラリ「Smack」で仲間リストの変更を検出する
第38回 Java用IMライブラリ「Smack」で仲間リストを表示する
第37回 XMPP対応IMアプリを手軽に作成できるJavaライブラリ「Smack」
第36回 AndroidでZXingを使ってバーコードを読み取るには
第35回 「ZXing」でQRコードに格納された情報を読み取る
第34回 バーコードの読み書きをサポートするJava/Android用ライブラリ「ZXing」
第33回 PDF Rendererを利用してSwingプログラムにPDFを取り込む
第32回 Javaプログラムに組み込んで使えるPDF描画ライブラリ「PDF Renderer」
第31回 Apache FOPをServletで利用する
第30回 JavaプログラムからApache FOPを利用する
第29回 XSL-FO文書からPDF文書を作成するための「Apache FOP」
第28回 iTextにおけるリストおよびテーブルの使い方
第27回 PDF生成ライブラリ「iText」における文書オブジェクトの構造
第26回 PDF文書を生成するJava用ライブラリ「iText」
第25回 face.com APIを利用して写真の顔認識を行う
第24回 face.com APIを利用して顔写真のタグ情報を更新/登録する
第23回 JavaScriptからFace.comの顔認識APIを利用する
第22回 Face.comが無料公開した顔認識APIとは
第21回 Aptana StudioおよびEclipseでZen-Codingを利用する
第20回 Zen-Codingをカスタマイズしてさらにコーディング効率を上げる
第19回 HTMLやCSSのコーディングを爆発的に効率化する「Zen-Coding」
第18回 qooxdooの低レベルAPIでHTML要素を操作する
第17回 「qooxdoo」でDOMを直接操作する
第16回 「qooxdoo」でWebアプリケーションをカスタマイズする
第15回 HTML/CSS/DOMを書かないWebアプリケーションフレームワーク「qooxdoo」
第14回 JsTestDriverによるJavaScriptのユニットテスト その2
第13回 JavaScript用のユニットテストフレームワーク「JsTestDriver」」
第12回 ODF文書を扱うためのJava API「ODFDOM」で表計算ドキュメントを作成する
第11回 JavaプログラムでODF文書を扱うための「ODFDOM」
第10回 RESTEasyのクライアントフレームワーク
第9回 JBoss製JAX-RS実装「RESTEasy」を試す
第8回 JaValidを用いてバリデータを自作する
第7回 Javaオブジェクトのバリデーションを可能にするフレームワーク「JaValid」
第6回 Ftpletを用いてApache FtpServerの動作をカスタマイズする
第5回 アプリケーションへの組込みも可能な「Apache FtpServer」
第4回 Web標準技術を活用したOSSのRIAプラットフォーム「Appcelerator Titanium」
第3回 Javaアプリケーション対応のクラウド環境「Stax Networks」 その3
第2回 Javaアプリケーション対応のクラウド環境「Stax Networks」 その2
第1回 Javaアプリケーション対応のクラウド環境「Stax Networks」

もっと見る

関連したタグ


ITセミナー

一覧

関連サイト

新着記事

転職ノウハウ

あなたの仕事適性診断
あなたの仕事適性診断

4つの診断で、自分の適性を見つめなおそう!

Heroes File ~挑戦者たち~
Heroes File ~挑戦者たち~

働くこと・挑戦し続けることへの思いを綴ったインタビュー

はじめての転職診断
はじめての転職診断

あなたにピッタリのアドバイスを読むことができます。

転職Q&A
転職Q&A

転職に必要な情報が収集できます

ドS美人面接官 vs モテたいエンジニア
ドS美人面接官 vs モテたいエンジニア

入室しようとしたら、マサカリ投げられちゃいました!?

特別企画

一覧

    人気記事

    一覧

    イチオシ記事

    新着記事

    東京都・青山に販売専門ウェディングドレスショップが登場 - 1着3万円から!
    [06:00 11/23] 恋愛・結婚
    [高倉健さん]丸の内TOEIで追悼上映会 「網走番外地」「鉄道員」など6作品
    [05:00 11/23] エンタメ
    "がんばる自分にご褒美"を! 「贅沢ミラノサンド」などを発売 - ドトール
    [05:00 11/23] ライフ
    大迫がアシスト決めるもケルンは不運なFKで惨敗…細貝、原口も出場
    [04:35 11/23] ライフ
    ブラサカ日本代表、5位決定戦でパラグアイと激突…開幕戦でも対戦
    [02:40 11/23] ライフ

    特別企画

    一覧

      求人情報