• BPnet
  • ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
  • PR

  • PR

  • PR

  • PR

  • PR

記者のつぶやき

「HTML画面をそのまま仕様書に」,5カ月で1000画面を構築した就職サイトPuffの高速開発手法

高橋 信頼=ITpro 2007/02/15 ITpro
就職情報サイト「Puff」
就職情報サイト「Puff」
[画像のクリックで拡大表示]
HTMLテンプレートに仕様と開発者向けメモを埋め込む
HTMLテンプレートに仕様と開発者向けメモを埋め込む
[画像のクリックで拡大表示]
上段左からティーアンドエフカンパニー 事業推進統括責任者 情報化戦略コンサルタント 西岡祐弥氏,ティーアンドエフカンパニー 代表取締役社長 佐藤裕司氏,パフ 代表取締役社長 釘崎清秀氏,下段左よりティーアンドエフカンパニー 最高技術責任者 出羽健一氏,パフ 取締役兼株式会社プロシンクワーク代表取締役社長大場京子氏,パフ 事業サポートグループ グループマネージャー 保坂光江氏
上段左からティーアンドエフカンパニー 事業推進統括責任者 情報化戦略コンサルタント 西岡祐弥氏,ティーアンドエフカンパニー 代表取締役社長 佐藤裕司氏,パフ 代表取締役社長 釘崎清秀氏,下段左よりティーアンドエフカンパニー 最高技術責任者 出羽健一氏,パフ 取締役兼株式会社プロシンクワーク代表取締役社長大場京子氏,パフ 事業サポートグループ グループマネージャー 保坂光江氏
[画像のクリックで拡大表示]

 Webシステムを開発する際にはほとんどの場合,ユーザーとの打ち合わせのためにHTMLによるモックアップを作る。「このHTMLがそのまま仕様書になれば」と思ったことはないだろうか。就職情報サイトPuffの再構築プロジェクトでは,まさにモックアップをそのまま仕様書した。「十数人の開発者で,5カ月で1000画面のシステムを開発する」必要に迫られたからだ。

HTMLに仕様とメモを埋め込み,CSSで切り替え

 「この未体験のスピードを実現するには,無駄なものを極力排除して生産性を極限まで上げる必要があった」---ティーアンドエフカンパニー CTO 出羽健一氏は振り返る。

 Puffは新卒や転職希望者向けの就職情報サイトである。「顔見世請負人」と呼ばれるPuffの担当者による企業紹介やイベントなど「顔の見える,アナログなサービス」(パフ 代表取締役社長 釘崎清秀氏)が特長だ。

 しかし,アットホームな雰囲気を漂わせていても,システムの機能は「最大手就職サイトのリクナビと同じ。さらに転職者向けのリクナビNEXTの機能も兼ね備えている。社員を募集するクライアント企業向けのASPサービスの機能もある」(釘崎氏)という大規模なものだ。

 そのPuffで2006年5月,旧システムの性能や柔軟性の問題から,システムの再開発プロジェクトが持ち上がった。就職サイトであるため,学生が就職のための情報収集活動を始める時期を考慮すれば,遅くとも11月には新システムが稼動していなくてはならない。

 そのために考案した工夫の一つが,HTMLを仕様書にすることだ。HTMLファイルからコード生成するために名前規約を工夫したHTMLファイルである。そのHTMLテンプレートに「『仕様』と『開発者向けメモ』を直に書いてしまう」(開発を担当したティーアンドエフカンパニー 最高技術責任者 出羽健一氏)。そしてこの仕様とメモは,スタイルシート(CSS)でアプリケーション全体の表示・非表示を一気に切り替えられるようになっている。

 それだけでなく,このHTMLはソースコードジェネレータでサーバー・プログラムを生成するための入力要素にもなっている。ティーアンドエフカンパニーが作成したジェネレータが,名前規約を元にDTOと呼ばれるデータモジュールやPageと呼ばれるプログラムの雛形を生成する仕組みである。そしてこれがそのまま本番のS2JSFテンプレートになる。

 

Seasar2の設計指針Goyaをベースに仕様と設計のズレを防止

 ただし,この方式がうまく機能した理由は「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ファウンデーションの元理事である羽生章洋氏による設計指針「Goya」をベースにしたものだ。

 データベースへアクセスするためのプログラム生成するためのツールとして,Seasar2の関連オープンソース・ソフトウエアであるS2Daoを使用したことも生産性向上に寄与したという。データベースもオープンソースのPostgreSQLである。「Sesasr2でなければこのような大規模システムを短期間で構築することはできなかったかもしれない」と出羽氏は言う。出羽氏自身,Sesear2自体の開発に参加しコミッターを務めているほか,金沢工業大学大学院で客員准教授としてSesearに関する講義を行っている。

 実はティーアンドエフカンパニーでは,実装工程はその多くを,出羽氏らの母校である会津大学の学生を活用している。実装担当は決して業務システム開発の経験が多くない学生が担ったにもかかわらず「ティーアンドエフカンパニーの生産性は,通常のSI企業の数倍だった」(プロジェクト・マネージャを務めたパフ取締役兼プロシンクワーク代表取締役社長 大場京子氏)。

ユーザー側で1000画面の仕様作成とテスト

 もちろん,開発だけでシステムは作れない。プロジェクトが成功した裏には,ユーザー側の,インテグレータ側以上にすさまじい生産性の高さがあった。

 ユーザー側のスタッフは約4名だった。この人数で要求定義をユーザーが書き,1000画面におよぶ仕様のチェックと検収テストをこなさければならない。「仕様も70%でいいと割り切る。行き違いがあっても誰も責めない」(パフ 事業サポートグループ グループマネージャー 保坂光江氏)という方針で次から次へと仕様を確定し,開発が進められるようにした。

 70%のツケはテストで取り戻す。「9月10月は怒涛のテスト」で,1日数十画面をテストし,問題をあぶりだしていった。テスト工程でもちょっとした工夫があった。バグが見つかると,スクリーンショットを取って開発メンバーに送付した。「バグは再現が難しいので,スクリーンショットは非常に助かった」(ティーアンドエフカンパニー西岡祐弥氏)。

 テスト工程では,スタッフ全員へのメールマガジンにテストの進捗や見つかったバグ修正の状況がレポートされたが,「テス子の部屋」というコーナー名で大場氏によるスタッフへの励ましの言葉が添えられ,張り詰めた空気を和らげた。

システム切り替えでのトラブルを綿密な事前計画が救う

 ハイライトは旧システムから新システムへの切り替えである。4日間システムを停止して,データの移行と再立ち上げを行う。データ移行のため数百本のプログラムが作られた。移行スケジュールが,休憩時間まで含めて綿密に立てられた。それをもとに,事前にリハーサルも行った。切り替え本番では,ティーアンドエフカンパニーの東京と会津のオフィスをTV会議システムで接続,連日最後の進捗確認を行った。

 それでも不測の事態は起きる。テストしたはずの移行プログラムでエラーが発生するという事件があった。さらにはルーターのハードウエア故障も発生,交換を余儀なくされた。

 しかし,24時間をバッファとして確保してあったことと,トラブルに備えてスケジュールを即座に組み直せるようモジュール化してあったことから,当初の予定どおり10月16日,システムは無事稼働した。カットオーバー時は「自然に拍手が沸き起こった。東京では互いに手を握り,会津では開発チーム・リーダーの胴上げまで起きた」(ティーアンドエフカンパニー 代表取締役社長 佐藤裕司氏)。

 システム構築プロジェクトの取材をしていて常に感じることは,アーキテクチャやツール,プロセスという“ハード”と,モチベーションやチームワークといった“ソフト”の両輪がかみ合うことが成功のために欠かせないということだ。今回のプロジェクトにもそれは当てはまる。もっともこれは,システム開発に限らず,あらゆる仕事に言えることかもしれない。

◎関連資料
ティーアンドエフカンパニー最高技術責任者 出羽健一氏によるSeasar Conference 2006 Autumn発表資料

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

ITpro SPECIALPR

What’s New!

経営

アプリケーション/DB/ミドルウエア

クラウド

設計/開発

サーバー/ストレージ

クライアント/OA機器

ネットワーク/通信サービス

セキュリティ

もっと見る