Category Archives: Java

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

これは Mayaa Advent Calendar 2015 の5日目です。昨日はMayaaでWebサイトのビューを実装するときに押さえておくべき基本テクニック2 – m:idの実装における注意点」でした。

ふう、今日で5日目ですか。25日書き続けるのが不安になってきました。でも、おかげさまで、いつもよりも多くの方に読んでいただいているようです。出来る限り途切れさせないように頑張ります。

今日は何を書きましょうかね。困ったときは過去記事の焼き直し...全く同じでも仕方がないですが、ここに書いていることでまだ書いていないことを今日は書きます。

いしがみメソッド3. m:idを減らすテクニック

mayaaファイルはxmlなので、サイズが大きくなると、XMLエディタが重くなったりします。なので、なるべくなら、m:idは減らしたいと思ってきます。

1.m:idをパラメータ対応にする

m:idを減らすテクニックとして、同じようなメソッドをパラメータ化すればまとめられることが良く有ります。

そんな時は、こんな関数を作りましょう。

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;
}

使い方はこんな感じです。例えば
一昨日書いたforプロセッサーの件は

<m:for m:id="LOOP_ITEM" init="${var loopItemIndex = 0;}" test="${loopItemIndex &gt; items.size() &amp;&amp; loopItemIndex &gt; toInt($p('max'), 999999)}" max="999999">
  <m:echo>
    <m:doBody />
  </m:echo>
</m:for>

事前に次の関数をload関数で読み込む外部jsファイルなどで読み込んでおいたとします。

function toInt(s, default) {
  try {
    return java.lang.Integer.parseInt(s);
  } catch (e) {
    return default;
  }
}

使うときはこんな感じに出来ます。

<div m:id="LOOP_ITEM" m:max="10">
  ...
</div>

このようにすることで、最初の10件のみを表示することができます。

この他にも、m:ifプロセッサーに対して常に条件を逆にするパラメータを作って、逆条件のためのm:id発行を減らすこともできます。(僕はそのためにプロセッサーを作ったりします。プロセッサーの独自作成については、後日説明します。)

PathAdjusterを効果的に使う

PathAdjusterは、画像などの相対パスを自動調整して、サーバー実行時に絶対パスに変換する機能です。本来はjpgなどの画像やjsファイルなどに使うものですが、独自のロジックを追加して、リンク先のURLをいい具合に変換すると、単なるリンクではわざわざm:idを発行しなくても良くなることが有ります。

公式マニュアル - 5-9. パス自動調整の設定 を参照してパス自動調整機能をカスタマイズしましょう。

<?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>
    <pathAdjuster class="jp.example.MyPathAdjuster">
        <parameter name="enabled" value="true"/>
        <parameter name="force" value="false"/><!-- since 1.1.13 -->
    </pathAdjuster>
</provider>

そして、jp.example.MyPathAdjuster を作成しておきます。

package jp.example;
import org.seasar.mayaa.impl.builder.PathAdjusterImpl;
public class MyPathAdjuster extends PathAdjusterImpl {
  @Override
  public String adjustRelativePath(String base, String path) {
    if (path.endsWith(".html")) {
      return MyConst.SITE_ROOT_URL + "/" + path;
    }
    return super(base, path);
  }
}

実際のシステムでは色々なパス階層があると思うので、色々工夫してかけると思います。

参考PathAdjuster のカスタマイズ - marcie001のメモ

以前はPathAdjusterは、この他に、画像のタイムスタンプを出力してキャッシュに使うこともできます。。。などと以前は言っていましたが、ファイルのタイムスタンプをリアルタイムに検索するのも少なからず負荷がかかりますし、最近はcloudfrontなどのCDNを使うことも多かったりします。画像自体別サーバーに置くかもしれません。その辺り、サービスの規模や正確に合わせてください。そんな時も、PathAdjusterがプログラマブルであることが役に立つと思います。

まとめ

今回は、m:idを減らすテクニックを紹介しました。ただし、減らし過ぎにも注意してください。あくまで、デザイナーへの使いやすさを前提にしてください。

あまりやり過ぎると、結局混乱を招いてしまいます。こういう暗黙なことをやるときは、事前に説明しておきましょう。

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の導入で最も重要なのはチームワークです。明日以降もチームワークを支える様々なテクニックを紹介します。