⽇ 本 デ ィ レ ク シ ョ ン 協 会 主 催
0からのWebディレクション講座システム開発編
講師紹介
柳⽥ 亜沙美(あさみん)株式会社凛 代表取締役エンジニア・Webディレクター
• 新卒OL時代にエクセルVBAとAccessに出会い、⽣産管理・在庫管理システムを構築。
• プログラマに転職。
• 2008年、株式会社凛を設⽴。
• ⼥性向けプログラミングスクール「GeekGirlLabo」運営。
• 企業の新⼈社員研修が終わりました!
INDEX13:00〜 第⼀部 1. 講義
14:15〜 第⼆部 1. ワークショップ
15:30〜 第三部1. ワークショップ
16:30〜 発表
17:00〜 懇親会
実例から学ぶ、失敗しない開発プロ
ジェクト先人の失敗から学ぼう!
そもそも無謀なスケジュールと予算
原因1
開発リーダーがプロジェクトを見捨て、去る。
結果
バッファ大事。「断る力」大事。
学び1
担当者が抱えていた他の案件のスケジュールが遅延した
原因1
スケジュールにバッファがなかった
原因2
弊社が全部引き継ぐ。↓
無事、鎮火
解決方法
納期が5月末なのに5月の中旬の時点で進捗率10%
状況
一次納品時に納品したプログラムに不具合が大量にあり、その対応に開発者が追われ、二次開発ができなくなった
原因
状況
リリース初日、サーバーがダウン
想定を超えるダウンロード数
原因1
SQLの改善回線やサーバー増強
解決方法
テスト大事。サーバーはクラウド。
学び
準委任で手伝っていた会社から、支払いが滞る。
経緯1
いつまでも支払いがないので、訴訟を起こす
経緯3
請負契約か準委任契約か
裁判の争点
バッファ大事。進捗確認大事。テスト大事。契約書大事。
まとめ
契約の種類
42
業務請負準委任
⼈材派遣
業務請負
43
成果物を納品します。瑕疵担保責任がある場合が多い
準委任
44
成果物を納品しない瑕疵担保責任もない
時間に対して対価が発⽣
使い分け
45
• ウォーターフォール型新規開発– 業務請負
• アジャイル型新規開発– 準委任
• 運⽤保守– 準委任
責任範囲を明確にする
46
• 納品物は何か?– 仕様書を含むのか?– テスト仕様書を含むのか?– どの程度のテストが必要なのか?
• 定例会議への参加はどの程度必要か?• 本番へのデプロイは?• 操作説明は?
バッファの取り⽅
48
この開発ってどれくらいでできそう?
バッファの取り⽅
49
この開発ってどれくらいでできそう?
1ヶ⽉くらいですね。
ここで確認するべきこと
51
バッファは含まれているのか?テストは含まれているのか?
開発の進捗率
52
0
10
20
30
40
50
60
70
80
90
100
進捗率
進捗率
0
10
20
30
40
50
60
70
80
90
100
進捗率
進捗率
なぜ?
53
だいたいこのあたりから、微調整という名の仕様追加・仕様変更が発生し始める
0
10
20
30
40
50
60
70
80
90
100
進捗率
進捗率
スケジュールは⼈によって違うので確認を!
54
ここまでのペースで 完成するスケジュールだと、仕様変更があった時に炎上する
バッファってどれくらい?
55
⾒積・スケジュールは、想定の1.5倍〜2倍くらいが
経験則。
納期1ヶ⽉前。
57
納期はまだ先だから、まあ⼤丈夫でしょう。
納期2週間前
58
そろそろできる頃かな?
全然出来てません。
どの程度やればいい?
60
外部なら1週間に1度定例社内なら毎⽇定例
Gitのコミットログを⾒ておく
実際にあったこわい話
63
納品されたシステムに、バグが100件以上あったんですよ!
プログラマー⽈く。
64
スケジュールに余裕がなかったのでテストしてません。
ディレクター⽈く。
65
え、テスト?なにそれ。
テストの⼿法
66
ブラックボックステストと
ホワイトボックステスト
誰がやるの?
67
• ホワイトボックステスト→実装した本⼈
• ブラックボックステスト→実装した本⼈以外↑必ずテスターが必要!!
テスト仕様書って何?どのような確認を⾏い、どうなったらOKなのかを決める。※⾒積にはテスト仕様書の⼯数を含めることを忘れずに!
例:この画⾯のテスト仕様書を作る場合
68
テスト仕様書はこうなりました。
69
テスト仕様書に必要な項⽬
70
• テスト実施内容• ⼊⼒値• 期待動作• テスト結果• 実施⽇• 実施者
実施内容・期待動作
71
コード 22 データ入力せず、登録ボタン押下 コードを入力してください。
23 4桁を入力し、登録ボタン押下 DBへ登録処理
24 6桁を入力し、登録ボタン押下 コードは5文字以内で入力してください。
25 全角を入力し、登録ボタン押下コードは半角英数字記号(ハイフン、アンダースコア)がご登録いただけます。
26 ハイフンを含む文字列を入力し、登録ボタン押下 DBへ登録処理
27アンダーバーを含む文字列を入力し、登録ボタン押下
DBへ登録処理
28 スペースを含む文字列を入力し、登録ボタン押下 コードに空白文字はご登録いただけません。
29 カンマを含む文字列を入力し、登録ボタン押下コードは半角英数字記号(ハイフン、アンダースコア)がご登録いただけます。
30ダブルクォーテーションを含む文字列を入力し、登録ボタン押下
コードは半角英数字記号(ハイフン、アンダースコア)がご登録いただけます。
⼊⼒値
72
No コード 名称 区分 管理コード指定期間(FROM) 指定期間(TO)
21 09o04 テスト83 1 h040950 2015/04/14 2015/09/06
22 テスト21 1 h054931 2015/06/19 2015/10/24
23 43j1 テスト50 0 h049724 2015/05/12 2015/12/16
24 1e2248 テスト66 1 a058063 2015/03/16 2015/10/01
25 CBd14 テスト32 0 a045771 2015/04/14 2015/08/10
26 12-34 テスト20 1 b035204 2015/06/02 2015/11/02
27 12_34 テスト46 0 g070754 2015/02/02 2015/12/01
28 12 34 テスト87 1 b066005 2015/02/20 2015/10/18
29 12,34 テスト76 1 o022265 2015/02/15 2015/12/19
30 12"34 テスト 2 g095382 2015/02/17 2015/10/07
テスト仕様書の作り⽅
73
テスト項⽬は正常系と異常系を⽤意する。• 正常系テスト
– 正しい操作⽅法・⼊⼒値でテストを⾏う• 異常系テスト
– 誤った操作⽅法・⼊⼒値でテストを⾏う
ユーザーは想定外の操作をするもの!すべてのケースを洗い出そう!
システムのつくりかた
(3)システムが動く
(2)エンジニアがコンピュータに伝える
(1)仕様をエンジニアに伝える
75
ディレクターがやる必要がある
ディレクター⽈く。
76
え、仕様書?なにそれ。いいかんじに作っちゃってよ。
仕様書が必要な理由その1
77
クライアントと仕様をFIXする。
仕様書が必要な理由その2
78
エンジニアに仕様を伝える。
仕様書が必要な理由その3
79
引き継ぎ。
仕様の決め⽅
80
UIを再優先にするのかスケジュール・コストを
優先にするのか?
どこまで仕様を決めるのか?
81
動きの部分までしっかり指⽰を出したほうが
⼿戻りが少ない。
ダメな例(1)
82
⾷べログみたいなやつ作ってよ!
任せたからよろしく!
ダメな例(2)
83
ん〜⾒てみないとわかんない
ここの仕様、AとBどっちがいいですか
結果。
84
ここ、こうなってないんだけど?
そんな仕様、知りません。
仕様変更するとどうなる?
85
1. スケジュールが遅れる2. コストが発⽣する3. バグが発⽣しやすくなる
丸投げSTOP!
エンジニアは魔法使いではありません丸投げはダメ。ゼッタイ。
86
システムのつくりかた
システムが動く
エンジニアがコンピュータに伝える
仕様をエンジニアに伝える
87
そのために仕様書をつくろう
よく使う仕様書
• 画⾯機能⼀覧• 画⾯遷移図• 画⾯仕様書• データベース仕様書
88
画⾯機能⼀覧画⾯や機能が⼀覧になっているもの
89
分類 機能 備考ユーザー画⾯ 商品 ⼀覧
詳細 カート 決済
⾒積 デザイン・レイアウト選択 ロゴをアップロード
会員 会員登録 会員情報編集
静的ページ トップページ 特定商取引法 プライバシーポリシー 会社概要
画⾯遷移図画⾯遷移を図にしたもの
90
トップページ
会員ログイン
ご注文履歴
会員情報編集
商品一覧
商品詳細
カートへ入れる
ご購入ページ
決済
画⾯仕様書(表⽰)• 各画⾯に表⽰する項⽬や、各項⽬に対する詳細な仕様を記
⼊する。• ⼀覧表⽰する場合は、以下を指定する。
1. 表⽰件数2. 並べ替え項⽬と昇順/降順、3. 絞り込み条件等
91
▼出⼒定義 No 表⽰内容 取得条件 表⽰順⑩ 店舗⼀覧 削除=0の店舗を10件 登録⽇時降順
画⾯仕様書(動作)• 各画⾯に表⽰する項⽬や、各項⽬に対する詳細な仕様を記
⼊する。• ボタンを押した時や、セレクトボックスを選択した時にど
んな動きをするのか、など。
92
▼動作定義 No 動作 遷移先 チェック⑦ 選択時にAjaxで⑧を更新 ー ー
⑨Ajaxで選択した条件で⑩を絞り込み、更新店舗が存在しない場合は「店舗が存在しません」と表⽰
ー 必須チェック
⑦ ⑧ ⑨
画⾯仕様書(⼊⼒)⼊⼒チェックを定義する。エラーだった場合の表⽰メッセージも決めておく。
1. 必須チェック2. 桁数チェック3. 半⾓チェック4. 数値チェック5. 重複チェック
93
画⾯仕様書(例)ーTwitterの登録フォームー
95
▼⼊⼒定義 No ⼊⼒内容 ⼊⼒チェック エラーメッセージ① 名前 必須チェック 名前を⼊⼒してください。 桁数チェック 名前は15⽂字以内で⼊⼒してください。② メールアドレス 必須チェック メールアドレスを⼊⼒してください。 重複チェック メールアドレスが既に登録されています。
メールアドレスチェック
メールアドレスは正しく⼊⼒してください
③ ユーザー名 必須チェック ユーザー名を⼊⼒してください。
桁数チェック ユーザー名は8⽂字以内で⼊⼒してください。
重複チェック ユーザー名が既に登録されています。
半⾓英数チェック ユーザー名は半⾓英数字で⼊⼒してください
④ パスワード 必須チェック パスワードを⼊⼒してください。
桁数チェック パスワードは5⽂字以上で⼊⼒してください。
⑤ チェックボックス ー
ワークショップ(1)〜画⾯仕様書を作ってみよう〜
96
ワークショップ(2)〜テスト仕様書を作ってみよう〜
97
契約書大事。バッファ大事。進捗確認大事。テスト大事。仕様書大事。
炎上しないためには
以上 ご清聴ありがとうございました。
質疑応答
なんでもOKです。時間の許す限りお答えいたします。
時間なくなった場合はミートアップの時聞いてください。語ります。
日本ディレクション協会 コミュニティメンバーボードのご案内
ディレ協の運営メンバーや、歴代&人気講師含む
全国1,000名以上のディレクターと繋がる 国内最大のディレクターコミュニティ
利⽤特典• いち早くイベント情報を得られる• 講演の資料をチェックできる• 全国のディレクターに⾊々聴ける• イベントやリリース告知に使える
ディレ協