Category Archives: Mayaa

Mayaaで独自Processorを作ろう!

これは Mayaa Advent Calendar 2015 の16日目です。昨日は「Mayaaでサイトを作るときのワークフロー」でした。

今日も11日目の続編を書きます。

とは言え、PathAdjusterの書き換えについては
5日目
SourceDescriptorについては
昔の記事
InjectionResolverについては、
これも昔の記事
で紹介していました。

そうすると、残っているのはProcessorです。

独自のProcessorを作ろう

独自のプロセッサーが必要になるのはどういう時でしょうか?
例えば、こんな時だと思います。
- 毎回Mayaaファイルに同じような記述をしている。もっと楽をしたい!
- Mayaaファイルに"${ }"でJavaScriptを書いたりせず、独自記法で直接Javaオブジェクトにアクセスして高速化を図りたい

思いつくのはこんな感じです。

Processorを極めると、Mayaaを極めるといった感じがします。

独自Processorの作り方

プロセッサーの登録には、mldというファイルが必要になります。これは、そのプロセッサーがどんな属性を受け取るのかなどを設定します。

記述例は、Mayaaのソースコード 内にある、
/mayaa/src-impl/org/seasar/mayaa/impl/engine/processor/mayaa.mld
を見てみるのが一番わかり易いと懐います。

ということで、独自のmldファイルを作って、my.mldとしてみます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE library
    PUBLIC "-//The Seasar Foundation//DTD Mayaa Library Definition 1.0//EN"
    "http://mayaa.seasar.org/dtd/mld_1_0.dtd">
<library uri="http://example.jp/mymayaa">
    <description>My Mayaa processors</description>
    <processor name="if" class="jp.example.MyIfProcessor">
        <property name="test" expectedClass="boolean"/>
    </processor>
    <processor name="write"
            class="jp.example.MyWriteProcessor">
        <property name="value" expectedClass="java.lang.String"/>
        <property name="escape" expectedClass="boolean" default="false"/>
    </processor>
</library>

この例では、writeプロセッサーとifプロセッサーを独自拡張しようとしています。

このファイルはどこに置けばよいでしょうか?
こちらの情報によると

  WEB-INF/lib
  jar内 META-INF/
  classes/以下全ディレクトリ

などに置けば有効になります。

とのことです。

ということで、classes/META-INFなどのディレクトリを切って、
org.seasar.mayaa.provider.ServiceProvider
まどと一緒に入れてしまうのが良いと思います。

Processorを実装する

プロセッサーの実装例は、すでにあるプロセッサーのソースを読むのが一番早いです。

今回はこんな感じのプロセッサーを作ってみたいと思います。

  • my:writeプロセッサー

    • escapeXml, escapeEol, escapeWhitespaceを毎回書くのはめんどくさいから、escape='false'で全部指定出来るようにする
  • my:ifプロセッサー

    • といちいち囲まなくても同じ動きをする
    • テンプレート側にm:NOT=""を付けることで条件を反転して動作する

これらを実装すればMayaaファイルを一気にすっきりさせられそうです!

実装例(MyWriteProcessor)

public class MyWriteProcessor extends org.seasar.mayaa.impl.engine.processor.WriteProcessor {
    public void setEscape(ProcessorProperty escape) {
        setEscapeEol(escape);
        setEscapeWhitespace(escape);
        setEscapeXml(escape);
    }
}

実装例(MyIfProcessor)

public class MyIfProcessor extends org.seasar.mayaa.impl.engine.processor.IfProcessor {

    private volatile boolean created = false;

    private ProcessorProperty _test;

    // MLD property, expectedClass=boolean
    public void setTest(ProcessorProperty test) {
        if (test == null) {
            throw new IllegalArgumentException();
        }
        _test = test;
        super.setTest(_test);
    }

    @Override
    public ProcessStatus doStartProcess(Page topLevelPage) {
        if (!created) {
            synchronized (this) {
                if (!created) {
                    ProcessorTreeWalker[] childProcessors = new ProcessorTreeWalker[getChildProcessorSize()]; 
                    for (int i = 0; i < childProcessors.length; i++) {
                        childProcessors[i] = getChildProcessor(i);
                    }
                    clearChildProcessors();
                    ProcessorTreeWalker echoNode = createNode(this, "echo");
                    for (int i = 0; i < childProcessors.length; i++) {
                        if (childProcessors[i] != null) {
                            echoNode.addChildProcessor(childProcessors[i]);
                        }
                    }
                    echoNode.addChildProcessor(createNode(this, "doBody"));
                    addChildProcessor(echoNode);
                    created = true;
                }
            }
        }
        if (_test == null) {
            throw new IllegalStateException("test attribute is empty." + getInjectedNode().getSystemID() + " (" + getInjectedNode().getLineNumber() + ")");
        }
        boolean test = ObjectUtil.booleanValue(_test.getValue().execute(null), false);

        NodeAttribute attr = getOriginalNode().getAttribute(SpecificationUtil.createQName("NOT"));
        if (attr != null) {
            test = !test;
        }

        return test ? ProcessStatus.EVAL_BODY_INCLUDE : ProcessStatus.SKIP_BODY;
    }

    static ProcessorTreeWalker createNode(TemplateProcessor node, String name) {
        QName qname = QNameImpl.getInstance(name);
        LibraryManager libraryManager = ProviderUtil.getLibraryManager();
        ProcessorDefinition def = libraryManager.getProcessorDefinition(qname);
        SpecificationNodeImpl echo = new SpecificationNodeImpl(qname);
        TemplateProcessor proc = def.createTemplateProcessor(node.getOriginalNode(), echo);
        proc.setOriginalNode(node.getOriginalNode());
        proc.setInjectedNode(echo);
        return proc;
    }
}

Ifの方が結構複雑な感じですね。これは、複数のプロセッサーの仕事をまとめるために、初めてレンダリングするときに、前後にプロセッサーを足しています。

さすがにもう少しスマートなやり方もあるかもしれません。

記述例

Mayaaファイル先頭のxmlns属性に、今回使った名前空間を追加しないと使えません。今回はhttp://example.jp/mymayaaというものを書きましたが、実際は自分が所属するドメインなどユニークなものを使ってください。

<?xml version='1.0' encoding='UTF-8' ?>
<m:mayaa xmlns:m="http://mayaa.seasar.org" xmlns:my="http://example.jp/mymayaa" >
  <!-- XXXの時にのみ表示します -->
  <my:if m:id="IF_XXX" test="${request.XXX}" />
  <!-- YYYを出力します。 -->
  <my:write m:id="YYY" escape="false" />
</m:mayaa>
<div m:id="IF_XXX">XXXです</div>
<div m:id="IF_XXX" m:NOT="">XXXではありません</div>
<span m:id="YYY_HERE">YYYを出力</span>

まとめ

このように、プロセッサーは簡単に作れます。上手くやると、Mayaaファイルをとてもすっきりさせたり、独自のテンプレート記法を自由に生み出せることが出来るでしょう。

MyIfProcessorと同じような仕掛けで、for, forEachプロセッサーは簡単に作れます。

Mayaaファイルの書き方がかったるいなーなどと思ったら、Processorの作成に挑戦することをおすすめします。

おまけ:じつはMayaaは何でもプロセッサーで処理する

Mayaaの内部構造を理解すると、例えば「静的文字列を出力する」(LiteralCharactersProcessor)もプロセッサーだったりします。&lt;!CDATA句もCDATAProcessorというのがあったりします。

Mayaaのレンダリングはプロセッサーであることを理解しておくと、何かあった時の調査に役立つと思います。

Mayaaでサイトを作るときのワークフロー

これは Advent Calendar 2015 の15日目です。昨日は「Mayaaでm:idの組み方が原因でページ全体がエラーになるのを防ごう(CompiledScript / ScriptEnvironmentの拡張例)」でした。

今日を乗り切ればあと10日です。最後まで気を抜かず頑張ります!といいつつ、昨日もガチなこと書いてしまったので、今日はゆるく行きましょう。

Mayaaを使ったサイトの作り方

Mayaaを使ってサイトを作るってどんな感じになるんでしょうか。

HTMLを先に書くのが良いのでしょうか?Mayaaを先に書くのが良いのでしょうか?

今日はそんな話をしてみようと思います。

プログラマーが書くときは先にHTMLを書くと良い

意外かもしれませんが、最初にプロトタイプを書くのはプログラマー側のほうが良かったりします。まずは、m:idも何もない状態で、HTMLで骨組みを作ります。

<div m:id="LOOP_ITEM">
名前: <span m:id="NAME_HERE">名前</span><br />
住所: <span m:id="ADDRESS_HERE">東京都</span><br />
</div>
<div m:id="DUMMY_TAG">
名前: <span m:id="NAME_HERE">名前</span><br />
住所: <span m:id="ADDRESS_HERE">東京都</span><br />
</div>
<div m:id="DUMMY_TAG">
名前: <span m:id="NAME_HERE">名前</span><br />
住所: <span m:id="ADDRESS_HERE">東京都</span><br />
</div>

<br />とか書いてるし、デザイナー・HTMLコーダーの方に言わせたら怒られるかもしれませんが、僕達が作るのはデザインではないのでこんな感じで骨組みを作っていきます。

そして、Mayaaファイルを作って動きを見ます。シンプルなデザインの方が結局ロジックを考えやすいです。

Mayaaはデザインを凝るためのテンプレートエンジンですが、デザインを放棄するために使うという発想です。

デザイナーが最後まで作るとどうなるか

残念ながらサイトを作る能力はデザイナー氏の方が上です。プログラマーって詰めが甘いんすよね。反省します。

なので、デザイナーが動くよりも前に必要な機能、m:idは全部そろえてしまって、デザインの人にグリグリいじってもらった方が良いサイトができます。

ただ、この方法を取ると次の問題が

  • デザイナー段階で手戻りや追加要件が発覚する場合が多い
  • デザイナーにどこまでテストの負担を強いるのか

結局のところ、システム開発という観点だと、この問題が発生します。

伝統を駆使する

こういう時は、伝統的な発想が役立ちます。

デザイナーはワイヤーフレームを作り、フォトショップでデザインを作り、コーダーがHTMLを打ち込む。

SEが基本設計、詳細設計を詰め、プログラマーがプログラミングして、単体テスト、結合テスト。。。

おう、受託開発\(^o^)/ウォーターフォール/(^o^)\

経験上、このスタイルでも、Mayaaはまあ、うまく使えてるかなと思います。

そうすると、気づいてみると、一つの組織の中に2つのフローが発生してきます。

*ディレクター→デザイナー→コーダー
*PM→SE→PG→テスター

一つの組織に2つのフローが入り乱れて行く、この問題はどこでサバくべきなのか!結構複雑になってきます。

それは、嫌なことなのかといえば、それって良いことだと思います。

専門性を発揮する

僕の所属する組織では、SEはPGの上位職ではなく、それぞれが専門チームとして活動しています。デザインチームも、デザイナーとフロントエンドエンジニアが対等に活動しています。それぞれが専門性を発揮できていることは、良いことだと思います。

Mayaaによってデザインとコードが分離できていること、一つの雛形を何度も使いまわせることが、各自の専門性をアップすることに一役買っているかもしれません。

そうだったらいいな。

まとめ

1人や2人でサイトを使うのにも、Mayaaは便利です。また、大人数で作るのにも十分向いています。大事なことは、各々が自分の専門性を理解して、良いサイトを作ろうと、皆で力を合わせることだと思います。

Mayaaでm:idの組み方が原因でページ全体がエラーになるのを防ごう(CompiledScript / ScriptEnvironmentの拡張例) #mayaa

これは Mayaa Advent Calendar 2015 の14日目です。昨日は「Spring BootのテンプレートエンジンにMayaaを使おうとしてみるリベンジ編」でした。

今日は11日目の続編を書きます。

CompiledScript / ScriptEnvironmentの拡張例

Mayaaでページを作っていると、次のようなエラーに遭遇すると思います。

org.seasar.mayaa.impl.cycle.script.rhino.OffsetLineRhinoException: TypeError: Cannot call method "equals" of null in script=

これは、m:idの中に書かれたRhinoスクリプト実行時にExceptionが発生したという意味です。

これがどのようなときに起こるかというと、例えば

こんなMayaaファイルで

<!--商品を繰り返します-->
<m:forEach m:id="LOOP_ITEM" var="item" items="items">
  <m:echo><m:doBody /></m:echo>
</m:forEach>
<!--LOOP_ITEMで繰り返されるアイテムの名称を出力します-->
<m:write m:id="ITEM_NAME_HERE" value="${item.getName()}" />

こんなテンプレートを書いた時

<span m:id="ITEM_NAME_HERE">アイテム名</span>
<div m:id="LOOP_ITEM" >
<span m:id="ITEM_NAME_HERE">アイテム名</span>
</div>

本来であればLOOP_ITEMの内側に書かなければいけないITEM_NAME_HEREを外に書いてしまいました。

このようなことは、デザイナーさんか、サイト管理者の方が自らテンプレートを編集した時に起こります。

これが起こると、エラー画面が表示されてしまいます。

また、発生した例外には、mayaaファイルの行番号が書いてありますが、それはシステムログを見ない限り読めませんので、デザイナーがこれを見た時、ただただパニックになるしかありません。

これではいけません。

エラーが起きてもとりあえず画面を出す

多分世の中に初めて公開すると思います。次のカスタマイズによって、このような前述の事態を防ぐことが出来ます。

public class EbisuScriptEnvironmentImpl extends ScriptEnvironmentImpl {

    @Override
    protected CompiledScript compile(ScriptBlock scriptBlock, PositionAware position, int offsetLine) {
        if (scriptBlock.isLiteral()) {
            return super.compile(scriptBlock, position, offsetLine);
        }

        return new MyCompiledScriptWrapper(super.compile(scriptBlock, position, offsetLine));
    }
}
public class MyCompiledScriptWrapper implements CompiledScript {

    CompiledScript inner;
    public MyCompiledScriptWrapper(CompiledScript compiledScript) {
        inner = compiledScript; 
    }
    public void setExpectedClass(Class expectedClass) { inner.setExpectedClass(expectedClass); }
    public Class getExpectedClass() { return inner.getExpectedClass();  }
    public String getScriptText()   { return inner.getScriptText(); }
    public boolean isLiteral()      { return inner.isLiteral(); }
    public Object execute(Object[] args) {
        try {
            return inner.execute(args);
        } catch (OffsetLineRhinoException | MyOffsetLineScriptException e) {
            e.printStackTrace(System.err);            
            return "**** TEMPLATE ERROR!!! ****";
        }
    }
    public void setMethodArgClasses(Class[] methodArgClasses) { inner.setMethodArgClasses(methodArgClasses); }
    public Class[] getMethodArgClasses() { return inner.getMethodArgClasses(); }
    public boolean isReadOnly()     { return inner.isReadOnly(); }
    public void assignValue(Object value) { inner.assignValue(value); }
}

org.seasar.mayaa.provider.ServiceProviderに以下の記述を追加します

    <scriptEnvironment class="jp.example.MyScriptEnvironmentImpl">
        <scope class="org.seasar.mayaa.impl.cycle.scope.ParamScope"/>
        <scope class="org.seasar.mayaa.impl.cycle.scope.HeaderScope"/>
        <scope class="org.seasar.mayaa.impl.cycle.scope.BindingScope"/>

        <!-- "_" = current - page - request - session - application -->
        <scope class="org.seasar.mayaa.impl.cycle.script.rhino.WalkStandardScope"/>
        <!-- extension: java.lang.System.getProperty()
        <scope class="org.seasar.mayaa.impl.cycle.scope.EnvScope"/>
        -->
        <parameter name="wrapFactory" value="org.seasar.mayaa.impl.cycle.script.rhino.WrapFactoryImpl"/>
    </scriptEnvironment>

このようにすると、上記の記述では

**** TEMPLATE ERROR!!! ****
アイテム1
アイテム2
アイテム3

のように出て、とりあえず事故は回避されました。

画面にエラーがあった箇所の行番号を出力する

ただ、このままだとどこでエラーが起きたかわからなくなります。このままだと

変なゲジゲジがでたー!!!Σ(゚∀゚ノ)ノキャー

と言われてしまいます。(言われません)
そこで、後は簡単なテクニックになります。

public Object execute(Object[] args)
の中でテンプレートのファイル名、行番号は次のようにして取得できます。

String pageName = CycleUtil.getServiceCycle().getOriginalNode().getSystemID();
int lineNumber = CycleUtil.getServiceCycle().getOriginalNode().getLineNumber();
String message = errorMessage + "(" + pageName + ":" +  lineNumber +  ")";

あとは、この行番号と、exceptionのgetMessage()などを、CycleUtil.getRequestScope().set/getAttribute()を使って格納していって、default.mayaaにm:idを作って、テンプレートエラーが起きたら画面の上からオーバーレイしてきて表示する仕掛けなどを作るのが良いと思います。

error

この他便利な使い方

CompiledScriptの便利使い方として、他によく使う技としては、よく使うスクリプトをJavaScriptコンパイルせずショートカットして高速化を図る技があります。

その他、Rhino以外のスクリプトエンジンに切り替えることも可能です。

そこまでガチなことをやらなくても、ログに使って調査をしたりすることから始めても良いかもしれません。

結構ワクワクしますね。

まとめ

Mayaaにはこのようにわくわくする拡張ポイントがいっぱいあります。やり過ぎは厳禁ですが、今回紹介したように、トラブルを防ぐ手段として活用すると良いと思います。