Camino使用記

最終更新日:2003/07/04

■目次

■Caminoについて

サイトURL http://www.scioworks.com
機能/特徴
  • ストーリーボード作成機能
  • struts-config.xml自動生成
  • Action, ActionFormBeanの自動生成
  • HTML -> JSP(Struts Custom Tag)変換
  • JSPプレビュー
  • JSP, struts-configエディット機能
  • struts1.0, 1.1対応
価格 有償(1ユーザ $250-)
備考 評価版有り(有効期間15日,ユーザ登録要)
日本での販売 テンアートニ

■機能/特徴

ストーリーボード作成機能

Caminoの一番の特徴は画面遷移をUMLのコラボレーション図のように表した「ストーリーボード」によるビジュアルモデリング。このモデルを元に、struts-config.xmlやAction, ActionFormBeanを自動生成できる。

ストーリーボードとは、画面(JSP)とAction間の遷移を表した図である(図 2-1)。図中の黄色い□は画面(JSP)であり、青い□はActionを表している。左上のウィンドウからJSPやActionを右のウィンドウへドラッグ&ドロップし、それらを結びつけて画面遷移の流れを作成する。
□をドラッグすると、それに連動して矢印も動く(TCC, Rose, Visioと同じ)。また、TCCのようにオートレイアウト機能があり、スタートページを指定して自動レイアウトできる(スタートページは左上に配置される。ただし見易さのためには自分でレイアウトしたほうが良い。)。

struts-config.xml自動生成

struts-config.xmlはストーリーボードと連動しており、図への編集がそのままstruts-config.xmlへ反映される。そのため、ユーザはstruts-config.xmlについて特に気にする必要はなく、画面遷移の流れの作成に集中できる。
ただし、struts-config.xmlの要素については、一通り把握しておく必要があると感じた。要素を理解していないとCaminoの設定項目がstruts-config.xmlのどこへ反映されるかわからないことと、単純に設定項目の意味がわからないため。

Action, ActionFormBeanの自動生成

Actionへのパス(ex. /login)とクラス名(ex. foo.bar.LoginAction)を与えると、Actionクラスを継承したスケルトンクラスが自動生成される(図 3-18)。
ActionFormBeanは画面から送信されるパラメータを格納するためのフィールドと、そのGetter/Setterが必要になる。このフィールド及びGetter/SetterをJSPから自動生成できる。例えばJSPで以下のフォームが定義されている場合、

<html:form method="post" action="/login">
<html:text property="userID"/>
<html:text property="password"/>
<html:submit value="ログオン" />
</html:form>

以下のソースが自動生成される。

package usedcar.beans;

import javax.servlet.http.HttpServletRequest;
import org.apache.struts.action.ActionError;
import org.apache.struts.action.ActionErrors;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.validator.ValidatorForm;

public class LoginForm extends ActionForm {

  private String userID;
  private String password;

  public String getUserID() {
    return userID;
  }

  public void setUserID(String userID) {
    this.userID = userID;
  }

  public String getPassword() {
    return password;
  }

  public void setPassword(String password) {
    this.password = password;
  }

  public ActionErrors validate(ActionMapping actionMapping, HttpServletRequest resquest) {
    /** @todo: Override this org.apache.struts.action.ActionForm method*/
    return super.validate(actionMapping,  resquest);
  }

  public void reset(ActionMapping actionMapping, HttpServletRequest request) {
    /** @todo: Override this org.apache.struts.action.ActionForm method*/
    super.reset(actionMapping,  request);
  }

  public String toString() {
    StringBuffer buf = new StringBuffer();
        buf.append("userID=").append(userID).append(" ");
        buf.append("password=").append(password).append(" ");
        return buf.toString();
  }
}

HTML -> JSP(Struts Custom Tag)変換

Caminoのさまざまな機能を使うためには、画面はstrutsのカスタムタグを使ったJSPでなければならない。そのために、HTML→JSP変換機能があり、複数のJSPファイルを選択し、一括変換できる。JSP変換では以下のように、変換方法のカスタマイズが可能。


JSPプレビュー

ストーリーボード上のJSPアイコンや、左上ウィンドウのJSPを選択し、右クリックから「Preview」を選択すると、ブラウザが起動され、以下のようにJSPをHTMLへ翻訳した画面が表示される

起動されるブラウザは、Caminoで設定できる。デフォルトでは、システムのデフォルトブラウザが起動される。
ブラウザがIEまたはIE互換ブラウザであれば、表示されたブラウザ上でダブルクリックすると、ポイントした個所に対応したJSPソースがCaminoで色反転して表示される。

JSP, struts-configエディット機能

これらファイルをCaminoから編集可能。ちょっとした手直しをCaminoから行うことができるのは便利。
ただ、基本的にはCaminoは雛型作成をメインの機能と位置付け、その後の編集は手になじんだエディッタで行ったほうがよいだろう。


■使用方法

以下、中古車販売サイトの構築を例にCaminoの使用方法を順に示す。

Caminoの起動

起動すると以下の画面が表示される。

プロジェクトの作成

上記画面から「File」→「New Project...」を選択して、プロジェクトを生成する。
下の画面では、プロジェクト名とベースとなるディレクトリを入力する。

次に表示される画面ではweb.xmlのパスを設定できるが、このファイルを予め作成する必要はない(WEB-INFディレクトリも作成する必要はない)。

次に表示される画面ではActionServletの初期パラメータとサブアプリケーションの設定を行う。尚、初期パラメータは後から設定することもできるため、ここで必ずしも設定する必要はない。

ただし、サブアプリだけは一つ以上作成する必要がある。上の画面の「Add SubApp」ボタンを押下して表示される画面(以下)でサブアプリを設定する

最後にTaglibの設定を行い、Finishボタン押下でプロジェクトの作成が完了する。

尚、この時点ではstruts-config.xmlが生成されていない。この後、Caminoのメインウィンドウで「File」→「Save Project」を実行すると、struts-config.xmlやsrcフォルダ等が生成される。これでプロジェクトの生成が完了する。

ストーリーボードペイン作成

次に、ストーリーボードを作成する。Caminoのメイン画面の<Default Sub-app>アイコンを右クリックし、「Load JSPs and Open Storyboard」を選択する。すると、ストーリーボード作成ペインが生成される。

登場する画面の整理

ストーリーボードを作成する前に、以下のように登場する画面と画面間の遷移を整理する(画面上の遷移の番号に意味はありません。Roseで作成した図からこの番号を消せない?)。

各画面の名称とHTMLファイル名との対応は次のとおり。

No 画面名称 ファイル名
1 トップ画面 top.html
2 ユーザ登録画面 regist.html
3 登録完了画面 regist_ok.html
4 登録失敗画面 regist_ng.html
5 ログイン失敗画面 login_error.html
6 検索メイン画面 search.html
7 検索失敗画面 search_error.html
8 検索結果一覧画面 search_result.html
9 詳細画面 search_detail.html
10 詳細取得失敗画面 search_detail_error.html
11 タイムアウト画面 timeout.html

HTMLの生成

次に画面を生成する。Caminoがストーリーボード作成前に画面を必要とするのは、HTML FORMやリンク等からActionFormBeanの雛型を自動生成したり、Actionとのリンクを作成するためである。そのため、完全な画面は必要でなく、入力フォームやリンクが網羅されていればCaminoへの入力とすることができる。
そのため、最低限のHTMLを作成して、それを(一旦)Caminoへの入力とすることで画面とロジックの並行開発ができる。また、後からHTML FORMを追加することも可能(CaminoのHPでは"XP friendly"といっている)。
ここでは、formのaction属性やaタグのhref属性の値をすべて"xxx"としたHTMLを作成した。実際の遷移先の名前はストーリーボードを作成することによって自動的に決定される。

JSP変換

HTMLを作成したら、上で説明したJSP変換機能により、HTMLをJSPへ変換する(変換するためには、予めHTMLファイルの拡張子をjspに変更する必要がある。この変換も自動でやってくれると便利だと思うが、そのような機能は無い)。


ストーリーボード作成

JSPを揃えたらストーリーボードを作成する。

HTMLリンクの作成

Actionを経由しない、通常のHTMLリンクを作成する。尚、トップ画面のHTMLでは以下のように遷移先を決めていない。

<html:link href="xxx">新規登録</html:link>

まず、ストーリーボードに2つのJSPをドラッグ&ドロップする。

次に/top.jspから/regist.jspへリンクを張る。

すると、以下のダイアログが表示される。静的なリンクであるため、Pageを選択し、OKを押下する。

すると、以下のように"xxx"としていた遷移先に"/regist.jsp"という値が挿入される。

<html:link page="/regist.jsp">新規登録</html:link>

Actionへの遷移

画面からActionへの遷移を行うために、まずActionを定義する必要がある。
Camino左ウィンドウの「Struts Config」→「Action Mappings」を右クリックし、「Add Action」を選択する。

表示されたダイアログでactionのパス、Actionクラスの型を入力し、OK押下でActionのアイコンが左ウィンドウに生成される。それをストーリーボードにドラッグ&ドロップし、先と同じようにリンクを張る。すると、図 3-14のダイアログが表示される。

ここでFormBeanを生成する。FormBeanの属性は、選択したHTML Formのパラメータを自動的に引き継ぐことができる。
これらの操作によって図 3-15の画面が生成される。

最終的なストーリーボードは図 3-16のようになった(詳細画面から注文を行うが、現時点では注文ユースケースは作成しないため、画面遷移が途切れている)。

コード自動生成

自動生成されたstruts-config.xml及びActionのソースは以下のようになる(ActionFormBeanは前出のため省略)。

<?xml version="1.0" encoding="WINDOWS-31J"?>

<!DOCTYPE struts-config PUBLIC 
          "-//Apache Software Foundation//DTD Struts Configuration 1.1//EN"
          "http://jakarta.apache.org/struts/dtds/struts-config_1_1.dtd">

<struts-config>
    <form-beans>
        <form-bean name="loginForm" type="usedcar.beans.LoginForm"/>
        <form-bean name="registForm" type="usedcar.beans.RegistForm">
            <form-property name="password" type="java.lang.String"/>
            <form-property name="userID" type="java.lang.String"/>
        </form-bean>
        <form-bean name="searchForm" type="usedcar.beans.SearchForm"/>
    </form-beans>
    <global-forwards/>
    <action-mappings>
        <action name="loginForm" path="/login" scope="request"
                type="usedcar.actions.LoginAction" unknown="false"
                validate="false">
            <forward name="error" path="/login_error.jsp" redirect="false"/>
            <forward name="success" path="/search.jsp" redirect="false"/>
        </action>
        <action name="registForm" path="/regist" scope="request"
                type="usedcar.actions.RegistAction" unknown="false"
                validate="false">
            <forward name="error" path="/regist_ng.jsp" redirect="false"/>
            <forward name="success" path="/regist_ok.jsp" redirect="false"/>
        </action>
        <action name="searchForm" path="/search" scope="request"
                type="usedcar.actions.SearchAction" unknown="false"
                validate="false">
            <forward name="error" path="/search_error.jsp" redirect="false"/>
            <forward name="success" path="/search_result.jsp" redirect="false"/>
            <forward name="timeout" path="/timeout.jsp" redirect="false"/>
        </action>
        <action path="/search_detail" scope="request"
                type="usedcar.actions.SearchDetailAction" unknown="false"
                validate="false">
            <forward name="error" path="/search_detail_error.jsp"
                     redirect="false"/>
            <forward name="success" path="/search_detail.jsp" redirect="false"/>
            <forward name="timeout" path="/timeout.jsp" redirect="false"/>
        </action>
    </action-mappings>
</struts-config>


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_error = "error";
  static final private String FORWARD_success = "success";

  //------------------------------------------------------------ Action Methods
  
  public ActionForward perform(ActionMapping mapping, ActionForm form,
      HttpServletRequest request, HttpServletResponse response)
      throws IOException, ServletException {

    /** @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の自動生成やAction, ActionFormBeanの雛型作成ツールは他にもあるが、単純にGUIインタフェースで項目を設定させるだけのものがほとんどであった。画面遷移をグラフィカルに記述でき、かつそこからstruts-config.xmlやAction, ActionFormBeanを生成するツールは、調査を行なった中ではCaminoのみ。
特に便利だと感じたのが、

の2点。ストーリーボードは操作性に大きな不満はない。ドラッグ&ドロップでアイコンを配置して、線を結ぶ作業は直感的に行うことができる。特に画面遷移の流れを後から修正する場合に、手で修正すると元の遷移が残ってしまうことがあるが、そういったミスがなく、手間もかからない。また、今回示した例のように各画面からの遷移先を保留させた形でHTMLを作成し、ストーリーボード作成によって保留した遷移が自動的に決定させるやり方はミスが発生しないため非常によいと感じた。
ActionFormBeanの手コーディングは非常に面倒な作業だが、CaminoではHTMLから自動生成できるため、Bean作成の手間を削減できる。

良い点
  • CaminoにロードされているJSPを外部エディッタなどで編集すると、Caminoがその変更を自動認識して、変更が加わったことが通知される
  • 自動生成するActionクラスの形式(perform() or execute())をstrutsのバージョン1.0 or 1.1 にあわせることができる
改善してほしい点
  • ストーリーボードにコメントを記述できない
  • ストーリーボードに遷移名が表示されないので、どの場合の遷移なのかわかりずらい(成功時の遷移なのか失敗時の遷移なのか等)
  • プレビューで<a>タグによるリンクが有効にならない
  • ストーリーボードを画像ファイルへ出力できない(プリンタへの出力は可能)
  • 操作の「やり直し」ができない

トップへ戻る

Copyright (c) 2003 OKI Software Co., Ltd.