メンバページ: (小)

Webアプリケーション開発 by Camino

このページでは、Webアプリケーションフレームワーク『Struts』に対応したビジュアルモデリングツール『Scioworks Camino』（以下Camino）を使ってWebアプリケーションを作成する過程をゆっくり説明していこうと思います。

ショートノートがあります。

- 更新記録 -

1日目	Caminoの紹介
2日目	Caminoのインストール
3日目	前準備
4日目	プロジェクト作成〜JSP変換
5日目	ストーリーボード作成（1）
6日目	ストーリーボード作成（2）
7日目	JSPの編集
8日目	プログラミング
9日目	デプロイ

1日目 --- Caminoの紹介

Caminoって何？

CaminoはStrutsのビジュアル開発支援ツールです。Strutsの開発支援ツールにはさまざまなものがありますが、Caminoの特徴は以下のものだと思います。

ドラッグ＆ドロップ操作で、画面遷移のビジュアルモデリングが可能
struts-config.xmlの自動生成
JSP内のフォームからActionFormBeanの自動生成（フォームのパラメータがそのままActionFormBeanのフィールドにマッピングされる）
ActionクラスやフォームBeanの雛型作成
HTML→StrutsのTaglibを用いたJSPへの変換機能
JSPプレビュー機能
Sub-application, DynaFormBean, Validator, Tilesといった新しい機能への対応

ストーリーボード

Caminoの一番の特徴はストーリーボードによる画面遷移のビジュアルモデリングでしょう。ストーリーボード上でJSPのアイコンとActionのアイコンを配置し、その線を結ぶことで、どのページからどのアクションが呼び出され、その結果どの画面へ遷移するかが一目で把握できます（そしてこの操作をマウスのドラッグ＆ドロップで行なうことができます）。

struts-config.xml自動生成

struts-config.xmlはCaminoによって生成されます。ストーリーボードにActionを加える前に、Actionの定義を行なう必要がありますが（この定義を行なう画面は次回以降で説明します）、そこで生成されたActionやActionFormはstruts-config.xmlに反映されます。また、ストーリーボード上で作成した画面遷移もstruts-config.xmlに反映されます。

基本的にはCaminoのGUI上の操作によってstruts-config.xmlの大部分が作成されます。

といっても、struts-config.xmlについて知る必要がないかと言えばそんなことはありません。CaminoのGUIで設定した項目がstruts-config.xmlのどの部分にマッピングされるのかを知らなければGUIでの操作もスムーズに行かないので、やっぱりstruts-config.xmlについて理解する必要があるということですね。これはきっとどのツールでも同じなんだと思います。

その他

その他にもCaminoはいろいろな機能を持っていますが、これら機能は次回以降、実際にWebアプリケーションを作りながら紹介していくつもりです。

ところでCaminoの開発元はシンガポールのScioworks社ですが、Scioworks社のサイトには日本語マニュアルが用意されています。チュートリアルやリファレンスも日本語で書かれているので英語が苦手な人には非常にありがたいです(^^; 残念ながら日本語にローカライズされたバイナリはないようです。尚、株式会社テンアートニが日本語版を販売しています。

Caminoは商用のツールですが、15日間使用できる評価版がダウンロードできるため、次回以降はこの評価版のインストールから始め、実際にアプリケーションを作っていきます。

2日目 --- Caminoのインストール

インストール

まずはCaminoをダウンロードしましょう。このページからダウンロードできます。

CaminoにはStandard版とProfessional版があります。Professional版はStandard版と比べて、Struts1.1で導入されたTilesへのサポート、ストーリーボード作成機能、ドキュメント生成機能がProfessional版が充実しているようです（詳細な機能比較はここ）。

評価版のダウンロードはどちらもできるので、Professional版をダウンロードします。ダウンロードにはユーザ登録が必要なので、必要事項を記入してダウンロードしてください。動作プラットフォーム毎にバイナリが用意されているので、それぞれの環境に合わせたバイナリをダウンロードして下さい。この原稿執筆時点のCaminoの版数は3.1.1です。尚、以降の解説はWindows版をダウンロードしたことを前提に行ないます。

ユーザ登録が完了すると、ライセンスキーが登録したメールアドレス宛に送信されます。このキーがCamino起動時に要求されます。

ダウンロードが終わって登録完了メールが届いたら、Caminoをインストールしましょう。ダウンロードしたEXEファイルを実行し、画面の指示に従ってインストールします。

インストールが完了したらCaminoを起動しましょう。ここでライセンスキーを聞かれるので、受信したメールからキーをコピーします。以下の画面が表示されたらインストール＆起動は完了です。

次にStrutsをダウンロードします。Strutsのバイナリはここから入手してください。執筆時点の最新版は1.1です（以降、Strutsの版数は1.1を前提として説明します）。ダウンロードしたバイナリを展開し、適当なディレクトリへ置いてください。

開発手順

Caminoを使った開発手順は以下のようになります（Caminoのチュートリアルより抜粋）。

ディレクトリを作成する
遷移の流れを紙などにスケッチする
HTMLエディタなどで画面のスタティックなイメージが記述されたHTMLファイルを作成する
JSP Converter ウィザードを使用して、HTMLタグをStruts taglibに変換する
遷移の流れを記載したスケッチをもとに、アクションを定義し、それらをＣａｍｉｎｏのStoryboard上でＪＳＰとつなげる
Code Generator ウィザードを使用して、 FormBeanとActionクラスのスケルトンを生成する
生成されたクラスにロジックを記述する
アプリケーションをコンパイルし、テストする

この流れから、Caminoでは画面(HTML)をスタートとしていることがわかります。HTMLを元に、JSPへの変換,フォームBeanの雛形作成,Actionの定義等を行ない、ストーリーボード上でそれらを結ぶことにより、struts-config.xmlが作成されるという流れです。

ただ、スタートとするHTMLは最初に最終形を作らなければならないというわけではありません。フォームBeanやActionの生成に必要な情報があればまずはOKです。画面とロジックの並行開発も踏まえて、次回以降アプリケーションを作っていきます。

というわけで2日目は終了です。
次回は上の開発手順の1〜3を説明したいと思います。

3日目 --- 前準備

今日は実際にCaminoを使ってStrutsのコンポーネントを作っていく前に必要な前準備を行います。

サンプルアプリケーション

まずは今回サンプルとして取り上げるアプリケーションの説明をします。サンプルアプリケーションは中古車販売システムとします。中古車を購入したいユーザがログインし、興味のある車を検索し、購入する・・・という簡単なものとします。

以下がユースケース図です。

図ではアクターとして顧客とDBがいますが、実際にはユーザ管理や中古車の登録を行なうシステム管理者がいて、管理者向けの機能も必要になってくるでしょう。ただ、まずは顧客向けの機能だけを対象にします。システム管理者向けの機能は、顧客向け機能の完成後、サブアプリケーションとして別個に作成する方法を紹介する予定です。

ディレクトリ作成

まずは、開発するファイル等を格納するためのディレクトリを作成しましょう。

ディレクトリ構成は以下のようにします。usedcarディレクトリがWebアプリケーションのルートディレクトリになります。usedcarディレクトリの置き場所（以下の設定ではc:/projects)や名称は変更可能です。

C:/projects/
└─usedcar/
    ├─html/
    ├─jsp/
    ├─src/
    └─WEB-INF/
        │  struts-bean.tld
        │  struts-html.tld
        │  struts-logic.tld
        │  struts-nested.tld
        │  struts-template.tld
        │  struts-tiles.tld
        │
        ├─classes/
        └─lib/
                commons-beanutils.jar
                commons-collections.jar
                commons-digester.jar
                commons-fileupload.jar
                commons-lang.jar
                commons-logging.jar
                commons-validator.jar
                jakarta-oro.jar
                struts.jar

Strutsのタグライブラリ(*.tld)やライブラリ(*.jar)はStrutsのインストールディレクトリ下のwebapps/struts-blank.warを次のコマンドで展開してできるフォルダから入手してください。

> jar xvf struts-blank.war

またはstruts-blank.warをサーブレット・コンテナに配置し、サーブレットコンテナのホットデプロイ機能で展開させたディレクトリから取得してもよいです。

画面遷移の作成

次に画面遷移を検討します。今回作成するアプリケーションの画面遷移は以下のようにしました。エラー画面への遷移がありませんが、ログイン成功以降でなんらかの障害が発生した場合に遷移が発生します。図が煩雑になるのでここでは省略しました。

HTMLの作成

画面遷移図ができたので、次はそれぞれの画面をHTMLで作成します。

ここで完璧なHTMLを作成してから次の工程へ進めればよいのですが、MVCでいうところのMやCをV(画面）と並行開発が必要な場合が多いでしょう。Caminoによる開発で何故HTMLを先に作る手順になっているかというと、恐らく以下の2点だと思います。

フォームBeanの自動生成のためにHTMLが必要(HTMLを解析して必要なフィールドを抽出する）
ストーリーボード作成のためにHTMLが必要であるため

上ではHTMLが必要と書きましたが、実際にCaminoへの入力とするのはJSPです。ただ、このJSPはCaminoのHTML→JSPコンバート機能で作成可能ですので、JSPでなくHTMLとしました。

フォームBean自動生成のためには、必要なフィールドが定義してあればよく、ストーリーボード作成のためには、すべてのリンクが網羅されていればよいです。そのため、この2つを満たすだけのHTMLをまず作成します。デザインや画像等の実際のコンテンツはあとから追加／変更することにします。

作成したHTMLはこのようになりました(Zipファイル)。フォームのaction属性やHTMLリンクの遷移先が記述されていない(Webページ作成ツールのデフォルト値）ことに注意して下さい。遷移先はストーリーボード上でJSPとアクションを結ぶことで自動的に埋め込まれるので、省略することができるのです。

次回はいよいよCaminoを使ってStrutsコンポーネントを作っていきます。

4日目 --- プロジェクト作成〜JSP変換

今日からはCaminoを使ってStrutsコンポーネントを作成していきます。

新規プロジェクトの作成

まずはプロジェクトを新規に作る必要があります。Caminoを起動し、メニューから「File」→「New Project」を選択すると、ダイアログが表示されます。プロジェクト名、説明、ルートディレクトリを入力します。今回新規にWebアプリケーションを開発するので、Options内で「Create a new Struts apliationを選択します。

入力したら「Next」ボタンで次に進みます。次はメッセージリソースを設定します。

新規にメッセージリソースを作成する場合は、「Create blank...」にチェックを入れ、メッセージリソース名を入力します。ここで入力した"リソース名"+".properties"というファイルがアプリケーションルートのsrcフォルダ以下に作成されます（srcフォルダは存在していなければ作成されます）。.propertiesを付けなくてよいので注意しましょう。struts-config.xmlには以下のようにここで設定したリソースが追加されます。

<message-resources parameter="MessageResources"/>

Finishボタンを押下すると、生成されるファイル一覧が表示されます。了解ボタンを押下して、プロジェクトの作成は完了です。

ストーリーボード生成

プロジェクト生成が完了したら、最初にストーリーボードを初期化する必要があります。画面左に"Default Sub-appというアイコンが表示されているので、右クリックから"Load JSPs..."を選択すると、以下のような画面が表示されます。これで各種コンポーネントを作成するための準備が整いました。

HTML→JSP変換

3日目でもちらっと言いましたが、CaminoでフォームBeanの自動生成やストーリーボードを作成するためには、HTMLではなく、StrutsのTagilbで記述されたJSPが必要です。そのため、まずHTML→JSPへの変換を行ないます。

その前に（エクスプローラ等で）usedcarフォルダ下に、jspというフォルダを生成し、htmlフォルダ下のすべてのHTMLをjspフォルダへコピーし、ファイルの拡張子をhtmlからjspへ変えます。何故この操作が必要なのかというと、CaminoでHTML→JSPへ変換する際に、拡張子がjspのものしか変換対象としてリストアップしないからです（拡張子変更もCaminoがやってくれるとうれしいのですが、そのような機能はないので、自分で拡張子を変える必要があります）。

以上の操作が終わったら、Caminoのメニューから「Wizard」→「Convert JSPs」を選択します。すると以下のダイアログが表示されます。

JSP変換のオプション設定を行い（ここではデフォルト設定のままとする）、"JSP List..."をクリックして表示される画面で対象JSPを選択し、OKでHTML→JSPへの変換が行なわれます。

以下、変換前のlogin.htmlと変換後のlogin.jspです。

login.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<title></title>
</head>
<body>
<h1>ログイン画面</h1>
<p><a href="http://">新規登録</a></p>
<form>ユーザ名：<input size="20" type="text" name="userID"><br>
パスワード：<input size="20" type="password" name="password"><br>
<input type="submit" name="submit" value="ログイン">
<input type="reset" name="reset" value="リセット">
</form>
</body>
</html>

login.jsp

<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html locale="true">
<head><html:base />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<title></title>
</head>
<body>
<h1>ログイン画面</h1>
<p><html:link>新規登録</html:link></p>
<html:form action="/login">
ユーザ名：<html:text size="20" property="userID"/><br>
パスワード：<html:password size="20" property="password"/><br>
<html:submit property="submit" value="ログイン"/>
<html:reset property="reset" value="リセット"/>
</html:form>
</body>
</html:html>

次回が長くなりそうなので、今日はここまでにします。次回はActionクラス、ストーリーボード、フォームBeanの作成を行ないます。

5日目 --- ストーリーボード作成（1）

今日はCaminoの最大の特徴、ストーリーボードを使って画面遷移を作成していきます。。

画面遷移の作成には、ストーリーボード上に配置するJSPとActionが必要です。JSPは前回作成したので、今回はこのActionを作ることから始めます。

Actionの作成

最初に作るActionはログイン画面から検索画面へ遷移する際に実行されるAction(LoginAction)にします。Camino左上の画面から、「Action Mappings」を右クリックし、「Add Action...」を選択します。

Actionの設定ダイアログが表示され、ここでActionのパスとクラス名を決定します。この時点でもActionに関連付けるフォームBeanを作成することもできますが、後から行なったほうが簡単に作成できるため、ここでは無視します。パスとクラス名を入力したらOKを押下します。

これでActionの定義は完了です。画面左上に作成したActionのアイコンが表示されるのが確認できると思います。また、struts-config.xmlの中身も確認してみましょう。strus-config.xmlは画面左上の"Struts Config"を右クリックして、"View XML Text"を選択すれば見られます（事前に保存が必要です。保存は画面上の保存アイコン押下でOKです。以降の操作でも同様です。）

以下のようにaction-mappingsにログインアクションが追加されました。

  <action-mappings>
    <action path="/login" 
            scope="request" 
            type="usedcar.actions.LoginAction"
            unknown="false" 
            validate="false"/>
  </action-mappings>

尚、「Unknown」チェックボックスは、struts-config.xmlのaction要素のunknown属性の設定を行なう個所です。unknown属性は、アプリケーションのデフォルトとして、他のアクションで処理されないリクエストを処理させるために使います。属性値はtrue or falseで、アプリケーション内でtrueに設定できるのは一つだけです。

inputフィールドも同じくaction要素のinput属性にマッピングされます。input属性では、検証エラー時に制御が戻される入力フォームへのアプリケーション相対パスを表します。画面入力の検証(validation)については別途説明するので、ここでは設定無しにしておきます（input属性はname属性が必須で、この時点ではフォームBeanの定義をしていないので、実際はvalidationの有無に関わらず入力できません）。

parameterフィールドも同じくaction要素のparameter属性にマッピングされ、Actionへ追加情報を与えるために使われます。ここでは設定無しにします。

Rolesフィールドも同じくaction要素のparameter属性にマッピングされ、このActionを呼び出すことのできるセキュリティロール名を設定します。ここでは設定無しにします。

ストーリーボードの作成

次に今作ったActionとそのActionを呼び出すJSPをストーリーボード上に配置し、線で結びます。画面左上からJSPとログインActionのアイコンをドラッグ＆ドロップでストーリーボード上へ配置します。

次にストーリーボード上のlogin.jspアイコンをクリックすると、アイコンの右側に○が表示されます。これを/login.doアイコンへドラッグ＆ドロップします。

すると以下のようなダイアログが表示されます。

「From:/jsp/login.jsp」タグの「Tag element」で、この遷移がlogin.jspに記述された遷移のどれに当たるかを選択します。この例では、HTMLフォームによる遷移ですので、"<html:form> #1"を選択します。

「properties」ボックスの中に、アクションへ渡されるフォームBeanを設定するフィールドがありますが、ここでは無視します。何故かと言うと、CaminoではJSP内のHTMLフォームのプロパティから、フォームBeanのフィールドを自動生成することができるのですが、一旦遷移を作成した後でなければ自動生成ができないからです。そのため、「Tag element」を選択したら、OKボタンを押下します。

これでJSPからActionへの遷移ができました。ここでlogin.jspの<html:form>のaction属性をみて下さい。以下のようになっています。

<html:form action="/login">

Actionへの遷移を作成する前は、

<html:form>

でした。最初にHTMLを作った段階で遷移先を記述しなかったのは、ストーリーボードを作成することによって、Strutsアプリケーションにあわせた遷移をCaminoが挿入してくれるからです。遷移先は決めずにさくさく画面を作成し、それを後からツールが埋め込んでくれるのは、なかなか便利な機能だと思うのですがどうでしょうか。

次に、ログインActionの実行後に遷移する画面、frame.jspを同じようにストーリーボード上に配置し、/login.doからframe.jspへ遷移を作成します。すると以下のようなダイアログが表示されます。

name属性には遷移先を識別するための名称を入力します。遷移方法のデフォルト設定はforwardですが、リダイレクトさせたい場合は、Redirectチェックボックスにチェックを入れます（通常はforwardでよいでしょう）。

OKボタンを押下して、Action→JSPへの遷移が作成されます。

struts-config.xmlには、以下のようにactionのforward先が追加されています。

    <action path="/login" 
            scope="request" 
            type="usedcar.actions.LoginAction"
            unknown="false" 
            validate="false">
      <forward name="success" path="/jsp/frame.jsp" redirect="false"/>
    </action>

まだフォームBeanを定義していないので、name属性がありませんね。最後にActionに関連付けるフォームBeanを作成します。

フォームBeanの作成

先ほど定義したLoginActionに関連付けるフォームBeanを作成します。ストーリーボード上の/login.doアイコンを右クリックし、「Edit...」を選択します（左ウィンドウのlogin.doアクションを右クリックでもOK）。

すると、以下のダイアログが表示されるので、「FormBean」タグを選択し、「New」ボタンを押下します。

すると、以下のような複数のタグを持ったダイアログが表示されます。まずはフォームBeanの名前をNameフィールドへ入力しましょう（struts-config.xmlの<action>要素のname属性値になります）。今回はフォームBeanをDynaActionFormとします。DynaActionFormはStruts1.1から導入されたクラスで、1.0ではフォームBeanのクラスを作られなければなりませんでしたが、このクラスを使えばstruts-config.xmlにフィールドを記述するだけでOKです。ソースファイル数が減る、getter, setterを書かなくて良いといった、開発効率の面でメリットがあります。この画面で「Dynamic」チェックボックスにチェックを入れると、TypeフィールドにDynaActionFormが指定されるので、チェックを入れるだけで良いです。

次に「Form Property」タグを開き、「Auto」ボタンを押下します。すると、loginアクションへの遷移元である、login.jspのhtmlフォームのパラメータがフォームBeanのプロパティとして引き継がれます（下図）。

繰り返しになりますが、このようにフィールドの自動生成を行うためには、JSPからActionへの遷移を確定してからでなければなりません。

フィールドの自動生成を行うと、HTMLフォーム内のすべてのパラメータがプロパティとして抽出されます。例えばsubmitボタンがある場合、それに対するプロパティも生成されます。不要なプロパティは上の画面で削除できるので削除しておきましょう。よければOKボタンを2回押下してダイアログを２つ閉じます。

フォームBean作成後のストーリーボードは以下のようになりました。

struts-config.xmlには、フォームBeanの定義が追加され、loginアクションにはname属性が追加されています。

  <form-beans>
    <form-bean dynamic="true" name="loginForm"
               type="org.apache.struts.action.DynaActionForm">
      <form-property name="password" type="java.lang.String"/>
      <form-property name="userID" type="java.lang.String"/>
    </form-bean>
  </form-beans>

    <action name="loginForm" 
            path="/login" 
            scope="request"
            type="usedcar.actions.LoginAction" 
            unknown="false" 
            validate="false">
      <forward name="success" path="/jsp/frame.jsp" redirect="false"/>
    </action>

ソース自動生成

ここまでで、ログインアクション(LoginAction)とログインフォーム(LoginForm)を定義しました。ただ、まだこれらのソースは生成されていません。ソースの生成のためには、コード生成対象となるサブアプリケーション（今回の例では<Default Sub-app>)をツリーから選択し、メニューから「Wizard」→「Generate Code...」を選択します。

まず自動生成されるソースの格納場所を「Path」フィールドへ設定します。次にフォームBeanを生成します。「FormBean Class List」をクリックすると、生成対象となるフォームBeanを選択するダイアログが表示されます。

さきほど選択したDynaActionFormが選択されていますが、これはStruts出来合いのクラスなのでこれを除外しましょう。対象のフォームを選択して、「Exclude」ボタンを押下して、左側のスペースへ移動させ、「OK」でダイアログを閉じます。

次にアクションを設定します。「Actions」タブを選択します。

「Action Class List」で同じようにコード生成対象を選択します。が、デフォルトでLoginActionが選択されているので、ここでは何もしません。Code Styleの設定もデフォルトのままとします。「OK」をクリックすると、コードが生成されます。生成されたLoginActionクラスのソースです。

package usedcar.actions;

import java.io.*;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionError;
import org.apache.struts.action.ActionErrors;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.action.ActionServlet;
import org.apache.struts.util.MessageResources;

public class LoginAction extends org.apache.struts.action.Action {


  //------------------------------------------------- Local Forwards
  static final private String FORWARD_success = "success";

  //------------------------------------------------- Action Methods

  public ActionForward execute(ActionMapping mapping, ActionForm form,
      HttpServletRequest request, HttpServletResponse response)
      throws Exception {

    /** @todo : Implement logic here */

    // Uncomment the following, and set to appropriate FORWARD_xxx or 
    // GLOBAL_FORWARD_xxx
    // return mapping.findForward(FORWARD_xxx);

    // Remove the following line after uncommenting the above
    throw new UnsupportedOperationException("Unimplemented method");
  }

}

struts-config.xmlに設定したローカルフォワードの名前が定数として宣言されています。また、executeメソッドではデフォルトで例外をスローする実装になっていて、自動生成したクラスが未実装であることがわかるようになっているんでしょうね。

というわけで、JSP→Action→JSPの基本シーケンスがこれでできました。次回は残りの部分で、今回説明しなかった部分を中心に進めていきます。