Ymirを使ってかんたんWebアプリ開発

(1)

Seasar Conference

2008 A t

2008 Autumn

Ymir

Ymirを使ってかんたん

を使ってかんたんWeb

Webアプリ開発

アプリ開発

Ymir

Ymirを使ってかんたん

を使ってかんたんWeb

Webアプリ開発

アプリ開発

Ymirプロジェクトプロジェクトリーダ

（株）アクシステム

（株）アークシステム

横田健彦（

_{a.k.a. Skirnir）}

(2)

自己紹介

• 横田健彦（よこたたけひこ）

– ネット上ではSkirnir（すきーるにる）と名乗っています

– （株）アークシステム所属

• Javaや.NETのWeb系技術者募集中！

– プラグイン機構がウリのCMS「Kvasir/Sora」を開発

• 2006年度上期IPA未踏ソフトウェア創造事業に採択

2006年度上期IPA未踏ソフトウア創造事業に採択

– 北欧神話好き

(3)

今日お話しすること

• Ymirの目指すもの

• Ymirとは

• 新機能

• ロドマップ

• ロードマップ

(4)

(5)

Ymir

Ymirとは

とは

• フィルタ指向のシンプルなWebアプリケーション

フレームワーク

– 読み方は「ゆみる」

• 北欧神話に出てくる巨人。血肉が世界の元となった。

– 公式サイト：http://ymir.sandbox.seasar.org/

• このサイトはKvasir/Soraで作られています

サイ

作れ

ます

– 元々はCMS（Kvasir/Sora）への組み込み用に作っ

たものを

_{Webアプリ開発用に拡張}

たものを

_{Webアプリ開発用に拡張}

– J2SE5以降＋ServletAPI2.4で動作

S

2 4ベス

– Seasar2.4ベース

(6)

特徴

(7)

特徴

• MVCモデルのCの部分を担当

– お勧め構成はYmir+FreyjaのZPT実装+DBFlute

プ

• Freyja…XMLテンプレートエンジン構築F/W。ZPT実装を

持っている。

htt //

ki i

t/

d t/f

j /

– http://www.skirnir.net/product/freyja/

• フィルタ指向

• URLとアクションの対応付けを柔軟に定義可

• 強力な自動生成機構（ymir extension）

• 強力な自動生成機構（ymir-extension）

– Seasar2.4のHOT deploy対応

(8)

特徴

(9)

フィルタ指向

• 画面レンダリングの前に処理を挟み込む

– サーブレットフィルタとして実装

– Transitive Path Strategyに基づくWebアプリケー

ション開発が可能

(10)

特徴

フィルタ指向

(11)

Transitive Path Strategy

• URLとリソースの物理配置を対応付ける戦略

• Webサーバを使って静的リソースを公開する場

(12)

Transitive Path Strategy

Transitive Path Strategy（（22））

http://www.hoe.com/app/product/list.html

http://www hoe com/

www hoe com

http://www.hoe.com/

app

product

www.hoe.com

var

www

product

list.html

app

d

t

www

同じ構造のまま対応

product

list.html

(13)

Transitive Path Strategy

Transitive Path Strategy（（33））

• CGI登場

– コンテンツを動的に生成

→ URLに対応する物理リソースが存在しないケース

(14)

Transitive Path Strategy

Transitive Path Strategy（（44））

http://www.hoe.com/app/product.py/list

http://www hoe com/

www hoe com

path-info

http://www.hoe.com/

app

product py

www.hoe.com

var

www

リソスがない！

product.py

list

app

www

リソースがない！

d

product.py

list

(15)

Transitive Path Strategy

Transitive Path Strategy（（55））

• Javaでよく見る光景

(16)

Transitive Path Strategy

Transitive Path Strategy（（66））

http://www.hoe.com/app/product/list.do

htt //

h

/

d

t

http://www.hoe.com/

app

www.hoe.com

var

http://www.hoe.com/app/css/product.css

app

product

app

var

webapps

list.do

構造が一致しない！

WEB-INF

jsp

css

product.css

css

productList.jsp

(17)

Transitive Path Strategy

Transitive Path Strategy（（77））

• URLとテンプレート（JSP）のパスが一致しない

→ ぱっと見で分かりにくい！

→ クライアントコードもすっきりしない

public ActionForward execute( ) {

public ActionForward execute(…) {

…

return mapping.findForward(“success”); // ←”success”って何？

}

public String execute(…) {

…

return “/WEB-INF/jsp/productList.jsp”; // ←テンプレートにスルーさせたいだけなのに…

}

(18)

Transitive Path Strategy

Transitive Path Strategy（（88））

• JavaでTransitive Path Strategyを使うために

– テンプレートエンジンサーブレットをURLとマッピング

– ロジック呼び出し／レンダリングの前処理はサーブ

レットフィルタで

(19)

Transitive Path Strategy

Transitive Path Strategy（（99））

http://www.hoe.com/app/product/list.html

http://www hoe com/

www hoe com

_{／レンダリングの前処理}

ロジック呼び出し

http://www.hoe.com/

app

product

www.hoe.com

var

webapps

ListPage java

／レンダリングの前処理

チェインの先に

処理を委譲

product

list.html

app

d

t

webapps

ListPage.java

処理を委譲

product

同じ構造

☺

list.html

テンプレートから

HTMLをレンダリング

URLの階層構造

ファイルシステムの階層構造

(20)

Transitive Path Strategy

Transitive Path Strategy（（10

10））

• クライアントコードもすっきり

public void _get() {

…

(21)

特徴

(22)

URL

URLとアクションの対応付け

とアクションの対応付け

• 呼び出すロジックはどう決定するか？

– URLとHTTPメソッドから決定

– URLパターンとPage名の構築式とアクションメソッド

名の構築式の組（パスマッピング）を登録しておく

– リクエストURLにマッチするパスマッピングについて、

Page名の構築式とアクションメソッド名の構築式か

g 名構築

名構築

ら処理対象の

_{Pageクラスと呼び出すべきメソッドを}

決定

(23)

URL

URLとアクションの対応付け（

とアクションの対応付け（

22））

URLパターン：

^/([a-zA-Z_][a-zA-Z_0-9])/([a-zA-Z_][a-zA-Z_0-9])¥.html$

${1} ${2}P

Page名の構築式：

${1}_${2}Page

${method}

アクションメソッド名の構築式：

_${ et od}

リクエストHTTPメソッド/URL：

コンテキストパス以降とマッチング

http://www.hoe.com/app/product/list.html

P

名とアクシンメソド名

マッチ：${1}=

“product”, ${2}=“list”

GET

Page名とアクションメソッド名：

“product_listPage”, “_get” →

Page名→FQCN変換は

S

2による

com.hoe.web.product.ListPage#_get()

Seasar2による

(24)

特徴

(25)

動作のまとめ

/product/list.html

URL：^/(…)/(…)¥.html$

Page名：${1}_${2}Page

①

URLがマッチ

するかチェック

Webブラウザ

アクション名：_${method}

パスマッピング

②マッチした！

② ッ

コンポーネント名：product_listPage

メソッド名：_get()

Seasar2

product_listPage→

com.hoe.web

product ListPage

③

product_listPage

コンポーネント

を取り出し、

_{.product.ListPage}

④

ListPage#_get()

を呼び出す

テンプレート

エンジン

⑤サーブレット（

テンプレートエンジン）

レスポンス

_ンジン

（ex. Freyja）

テンプレートエンジン）

(26)

特徴

(27)

自動生成機能

• リクエスト駆動

– アプリケーションを実際に動作させる中でJavaコード

を生成

– 生成に関してWebブラウザ上で指示

• 自動生成できない部分はEclipse上で開発

HOT deploy機能によって自動生成フェーズと手動

– HOT deploy機能によって自動生成フェーズと手動

開発フェーズをシームレスに結合

(28)

開発の流れ

(29)

開発の流れ

• アプリケーションスケルトンをダウンロード

– http://maven.seasar.org/maven2/org/seasar/ymir

/

i

k l t /0 9 6/

i

k l t

0 9 6 i

/ymir-skeleton/0.9.6/ymir-skeleton-0.9.6.zip

• Eclipseへインポート

p

• Tomcatに配備

T

tを起動

• Tomcatを起動

• ブラウザでアクセス

ブラウザでアクセ

– 初期設定画面が表示されるので初期設定を行なう

T

tを再起動（最初だけ）

• Tomcatを再起動（最初だけ）

(30)

初期設定画面

(31)

開発の流れ（

22））

• http://localhost:8080/example/ にアクセス

– URLに対応するPageクラスがないのでPageクラス

生成画面が表示される

– 「/index.html」にリダイレクトするように設定して「設

定」ボタンを押す

(32)

Page

(33)

Page

(34)

開発の流れ（

33））

• http://localhost:8080/example/index html にリ

• http://localhost:8080/example/index.html にリ

ダイレクトされる

プ

– URLに対応するHTMLテンプレートがないので

HTMLテンプレート生成画面が表示される

(35)

HTML

(36)

HTML

(37)

開発の流れ（

44））

• HTMLテンプレートが生成されたことが検出され

る

プ

– HTMLテンプレートからPageクラスを生成するため

の画面が表示される

(38)

Page

(39)

Page

(40)

出力

(41)

開発の流れ（

55））

• Eclipse上でPageクラスを変更

• ブラウザで再度アクセス

(42)

Page

(43)

Page

(44)

出力

(45)

開発の流れ（

66））

• WARファイルの生成

(46)

新機能

(47)

新機能

• 最新バージョン（0 9 6）で実現された主な機能

• 最新バージョン（0.9.6）で実現された主な機能

– クラスタリング対応

– 複数ウィンドウ対応

– アノテーションの別名定義

テシ

別名定義

– プラグイン機能

自動生成機能の強化

– 自動生成機能の強化

• Converterの自動生成機能

自動生成機能の

_G

_{i 対応}

• 自動生成機能のGenerics対応

• その他自動生成機能周りの細かな改善

(48)

新機能

(49)

クラスタリング対応

• セッションレプリケーションが行なわれるクラスタ

リング環境でも動作

• セッションにバインドしたオブジェクトを外部で変

更しても自動的に他ノードに通知

更しても自動的に他

ドに通知

– MapをHttpSession#getAttribute()して書き換えた

後に通知のために

_{HttpSession#setAttribute(Map)}

後に通知のために

_{HttpSession#setAttribute(Map)}

する処理をフレームワークが自動実行

(50)

新機能

(51)

複数ウィンドウ対応

• フレーム使うタイプのアプリケーションや別ウィ

ンドウを開くタイプのアプリケーションに対応

– リクエストパラメータとしてウィンドウのIDを渡すこと

でウィンドウを区別

• それぞれのウィンドウを開く際にウィンドウのIDをつけるよ

うにする必要あり

(52)

新機能

(53)

アノテーションの別名定義

• アノテーションに別名をつけたり束ねたりするこ

とが可能

– エイリアスアノテーション

– コレクションアノテーション

(54)

エイリアスアノテーション

• 単一のアノテーションに別名をつける

@In(scopeClass=RequestParameterScope.class)

@Param

(55)

エイリアスアノテーション（

22））

@Retention(RetentionPolicy.RUNTIME)

@T

t(El

tT

METHOD

)

@Target(ElementType.METHOD)

@Alias

public @interface Param {

I

li () d f lt

@I (

Cl

R

tP

t S

l

)

エイリアスアノテーションであることを宣言する

In z_alias() default @In(scopeClass = RequestParameterScope.class);

String name() default "";

}

エイリアスの内容を書く

(56)

エイリアスアノテーション（

33））

• 可変プロパティも定義可能

@Param(name=“paramName”)

展開

@In(scopeClass=RequestParameterScope.class, name=“paramName”)

(57)

コレクションアノテーション

• 複数のアノテーションを束ねる

@ In(scopeClass=SessionScope.class)

@ In(scopeClass=RequestScope.class)

@SessionOrRequest

(58)

コレクションアノテーション（

22））

@Retention(RetentionPolicy.RUNTIME)

@T

t(El

tT

METHOD)

@Target(ElementType.METHOD)

@Collection

public @interface SessionOrRequest {

In[] value() default

{@In(SessionScope class) @In(RequestScope class);

コレクションアノテーションであることを宣言する

In[] value() default

{@In(SessionScope.class), @In(RequestScope.class);

(59)

新機能

(60)

自動生成機能の強化

• Converterの自動生成機能

– S2Dxoの代わりに利用可能

• リフレクションベースのS2Dxoだとデグレが心配、後で

ソースコードを見ても分かりにくい

…という場合に利用

• 自動生成機能のGenerics対応

– プロパティ型などに型パラメータつき型を指定可能

プ

ティ型などに型

ラ

タき型を指定可能

– List → List<String>

(61)

(62)

ロードマップ

• http://ymir.sandbox.seasar.org/roadmap

p y

g

p

• 0.9.x系

– 0.9.6リリース（2008年9月）

0 9 6で最後以降はメンテナンスリリース

– 0.9.6で最後。以降はメンテナンスリリース

• 1.0.x系

– 廃止予定の機能を廃止など全般的な整理を行なう

– 最初のバージョンのリリースは2008年10月頃を予定

• 1.1.x系（構想レベル）

– 純粋なWebアプリフレームワーク化

純粋な

Webアプリフレムワク化

• 組み込み用途のための機能を取り除く

– DIコンテナを差し替え可能に

(63)

ご清聴

清聴

ありがとうございました

(64)

付録

(65)

(66)

ZPT

• Zope Page Template

• Python（Zope）の世界で生まれたテンプレート

言語

• 独自属性（TAL METAL）でHTMLの書き換え

独自属性（

_{TAL、METAL）でHTMLの書き換え}

指示を記述

(67)

ZPT

ZPTの例

の例

<html>

<body>

<h1

tal:content=“self/title”

>題名</h1>

<h1

tal:content= self/title

>題名</h1>

<ul

tal:condition=“self/messages”

>

<li

tal:repeat=“message self/messages”

<li

tal:repeat= message self/messages

tal:content=“message”

>繰り返しメッセージ</li>

</ul>

</body>

</html>

(68)

ZPT

ZPTの属性

の属性

• tal:attributes…属性を置き換え

tal:attributes

…属性を置き換え

– <img tal:attributes=“alt string:aaa” />

→ <img alt=“

aaa

” />

• tal:content…タグの中身を置き換え

– <span tal:content=“string:aaa”>題名</span>

<span>

aaa

</span>

→ <span>

aaa

</span>

• tal:replace…タグ全体を置き換え

<span tal:replace=“string:aaa”>題名</span>

– <span tal:replace= string:aaa >題名</span>

→

aaa

(69)

ZPT

ZPTの属性（

の属性（

22））

• tal:repeat…繰り返し

tal:repeat

…繰り返し

– <p tal:repeat=“name names” tal:content=“name”>中身

</p>

名前

1 /

名前

2 /

名前

3 /

→<p>

名前

1 </p><p>

名前

2 </p><p>

名前

3 </p>

tal:condition

値が真なら描画

• tal:condition…値が真なら描画

– <p tal:condition=“isError” tal:content=“errorMessage”>エ

ラーメッセージ

_</p>

ラメッセジ

_/p

→<p>

実際のエラーメッセージ

_</p>

• tal:define…変数を定義

– <div tal:define=“c a/b/c”><span

tal:content=“c”></span></div>

→<div><span

>”a/b/c”

の評価結果

</span></div>

(70)

適用事例

(71)

適用事例

• Kvasir/Soraのアプリケーションプラグイン

– 管理ツール、イベント申し込み受付機能、…

• 業務アプリケーション

– 某リソース予約サイト（B2C系、国際化対応あり）

某リソス予約サイト（

_{B2C系、国際化対応あり）}

• 約50画面規模×4アプリ（携帯アプリ含）

(72)

あると便利なツール達

あると便利なツル達

(73)

あると便利なツール達

• 最低限用意したいもの

– サーブレットコンテナ

Webブラウザ

– Webブラウザ

– Eclipse

– Maven2

• あると便利なもの

– ResourceSynchronizer

– WebLauncher

WebLauncher

– m2eclipseプラグイン

Maven2 Additionalプラグイン

– Maven2 Additionalプラグイン

(74)

あると便利なツール達（

22））

• サーブレットコンテナ

• サブレットコンテナ

– 動作確認のために必要

WebLauncher（後述）があれば不要

– WebLauncher（後述）があれば不要

• Webブラウザ

動作確認自動生成

ために必要

– 動作確認・自動生成のために必要

• Eclipseの組み込みブラウザでもできなくはないが…

E li

• Eclipse

– 自動生成＋HOT deployを活用するには必須

(75)

あると便利なツール達（

33））

• ResourceSynchronizer

ResourceSynchronizer

– Eclipseの管轄外で行なわれたリソースの変更に関する通知

を受けて内部情報を同期してくれる

Eclipseプラグイン

http //eclipse seasar org/ pdates/3 3/

• http://eclipse.seasar.org/updates/3.3/

– 自動生成後にEclipseのプロジェクトを手動で同期する必要

がなくなる

• WebLauncher

– Webアプリケーションをサーブレットコンテナに配備して動作

Ymirを使ってかんたんWebアプリ開発

Seasar Conference

Seasar Conference

2008 A t

2008 A t

2008 Autumn

2008 Autumn

Ymir

Ymirを使ってかんたん

を使ってかんたんWeb

Webアプリ開発

アプリ開発

Ymir

Ymirを使ってかんたん

を使ってかんたんWeb

Webアプリ開発

アプリ開発

Ymirプロジェクト プロジェクトリーダ

（株）ア クシステム

（株）アークシステム

横田 健彦（

a.k.a. Skirnir）

自己紹介

自己紹介

• 横田 健彦（よこた たけひこ）

• 横田 健彦（よこた たけひこ）

– ネット上ではSkirnir（すきーるにる）と名乗っています

– （株）アークシステム所属

• Javaや.NETのWeb系技術者募集中！

– プラグイン機構がウリのCMS「Kvasir/Sora」を開発

• 2006年度上期IPA未踏ソフトウェア創造事業に採択

2006年度上期IPA未踏ソフトウ ア創造事業に採択

– 北欧神話好き

今日お話しすること

今日お話しすること

• Ymirの目指すもの

• Ymirの目指すもの

• Ymirとは

• 新機能

• ロ ドマップ

• ロードマップ

Ymir

Ymirとは

とは

• フィルタ指向のシンプルなWebアプリケーション

• フィルタ指向のシンプルなWebアプリケーション

フレームワーク

– 読み方は「ゆみる」

• 北欧神話に出てくる巨人。血肉が世界の元となった。

– 公式サイト：http://ymir.sandbox.seasar.org/

• このサイトはKvasir/Soraで作られています

サイ

作 れ

ます

– 元々はCMS（Kvasir/Sora）への組み込み用に作っ

たものを

Webアプリ開発用に拡張

たものを

Webアプリ開発用に拡張

– J2SE5以降＋ServletAPI2.4で動作

S

2 4ベ ス

– Seasar2.4ベース

特徴

特徴

特徴

特徴

• MVCモデルのCの部分を担当

• MVCモデルのCの部分を担当

– お勧め構成はYmir+FreyjaのZPT実装+DBFlute

プ

• Freyja…XMLテンプレートエンジン構築F/W。ZPT実装を

持っている。

htt //

ki i

t/

d t/f

j /

– http://www.skirnir.net/product/freyja/

• フィルタ指向

Ymirプロジェクトプロジェクトリーダ

（株）アクシステム

横田健彦（

_{a.k.a. Skirnir）}

• 横田健彦（よこたたけひこ）

• 横田健彦（よこたたけひこ）

2006年度上期IPA未踏ソフトウア創造事業に採択

• ロドマップ

作れ

_{Webアプリ開発用に拡張}

_{Webアプリ開発用に拡張}

2 4ベス

リソスがない！