[[設計手法]]
大規模なWebサイトを作るとき、モックページを仕様書にする方法が紹介されていました。
- まずHTML画面を作ってしまう。＝仕様書
- 画面とプログラムが1対1対応するように機能を実装する。＝開発
フレームワークを使って、実装も早くできるようにすればOKと。
#contents
* 「HTML画面をそのまま仕様書に」，5カ月で1000画面を構築した就職サイトPuffの高速開発手法 [#u96ad116]
http://itpro.nikkeibp.co.jp/article/COLUMN/20070214/261859/
2007/02/15 高橋 信頼＝ITpro
Webシステムを開発する際にはほとんどの場合，ユーザーとの打ち合わせのためにHTMLによるモックアップを作る。「このHTMLがそのまま仕様書になれば」と思ったことはないだろうか。就職情報サイトPuffの再構築プロジェクトでは，まさにモックアップをそのまま仕様書した。「十数人の開発者で，5カ月で1000画面のシステムを開発する」必要に迫られたからだ。
** HTMLに仕様とメモを埋め込み，CSSで切り替え [#u780cc1a]
「この未体験のスピードを実現するには，無駄なものを極力排除して生産性を極限まで上げる必要があった」---ティーアンドエフカンパニー CTO 出羽健一氏は振り返る。
Puffは新卒や転職希望者向けの就職情報サイトである。「顔見世請負人」と呼ばれるPuffの担当者による企業紹介やイベントなど「顔の見える，アナログなサービス」（パフ 代表取締役社長 釘崎清秀氏）が特長だ。
しかし，アットホームな雰囲気を漂わせていても，システムの機能は「最大手就職サイトのリクナビと同じ。さらに転職者向けのリクナビNEXTの機能も兼ね備えている。社員を募集するクライアント企業向けのASPサービスの機能もある」（釘崎氏）という大規模なものだ。
そのPuffで2006年5月，旧システムの性能や柔軟性の問題から，システムの再開発プロジェクトが持ち上がった。就職サイトであるため，学生が就職のための情報収集活動を始める時期を考慮すれば，遅くとも11月には新システムが稼動していなくてはならない。
そのために考案した工夫の一つが，&color(red){HTMLを仕様書にする};ことだ。&color(red){HTMLファイルからコード生成するために名前規約を工夫したHTMLファイルである。};そのHTMLテンプレートに「『仕様』と『開発者向けメモ』を直に書いてしまう」（開発を担当したティーアンドエフカンパニー 最高技術責任者 出羽健一氏）。そしてこの仕様とメモは，スタイルシート（CSS)でアプリケーション全体の表示・非表示を一気に切り替えられるようになっている。
それだけでなく，&color(red){このHTMLはソースコードジェネレータでサーバー・プログラムを生成するための入力要素にもなっている。};ティーアンドエフカンパニーが作成したジェネレータが，名前規約を元にDTOと呼ばれるデータモジュールやPageと呼ばれるプログラムの雛形を生成する仕組みである。そしてこれがそのまま本番のS2JSFテンプレートになる。
** Seasar2の設計指針Goyaをベースに仕様と設計のズレを防止 [#db6c4c2e]
ただし，この方式がうまく機能した理由は「&color(red){1つのHTMLファイル（もしくはJSPファイル）とサーバー上のプログラム（Action）が1対1で対応するようなアーキテクチャ};を採ったことが大きい」と出羽氏は言う。
「例えばStrutsの場合，データ入力画面と出力画面の間にサーバー上のプログラム（Action）が挟まれる。業務仕様を画面単位で，プログラム設計をAction単位で行っていると両者の間にズレが生じる」（出羽氏）。画面とプログラムが1対1対応するようになっていれば，業務仕様とプログラム設計のズレは発生しない。HTML名と画面遷移図からクラス設計は機械的に決まるというメリットもある。
Puffの新システムでは，オープンソースのJ2EE（Java2 Enterprise Edition）フレームワークであるSeasar2と，そのJSF（JavaSever Faces）実装であるS2JSFを採用した。それにより，画面とプログラムの1対1対応が可能になった。というより，このアーキテクチャはSeasar2の作者であるひがやすを氏とSeasarファウンデーションの元理事である羽生章洋氏による&color(red){設計指針「Goya」をベースにした};ものだ。
データベースへアクセスするためのプログラム生成するためのツールとして，Seasar2の関連オープンソース・ソフトウエアであるS2Daoを使用したことも生産性向上に寄与したという。データベースもオープンソースのPostgreSQLである。「Sesasr2でなければこのような大規模システムを短期間で構築することはできなかったかもしれない」と出羽氏は言う。出羽氏自身，Sesear2自体の開発に参加しコミッターを務めているほか，金沢工業大学大学院で客員准教授としてSesearに関する講義を行っている。
実はティーアンドエフカンパニーでは，実装工程はその多くを，出羽氏らの母校である会津大学の学生を活用している。実装担当は決して業務システム開発の経験が多くない学生が担ったにもかかわらず「ティーアンドエフカンパニーの生産性は，通常のSI企業の数倍だった」（プロジェクト・マネージャを務めたパフ取締役兼プロシンクワーク代表取締役社長 大場京子氏）。
** ユーザー側で1000画面の仕様作成とテスト [#v1eedc62]
もちろん，開発だけでシステムは作れない。プロジェクトが成功した裏には，ユーザー側の，インテグレータ側以上にすさまじい生産性の高さがあった。
ユーザー側のスタッフは約4名だった。この人数で要求定義をユーザーが書き，1000画面におよぶ仕様のチェックと検収テストをこなさければならない。「仕様も70％でいいと割り切る。行き違いがあっても誰も責めない」（パフ 事業サポートグループ グループマネージャー 保坂光江氏）という方針で次から次へと仕様を確定し，開発が進められるようにした。
70％のツケはテストで取り戻す。「9月10月は怒涛のテスト」で，1日数十画面をテストし，問題をあぶりだしていった。テスト工程でもちょっとした工夫があった。バグが見つかると，スクリーンショットを取って開発メンバーに送付した。「バグは再現が難しいので，スクリーンショットは非常に助かった」（ティーアンドエフカンパニー西岡祐弥氏）。
テスト工程では，スタッフ全員へのメールマガジンにテストの進捗や見つかったバグ修正の状況がレポートされたが，「テス子の部屋」というコーナー名で大場氏によるスタッフへの励ましの言葉が添えられ，張り詰めた空気を和らげた。
** システム切り替えでのトラブルを綿密な事前計画が救う [#w818ade7]
ハイライトは旧システムから新システムへの切り替えである。4日間システムを停止して，データの移行と再立ち上げを行う。データ移行のため数百本のプログラムが作られた。移行スケジュールが，休憩時間まで含めて綿密に立てられた。それをもとに，事前にリハーサルも行った。切り替え本番では，ティーアンドエフカンパニーの東京と会津のオフィスをTV会議システムで接続，連日最後の進捗確認を行った。
それでも不測の事態は起きる。テストしたはずの移行プログラムでエラーが発生するという事件があった。さらにはルーターのハードウエア故障も発生，交換を余儀なくされた。
しかし，24時間をバッファとして確保してあったことと，トラブルに備えてスケジュールを即座に組み直せるようモジュール化してあったことから，当初の予定どおり10月16日，システムは無事稼働した。カットオーバー時は「自然に拍手が沸き起こった。東京では互いに手を握り，会津では開発チーム・リーダーの胴上げまで起きた」（ティーアンドエフカンパニー 代表取締役社長 佐藤裕司氏）。
システム構築プロジェクトの取材をしていて常に感じることは，アーキテクチャやツール，プロセスという“ハード”と，モチベーションやチームワークといった“ソフト”の両輪がかみ合うことが成功のために欠かせないということだ。今回のプロジェクトにもそれは当てはまる。もっともこれは，システム開発に限らず，あらゆる仕事に言えることかもしれない。
** リンク [#e7626f77]
◆ティーアンドエフカンパニー最高技術責任者 出羽健一氏によるSeasar Conference 2006 Autumn発表資料
http://event.seasarfoundation.org/sc2006autumn/Session#tgfdd55c70
CENTER:&ref(goya13.jpg);
CENTER:&ref(goya17.jpg);
就職情報サイトPuff
http://www.puff.co.jp/
*** 設計指針「Goya」 [#zd4460e8]
http://d.hatena.ne.jp/higayasuo/20050705/1120562238
http://d.hatena.ne.jp/szk-takanori/20060228/1141140356
http://d.hatena.ne.jp/szk-takanori/20070211#1171202956
http://d.hatena.ne.jp/szk-takanori/20070211#1171206706
http://d.hatena.ne.jp/szk-takanori/20070218#1171812795
http://d.hatena.ne.jp/szk-takanori/20070304#1173022251
http://d.hatena.ne.jp/szk-takanori/20070310/1173540624
http://d.hatena.ne.jp/szk-takanori/20070408/1176045197
http://d.hatena.ne.jp/szk-takanori/20070413/1176478082
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
