月別アーカイブ: 2011年7月

EclipseのJavaScript環境(JSDT)を快適に使う方法

今日ますます重要となってきているプログラミング言語JavaScriptの開発環境として、WebStormやIntelliJ IDEAの評判が良いですが、Eclipseを使わざるを得ない状況ことも多いと思います。今回Eclipseで快適にJavaScript開発を行う環境をどのように構築したらよいか、試行錯誤をしたので、結果を報告します。人によっては違う結果になるかもしれませんが、もしよければ参考にしていただければと思います。

Eclipseプラグインは何を選択するべきか

2011年7月現在、Eclipseプラグインとして、JavaScriptの開発環境を提供しているものは、以下のようにいろいろあります。

JSDT

標準のJavaScript開発環境です。WSTに搭載されているので、J2EE版Eclipseなどをインストールすれば最初についています。印象として、可能なかぎりJava環境のJDTと同じになるように作られています。リファクタリングなどの機能やキーバインドもJDTに似せてあるので、JavaでEclipseを使っていた人には最も馴染みやすいと思います。jQuery補完は、オプションで対応しています。

Aptana

http://www.aptana.com/
最近、Titaniumと統合してますます期待される開発環境Aptanaですが以前からJavaScript開発環境として人気がありました。統合開発環境としてのAptana Studioと、Eclipseプラグインとしてのものとがあります。

VJET JavaScript IDE

http://www.ebayopensource.org/wiki/display/VJET/
eBay開発のプラグインで、2011年7月現在、Eclipseマーケットプレイスで「JavaScript」と検索すると真っ先に出てきます。

Amateras EclipseHtmlEditor

http://amateras.sourceforge.jp/cgi-bin/fswiki/wiki.cgi?page=EclipseHTMLEditor
昔からあるプラグインですが、今でも開発が続けられていて、補完などかなり高機能で充実しています。

JSEclipse

http://www.interaktonline.com/products/eclipse/jseclipse/overview/
Adobe製のプラグインです。FlexBuilderにも搭載されています。プラグイン単体ならば、以下のupdateサイトからダウンロードできます。
http://download.macromedia.com/pub/labs/jseclipse/autoinstall/site.xml

他にもSpket IDE、Euklasなどいろいろありますが、自分の環境(MacBook Air late 2010 11inch Snow leopard)ではなぜかちゃんと動かなかったので割愛します。

これらのプラグインを自分で比較した結果、最終的にJSDTを使うことにしました。理由は、上記のとおり、JDTとメニューやキーバインドが似ていること、リファクタリングなど高機能であること、後述の設定をきちんと行えば軽快に動作するを評価したためです。他のプラグインは、条件によってはJSDTよりも軽快に動くのですが、設定が思い通りにできなかったりしました。どのプラグインも、jQueryやExtJS本体など、ライブラリのコードを開いてしまうとハングアップしてしまうのは同じでした。できれば、解析に時間がかかるようなら処理を中断して色分けのみか、テキストエディタとして機能してくれれば良いのですが、間違ってひらいてしまうと数分間Eclipseが使い物にならなくなってしまうのはとても辛いです。個別に「テキストエディタ」に関連づければいいのですが……。

JSDTを快適に使う3つの方法

jQueryプラグインを導入する。

JSDTは標準ではjQueryの補完が行えません。以下の方法でプラグインを導入することで行えるようになります。方法は、Eclipse Market PlaceからjQueryで選択すると上位に出てくる JSDT jQuery を選択し、「Install」をクリックするだけです。(スクリーンショットでは導入済みの状態になっている)

ライブラリのIncludeを最適にする

JSDTは初期状態では補完があまり強くありません。先ほど導入したjQueryサポートも動作しません。では、どのようにするかというと、プロジェクトごとに設定する必要があります。

プロジェクトの設定画面から、JavaScript-Include Pathを選択し、Librariesタブを開くとそこにはライブラリ一覧が表示されています。
JSDTでは補完に使用するライブラリをこのように選択できます。ライブラリは少ないと補完が弱いですが、多すぎるとCtrl+Spaceを押しただけでハングアップしてしまうほど動作に支障をきたします。最小かつ最適にしたいところです。
僕は次のようにしました。

  • ECMA3BrowserSupportを削除
  • jQuery 1.6 Libraryを追加
  • Browser SupportでHTML5を選択して追加

これで、jQueryの補完もサクサクできるようになりました。

不要なライブラリをロードしないようにする

上記の項目とかぶりますが、JSDTではロードするライブラリが多いと、ハングアップしたようになってしまいます。これは、プロジェクトディレクトリ内のjsファイルに対しても当てはまります。したがって、うっかりプロジェクトディレクトリにライブラリのソースやサンプルソースを入れてしまった場合は大変です。以下のようにして除外することができます。

プロジェクトの設定画面から、JavaScript-Include Pathを選択し、Sourceを選択、IncluedまたはExcludedをダブルクリックすると専用の画面が出てくるので、ここで、ライブラリやサンプルコードの入ったフォルダをまとめて除外します。

これでなんとか実用レベルにJavaScript開発ができるようになりました。できれば、ECMAScript5対応のライブラリも欲しい(JSON.stringifyなど)のですが、そのへんはjson2jsをライブラリに含めるなどして対応しようと思います。

好みの環境はいろいろあるとは思いますが、参考になったら使ってください。
では。

この記事は以前多くのブックマーク・コメントを頂きました。

これからブックマークされる方はこちら↓


2年間Mayaaを使ってわかったこと その2

前回のエントリは、ここ最近の自分の取り組みの集大成(大げさw)のつもりで気合を入れて書きました。結果、このブログとしては多めアクセス数、ブックマークをいただいているようで、誠にありがとうございます。*1しかし読み返してみると書き忘れたことが幾つかありました。すでに前エントリは十分長いので、ここに続きを書こうと思います。

ちなみに、仕事のことを公に書いて大丈夫かと時々言われますが、弊社代表が「オープンにして失うものはない」ということをおっしゃっているので、それに従っています。もちろんこのブログは上司も社長も読んでいるので、万が一なにか差し支えがあって怒られたら、その時は全力で修正するでしょう。

それでは書きます。

Mayaaを効果的に使うためのノウハウ

iframeを使ってサーバサイドインクルードを偽装する

Mayaaを使ったテンプレートで妥協はよくありません。例えばWebサイトでは当たり前のように使われる「ヘッダー」「フッター」「サイドバー」などの部品は、テンプレートエンジン関連で重大な悩みだと思います。

「Webページにヘッダーなどの共通部分を埋め込みたい!」…‥古くはFrameタグやSSIからあるニーズですね。

しかし、このことをうまく解決している現場はなかなかないと思います。例えば、FrameやIFrameを使った方法では、JavaScriptでの制御が難しく、ユーザに対してもどことなく違和感を感じさせてしまいます。一方、SSIのようなサーバサイドのインクルードは(Mayaaではinsertプロセッサーで実現できますが)、「サーバ上で実行しなければ結果がわからない」というデメリットがあります。

私たちは、Mayaaのinsertプロセッサと、IFrameを組み合わせてこの問題を解決しました。

まず、こんな感じのm:idを定義します。

<!-- 常に非表示にします。 -->
<m:null m:id=\'DUMMY\' />
<!-- ヘッダーを出力します。 -->
<m:insert m:id=\'common.HEADER_HERE\' path=\'${"common/header.xhtml"}\' />

次に、次のようなクライアントサイドJavaScript(js/iframe.js)を作成します。

function resize_iframe(element) {
    if (element.contentWindow.document.documentElement) {
        element.style.height = element.contentWindow.document.documentElement.scrollHeight + "px" ;
    } else {
        element.style.height = element.contentWindow.document.body.scrollHeight + "px";
    }
}

テンプレートには次のように書きます。

<script type="text/javascript" charset="utf-8" src="js/iframe.js" m:id=\'DUMMY\'></script>         
<iframe m:id=\'common.HEADER_HERE\' src="common/header.xhtml" frameborder="0" scrolling="no" width="100%" onload="resize_iframe(this)"></iframe>

このようにすると、ローカルでhtmlファイルを直接開いたときは、iframeとしてヘッダ部分が表示され、サーバ上で実行したときは、insertプロセッサの働きでHTML内にインクルードされます。

ただ、残念なことにchrome4(いつのことやら)あたりで、セキュリティが厳しくなってしまって、上記コードをローカルの実行するとJavaScriptエラーになってしまいました。この場合、chrome起動オプション

-allow-file-access-from-files

を付与すると、エラーが出なくなり正しく動作するようになります。

IFやLOOPのタグの定型文

いろいろ試したのですが、ifプロセッサやforプロセッサ使用時のテンプレートやmayaaファイルの定義は次の書き方に統一するのが一番良いように思います。

<m:if m:id="IF_MEMBER" test="${条件}">
    <m:echo><m:doBody /></m:echo> <!-- この一行が大事! -->
</m:if>
....
<div m:id="IF_MEMBER">
こんにちは....さん。
</div>
...

このようにすると、testの条件を満たすときは、divタグがまるごと表示され、条件を満たさないときはdivタグごと消えてくれます。これを、

<m:if m:id="IF_MEMBER" test="${条件}" />

のように書いてしまうと、test条件を満たすときのhtml出力が

....
こんにちは....さん。
...

のようになってしまい、divタグが消えてしまいます。そうすると、デザイナーさんがもし、divタグにstyle属性を付けている場合、それらが適用されなくなってしまい、デザインと本番との整合性が取れなくなってしまいます。

しかし、どうせいつも同じように書くなら、

<my:if m:id="IF_MEMBER" test="${条件}" />

のように書けたほうが楽です。Mayaaは独自のプロセッサーを定義することができるので、これも実現できます。これについては、いずれ紹介しようと思います。

エスケープを解除するときは全部解除する

writeプロセッサーなどで出力した文字は自動でエスケープされます、デフォルトでXSS対策上望ましい挙動をしてくれるのは安心です。もし、HTMLタグを出力したい場合など個別にエスケープを解除したい場合は、

escapeXml="false"

という属性をつければOKです。

http://mayaa.seasar.org/documentation/processor_reference.html#write

ドキュメントにもあるとおり、エスケープ系の属性は、他にもescapeEol、escapeWhiteSpaceがあります。それぞれ、改行をBRに、空白を&nbspに変換するものです。これについて、僕は初めのうち、統一性なくごちゃ混ぜ(ある程度は利便性を意識したが)に使ってしまった結果、ユーザに混乱を与えてしまいました。

それ以来、エスケープを解除するときは、

escapeXml="false" escapeEol="false" escapeWhiteSpace="false"

というふうに全部falseにすることに統一しました。また属性の書き方も順番も統一し、何かあったときにgrepしやすいようにしました。ならば、これについても、

<my:write value="データ" escape="false" />

のようにまとめて書けると尚更シンプルです。これも自分たちは独自プロセッサーで実現しています。

テーブルレイアウトは良くない。divレイアウトが良いわけ

Mayaaを使ったテンプレートで画面を実装するとき、出来ればいわゆるtableレイアウトは望ましくありません。その具体例を紹介します。例えば、「table2行を1かたまりとして繰り返したい」というニーズがあった場合、

<table>
    <span m:id="LOOP_DATA">
        <tr>...1行目...</tr>
        <tr>...2行目...</tr>
    </span>
</table>

と書くのが良いでしょう。でもこれはhtmlの文法違反です。確か、htmlには文法上、子要素にできるタグの種類に制限がありますが、tableタグ関連はその制限が厳しめです。本番実行時はspanタグごと消してしまうようにmayaaファイルを書けば良いですが、そうすると、本番とローカルとでデザインのズレが出てしまいます。

一方divタグならばいくら入れ子にしても正常に動きます。ですので、可能ならばtableレイアウトは避けてdivレイアウトを採用しましょう。

<div>
    <div m:id="LOOP_DATA">
        <div>...1行目...</div>
        <div>...2行目...</div>
    </div>
</div>

iPhoneなどのスマートフォン対応に必要なこと

ここにまとめてました。

http://d.hatena.ne.jp/s-ishigami/20110331/p2

多言語対応

ひとつのサイトを複数の言語で運用する場合、言語ごとにテンプレートを分けるのが無難でしょう。公式サイトでは以下の手法が紹介されています。

http://mayaa.seasar.org/documentation/template_suffix.html

私たちは別の所でtemplateSuffixを使ってしまいましたので、SourceDescriptorによる振り分けで対応しましたが、本質的には同じことだと思います。

ここでも、前回書いた「プログラムは文言を吐き出さない」「テンプレートに文言を委譲する」方針が生きてきます。プログラムで文言を言語切り替えする場合、一般的にはリソースバンドルを使うことになるでしょう。しかし、経験者はわかると思いますが、リソースバンドル+プロパティファイルでの多言語化は、結構しんどいです。1ファイルで何千行もの文言を管理しなければなりません。。。(私の所属する会社ではコードジェネレータでそのめんどくささを回避していますが、それは別の話ですね)。なので、なるべくテンプレート側に文言を持ちましょう。

その他

書き忘れたことがあったら、さらに追って書いていきます。

情報源

日本発のオープンソースらしく、日本語の情報、コミュニティが充実しています。まずは

  • 本家サイトの説明を熟読する
  • MLを購読する。過去ログを読みあさる

これだけでかなり深い情報が得られます。

また、

  • SeasarConferenceなどで発表があったら聴く

というのもおすすめします。

2010年のSeasar Conferernce×JCMT2010では、ヌーラボさんの「Cacoo」発表の中にMayaaの話題がありました。
http://www.slideshare.net/nulab/seasarwebcacoo
実運用事例なので大変参考になりました。

2006年のSC2006Autumnでは、現プロジェクトリーダーの須賀さんの発表があったようです。 http://mayaa.seasar.org/documentation/slide/SC2006Autumn_B1_Mayaa.pdf こちらも、参考にさせていただいております。

<

p>日本には、Mayaaユーザが結構いるようですね。派手な存在ではないですが、話をすると使ったことある方がポロポロ出てくる印象です。

*1:と、同時にプレッシャを感じます(笑)


そろそろ2年間Mayaa使ってわかったことを書く

僕は、2年ほど前に、所属している会社の主要プロダクトであるのリニューアルに係わりました。その際、Mayaaを採用し、今日までにそれを運用してノウハウが蓄積してきたので、ここに発表しようと思います。

経緯

私たちはコンシューマ向けのビューを多く扱うので、プログラミング工数を要せずデザイナーがダイレクトにデザインをカスタマイズできる仕組みの実現が急務でした。

以前はテンプレートにJSPを採用していたため、デザインを作る(HTMLを書く)デザイナーと、プログラムに打ち込むJSPコーダーが必要という状況でした。一方ブログサイトなどでは、CSSレベルでのデザインカスタマイズをサポートしていることは多いですが、それでは自由度に限りが出てしまいます。フルHTMLレベルでのテンプレートエンジンが必要でした。

結果的に、この状況がどのように変化したのかは下記のエントリにも書きましたので、こちらも合わせて読んでいただけると幸いです。

プログラマーとデザイナーの境界が縮まってきた気がする

今回は技術よりのこと、及び運用していく上で培ったノウハウを紹介したいと思います。

JavaServerTemplates "Mayaa" とは

前置きが長くなってしまいましたが、自由なテンプレートの実現のため、Mayaaというライブラリを採用しました。

http://mayaa.seasar.org/

MayaaはSeasar2系の日本発オープンソースライブラリですが、Seasar2に関係なく使用することができます。JSPと同じレイヤーで動作し、JSPのようにServletからforwardして使うことができます。以下のページの図が分かりやすいです。

http://mayaa.seasar.org/documentation/about.html

Mayaaを導入する以前のテンプレートエンジンはこんな感じでした。

<% if (a != null) { %>
hello, <%= a %>
<% } %>

同じようなテンプレートをMayaaで書くとこんな感じです。

<div m:id="IF_A_EXIST">
    hello, <span m:id="A_HERE">dummy</span>
</div>

という感じで、普通のHTMLにm:idという属性が付いていますね。このようにしておくと、テンプレートファイルをそのままブラウザでプレビューすることが可能ですし、HTMLエディタ、例えば Dreamweaver で編集することができます。

Mayaaのすばらしさ

「テンプレートファイルをそのままブラウザでプレビューすることが可能です」といっても、簡単なようで簡単なことではありません。例えば画像の相対パスです。

<img src="images/xxx.jpg" />

ローカルではこのようになんの変哲もなく動く感じですが、サーバにデプロイしてみるとうまく動かないかもしれません。例えば、テンプレートは"view/hello.html"だけど、URLマッピングは別に管理されていて、"action/hello.do"かもしれません。そうすると、上記部分は

<img src="../view/images/xxx.jpg" />

<img src="http://something.example.com/view/images/xxx.jpg" />

のように書き換えるか必要があります。しかし、このようにしてしまったら、今度はローカルで画像が見られなくなったりします。Mayaaにはこの問題を解決するために、PathAdjusterという機構があります。

http://mayaa.seasar.org/documentation/path_adjust.html

詳しくは上記リンクに任せて割愛しますが、大ざっぱに言うと、一番目の記述を三番目の記述に実行時に書き換えてくれる機構です。これを応用すると、例えば「画像パスにtimestampを付与してmod_expireと組み合わせたクライアントキャッシュ対応」なんてこともできてしまいます。

その他にも、Webのフロントとして使う上でかゆいところに手が届く機能が結構付いているので気に入っています。

はまったこと

とはいえ、ここまで順風満帆というわけではありませんでした。例えばこんなころにハマりました。

最初が取っ付きにくい

よく言われます。これが故に、敬遠する方も多いようです。しかし、慣れてみると何も苦はなく、もうJSPには戻れません。ドキュメントが非常によく整備されていますので、とっつきやすさで言えば取っ付き易いほうだと思います。

とはいえ教育コストがかかります(mayaaファイルを覚えなければならない)

mayaaファイルという聞きなれない独自のファイルの記述が必要です。しかも、これを書くには、幾つかあるmayaaプロセッサーをマスターしていないと心もとないところです。

http://mayaa.seasar.org/documentation/processor_reference.html

そこで、mayaaファイルを書ける技術者の数は限られてしまいます。そのためには、「なるべくテンプレート(HTML)側に制御を委ねる」アプローチが必要かなと思います。(詳しくは後ほど書きます)

JavaScriptが気持ち悪い

mayaaでは、Javaオブジェクトとテンプレートとの橋渡しにJavaScript(Rhino)を使用します。Javaとそのまま埋め込めるJSPとは異なるので、「Javaのように見えて少し違う」書き方をしなければなりません。Javaだと思って書いていると、うっかり思いもよらないバグを作ってしまってハマります。これに対するアプローチは以下の二つかなあと思っています。

  • 出来る限りJavaに委譲する
  • 出来る限りJavaScriptに統一する

従来ならば、前者の書き方が理想だと思われますが、そのような方法を2年ほどやってきた結果、少々冗長さを感じています。ちょっとした変更でもサーバの再起動が必要なのも億劫です。(本番環境だと簡単に再起動できませんしね?)今はサーバーサイドJavaScriptも広く利用されています。今後は後者のアプローチも有効ではないかと思っています。 実際にやってみて失敗でした。JavaScriptのビルドや実行はJavaより遅いので多用するとパフォーマンス上の問題があります。JavaScriptはなるべく使わず可能な限りJavaに寄せるのが正解です(2014/07/02 追記)

また、別件ですが、mayaaファイルはXMLなので、以下のような冗談みたいな記述もあります

<m:if test="${hoge &gt; 0}">

本当はif (hoge > 0)と書きたいところなのですが、mayaaがxmlファイルなので、">"が書けずこのような書き方になってしまいます(笑)どうしても">"と書きたい場合は、""の中をCDATAにすればいいのですが、

<m:if test="${<![CDATA[hoge > 0]]>}">

さらに冗長になっちゃいました(笑)

負け惜しみとしてはmayaaのおかげで鍛えられて、もうltとgtがどっちかなんて迷うことはなくなりました(笑)

私たちが採用したノウハウ集

実際に使っていて培ったノウハウを発表します。

m:idに命名規則を使用する

mayaaには数多くのプロセッサーが存在しますが、HTML側から見ると、下記の4種類に集約されることがわかりました。

  • 変数を出力する
  • 属性を書き換える
  • 条件を満たす場合のみ表示する(条件を満たさなければ消える)
  • 特定の条件のもと繰り返す

それぞれを、"〜HERE"、"〜_TAG"、"IF〜"、"LOOP_〜"と命名するように統一しました。このようにすると、こんなこともできてしまいます。

Mayaaファイルを命名規則から一括作成するEmEditorマクロ

デザイナーとプログラマーで使う名前空間を分ける

Mayaaでは、動的なタグの紐付けにHTMLの"id"属性を使用できますが、"m:id"のように独自の属性を使用することができます。まずは有無を言わずそちらを採用します。

http://mayaa.seasar.org/documentation/equals_id_resolver.html

それでもどうしても、id属性やclass属性を使用したくなることがあります。これはMayaaに限らず一般論ですが。そこで、「プログラマーは全て大文字を使う」「デザイナーは全て小文字を使う」などの棲み分けをすると良いと思います。

xpath指定は使用しない

Mayaaではidの代わりにxpath指定でタグをコントロールすることができます。

http://mayaa.seasar.org/documentation/xpath.html

が、この方法は緊急時を除いて使用するべきではありません。あとからどうにもならなくなって泣けてきます。。。

また、パフォーマンス上の問題もありますので、できれば、templateResolverリストから外してしまうことをおすすめします。(2014/07/02 追記)

デバッグ用関数は値を返す

こんな関数を用意してdefault.mayaaから呼び出すようにするとデバッグで便利です。Javaのような豪華なデバッガがあれば本当はいいんですけどね

function debug(value, tag) {
    if (tag == null) tag = 'debug';
    java.lang.System.out.println(tag + "t" + tag);
    return value;
}

プログラムは文言を吐き出さない

以下のような書き方は、文言の変更にプログラムの修正が必要となってしまいます。

性別:<span m:id="USER_SE×_HERE">男性</span>

※上記コードは、中学生並みの恥ずかしがりではなく、変なサーチキーワードに引っかからないように一部改変しています。

例えば、「男性」という文言ではなく、画像にしたいかもしれません。英語化するかもしれません。以下の書き方が良いです。

性別:<span m:id="IF_USER_MAN">男性</span><span m:id="IF_USER_WOMAN">女性</span>

id一覧表を自動生成する

mayaaファイルはxmlファイルなので、比較的簡単にパースできます。XMLコメントもパースの対象にできるので、それを元にid一覧表を作るのは容易です。JavaDocを自作するイメージです。(ソース載せようとしたらちょっと長いので割愛します。SAXを使うとスムーズに実装できました。

http://www.atmarkit.co.jp/fxml/rensai/xmljava04/xmljava02.html

また、ドキュメントの出力部分では、以下を参考に、ここでもMayaaを使用しました(笑)

http://d.hatena.ne.jp/terazzo/20071116/1195250832

PathAdjusterをうまく使う!

Webサイトですから、ハイパーリンクを多用します。この時、いちいちリンク一つ一つにm:idを発行していたら大変です。そういう時は、PathAdjusterでなんとかしましょう。僕は、adjustRelativePathのオーバーライドで、拡張子が".html"の場合はsuper.adjustRelativePath(base, path)に引き継がず、独自で処理するようにしました。結果的に、リンクは以下のように書くことになっています。

<a href="member_input.html">会員登録</a><!-- 実行すると、servlet用のURLに変換される -->

このように、PathAdjusterをうまく使うことで、発行するidの数を減らすことは非常に強力です!

一つのmayaaファイルで複数のテンプレートを使い回す。

Mayaaは設定ファイル

  • org.seasar.mayaa.provider.ServiceProvider
  • org.seasar.mayaa.source.PageSourceFactory

などの記述で非常に柔軟にエンジンをカスタマイズできます。

前述したとおり、mayaaファイルはできるだけ少なくしたほうが得策です。そこで、一つのページをベースに複数の派生ページがデザインレベルで作れると幸せです。以下のエントリでその試みを成功させました。

Mayaa ファイルの共通化

そうこうしていると、「派生したページでちょっとだけm:idを追加したい」なんていう要望も発生してしまいました。これについても、EqualsIDInjectionResolverのカスタマイズで対応することができてしまいました。

http://ml.seasar.org/archives/mayaa-user/2010-January/000893.html

これは、当時での実現方法ですので今は、https://www.seasar.org/issues/browse/MAYAA-76
が実装されたのでさらに簡単にできると思います。

m:idの数を減らす

例えば、「名前の頭30文字を出力して残りは...にする」「名前の頭60文字を出力して残りは...にする」「名前の頭60文字を出力して残りは...にする」のように、パラメータが存在する制御をしたい時があります。そんなとき、

  • NAME_30_HERE
  • NAME_60_HERE

のようにいちいちつくっていたらヤボです。はじめのうちは本当にそんな感じで対応していたためミスもありました。

今は以下の方法でパラメータ化を実現しています。

function $p(name, defaultValue) {
    var attr = originalNode.getAttribute(
        Packages.org.seasar.mayaa.impl.engine.specification.SpecificationUtil.createQName(name)
    );
    if (attr != null) return attr.value;
    attr = originalNode.getAttribute(
        Packages.org.seasar.mayaa.impl.engine.specification.SpecificationUtil.createQName(originalNode.getDefaultNamespaceURI(), name)
    );
    return defaultValue;
}

テンプレート側では、以下のように書けばOKです。

<span m:id="FREE_HERE" m:free_no="20">自由項目20番</span>

m:を抜かすと実行後のマークアップにfree_noが残ってしまいますのでつけることをおすすめします(2014/07/03 追記)

コメントはこう書け!

JSPだとこんな風なコメントが使用できました。

<%-- ほげほげ --%>

開発が切羽詰ってくるとコメントも荒れてきます。うっかり外に出してはまずい言葉を書いてしまうかもしれません。JSPコメントならば出力されないのでセーフですが、mayaa+HTMLだと、この書き方ができないので、うっかりテンプレートに開発者しかしらない内部情報を書いては大問題です。そんな時はこう書きましょう。

<!-- ${/* FIXME:ここ意味がわからないけどなぜかそれっぽく動く>< */} -->

これでブラウザには出力されなくなります(笑)

最後に

今どきUIに強いプログラマー=モテです。さあ、ここまで読めば、君も立派なMayaa使い!

ちなみに、弊社の求人はこちらです↓

http://www.interfactory.co.jp/recruit/index.html

(2011/07/16)書き忘れたことを別エントリで追記しました

2年間Mayaaを使ってわかったこと その2

この記事は以前多くのブックマーク・コメントを頂きました。

これからブックマークされる方はこちら↓