Category Archives: 未分類

MayaaでWebサイトのビューを実装するときに押さえておくべき基本テクニック2 – m:idの実装における注意点

これは Mayaa Advent Calendar 2015 の4日目です。昨日は「MayaaでWebサイトのビューを実装するときに押さえておくべき基本テクニック1 – タグの命名規則と実装方法」でした。

昨日は、命名規則についての注意点を説明しました。今日はそれを軸に、各m:idの実装の仕方の注意点を説明します。

いしがみメソッド2. m:id実装時の注意すること

1. LOOP系のm:idはindexには長い名前を使い、maxを十分に大きな値を設定する

m:forを使ってfor文ライクなループを作るとき、インデックスの変数はiやjではなく、長い名前をつけることをおすすめします。これは、内側に含めるm:idが使う変数にどのインデックスが利くのかわからなくなってしまうためです。

また、for系のプロセッサーはmax属性で指定した回数以上ループすると、エラーが発生してしまいます。maxのデフォルト値は256ですが、256回制限は簡単に超えてしまいます。256を超えたら出力が止まるのではなく、エラーになるので、max属性を常に10000くらいに指定するべきです。

<m:for m:id="LOOP_ITEM" init="${var loopItemIndex = 0;}" test="${loopItemIndex &lt; items.length;}" after="${loopItemIndex++}" max="10000"

別途、ユーザーに指定した回数でループを打ち切る機能を作るのがベストです。それにはテンプレート記述者にパラメータを指定される方法が必要ですので、このやり方は今後紹介します。

2. writeプロセッサーでエスケープを解除するときは全部する

m:writeプロセッサーは、標準では常に改行・XML特殊文字・ホワイトスペース文字をエスケープします。XSSの心配がない箇所で動的にタグを出力したい場合など、エスケープを解除する場合は

<m:write m:id="INFO_HTML_HERE" escapeXml="false" />

のように書けますが、m:idごとにエスケープの設定が変わると混乱を招きます。
ので、3種類のescapeは全て同時にfalseにしましょう。

<m:write m:id="INFO_HTML_HERE" escapeXml="false" escapeWhitespace="false" escapeEol="false" />

3. 混乱を招く機能を無効にする

Mayaaの標準設定では、m:id属性ではなく、id属性でもプロセッサーと紐付けられるようになっていますが、デザイナーと分業をする際に混乱を招くため無効にしましょう。

また、XPath機能は使うべきではありません。
理由としては、デザイナーから見て、暗黙の動作のように見えてしまうことがあります。これは後々必ず混乱を招きます。
パフォーマンスにも問題があるので、これも無効にしてしまいましょう。

さらに、m:injectを使ってのプロセッサーの解決も、分業する上では不要な機能なので、無効にするべきです。

よって、次のようになります。

参考: 5-6. id属性を無視する

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE provider
    PUBLIC "-//The Seasar Foundation//DTD Mayaa Provider 1.0//EN"
    "http://mayaa.seasar.org/dtd/mayaa-provider_1_0.dtd">
<provider>
    <templateBuilder
            class="org.seasar.mayaa.impl.builder.TemplateBuilderImpl">
        <resolver class="org.seasar.mayaa.impl.
                builder.injection.MetaValuesSetter"/>
        <resolver class="org.seasar.mayaa.impl.
                builder.injection.ReplaceSetter"/>
        <resolver class="org.seasar.mayaa.impl.
                builder.injection.RenderedSetter"/>
        <resolver class="org.seasar.mayaa.impl.
                builder.injection.InsertSetter"/>
<!--
        <resolver class="org.seasar.mayaa.impl.
                builder.injection.InjectAttributeInjectionResolver"/>
-->
        <resolver class="org.seasar.mayaa.impl.
                builder.injection.EqualsIDInjectionResolver">
            <parameter name="reportUnresolvedID" value="true"/>
            <parameter name="reportDuplicatedID" value="true"/>
            <!-- HTMLのidとXHTMLのidを追加しないようコメントアウト
            <parameter name="addAttribute"
                    value="{http://www.w3.org/TR/html4}id"/>
            <parameter name="addAttribute"
                    value="{http://www.w3.org/1999/xhtml}id"/>
            -->
        </resolver>
<!--
        <resolver class="org.seasar.mayaa.impl.builder.
                injection.XPathMatchesInjectionResolver"/>
-->
        <parameter name="outputTemplateWhitespace" value="true"/>
        <parameter name="outputMayaaWhitespace" value="false"/>
        <parameter name="optimize" value="true"/>
    </templateBuilder>
</provider>

余談ですが、将来ここに、独自のInjectionResolverを追加していくようになればMayaa上級者です!

4. 名前は英語にこだわらない

m:idの名前はHTMLタグの属性名として指定します。プログラマーはついメソッドを定義するときのように、英語的な名前付けをしてしまいますが、HTMLファイルが横に長くなってしまって読みづらくなってしまうので、積極的に省略しましょう。

IF_IS_MEMBER
ではなく
IF_MEMBER
とします。

5. tableタグだけは特別に扱う

tableタグはMayaaと相性が悪いタグの一つです。
divタグのように、無限に包むことが出来ず、

table > tbody > tr > td
のように階層構造が決まっているため、例えば、trタグにm:idを既に適用してしまうと、そのtrをある条件にもとづいて出し分けなどが出来ません。

ダメな例:


<table>
  <tbody>
<div m:id="IF_MEMBER">
    <tr m:id="ROW1_TAG">
      <td>aaa</td>
      <td>bbb</td>
      <td>ccc</td>
    </tr>
</div>
    <tr m:id="ROW2_TAG">
      <td>aaa</td>
      <td>bbb</td>
      <td>ccc</td>
    </tr>
  </tbody>
</table>

この書き方は出来ません。divタグをtbodyとtrの間に書くことが出来ないためです。IF_ROW3をm:echoなしのifプロセッサーにして、タグが消えるようにすれば、サーバー側では大丈夫になりますが、テンプレート側で見た時に表示が崩れてしまいます。

そこで、せっかくIF_MEMBERのように流用できるm:idがあったとしても、ROW1_TAGの方に、ifプロセッサーを追加して次のようにしてください。

<m:if m:id="ROW1_TAG" test="${context.isMember()}">
  <m:echo>
    <m:attribute name="xxx" value="yyy" />
    <m:doBody />
  <m:echo>
</m:if>

まとめ

地味なルールですが、これらを守ることであとあと混乱を防ぐということが効いてきます。

Mayaaはとても汎用的に作られていて、初期状態では、大変ゆるい状態でリリースされている印象を持ちます。

しかし、チームで作業をする場合は例えば、
InjectAttributeInjectionResolver
のようなものは使わず、必要最小限の機能で賄う戦略を取ることが結局効率が良いです。

さらに、次回はもっと面白いテクニックを紹介しようと思います。

MayaaでWebサイトのビューを実装するときに押さえておくべき基本テクニック1 – m:idの命名規則と実装方法

これは Mayaa Advent Calendar 2015 の3日目です。昨日は「JSPで書かれたシステムをMayaaに移行する」でした

さて前回の記事で、JSPでフロントが書かれたプロジェクトをMayaaに移行する例を書きました。しかし、実際にWebシステムのビューをすべて実装しようとすると大変です。

そこで、今日から数日に分けて私の経験に基づく、MayaaでWebサイトを実装するテクニックを紹介します。

自分で言うのも恥ずかしいですが、「いしがみメソッド」ってなやつです (^^;

いしがみメソッド1「命名規則は徹底せよ」

デザイナーはMayaaファイルを読めません。したがって、m:id一つ一つ何を意味するのか、意思疎通をしておくことが必須です。

1.m:id含め、プログラム都合の識別子は常に大文字を使う

Mayaaを使う最大の目的は、デザイナーとプログラマーが平行して、最終的に出力される一つのHTMLを作ることです。

したがって、同時にひとつのHTMLを作ることになります。そうすると、二人して同時にclassを作ってしまったりします。

そこで、プログラマーが書くものは常に大文字、デザイナーが書くものは常に小文字というように、命名規則を分けることを推奨します。

プログラマーが小文字、デザイナーが大文字でも良いですが、制御を扱うm:idが大文字の方が埋もれないメリットが有り、次のようなスタイルが良いです。

<div m:id="IF_MEMBER" class="member_box">
 ...
</div>

2.m:idのする仕事を4種類に限定する

僕は発行するm:idを次の4種類に限定しています。

  • *_HERE

    • その場所に文字列を出力する
  • *_TAG

    • そのタグの属性を変化させたり要素を足したりする
  • IF_*

    • そのタグ及びその子要素が特定の条件にもとづいて消える
  • LOOP_*

    • そのタグ及びその子要素を特定の条件に基づいて繰り返す

これまでの経験から、この4種類だけでWebサイトは作れ作れます。

3.それぞれの実装方法

それぞれ、実装の方法も固定されます。_HEREは、その場に出力されれば良いので、m:writeプロセッサーをそのまま使うのが良いでしょう。

<!-- タイトルを出力します -->
<m:write m:id="TITLE_HERE" value="${page.getTitle()}" />

m:writeプロセッサーではなく、m:insertプロセッサーの場合もあります。これらは、デザイン視点から見たら違いがないので、m:idの名前は、常にデザイナー視点で考えてください。

_TAGは主にタグの属性を変更するために使用します。場合によっては、hidden要素の追加にも使います。hiddenはデザインとは関係ない要素なので、テンプレートに記述することはせず、常にm:idで出すべきです。

また、属性はデザイナーが編集する場合もあり、m:idで制御する対象とデザイナーが書いた属性がぶつかると、デザイナー側の記述が無効になってしまいます。そこで、事前にどのm:idがどの属性を制御するのかわかるようにしておきます。classやid属性が変化するやつは特に注意が必要です1

<!-- 商品画像を表示します。src属性を制御します -->
<m:echo m:id="ITEM_IMAGE_TAG">
  <m:attribute name="src" value="${image.getSrc()}" />
</m:echo>

IFのm:idは、そのままm:ifプロセッサーを使ってはいけません。m:ifプロセッサーは、条件にマッチしても、自分のタグを消してしまいます。例えば

ダメな例:

<m:if m:id="IF_MEMBER" test=${context.isMember()} />
<div m:id="IF_MEMBER">
会員限定
</div>

会員限定

このようになってしまうと、テンプレート上ではdivで囲まれて前後が改行されているのに、divが消えて横並びになってしまいます。これではいけませんので。正解は次のように書くことです。

良い例:

<m:if m:id="IF_MEMBER" test=${context.isMember()}>
  <m:echo><m:doBody /></m:echo>
</m:if>

LOOPも同じことが言えます。

良い例:

<m:forEach m:id="LOOP_ITEM" items=${items}>
  <m:echo><m:doBody /></m:echo>
</m:if>

4._TAGの運用な慎重に

これら、4つのルールの中で、*_TAGは唯一汎用的に使うことができます。それは、IFのようにも、_HEREのようにもできます。

このことは、コンポーネント的なm:idを作れる反面、きちんとドキュメントを書かないとデザイナーとの間で混乱を招きます。

例えば、ある時「条件に応じて、display:noneで表示非表示を切り替えられる領域」という意味で「**_AREA_TAG」というものを作りました。
「エリアタグとはなんぞや」
というクレームが上がりました。どうしても、特殊な概念のTAGを作りたければ、事前にネゴっておきましょう。

実際は_INPUT_TAGや、_RADIO_TAG、*_IMAGE_TAGのように指定するべきタグ名と名前を合わせるのが無難な選択です。

ただ、必ずしもタグ名がデザインとシンクロするとも限らないので、この辺りは事前に話し合って決めましょう。

default.mayaaに書いたm:idには接頭辞"common."を付けよう! (2015/12/07 追記)

default.mayaaに書いたm:idはすべてのテンプレートファイルで使えます。これらと各ページ特有のm:idは名前で見分けられるほうが良いです。

ということで、僕は"common."という接頭辞を付けています。

<span m:id="common.SITE_NAME_HERE">サイト名</span>

まとめ

ざっと命名規則について、説明させていただきました。

まとめてみると、常に、同じリソースを、プログラマーとデザイナーが同時に書いているということを意識することが大切です。

Mayaaという技術の採用はプログラマー側が引っ張って導入しているものなので、プログラマーは是非自分の範囲以上に、チーム全体のことを考えてm:idの設計を行ってください。

Mayaaの導入で最も重要なのはチームワークです。明日以降もチームワークを支える様々なテクニックを紹介します。

WindowsでJavaな人に捧げる素敵なスクリプティングツール jrunscriptの使い方

これは Java Advent Calendar 2015 の3日目です。昨日は@kawasima さんの「Webアプリ開発/テストのお供に『WAITT』」で、明日は @akihyro さんです。

もしもLLが使えたなら

業務にWindowsを使用していて、開発言語はもっぱらJava、LLを使えたらかっこいいと思うけど、Windowsだし。。。。Powershellとかよく知らないしでもっぱらサクラエディタ、、、そんな方はいらっしゃいませんか?

僕は、そんなあなたを応援します!なぜなら僕がそうだからです!

僕は大量のファイルを作ったり、複雑なファイル検索をしたいなどのデータ処理に、よくJDK付属のjrunscriptコマンドを使っています。例えばこの記事でも使っています。

jrunscriptとは

jrunscriptはJDK6以上に付属しているコマンドで、JVM上でJavaScriptエンジンを実行することが出来るコマンドラインツールです。cd()やdir()などの若干のシェル的な組み込み関数をバンドルしています。

JavaScriptなら、Web開発を経験していれば、Javaばかりの人も自由に書けるのではないでしょうか?

Javaプログラマーがjrunscriptコマンドを使いこなすメリット

  • JDKさえ入っていれば、WindowsでもMacでもLinuxでも動く
  • 使い慣れたJavaAPIが使える

冒頭に述べた僕みたいな人にぴったりなツールです。確かに、LLに比べてJavaScriptはfunctionなどの入力量が多いです。

しかし、APIを調べたり、言語仕様を勉強している時間がほぼいらないので、やりたいことが最短で実現できます。

しかも、LinuxやMacにそのまま持っていけます!やった\(^o^)/

JVMの状態を見よう

jrunscriptのもう一つの用途として、即座にJavaのシステムプロパティどうなっているんだっけ?など、JVMの状態をしれてしまうことがあります。

$ jrunscript -e "print(java.lang.System.getProperty('user.timezone'))"

システムプロパティを列挙するならこんな感じです。

$ jrunscript -e "for (var key in java.lang.System.properties) print(key + "-" + java.lang.System.properties[key]);"

組み込み関数を知ろう

次のURLに記載された関数が組み込まれています。
http://docs.oracle.com/javase/7/docs/technotes/tools/share/jsdocs/GLOBALS.html

これらの関数は地味ながら、時々役立ちます。例えばjrunscriptで簡単なインストーラーを作るときなどは重宝すると思います。

JavaとJavaScriptの橋渡し

JavaAPIを使ってしまうと、Javaの配列を受け取ったりします。Nashorn/Rhinoの世界では、JavaScriptの配列とJavaの配列は明確に区別されており、JavaScriptとして使うならJavaScript配列を使ったほうが便利です。

例えば、次のようにES5風のforEachが書けます。

nashorn> [1,2,3,4,5].forEach(function(i){print(i);})
1
2
3
4
5

しかし、Java配列の場合はできません。

nashorn> new java.io.File(".").list().forEach(function(i){print(i);})
script error: TypeError: [Ljava.lang.String;@5a63f509 has no such function "forEach" in <STDIN> at line number 1

この場合は、Java.fromというメソッドが使えます。

nashorn> Java.from(new java.io.File(".").list()).forEach(function(i){print(i);})
aaa.txt
bbb.js
xxx.zip

応用編

あるディレクトリ以下の全てのファイルを探索

これはよく使うのでイデオムではないでしょうか。

function f(i) {
    if (i.isDirectory()) {
        Java.from(i.listFiles()).forEach(function(e) {f(e);})
    } else { doSomething(i) }
}
doSomething = function(i) {print(i);};
f(new java.io.File("."));

以下、このfを定義していたとします。

例題1. あるディレクトリ以下で、拡張子がjavaのファイルで10日以内に変更したファイル一覧を取得

doSomething = function(i) {
    if (i.lastModified() > java.lang.System.currentTimeMills() - 1000 * 3600 * 24 * 10) {print(i);}};
f(new java.io.File("."));

例題2. あるディレクトリ以下で、ファイル名がAdminから始まっているファイルの容量の合計

doSomething = function(i) {
    if (i,getName().startsWith("Admin")) {print(i.length()); sum += i.length()}};
var sum = 0; f(new java.io.File(".")); print(sum);

例題として微妙ではありますが、関数を組み立ててやりたいことを実現していくのが気持ち良くなってきませんか?

まとめ

このように、JDKさえあれば使える、クロスプラットフォームなスクリプティングツールとして、いざというときに役立つのではないでしょうか。

Java6がリリースされてから9年経ちますので、9年前以降のしすてむであったら使うことが出来ます。

JavaAPIが使えるので、いちいち慣れない言語のAPIを調べる手間が省けるのが嬉しいです。あれ、これ、Rubyではどう書くんだろう?と思う必要がありません。

また、ある程度うまく行ったら、Javaで同等なことが出来るので、本番のコードとして流用することもあるかも知れません。

これで、LL弱者の僕も、ワンライナーを駆使できるようになりました。

次はあなたの番です!

jjsコマンドについて

jrunscriptの他に、Java8からはjjsというコマンドが搭載されています。jrunscriptは試験的に作られたコマンドという位置づけなので、本来はjjsコマンドを使うべきです。

しかし、標準組み込み関数が微妙に異なることと、java6,7環境も依然として存在すると思われますので、僕はjrunscriptを好んで使います。