Author Archives: susumuis

About susumuis

メイドカフェによく居るWebエンジニア

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

Spring BootのテンプレートエンジンにMayaaを使おうとしてみるリベンジ編 #javaee #mayaa

これは Mayaa Advent Calendar 2015 の13日目です。昨日は「ぶっちゃけ、Mayaaでデザイナーと仲良くなれたの?」でした。

また、Java EE Advent Calendar 201510日目の続編です。

前回Spring Boot経験2時間で、Mayaaをフロントに使用する試みは残念ながら失敗してしまいましたが、その後、複数のコメントを頂き、再挑戦をしてみようと思います!
https://twitter.com/megascus/status/674901495137996800

https://twitter.com/making/status/674913610662064128

https://twitter.com/tty_twt/status/675299564476235776

https://twitter.com/tty_twt/status/675299730365145088

また、元の記事には、次のようなコメントも頂いています。

匿名
2015年12月11日 9:25 AM
SpringBoot というよりは Spring MVC ですが、
Spring MVC では AbstractView を継承したクラスを作成して、任意のViewへのアダプターを作ります。
例えば、
https://kinjouj.github.io/2013/12/spring-webmvc-4-abstractview.html
や、
http://www.codejava.net/frameworks/spring/spring-mvc-with-csv-file-download-example
などです。CSVダウンロードとかでも、AbstractViewを用います。

JSP と SpringBoot の相性が悪いのは、 SpringBoot が組み込みサーバ上で実行するため、
JSP のプリコンパイルなどの指定が難しいからだと思います。

「MayaaServletの登録をServletRegistrationBeanでやる」をやってみる

まずはこれが利くんじゃないかなという気がしました。というのも、ルートにindex.xhtmlを置いてアクセスしても、MayaaServletに処理が行っているようにまったく見えなかったからです。

最近のSpringは設定をアノテーションとクラスでやるようです。

import org.seasar.mayaa.impl.MayaaServlet;
import org.springframework.boot.context.embedded.ServletRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class MayaaServletRegistration {
    @Bean
    public ServletRegistrationBean mayaaServlet() {
        ServletRegistrationBean bean = new ServletRegistrationBean();
        bean.addUrlMappings("*.xhtml");
        bean.setServlet(new MayaaServlet());
        return bean;
    }
}

これで実行してみます。そうすると!

スクリーンショット 2015-12-13 17.00.01

おっ、エラーメッセージが変わりましたよ!どうもprefixがきいていないように見えます。では、次のようにしてみたらどうでしょうか?

@Controller
public class HelloController {
    @RequestMapping("/hello")
    public String index(ModelAndView modelAndView) {
        return "WEB-INF/view/helo.xhtml";
    }
}

スクリーンショット 2015-12-13 17.10.30

キタ━━━━(゚∀゚)━━━━!!

"forward:/helo.xhtml" をreturnしてみる。

@Controller
public class HelloController {
    @RequestMapping("/hello")
    public String index(ModelAndView modelAndView) {
        return "forward:/helo.xhtml";
    }
}

そうすると、このエラーに戻ります。

スクリーンショット 2015-12-13 17.00.01

ふむふむ。なんとなく、最後はこれのような気がします。

application.properties

#spring.view.prefix: /WEB-INF/view/
spring.mvc.view.prefix: /WEB-INF/view/
#spring.view.suffix: .xhtml
spring.mvc.view.suffix: .xhtml
@Controller
public class HelloController {
    @RequestMapping("/hello")
    public String index(ModelAndView modelAndView) {
        return "helo";
    }
}

スクリーンショット 2015-12-13 17.10.30

キタ━━━━(゚∀゚)━━━━!!

このままではまだMayaaとSpringコンテナそのものの連携という状態ではありませんが、Mayaaテンプレートにforwardしてしまえば、リクエストアトリビュートに入れるなりなんなりして、最低限MVCはできそうです。

きちんとやる場合は、ScriptEnvironmentあたりをカスタマイズして、きちんとDIしてあげる感じになるのかなあ。

まとめ

ということで、今回は ttyさんの予想がビンゴでした!

MayaaとSpring Bootは連携できるということで、めでたしめでたし。