Sunday, December 16, 2012

mixer2とSpringMVCで作るマルチリンガルサイト

こんばんは。この記事は Spring Framework Advent Calendar 2012の??日目です。参加者少なくて途切れてしまってるみたいますが ^^; 遅ればせながら参戦。

さて、11月にJJUG CCC 2012 Fall 日本Javaユーザーグループっていうイベントがありました。twitter4jというライブラリを作っている山本さんの講演で、ライブラリの配布や使い方のマニュアルなどを載せているWebサイトを、日本語、英語両方で作っているという話がありました。 自作のタグライブラリやjspでちょっとしたCMS(コンテンツマネジメントシステム)を自作しているそうです。

それにからんで、twitterでこんなやりとりをさせていただきました。

実際、ドキュメントを日本語と英語の両方で書かなければならない場面は結構あって、mixer2もいちおう英語日本語の両方で最低限の情報を書いています。

mavenに限らず、Java言語の世界では、hogehoge.propertiesには英語、hogehoge_ja.propertiesには日本語で書いておくと、JavaのLocaleという標準的な多言語対応(i18n)が使えるようになりますよ、みたいな実装が普通です。

ところが、案外これが面倒です。mixer2の場合はmavenのsite機能を使っていますが、たとえば英語のページのソース日本語のページのソースを、別々のファイルに書かなければなりません。 結果、日本語には書いてあるけど英語のほうで翻訳漏れ!といったことが起きます。やったことある人ならわかると思いますが、翻訳の場合、同じファイルに英語と日本語を交互に書くようにすると結構便利です。

山本さんもそこを目指して、同じjsp(拡張子はhtmlにしてるみたいですが)に日本語と英語の両方を特殊なカスタムタグで書いているのでしょう。(実際そんなスライドが講演資料にありました)

そこで、mixer2とSpringMVCを使って、同じリソースに英語と日本語を交互に書けるが、結果は英語サイトと、日本語サイトのように別々に表示できる簡易CMSを作ってみました。

サンプルの説明に入る前に先にお詫びです。山本さんが言っていた「カスタムタグもまだ使い続けたい」という要望には下記のサンプルでは対応できていません。html全体をmxier2で出力する方式をとったためです。ただ、mixer2は部分マーシャル機能もありますので、画面の一部をmixer2に作らせて、それ以外を普通のjspとカスタムタグで作る、みたいなことで対応可能でしょう。

さて、サンプルのソースはここです。mixer2-sampleというリポジトリにまとめて入っています。

作業環境はmavenが動けばどんなIDEでもかまいませんが、ここでは「 SpringToolSuiteでSAStrutsとSpringMVCのHelloWorldを作るまで」で紹介したSTSを想定しています。

先日の「nabedge blog: mixer2でJSPレスなSpringMVCアプリケーションを作ってみた」と同じ方法でmixer2-multilingual-websiteプロジェクトをIDE上に持ちこんでください。そのままTomcat等で起動してみましょう。

シャーロックホームズの原著と日本語訳を載せるサイトです。適当にクリックしてみるとわかるとおり、en/index.htmlでは英語が、ja/index.htmlでは日本語が表示されます。ところが、index.htmlファイルはソースツリー上に一つしかありません。ここがポイントです。

index.html(トップページのテンプレート)はこんな感じです。

  

Sherlock Holmes

シャーロック ホームズ

Sherlock Holmes is a fictional detective created by author and physician Sir Arthur Conan Doyle.

シャーロック・ホームズ(Sherlock Holmes)は、アーサー・コナン・ドイルの推理小説 に登場する架空の探偵。

日本語のタグにはlang-jaというclass属性を、英語のタグにはlang-enをあてています。SpringMVCのコントローラクラスがmixer2実行エンジンを通じてこのテンプレートをロードし、URLの先頭が「en」の場合はlang-ja属性を持つタグを全て削除、「ja」の場合はその逆をやって、出力させるという方法です。

全てのhttpリクエストはPageControllerクラスが処理するようにします。 下の @RequestMapping(value = "/{langStr}/**/*.html") によって、この形式に当てはまるurlへのリクエストは全てこのメソッドに集まります。

    @RequestMapping(value = "/{langStr}/**/*.html")
    public ModelAndView show(@PathVariable String langStr,
            HttpServletRequest request) throws TagTypeUnmatchException,
            IOException {

        logger.debug("# request processing...");
        ModelAndView modelAndView = new ModelAndView();

        // set Lang
        Lang lang;
        try {
            lang = Lang.valueOf(langStr.toUpperCase());
        } catch (IllegalArgumentException e) {
            // set "en" if langStr unmatch Lang enum.
            modelAndView.setViewName("redirect:/"
                    + defaultLang.toString().toLowerCase() + "/index.html");
            return modelAndView;
        }
        logger.debug("# lang = " + lang.toString());

        // build template file path from URI
        String path = StringUtils.substringAfter(request.getRequestURI(),
                request.getContextPath() + "/" + lang.toString().toLowerCase());
        logger.debug("# path = " + path);
        String templatePath = "classpath:m2mockup/m2template" + path;
        logger.debug("# templatePath = " + templatePath);

        // load template
        Html html = mixer2Engine.loadHtmlTemplate(ResourceUtils
                .getFile(templatePath));

        // replace side menu (except for index.html)
        if (!templatePath.equals(indexTemplatePath)) {
            Html indexHtml = mixer2Engine.loadHtmlTemplate(ResourceUtils
                    .getFile(indexTemplatePath));
            Div sideBarDiv = indexHtml.getById("sidebar", Div.class);
            html.replaceById("sidebar", sideBarDiv);
        }

        // remove other language tags
        PageHelper.removeOtherLangTags(html, lang);

        // replace anchor to top page
        for (A a : html.getDescendants("topPageAnchor", A.class)) {
            a.setHref(request.getContextPath() + "/");
        }

        // remake lang list at page top
        PageHelper.remakeLangList(html, lang, path);

        // replace static file path
        M2staticHelper.replaceM2staticPath(html);

        modelAndView.setViewName("mixer2view");
        modelAndView.addObject("htmlString", mixer2Engine.saveToString(html));
        return modelAndView;
    }

たとえば、/en/foo/bar.htmlというURLへのリクエストから、まず言語が英語であることを認識します。次にclasspath:m2mockup/m2template/foo/bar.html というテンプレートファイルを探してロードします。 PageHelper.removeOtherLangTags(html, lang); によって、英語以外のタグを全て削除しています。

PageHelperクラスの説明をする前に、Langというenum型クラスについて説明します。

public enum Lang {
    EN("English")
    ,JA("日本語")
    ;

    private String name;

    private Lang(String name){
        this.setName(name);
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

コンストラクタつきのenumクラスです。HashMapよりも使い勝手がいいです。

さて、PageHelperクラスはこんな感じです。

public class PageHelper {

    public static void removeOtherLangTags(Html html, Lang lang) {
        for (Lang l : Lang.values()) {
            if (l.equals(lang)) {
                continue;
            }
            String target = "lang-" + l.toString().toLowerCase();
            html.removeDescendants(target);
        }
    }

html.removeDescendants(target); がポイントです。要するに、指定されたLang型引数以外の言語がclass属性で指定されているタグを、削除しています。要するに en/foo/bar.html であればLang型変数に英語が指定され、その情報をもとにhtml.removeDescendants("lang-ja") しているわけです。こうすることで、表示したい言語以外の言語で書かれたhtmlタグを全て削除しています。

最後にSpringMVCでのLocaleの使い方の話。このサンプルアプリでは、http://.../[contextPath]/ にアクセスすると、そのブラウザのlocaleにあわせて自動的に /en/index.html または /ja/index.html にリダイレクトされるようになっています。やり方は簡単です。

    @RequestMapping(value = "/")
    public String top(Locale locale) {
        Lang lang = defaultLang;
        try {
            lang = Lang.valueOf(locale.getLanguage().toUpperCase());
        } catch (IllegalArgumentException e) {
            return "redirect:/" + defaultLang.toString().toLowerCase()
                    + "/index.html";
        }
        String redirect = "redirect:/" + lang.toString().toLowerCase()
                + "/index.html";
        logger.debug("# " + redirect);
        return redirect;
    }

@RequestMapping(value = "/") というアノテーションがついているメソッドが http://.../[contextPath]/ へのアクセスを処理します。SpringMVCの便利なところは、この処理メソッドの引数にいろいろなものを指定できるところです。 jaav.util.Locale型引数をあてればそこにはブラウザからのリクエストに含まれるロケール情報が自動的にはいります。あとはその言語情報をこっちのLang型変数にあてるだけです。

いかがでしたでしょうか。mixer2はhtml専用のテンプレートエンジンにすぎませんが、他のフレームワークと組み合わせることで結構便利に使えます。それではHappy hacking !

Wednesday, December 5, 2012

mixer2でJSPレスなSpringMVCアプリケーションを作ってみた (Java Advent Calendar 2012)

このエントリはJava Advent Calendar 2012の5日目です。 ちなみに昨日のエントリはJavaEE Advent Calendar 2012の4日めで、こっちはEEのつかないほうのjavaです。しかも両方ともJavaかJavaEEかはどっちでもいい内容です。Adventカレンダの募集にサクサク応募してたら、うっかり連チャンになってしまってこういうややこしいことになってしまいました。w

しかもmixer2を使ったサンプルアプリケーションを、昨日のエントリではSAStrutsで、今日のエントリではSpringMVCで作るという二番煎じ一網打尽っぷり。 でも、簡単なサンプルとはいえまったく同じWebアプリを二つの代表的MVCフレームワークで作ってみると、いろいろな違いだったり共通点だったりが見えてきてなかなか面白いですよ。


目次
  1. mixer2とは?
  2. 環境の準備と、Fruit Shopアプリケーション(SpringMVC版)の起動
  3. まずテンプレートファイルを見てみよう
  4. item.htmlとItemControllerクラス
  5. 静的リソースを出力するSpringMVCの設定はたった1行


1. mixer2とは?

mixer2はJavaアプリケーション用テンプレートエンジンです。たとえばApache VelocityFreeMarkerMayaaといったソフトと同じジャンルです。

mixer2の最大の特徴は、テンプレートを100%pureなXHTMLで書けることです。

...そろそろ昨日のSAStruts編のコピペですませようとしているのがバレそうなので、mixer2の解説については昨日のエントリ本家サイトのほうをご覧ください

2. 環境の準備と、Fruit Shopアプリケーション(SpringMVC版)の起動

昨日のエントリと全く同じです。最終的にインポートするプロジェクトをmixer2-fruitshop-sastrutsではなくてmixer2-fruitshop-springmvcのほうをインポートしてください。

3. まずテンプレートファイルをみてみよう

テンプレートファイルが src/main/resources/m2mockup/m2templates にあります。 昨日のエントリではブラウザで開いてモックアップとしての使用感を体験してもらいました。そこで今日は、item.htmlをHTMLエディタで開いてみてください。

    

item name

item description here. item description here. item description here. item description here. item description here. item description here. item description here. item description here. item description here.
price amount
$99.99

<h1 id="itemName">item name</h1> や、 <span id="itemPrice">99.99</span> といった感じで、本来ならデータベース上の商品情報を埋め込むのであろう部分にダミーの値が埋め込まれています。と同時に、それらがid属性つきのH1タグやspanタグで明示的に指定されていることに注目してください。mixer2は、こうしたタグの種類やid属性をたどって値を差し替えてゆきます。(id属性じゃなくてclass属性でも置換可能)

続いてItemControllerクラスを見てみましょう。

    @RequestMapping(value = "/item/{itemId}", method = RequestMethod.GET)
    public ModelAndView showItem(@PathVariable long itemId) throws IOException, TagTypeUnmatchException {

        // load html template
        File file = ResourceUtils.getFile(mainTemplate);
        Html html = mixer2Engine.loadHtmlTemplate(file)

        // embed item box
        ItemHelper.replaceItemBox(html, itemService.getItem(itemId));

        // (途中を省略します

        ModelAndView modelAndView = new ModelAndView("mixer2view", "htmlString", mixer2Engine
                .saveToString(html));
        return modelAndView;        
    }

SpringMVCにもSAStrutsと同様に、http://.../item/999 の999の部分を自動的に変数(itemId)に割り当ててくれる、PathVariableアノテーションがあるのでそれを使っています。便利ですね。

mixer2Engine.loadHtmlTemplate(file) でテンプレートファイルを読み込んで、htmlタグの文字列をHtml型のオブジェクトに変換しています。 別につくっておいたヘルパークラスの力を借りてそのhtmlオブジェクトの内部を商品情報で差し替えて、 最後にModelAndViewクラス内にhtmlStringという文字列で格納しておきます。

mixer2view.jspがModelAndViewを受け取って、htmlStringをそのまま出力しているだけです。

ヘルパークラス、例えば ItemHelperでやっていることは、昨日のエントリの同名クラスと全く同じですので、説明は割愛させてください。

4. 静的リソースを出力するSpringMVCの設定はたった1行

さて、このサンプルアプリの静的リソース、例えばロゴ画像やstyle.cssファイルは、どうやって出力しているのでしょうか?

本来、Webアプリケーションでの静的リソースファイルは、Webアプリルート、つまりsrc/main/webapp (WEB-INF除く)に置かないと、クライアントはhttpアクセスできない、という点はSAStrutsもSpringMVCも同じです。昨日のSAStrutsでは専用のアクションクラスを作りましたが、実はSpringMVCには便利な機能があります。DispatherServletの設定ファイルをご覧ください。

  

たったこれだけです。これで、 http://.../[contextPath]/m2static/foo/bar.png へのアクセスに対して、クラスパス配下の m2mockup/m2static/foo/bar.png をDispatcherServletがレスポンスしてくれます。 cache-period="60" は、レスポンスヘッダに Cache-Control: max-age=60 を自動的に追加してくれます。便利ですね。

ただし、テンプレート上に、たとえば <img src="../m2static/img/fruitshop-logo.png" /> と書いてあると、そこは <img src="/[contextPath]/m2static/img/fruitshop-logo.png" /> に書き変える必要があります。M2staticHelperクラスでそれを一括でやっています。

そろそろお気づきの方もいるかもしれません。なぜ、HTMLモックアップを、

  • m2mockup/m2static/ の配下に静的ファイル
  • m2mockup/m2template/ の配下にテンプレートとなる*.htmlファイル
という形で格納しているのか? これは、<mvc:resources mapping="/m2static/**" location="classpath:/m2mockup/m2static/" > という1行の設定で済ませるために、わざと一番上のレベルで静的ファイルかそうでないかを分けているのです。いっしょにしてしまうと、DispatcherServletがうっかりテンプレートのhtmlファイルをそのままレスポンスしてしまう事故がありえます。そうしたことを防ぐことができます。

さて、最後はテストです。mixer2を使ってViewのレベルまでのテストをすることはもちろんなのですが、テストのフィクスチャ(事前条件となる入力値)をexcelファイルに書いておくことができる、DBUnitを使うテストケースもいくつか書いてみました。

それらについて説明を続けたいのですが、すいません、長くなりそうです。っていうかもう二日連続で濃いめのエントリを書いたのでもう限界です。^^;) このへんで、 Java Advent Calendar 2012の5日目を終えたいと思います。 次は@megascusさん!


参考書籍
Spring3入門 ――Javaフレームワーク・より良い設計とアーキテクチャ
長谷川 裕一 大野 渉 土岐 孝平
技術評論社
売り上げランキング: 8064

Tuesday, December 4, 2012

mixer2でJSPレスなSAStrutsアプリケーションを作ってみた (JavaEE Advent Calendar 2012)

サーバーサイドJavaが好きだ!(お約束)

こんにちは。このエントリはJavaEE Advent Calendar 2012の4日目です!

プロローグ

(……きこえますか…きこえますか…mixer2のコミッターさん… デザイナーに作ってもらったhtmlを… jspに書き換える作業の繰り返しが… つらくなってきた… プログラマです… 今… あなたの…心に…直接… 呼びかけています…mixer2の公式サイトにあるSAStrutsのサンプルは… しょぼすぎです… もっとまともな… サンプルアプリを作るのです… サンプルを… とにかくサンプルを…)

そんな啓示があったような気がしたので、とりあえずよくあるECサイトっぽい感じで作ってみました。題してFruit Shop(くだもの屋さん)サンプルアプリケーション です。

もちろんソースコードも公開しています。nabedge/mixer2-sampleです。

このエントリでは、mixer2というテンプレートエンジンとSAStruts(Super Agile Struts)というMVCフレームワークとでWebアプリを作るとしたらどんな勘所があるのか? そして何よりmixer2の便利さを、サンプルアプリを通じて紹介します。

Seasar2+SAStrutsではなく、SpringMVCフレームワークを使ったバージョンもあります。 詳しくはこちら!→mixer2でJSPレスなSpringMVCアプリケーションを作ってみた (Java Advent Calendar 2012)

目次
  1. mixer2について
  2. Fruit Shopアプリケーションのチェックアウト(クローン)と起動
  3. まずテンプレートファイルを見てみよう
  4. item.htmlとItemActionクラス
  5. 静的リソースを出力するM2StaticActionとM2StaticHelper
  6. 参考書籍


1. mixer2について

ではソースコードをgithubからチェックアウトして、、、とその前に、あらためてmixer2についてお話しておきます。

mixer2はJavaアプリケーション用テンプレートエンジンです。たとえばApache VelocityFreeMarkerMayaaといったソフトと同じジャンルです。

mixer2の最大の特徴は、テンプレートを100%pureなXHTMLで書けることです。 それはつまり、Webデザイナーが作ったモックアップHTMLファイルにプログラマが手を加えることはほとんどなしでWebアプリ化できるということです。 実際、サンプルアプリのトップページのテンプレートには<c:out value="${data}" />のようなカスタムタグは一切ありません。ごく一般的なhtmlマークアップだけです。逆にjspファイルはたったの1個しかありません。

その代償として、サーバサイドのJavaコードが少し膨れ上がります。そりゃそうです。JSPファイルに書いていたことを、後述するViewHelperクラスの形で書いているからです。しかし、JSPのカスタムタグやVelocityのVTLやmayaaの特殊XML記法ではなく、普通のJavaコードでMVCのView開発できるということは、普通のJavaの知識だけでいいということです。学習の容易さは段違いです。

カスタムタグとhtmlタグとがゴチャゴチャにスパゲティ化したJSPよりは、普通のJavaコードのほうがメンテナンスもデバッグも容易です。そして従来ではSelenium等を使うしかなかったViewに対する自動テストを、普段いつも使っているJUnitで書けます。このサンプルアプリには、ViewのレベルまでをもJUnitでテストするテストケースも入っています。

なお、jspと違って、mixer2のテンプレートはどこにおいてあってもかまいません。サンプルでは通常のリソースファイルとしてsrc/main/resources配下に置いてありますが、たとえばデータベースのテーブルの中に <html>...</html> という文字列でテンプレートが置いてあっても使えます。機能は同じでも多数のデザインを使い分けたいWebアプリ、たとえばマルチテナント型のECサイトや、ブログサービスサイト等では効果的なテンプレートエンジンです。

2. Fruit Shopアプリケーションのチェックアウト(クローン)と起動

ではそろそろ、サンプルアプリのソースをgithubからcloneして実際に動かしてみましょう。mavenとeclipseの環境を用意してください。maven3を使ってますが、maven2.2.xでも動くと思います。よくわからない方は、この前書いたSpringToolSuiteでSAStrutsとSpringMVCのHelloWorldを作るまでというエントリをごらんの上、PCに開発環境を構築しておいてください。

  1. eclipseのEGitでcloneする方法です。まず Window→Open Perspective→OtherでGitRepositoryエクスプローラを開き、新しいリポジトリのcloneボタンをクリックします。

  2. サンプルアプリのリポジトリURLは https://github.com/nabedge/mixer2-sample.git です。ダイアログボックスのURI欄に入力すればそれで他の欄にも入力されます。

  3. git cloneが完了するとこんな感じで見えるはずです。WorkingDirectory内のmixer2-fruitshop-sastrutsを右クリックして Import Projects してください。

  4. とりあえず Import as General Project(一般プロジェクトとしてインポートする)を選択してください。

  5. 表示をJavaパースペクティブに戻して、インポートしたmixer2-fruitshop-sastrutsプロジェクトを右クリック→Configure→Convert to Maven Projectしてください。これでプロジェクトがmavenプロジェクトとして認識され、ソースがコンパイルされます。

  6. あとはサーバで起動するだけです。

  7. トップページが見えたら起動成功です!

3. まずテンプレートファイルを見てみよう

テンプレートファイルが src/main/resources/m2mockup/m2templates にあります。m2staticは画像やcssなどの静的リソース置き場です。まずはindex.htmlをエディタではなくWebブラウザで開いてみてください。

トップページが見れましたね? 適当にリンクやボタンをクリックしてみてください。画面遷移できますね。ただしこれはただの静的ファイルであり、いわゆるHTMLモックアップと呼ばれるものです。買い物カゴに何を入れても入れたように見えるだけ、決済処理をしてもしたように見えるだけの、紙芝居です。Webアプリケーション開発では、まずワイヤーフレームと呼ばれる紙で画面を検討し、最終的にこうしたHTMLモックアップによる仕様の確認が行われます。

このサンプルアプリでは、紙芝居状態のこのHTMLモックアップをそのままテンプレートとして使います。JSPに書きかえる必要はありません。mixer2エンジンがHTML文字列をHTMLオブジェクトとしてインスタンス化し、すべてのタグはそれぞれの型のJavaオブジェクトに変換することで、MVCで言うViewを普通のjavaコードで処理します。

4. item.htmlとItemActionクラス

いちばん構造が単純な商品詳細画面を使って細かい解説に移りましょう。仕様は次のとおりです。

  • http://.../[contextPath]/item/999 というURLのアクセスを受けて、商品番号999の商品データをデータベースから取り出し、商品名(itemName),商品説明(itemDescription),価格(itemPrice)を画面に表示する。(画像を準備するのが面倒だったので商品画像の差し替えは省略 ^^;)
  • add cartボタンを押したらその商品をカートに追加しカート画面に遷移する。
  • 画面上部のロゴ画像を押したらトップページへ遷移する。
  • 画面左のカテゴリ画面へのリンク、カート画面へのリンクはそれぞれの画面へ遷移する。

SAStrutsでは、/item/ というURLに対するアクセスはItemActionクラスのitem()メソッドに割り当てられます。各メソッドはアクションフォームクラス(ここではItemForm)を経由してリクエストパラメータを受け取ってビジネスロジック(サービスクラス)を処理し、結果をアクションフォームクラスまたはActionクラス上のpublicなプロパティに格納しておきます。ViewたるJSPは、それらを使って画面を形成します。

ItemActionクラスのソースコードです。

public class ItemAction {

    @SuppressWarnings("unused")
    private static Logger logger = Logger.getLogger(ItemAction.class);

    public String htmlString;

    @Resource
    protected Mixer2Engine mixer2Engine;

    @Resource
    protected JdbcManager jdbcManager;

    @Resource
    protected CategoryService categoryService;

    @Resource
    protected ItemService itemService;

    @ActionForm
    @Resource
    protected ItemForm itemForm;

    private String mainTemplate = "m2mockup/m2template/item.html";

itemFormがアクションフォームのインスタンスで、ここではitemId(商品番号)をStringで持ってるだけです。URLパラメータとして受け取ったid値がこのitemIdプロパティに自動的に格納されます。

htmlStringが、最終的にmixer2view.jspに渡すためのプロパティです。文字通り<html>...</html>までの全ての画面情報をhtmlStringにつっこんでitem()メソッドは完了です。

では、テンプレートhtmlファイルをどうやって読み込んで、どうやって中身を差し替え、どうやってhtml文字列に戻してhtmlStringにつっこんでいるのでしょうか? まずはテンプレートの読み込みです。

        // load html template
        File file = ResourceUtil.getResourceAsFile(mainTemplate);
        Html html = mixer2Engine.loadHtmlTemplate(file);

これだけです。Seasar2のResourceUtilはクラスパス内の任意のリソースファイルを取得できます。これで得たテンプレートファイルをmixer2Engineに渡すと<html>から</html>までの文字列がHtml型のオブジェクトに変換されます。

        // get item data from database
        ItemDto item = itemService.getItem(Long
                .valueOf(itemForm.itemId));
        
        // embed item boxes
        ItemHelper.replaceItemBox(html, item);

http://.../contextPath/item/999 の999の部分を SAStrutsのリクエストプロセッサが自動的にitemFormのitemIdプロパティに格納してくれますので、あとはそれをItemServiceクラスのgetItemメソッドに渡すだけです。内部ではjdbcManagerを使ってSQLを発行し、SELECT文で得られた結果をItemDto型のオブジェクトに変換して返してくれます。詳しくはItemServiceクラスのソースを見てください。

さていよいよ、itemオブジェクトの内容をhtmlに埋め込んでいきます。公式サイトのHelloWorldのように、Actionクラスの中に埋め込み操作を直接書いてもかまいません。しかしよほど単純な画面でもない限り、それをやるとActionクラスが肥大化しています。

そこで、ItemHelperというヘルパークラスに切り出してそいつにhtmlとitemの両方を渡し、埋め込み操作をやらせます。

ItemHelperのソースをご覧ください。単純なオブジェクト操作だけのユーティリティ的なクラスです。

        // contet div
        Div itemBox = html.getBody().getById("itemBox", Div.class);

        // item information
        itemBox.getById("itemName", H1.class).getContent().clear();
        itemBox.getById("itemName", H1.class).getContent().add(item.name);

mixer2のHtml型オブジェクトは、内部にBody型、Head型、P型、Div型、Span型など、すべてのHTMLタグにあわせたオブジェクトを内包しています。と同時にそれらを操るユーティリティメソッドがついています。

Div itemBox = html.getBody().getById("itemBox", Div.class);
これはhtmlからbody要素を取り出し、さらにその中からitemBoxというid属性を持つdiv要素(<div id="itemBox">...</div>)を取得しています。JavaScriptで言うgetElementById()メソッドと似た感じだと思ってください。 なお、ここではgetBody()をはさんでいますが、
Div itemBox = html.getById("itemBox", Div.class);
でも結果は同じです。

こうして取得したタグ要素の中の商品名、説明、価格などの情報を、itemService経由でデータベースから取得した商品情報(itemオブジェクト)の値で置換していきます。

        itemBox.getById("itemName", H1.class).getContent().clear();
        itemBox.getById("itemName", H1.class).getContent().add(item.name);

商品名はH1タグ内に埋め込むのですが、読み込んだテンプレートには <h1 id="itemName">item name</h1> と言う形で、item nameというダミーの商品名が既に入っています。そこで、h1タグの中身をいったんすべて消してから、改めて商品名を追加しています。価格や説明もそれぞれspan要素やdiv要素の中身を同じ方法で置換しています。

なお、divやspanなどの要素は中に複数のタグや文字列を持つことが出来る要素です。そうした子要素はgetContent()メソッドによってjava.util.List型で返されますので、clear()で全要素の削除、add()で新要素の追加、となります。

次に、カートに追加するボタンまわりの操作です。

        // addCart form
        String ctx = RequestUtil.getRequest().getContextPath();
        Form addCartForm = itemBox.getById("addCartForm", Form.class);
        addCartForm.setAction(ctx + "/cart/add");

テンプレート上では <form id="addCartForm" action="cart.html"> のようにカート画面へ遷移するだけの紙芝居になっています。それを <form id="addCartForm" action="/コンテキストパス/cart/add"> に置換しています。

htmlタグはさまざまな属性を持ちますが、mixer2ではそれらを操作するメソッドも各タグ型に用意されています。Form型であればgetAction()でaction属性を取得、setAction()でaction属性をセットできます。

次に、カートに入れるときに、商品番号もhiddenで送信する必要があります。デザイン決めの段階では必要ないのでテンプレートには含まれていません。そこで、hiddenのinput要素をformに追加しておく必要があります。

        Input input = new Input();
        input.setType(InputType.HIDDEN);
        input.setName("itemId");
        input.setValue(Long.toString(item.id));
        addCartForm.getContent().add(input);

これで<input type="hidden" name="itemId" value="999">というタグがフォームの最後に追加されます。

最後に、いろいろ操作を加えたhtmlオブジェクトをhtml文字列に戻して、ActionクラスのhtmlStringプロパティに格納します。

        // output
        htmlString = mixer2Engine.saveToString(html);
        return "/mixer2view.jsp";

mixer2veiw.jspではこのhtmlStringをそのまま表示するだけです。

5. 静的リソースを出力するM2StaticActionとM2StaticHelper

ところで、各画面の左上のロゴ画像や、cssファイルは、どうやって出力しましょう?

実は意外に難しい問題です。htmlモックアップは*.htmlだけでなく*.css,*.pngでひとまとめで構成されます。今回はこれをJavaアプリのリソースファイルの一部としてm2mockupというフォルダの配下に置いています。しかし通常のServlet/JSP仕様のアプリでは、静的リソースファイルはWebアプリルートフォルダ、つまり今回で言えばsrc/main/webappの配下(WEB-INF除く)に置かないとクライアントからアクセスできません。

ところが、*.htmlは静的リソースではなくアプリケーションコードが使うテンプレートなので、リソース置き場(つまりsrc/main/resources)に置くほうが都合が良いです。だからといってテンプレートをsrc/main/resources, 画像をsrc/main/webappにそれぞれ分けて格納してしまうと、htmlモックアッップの一括管理が難しくなります。

そこで、画像やcssへのリクエストも専用のActionクラスでレスポンスするようにすれば、やはり全てまとめてリソース(src/main/resources配下)に置くことができます。

まず、htmlモックアップ上で <img src="../../m2static/img/logo.png"/> のようになっている画像のパスを、専用Actionへ誘導するヘルパーを書きます。それがM2StaticHelperです。

        for (Img img : ab.getDescendants(Img.class)) {
            if (img.isSetSrc()) {
                String src = img.getSrc();
                img.setSrc(convertPath(src));
            }
        }

上のコードは、与えられたタグ(ここではAbstractJaxb型にキャストされている)の中を走査して全てのimgタグを抜き取り、そのsrc属性をconvertPath()メソッドにあてて差し替えています。

convertPath()メソッドは何をするのかというと、

    private static String convertPath(String str) {
        String ctx = RequestUtil.getRequest().getContextPath();
        if (!str.startsWith("http") && str.matches(".*/m2static/.*")) {
            str = ctx + "/m2static/?path="
                    + URLUtil.encode(str.split("/m2static", 2)[1], encoding);
        }
        return str;
    }

要するに、 "../../m2static/img/logo.png" のような文字列を、"/コンテキストパス/m2static/?path=%2Fimg%2Flogo.png" に差し替えています。これによって、imgタグやstyleタグなどのsrc属性はM2Actionクラスを経由するURIに誘導されます。

M2StaticActionクラスでは、pathというパラメータで受け取った文字列でm2staticフォルダ配下のリソースファイルを探し、それに適切なContent-Typeヘッダ属性をつけてレスポンスします。

    @Execute(validator = false, urlPattern = "m2static")
    public String outputImage() throws IOException {

        // create static file path
        String path = "m2mockup/m2static/" + m2staticForm.path;
        log.debug("static file path = " + path);

        // set contentType
        HttpServletResponse response = ResponseUtil.getResponse();
        String contentType = MimeTypeUtil.guessContentType(path);
        if (contentType == null
                && "css".equals(ResourceUtil.getExtension(path))) {
            response.setContentType("text/css");
        } else {
            response.setContentType(contentType);
        }

        // set cache-control header
        response.addHeader("Cache-Control", "max-age=60");

        // output image
        InputStream inputStream = ResourceUtil
                .getResourceAsStreamNoException(path);
        OutputStream outputStream = response.getOutputStream();
        byte[] buf = new byte[1024];
        if (inputStream == null) {
            response.sendError(HttpServletResponse.SC_NOT_FOUND,
                    "File Not Found: " + path);
        } else {
            while (inputStream.read(buf) > 0) {
                outputStream.write(buf);
            }
            inputStream.close();
        }

        // need not view
        return null;
    }

静的リソースまでをもActionクラスで返すのはちょっと贅沢なので、Cache-Controlヘッダをつけて無駄な再リクエストを減らすようにしてあります。

さて次はいよいよActionクラスのテストケースです。MVCのVIEWをもJUnitでテストしてしまう方法...なんですが、長くなりそうです。テストの話は次の機会にしましょう。 引き続きJavaEE Advent Calendar 2012をお楽しみください。次は@sugarlifeさん!

参考書籍

Seasar 2 徹底入門 SAStruts/S2JDBC 対応
竹添 直樹
翔泳社
売り上げランキング: 15271

Saturday, December 1, 2012

SpringToolSuiteでSAStrutsとSpringMVCのHelloWorldを作るまで

Spring Tool Suite(以下STS)はeclipseをベースにしたIDEです。ライセンス料等はかかりません。

eclipseをベースとしているので見た目も操作感もeclipseそのものですが、ノーマルのeclipseと違ってサーバーサイドJava開発に必要なプラグインやmavenコマンドなどが初めから標準搭載なので、開発環境を手っ取り早く作るにはもってこいです。もちろんEclipseマーケットプレイスなども普通に使えるのでお好みのプラグインを追加することも可能です。

2012年10月に公開されたSTS3.1.0はeclipse3.8ベースのものとeclipse4.2ベースのものの両方が公開されています。両者ともmavenコマンド本体とm2eプラグイン、m2e-wtpプラグイン等が同梱されています。 公式ブログによると、eclipse3.xと4.xとでUIプラットフォームの違いからくるいくつかの問題があったようです。

eclipse3.8ベースのほうのSTSでSpringMVCとSAStrutsのプロジェクトを試作してみたところ、安定して開発ができそうな感じが得られました。今回はその手順を細かめに紹介します。

準備するもの

  • JDK6以上がインストール済みのPCが必要です。JREではなくJDKです。 mavenコマンドがコンパイル作業をすることがあるのでJDKが必須。
  • Tomcatは同梱されていませんのでこれもあらかじめインストールしておいてください。 Apache Tomcat - Apache Tomcat 7 Downloadsからzipをダウンロードして解凍するだけです。ここでは C:\apache-tomcat-7.0.33 に解凍済みだとして解説します。7ではなくてTomcat6でも大丈夫です。

STSのインストールと起動

  1. Tool Suites Download | SpringSource.orgからspring-tool-suite-3.1.0.RELEASE-e3.8-win32.zipをダウンロードします(64bitOSの人はwin64のほうを)
  2. お好みの位置でzipを解凍します。
  3. STSを起動します。解凍したフォルダのspringsource\sts-3.1.0.RELEASE\STS.exeを実行するだけです。緑色のスプラッシュが見慣れないかもしれませんが、起動したアプリをよく見るとそれはeclipseそのものであることがわかると思います。

mavenのWebプロキシ設定

これから作るHelloWorldアプリはmavenプロジェクトとして構成されます。 mavenコマンドはインターネット上のセントラルリポジトリサーバーから必要なjarを自動的にダウンロードしてきますが、このとき、Webプロキシを通過させる必要があるLAN環境の場合には、mavenの設定追加が必要です。

${user.home}/.m2/settings.xml というファイルを作成し、 http://maven.apache.org/settings.html#Proxiesで解説されている形で設定を書いておきます。 ちなみに ${user.home}/.m2/settings.xml というのはWindows7で言えば C:\Users\[OSユーザ名]\.m2\settings.xml にあたります。

もちろん、直接インターネットに出られるマシンの場合にはこの設定は不要です。

パースペクティブの変更

これは必須ではありませんが、この後の説明の画面キャプチャがJavaパースペクティブになっているので、それにあわせておいてください。

Tomcatの登録

STSの(というよりeclipseの)WTPプラグインを使ってeclipse内でTomcatと連携できるようにしておきます。

  1. Window→Preference→Server→RuntimeEnvironmentのダイアログを開きます

  2. Addボタンでサーバ追加用のダイアログが出ますので、ApacheTomcat7を選択してNextをクリックします

  3. あらかじめ展開しておいたTomcatのフォルダを指定して、Finishボタンを押せば完了です。

SpringMVCによるHelloWorld Webアプリの作り方

これで開発環境の準備が整いました。いよいよWebアプリを作ってみましょう。SpringMVCフレームワークを使う場合はプロジェクトの新規作成ウィザードで、SpringMVCテンプレートを選択するだけです。

  1. File→New→SpringTemplateProjectをクリック

  2. SpringMVCプロジェクトをクリック

  3. プロジェクト名とJavaパッケージ名を決めます。ここではmyspringmvc, パッケージはcom.example.myspringmvc としました。

  4. これでHelloWorldプロジェクトの完成です。ここでもしも赤いバツ印が出ていてもあわてる必要はありません。eclipse上で再ビルドすれば直ります。Project→Cleanしてください。(メニュー上のBuild Automaticallyのチェックはオンにしておいてください)

  5. いよいよTomcat上で起動してみましょう。プロジェクトを右クリックしてRun on Serverをクリックします。

  6. まだTomcatサーバがeclipseに無いので作ります。manually define a new serverのラジオボタンをオンにして、Tomcat7を選択し、finishをクリックします。

  7. tomcatが起動し、Hello World画面が表示されます!

SAStrutsによるHelloWorld Webアプリの作り方

私はSpringMVCも好きですが、SeasarプロジェクトのSAStruts(エスエーストラッツ/SuperAgileStruts)も、驚くほど使い勝手が良いので気に入っています。

STS(Spring Tool Suite)は文字通りSpringフレームワークをベースとしたアプリケーションを作るための開発環境ですが、元はeclipseなので、Srping以外であっても何でも開発できます。

STSにはmaven連携プラグインはもちろんmavenコマンド本体も初めから同梱されているのがポイントです。sastruts公式サイトでの説明にあるとおり、mavenコマンドをコマンドラインから実行してプロジェクトを作ってみましょう

  1. Windowsコマンドプロンプトを開きます。まずJAVA_HOME環境変数を設定しておきましょう。
    set JAVA_HOME=C:\jdk1.6.0_33
    
  2. 次に、mavenコマンドでアーキタイプからプロジェクトを新規生成します。 (下の例ではSTSがC:\springsourceの配下に展開されていると仮定しています)
    C:\springsource\apache-maven-3.0.4\bin\mvn.bat archetype:generate ^
     -DarchetypeRepository=https://www.seasar.org/maven/maven2/ ^
     -DarchetypeGroupId=org.seasar.sastruts ^
     -DarchetypeArtifactId=sa-struts-archetype ^
     -DarchetypeVersion=1.0.4-sp9.1 ^
     -DgroupId=com.example ^
     -DartifactId=mysastruts ^
     -Dversion=1.0-SNAPSHOT
    
  3. コマンドプロンプト上にBUILD SUCCESSFUL と表示されれば成功です。 上で指定したartifactIdと同じ「mysastruts」というフォルダにプロジェクトが生成されています。
  4. しかし、実は、sastrutsのアーキタイプには、.settingsフォルダや.tomcatpluginファイルのような、古いeclipseで使用する制御ファイルも含まれています。STSを使う場合にはこれらは必要ありません。 STSにインポートする前に以下のフォルダ/ファイルを消しておいてください。
    • .settingsフォルダ
    • .tomcatPluginファイル
    • .amaterasファイル
  5. こうして出来たプロジェクトをSTS上にインポートします。

  6. Existing Maven Projectを選択し、先ほど作ったmysastrutsフォルダを選択すると、自動的にpom.xmlを読み込んでMavenプロジェクトを認識してくれます。

  7. これでSTSのパッケージエクスプローラ上にmysastrutsプロジェクトが見えるようになっているはずです。 しかし、まだエラー(赤バツ印)が出ているはずです。 実はsastrutsのアーキタイプは非常に古いeclipseに対応するための設定がpom.xml上に書かれていますが、それらはSTSのような最近の開発環境では不要です。そこで、pom.xmlを開いて、<build>タグ内の下記の部分を全てコメントアウトまたは削除してください。
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  8. pom.xmlを変更した場合には、STSのmavenプラグインでUpdateProjectしておきます。

  9. これで準備完了です。上のSpringMVCのときと同じように、mysastrutsを右クリック→Run as→Run on Server でTomcatを選択して起動してください。
  10. SAStrutsのHello World画面が表示されました!

いかがでしたか?Java開発の世界では事前準備が結構大変なのですが、 STSにはサーバーサイドJava開発に必要なツールが全て同梱されていますので、すぐにプログラミングにとりかかれます。 あとからSTSに追加すべきプラグインをしいて挙げるとすれば、我々マルチバイト言語な人間にとっては必須なのはプロパティエディタプラグインくらいなものではないでしょうか。

ところで、もっと高機能なテンプレートを公開している方もいます。詳しくは STSでSpringMVC+SpringDataJPA+HibernateなPre-Configuredテンプレートプロジェクトをクイックスタート! #jsug - BLOG.IK.AMをご覧ください。それではHappy hacking !