LoginSignup
1
0

More than 5 years have passed since last update.

@motofumi(飯島 基文)

モブプログラミング手法でINTER-Mediatorを使ったWebアプリケーション開発のスクリプト

Last updated at Posted at 2018-05-14

はじめに

モブプログラミング手法でINTER-Mediatorを使ったWebアプリケーション開発のスクリプトです。例として、『現金出納帳』を取り上げる。

スクリプトの作り方

背景となるストーリーを作成し、課題まで落とし込む。模範解答のデータベースとWebアプリも作成する。
背景は簡素に課題に至るまでの案件のストーリーを作成する。ここのストーリーをモブ参加者の共通認識にする。このストーリーに書いてない必要状況は、その都度コーチが追加して共通認識を確定させる。

  • 背景
    • クライアントの規模
    • 課題の目的
    • 現況
    • クライアントの改善案
    • クライアントからの資料
  • 課題
  • データベースの解答例
  • Webアプリの解答例

Webアプリケーション開発スクリプトのサンプル

背景

クライアントは社員10名の小企業。経理担当者がリモートワークになる為、現金管理を行う現金出納帳をWebアプリケーションに置き換えてリモートワークに対応させる。

現金は経理担当者が扱う金庫か全社員が扱えるレジスターにある。現金の受払が発生する場合は、レジ入力で入出金（商品の現金販売等）するか、収入伝票か支払伝票を手書きで発行して経理担当者渡し決済（レジまたは経理担当者）する。また、営業終了時、社員のいずれかがレジの入出金の締めを行い収入伝票を発行する。

経理担当者は、伝票を受領した時、EXCELファイル(帳簿ファイル)を入力している。また、営業終了時または営業開始前に現金と帳簿ファイルをチェックしている。

クライアントは、次の項目について改善したいと考えている。

  • 現金出納帳のWeb化
  • 現金決済をしたい社員が入力を含め管理
  • 経理担当者のリモートワーク時は、チェック及び社員への指示（日々の残高チェック）
  • 経理担当者の出勤時は、現金補充や高額現金決済

Webアプリ作成に向けて次の資料を受け取った。

  • 伝票の値一覧: 伝票マスタを参照
  • 借方科目の値一覧: 借方科目マスタを参照
  • 貸方科目の値一覧: 貸方科目マスタを参照
  • 相手先の文字列長: 全角20文字
  • 摘要の文字列長: 全角60文字

  • 入金、出金の最大値: 9,999,999

  • 収入伝票のサンプル
    収入伝票.png

  • 支払伝票のサンプル

支払伝票.png

  • 現金出納帳のサンプル

スクリーンショット 2018-05-14 18.45.18.png

課題

業務改善を考慮し、現金出納帳をWebアプリにする。データベースのスキーマは現況を考慮、入力を簡略化の為、伝票マスタ、借方科目マスタ、貸方科目マスタを作成する。現金出納帳テーブルは、現金出納帳サンプルをベースに作成する。

項目 改善前 改善後
現金出納帳のWeb化 紙ベースの現金出納帳 Webベースの現金出納帳
現金決済をしたい社員が入力を含め管理 経理担当者が入力 社員が入力
経理担当者のリモートワーク時 リモートから現金出納帳をチェック
経理担当者の出勤時 現金補充・高額現金決済

現金出納帳のサンプルからデータベースのスキーマを考える。

  • 伝票マスタ
伝票ID コード 名前
1 1 収入
2 2 支払
3 3 振替
  • 借方科目マスタ
ID コード 名前
1 1001 現金
2 1002 給与賞与
3 1003 法定福利費
4 1004 福利厚生費
5 1005 消耗品費
6 1006 事務用品費
7 1007 地代賃借料
8 1008 保険料
9 1009 修繕費
10 1010 減価償却費
11 1011 通信費・電話料
12 1012 水道光熱費
13 1013 車両経費
14 1014 広告宣伝費
15 1015 租税公課
16 1016 接待交際費
17 1017 貸倒損失
18 1018 支払手数料
19 1019 退職金
20 1020 事務費
21 1021 諸会費
22 1022 新聞図書費
  • 貸方科目マスタ
ID コード 名前
1 2001 現金
2 2002 売上高
3 2003 普通預金(みずほ銀行)
4 2004 当座預金(みずほ銀行)
5 2005 普通預金(三菱UFJ銀行)
6 2006 当座預金(三菱UFJ銀行)
  • 現金出納帳
ID 日付 伝票CODE 借方科目CODE 貸方科目CODE 相手先 摘要 入金 出金 チェックフラグ 更新年月 更新フラグ 備考
1 2018-04-02 2 1006 2001 伊東屋 文房具 NULL 25,000 1 2018-04-31 1
2 2018-04-02 1 1001 2002 4/2 30,000 NULL 1 2018-04-31 1
3 2018-04-03 2 1004 2001 コストコ 飲料水 NULL 15,000 1 2018-04-31 1
4 2018-04-03 1 1001 2002 4/3 33,000 NULL 1 2018-04-31 1
5 2018-04-04 2 1005 2001 ヨドバシカメラ プリンター NULL 78,000 1 2018-04-31 1
6 2018-04-04 1 1001 2002 4/4 26,000 NULL 1 2018-04-31 1
7 2018-04-05 2 1011 2001 ドコモ 3月分 NULL 27,000 1 2018-04-31 1
8 2018-04-05 1 1001 2002 4/5 12,000 NULL 1 2018-04-31 1
9 2018-04-06 2 1011 2001 NTT東日本 3月分 NULL 125,000 1 2018-04-31 1
10 2018-04-06 2 1022 2001 日本経済新聞 3月分 NULL 4,500 1 2018-04-31 1
11 2018-04-06 1 1001 2002 4/6 30,000 NULL 1 2018-04-31 1
12 2018-04-06 1 1001 2003 みずほ銀行 ATM引き出し 200,000 NULL 1 2018-04-31 1
13 2018-04-06 2 1018 2001 みずほ銀行 NULL 108 1 2018-04-31 1
14 2018-04-06 2 1015 2001 葛飾郵便局 印紙 NULL 50,000 1 2018-04-31 1

データベースの解答例

データベース接続

mysql -u root test_db -p

伝票マスタテーブル

伝票マスタテーブル
CREATE TABLE vouchers (
   id          INT(11) NOT NULL AUTO_INCREMENT,
   code        CHAR(1) NOT NULL UNIQUE,
   name        CHAR(2) NOT NULL UNIQUE,
   PRIMARY KEY (id)
);
サンプルデータ
INSERT INTO vouchers(code, name) VALUES ('1', '収入');
INSERT INTO vouchers(code, name) VALUES ('2', '支払');
INSERT INTO vouchers(code, name) VALUES ('3', '振替');
データ確認
select * from vouchers;

借方科目マスタテーブル

借方科目マスタテーブル
CREATE TABLE debit_items (
   id          INT(11) NOT NULL AUTO_INCREMENT,
   code        CHAR(4) NOT NULL UNIQUE,
   name        VARCHAR(10) NOT NULL UNIQUE,
   PRIMARY KEY (id)
);
サンプルデータ
INSERT INTO debit_items(code, name) VALUES ('1001', '現金');
INSERT INTO debit_items(code, name) VALUES ('1002', '給与賞与');
INSERT INTO debit_items(code, name) VALUES ('1003', '法定福利費');
INSERT INTO debit_items(code, name) VALUES ('1004', '福利厚生費');
INSERT INTO debit_items(code, name) VALUES ('1005', '消耗品費');
INSERT INTO debit_items(code, name) VALUES ('1006', '事務用品費');
INSERT INTO debit_items(code, name) VALUES ('1007', '地代賃借料');
INSERT INTO debit_items(code, name) VALUES ('1008', '保険料');
INSERT INTO debit_items(code, name) VALUES ('1009', '修繕費');
INSERT INTO debit_items(code, name) VALUES ('1010', '減価償却費');
INSERT INTO debit_items(code, name) VALUES ('1011', '通信費・電話料');
INSERT INTO debit_items(code, name) VALUES ('1012', '水道光熱費');
INSERT INTO debit_items(code, name) VALUES ('1013', '車両経費');
INSERT INTO debit_items(code, name) VALUES ('1014', '広告宣伝費');
INSERT INTO debit_items(code, name) VALUES ('1015', '租税公課');
INSERT INTO debit_items(code, name) VALUES ('1016', '接待交際費');
INSERT INTO debit_items(code, name) VALUES ('1017', '貸倒損失');
INSERT INTO debit_items(code, name) VALUES ('1018', '支払手数料');
INSERT INTO debit_items(code, name) VALUES ('1019', '退職金');
INSERT INTO debit_items(code, name) VALUES ('1020', '事務費');
INSERT INTO debit_items(code, name) VALUES ('1021', '諸会費');
INSERT INTO debit_items(code, name) VALUES ('1022', '新聞図書費');
データ確認
select * from debit_items;

貸方科目マスタテーブル

貸方科目マスタテーブル
CREATE TABLE credit_items (
   id          INT(11) NOT NULL AUTO_INCREMENT,
   code        CHAR(4) NOT NULL UNIQUE,
   name        VARCHAR(10) NOT NULL UNIQUE,
   PRIMARY KEY (id)
);
サンプルデータ
INSERT INTO credit_items(code, name) VALUES ('2001', '現金');
INSERT INTO credit_items(code, name) VALUES ('2002', '売上高');
INSERT INTO credit_items(code, name) VALUES ('2003', '普通(みずほ)');
INSERT INTO credit_items(code, name) VALUES ('2004', '当座(みずほ)');
INSERT INTO credit_items(code, name) VALUES ('2005', '普通(三菱UFJ)');
INSERT INTO credit_items(code, name) VALUES ('2006', '当座(三菱UFJ)');
データ確認
select * from credit_items;

現金出納帳テーブル

現金出納帳テーブル
CREATE TABLE cash_book (
   id                INT(11) NOT NULL AUTO_INCREMENT,
   handle_date       DATE NOT NULL,
   voucher_code      CHAR(2) NOT NULL,
   debit_item_code   CHAR(4) NOT NULL,
   credit_item_code  CHAR(4) NOT NULL,
   destination       VARCHAR(20),
   summary           VARCHAR(60),
   deposit           NUMERIC(8,0),
   withdraw          NUMERIC(8,0),          
   handle_timestamp  TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
   check_flag        CHAR(1) NOT NULL DEFAULT '0',
   update_month      DATE,
   update_flag       CHAR(1) NOT NULL DEFAULT '0',
   remark            VARCHAR(20),
   PRIMARY KEY (id),
   FOREIGN KEY (voucher_code) REFERENCES vouchers(code),
   FOREIGN KEY (debit_item_code) REFERENCES debit_items(code),
   FOREIGN KEY (credit_item_code) REFERENCES credit_items(code)
);
サンプルデータ
INSERT INTO cash_book(handle_date, voucher_code, debit_item_code, credit_item_code, destination, summary, deposit, withdraw, check_flag, update_month, update_flag, remark) VALUES ('2018-04-02', '2', '1006', '2001', '伊東屋', '文房具', NULL, 25000, '1', '2018-04-30', '1', '');
INSERT INTO cash_book(handle_date, voucher_code, debit_item_code, credit_item_code, destination, summary, deposit, withdraw, check_flag, update_month, update_flag, remark) VALUES ('2018-04-02', '1', '1001', '2002', '', '4/2', 30000, NULL, '1', '2018-04-30', '1', '');
INSERT INTO cash_book(handle_date, voucher_code, debit_item_code, credit_item_code, destination, summary, deposit, withdraw, check_flag, update_month, update_flag, remark) VALUES ('2018-04-03', '2', '1004', '2001', 'コストコ', '飲料水', NULL, 15000, '1', '2018-04-30', '1', '');
INSERT INTO cash_book(handle_date, voucher_code, debit_item_code, credit_item_code, destination, summary, deposit, withdraw, check_flag, update_month, update_flag, remark) VALUES ('2018-04-03', '1', '1001', '2002', '', '4/3', 33000, NULL, '1', '2018-04-30', '1', '');
INSERT INTO cash_book(handle_date, voucher_code, debit_item_code, credit_item_code, destination, summary, deposit, withdraw, check_flag, update_month, update_flag, remark) VALUES ('2018-04-04', '2', '1005', '2001', 'ヨドバシカメラ', 'プリンター', NULL, 78000, '1', '2018-04-30', '1', '');
INSERT INTO cash_book(handle_date, voucher_code, debit_item_code, credit_item_code, destination, summary, deposit, withdraw, check_flag, update_month, update_flag, remark) VALUES ('2018-04-04', '1', '1001', '2002', '', '4/4', 26000, NULL, '1', '2018-04-30', '1', '');
INSERT INTO cash_book(handle_date, voucher_code, debit_item_code, credit_item_code, destination, summary, deposit, withdraw, check_flag, update_month, update_flag, remark) VALUES ('2018-04-05', '2', '1011', '2001', 'ドコモ', '3月分', NULL, 27000, '1', '2018-04-30', '1', '');
INSERT INTO cash_book(handle_date, voucher_code, debit_item_code, credit_item_code, destination, summary, deposit, withdraw, check_flag, update_month, update_flag, remark) VALUES ('2018-04-05', '1', '1001', '2002', '', '4/5', 12000, NULL, '1', '2018-04-30', '1', '');
INSERT INTO cash_book(handle_date, voucher_code, debit_item_code, credit_item_code, destination, summary, deposit, withdraw, check_flag, update_month, update_flag, remark) VALUES ('2018-04-06', '2', '1011', '2001', 'NTT東日本', '3月分', NULL, 125000, '1', '2018-04-30', '1', '');
INSERT INTO cash_book(handle_date, voucher_code, debit_item_code, credit_item_code, destination, summary, deposit, withdraw, check_flag, update_month, update_flag, remark) VALUES ('2018-04-06', '2', '1022', '2001', '日本経済新聞', '3月分', NULL, 4500, '1', '2018-04-30', '1', '');
INSERT INTO cash_book(handle_date, voucher_code, debit_item_code, credit_item_code, destination, summary, deposit, withdraw, check_flag, update_month, update_flag, remark) VALUES ('2018-04-06', '1', '1001', '2002', '', '4/6', 30000, NULL, '1', '2018-04-30', '1', '');
INSERT INTO cash_book(handle_date, voucher_code, debit_item_code, credit_item_code, destination, summary, deposit, withdraw, check_flag, update_month, update_flag, remark) VALUES ('2018-04-06', '1', '1001', '2003', 'みずほ銀行', 'ATM引き出し', 200000, NULL, '1', '2018-04-30', '1', '');
INSERT INTO cash_book(handle_date, voucher_code, debit_item_code, credit_item_code, destination, summary, deposit, withdraw, check_flag, update_month, update_flag, remark) VALUES ('2018-04-06', '2', '1018', '2001', 'みずほ銀行', '', NULL, 108, '1', '2018-04-30', '1', '');
INSERT INTO cash_book(handle_date, voucher_code, debit_item_code, credit_item_code, destination, summary, deposit, withdraw, check_flag, update_month, update_flag, remark) VALUES ('2018-04-06', '2', '1015', '2001', '葛飾郵便局', '印紙', NULL, 50000, '1', '2018-04-30', '1', '');
データ確認
select
cash_book.id as 'id',
cash_book.handle_date as '日付', 
vouchers.name as '伝票', 
debit_items.name as '借方科目', 
credit_items.name as '貸方科目', 
cash_book.destination as '相手先', 
cash_book.summary as '摘要', 
cash_book.deposit as '入金',  
cash_book.withdraw as '出金', 
cash_book.check_flag as 'チェックフラグ', 
cash_book.handle_timestamp as 'タイムスタンプ',
cash_book.update_month as '更新月', 
cash_book.update_flag as '更新フラグ', 
cash_book.remark as '備考'
from cash_book
left outer join vouchers on cash_book.voucher_code = vouchers.code
left outer join debit_items on cash_book.debit_item_code = debit_items.code
left outer join credit_items on cash_book.credit_item_code = credit_items.code
;

現金出納帳ビュー

現金出納帳ビュー
create view view_cash_book as
select
cash_book.id as 'id',
cash_book.handle_date as 'handle_date', 
vouchers.name as 'voucher_name', 
debit_items.name as 'debit_item_name', 
credit_items.name as 'credit_item_name', 
cash_book.destination as 'destination', 
cash_book.summary as 'summary', 
cash_book.deposit as 'deposit',  
cash_book.withdraw as 'withdraw', 
cash_book.check_flag as 'check_flag', 
cash_book.handle_timestamp as 'handle_timestamp',
cash_book.update_month as 'update_month', 
cash_book.update_flag as 'update_flag', 
cash_book.remark as 'remark'
from cash_book
left outer join vouchers on cash_book.voucher_code = vouchers.code
left outer join debit_items on cash_book.debit_item_code = debit_items.code
left outer join credit_items on cash_book.credit_item_code = credit_items.code
;

Webアプリの解答例

データ一覧表(表示のみ)

スクリーンショット 2018-05-16 15.04.39.png

スクリーンショット 2018-05-16 15.05.27.png

<body>タグ内のコード
<div id="IM_NAVIGATOR"></div>

<table>
  <thead>
    <tr>
      <th>id</th>
      <th>日付</th>
      <th>伝票</th>
      <th>借方科目</th>
      <th>貸方科目</th>
      <th>相手先</th>
      <th>摘要</th>
      <th>入金</th>
      <th>出金</th>
      <th>チェックフラグ</th>
      <th>タイムスタンプ</th>
      <th>更新月</th>
      <th>更新フラグ</th>
      <th>備考</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-im="view_cash_book@id"></td>
      <td data-im="view_cash_book@handle_date"></td>
      <td data-im="view_cash_book@voucher_name"></td>
      <td data-im="view_cash_book@debit_item_name"></td>
      <td data-im="view_cash_book@credit_item_name"></td>
      <td data-im="view_cash_book@destination"></td>
      <td data-im="view_cash_book@summary"></td>
      <td data-im="view_cash_book@deposit"></td>
      <td data-im="view_cash_book@withdraw"></td>
      <td data-im="view_cash_book@check_flag"></td>
      <td data-im="view_cash_book@handle_timestamp"></td>
      <td data-im="view_cash_book@update_month"></td>
      <td data-im="view_cash_book@update_flag"></td>
      <td data-im="view_cash_book@remark"></td>

    </tr>
  </tbody>
</table>

データ一覧表(新規・更新・削除)

メモ: 一部修正の必要あり

スクリーンショット 2018-05-16 15.19.44.png

スクリーンショット 2018-05-16 15.21.23.png

スクリーンショット 2018-05-16 15.21.35.png

スクリーンショット 2018-05-16 15.21.42.png

スクリーンショット 2018-05-16 15.21.50.png

<body>タグ内のコード
<div id="IM_NAVIGATOR"></div>
 <table>
  <thead>
    <tr>
      <th>id</th>
      <th>日付</th>
      <th>伝票</th>
      <th>借方科目</th>
      <th>貸方科目</th>
      <th>相手先</th>
      <th>摘要</th>
      <th>入金</th>
      <th>出金</th>
      <th>チェックフラグ</th>
      <th>更新月</th>
      <th>更新フラグ</th>
      <th>備考</th>
      <th></th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" data-im="cash_book@id"></td>
      <td><input type="text" data-im="cash_book@handle_date"></td>
      <td>
        <select data-im="cash_book@voucher_code">
          <option data-im="vouchers@code@value vouchers@name"></option>
        </select>
      </td>
      <td>
        <select data-im="cash_book@debit_item_code">
          <option data-im="debit_items@code@value debit_items@name"></option>
        </select>
      </td>
      <td>
        <select data-im="cash_book@credit_item_code">
          <option data-im="credit_items@code@value credit_items@name"></option>
        </select>
      </td>

      <td><input type="text" data-im="cash_book@destination"></td>
      <td><input type="text" data-im="cash_book@summary"></td>
      <td><input type="text" data-im="cash_book@deposit"></td>
      <td><input type="text" data-im="cash_book@withdraw"></td>
      <td><input type="text" data-im="cash_book@check_flag"></td>
      <td><input type="text" data-im="cash_book@update_month"></td>
      <td><input type="text" data-im="cash_book@update_flag"></td>
      <td><input type="text" data-im="cash_book@remark"></td>
      <td></td>
    </tr>
  </tbody>
</table>

データ入力(PostOnyモード)

スクリーンショット 2018-05-16 15.30.04.png

スクリーンショット 2018-05-16 15.31.06.png

スクリーンショット 2018-05-16 15.31.16.png

スクリーンショット 2018-05-16 15.31.22.png

<body>タグ内のコード
<div id="IM_NAVIGATOR"></div>

  <table>
  <tbody data-im-control="post">
    <tr><th>日付</th><td><input type="text" data-im="cash_book@handle_date" /></td></tr>
    <tr>
      <th>伝票</th>
      <td>
        <select data-im="cash_book@voucher_code">
          <option data-im="vouchers@code@value vouchers@name"></option>
        </select>
      </td>
    </tr>
    <tr>
      <th>借方科目</th>
      <td>
        <select data-im="cash_book@debit_item_code">
          <option data-im="debit_items@code@value debit_items@name"></option>
        </select>
      </td>
    </tr>
    <tr>
      <th>貸方科目</th>
      <td>
        <select data-im="cash_book@credit_item_code">
          <option data-im="credit_items@code@value credit_items@name"></option>
        </select>
      </td>
    </tr>

    <tr><th>相手先</th><td><input type="text" data-im="cash_book@destination"/></td></tr>
    <tr><th>摘要</th><td><input type="text" data-im="cash_book@summary"/></td></tr>
    <tr><th>入金</th><td><input type="text" data-im="cash_book@deposit"/></td></tr>
    <tr><th>出金</th><td><input type="text" data-im="cash_book@withdraw"/></td></tr>
    <tr><th>備考</th><td><input type="text" data-im="cash_book@remark"/></td></tr>   
    <tr><th></th><td><button data-im-control="post">登録</button></td></tr>
  </tbody>
</table>
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0