自動描画とインスタントモックアップ

2010年8月20日に書いた「 Webサービスの設計：Webの状態遷移図の描き方」に次の手描きの絵を載せた。

それから1年3ヶ月、次はCatyに描かせた。1秒もかからないで描く。

レイアウトの左右が逆だったりするが、内容的にはまったく同じ。もう少し詳しく描けば次のよう。

これが単なる説明や文書用の絵じゃなくて、動いてしまうってのがミソ。いや、今はインスタントモックアップが出来てないから、即座に動くわけじゃないが、スクリプトとテンプレートを手で書き足せば動く。書き足すのがメンドクサイのでインスタントモックアップってことなのだけどね。

次はソースコード。

module login2a in cara;
type LoginUI     = deferred object;

type AccountInfo = deferred object;
/** ユーザー登録画面の生成 */

port ユーザー登録;
/** ログイン成功時のリダイレクト先 */

port 成功時の処理;
/** 開始状態 */

@[abstract]

state 開始 :: void links {

  - enter --> ログイン.get;

}; 
/** ログイン画面 */

state ログイン画面 :: LoginUI links {

  /* IDとパスワードを入れてサブミット */

  - submit      --> ログイン処理.do;

  - new-account --> ユーザー登録;

};
/** ログイン再試行画面 */

state 再ログイン画面 :: LoginUI links {

  /* IDとパスワードを入れてサブミット */

  - resubmit    --> ログイン処理.do;

  - new-account --> ユーザー登録;

};


/** ログイン画面の生成 */

resource ログイン("/login.html") {

  action get("/GET")

  :: @[in, out] #io void -> LoginUI produces ログイン画面 ;

  

};
/** ログイン処理 */

resource ログイン処理("/do-login.cgi") {

  action do("/POST")

  :: @[in]  #in AccountInfo -> _       relays [ok, ng],

     @[out] #ok _           -> void    redirects 成功時の処理,

     @[out] #ng _           -> LoginUI produces  再ログイン画面 // retry

   ;
};