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

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


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

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





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

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

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

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

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

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

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

 - 伝票の値一覧: 伝票マスタを参照
 - 借方科目の値一覧: 借方科目マスタを参照
 - 貸方科目の値一覧: 貸方科目マスタを参照
 - 相手先の文字列長: 全角20文字
 - 摘要の文字列長: 全角60文字
 - 入金、出金の最大値: 9,999,999

 - 収入伝票のサンプル
<img width="703" alt="収入伝票.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/51120cb8-3a07-d7b6-bf02-af8d11b65e43.png">


 - 支払伝票のサンプル

<img width="688" alt="支払伝票.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/1d6f197d-699a-4092-a6c5-6634ee982a6d.png">

 - 現金出納帳のサンプル

<img width="1124" alt="スクリーンショット 2018-05-14 18.45.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/92da1132-33c6-b522-8eff-c16a7d32ee18.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||



#データベースの解答例

###データベース接続
```SQL:
mysql -u root test_db -p
```

###伝票マスタテーブル
```SQL:伝票マスタテーブル
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)
);
```
```SQL:サンプルデータ
INSERT INTO vouchers(code, name) VALUES ('1', '収入');
INSERT INTO vouchers(code, name) VALUES ('2', '支払');
INSERT INTO vouchers(code, name) VALUES ('3', '振替');
```

```SQL:データ確認
select * from vouchers;
```
###借方科目マスタテーブル
```SQL:借方科目マスタテーブル
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)
);
```
```SQL:サンプルデータ
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', '新聞図書費');
```

```SQL:データ確認
select * from debit_items;
```

###貸方科目マスタテーブル
```SQL:貸方科目マスタテーブル
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)
);
```
```SQL:サンプルデータ
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)');
```

```SQL:データ確認
select * from credit_items;
```

###現金出納帳テーブル
```SQL:現金出納帳テーブル
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)
);
```



```SQL:サンプルデータ
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', '');
```

```SQL:データ確認
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
;
```

###現金出納帳ビュー
```SQL:現金出納帳ビュー
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](https://qiita-image-store.s3.amazonaws.com/0/54439/792516db-c6a0-467c-ed5a-52c4e22ced64.png)

![スクリーンショット 2018-05-16 15.05.27.png](https://qiita-image-store.s3.amazonaws.com/0/54439/3124e05f-19f0-47fa-0593-6e91287694cb.png)

```html:&lt;body&gt;タグ内のコード
<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](https://qiita-image-store.s3.amazonaws.com/0/54439/39bb75c6-d551-0085-9181-a3161318b455.png)

![スクリーンショット 2018-05-16 15.21.23.png](https://qiita-image-store.s3.amazonaws.com/0/54439/301b1e4d-f4ba-de54-e93c-eba73aff413b.png)

![スクリーンショット 2018-05-16 15.21.35.png](https://qiita-image-store.s3.amazonaws.com/0/54439/1c233bbc-74a8-634d-7a2e-29d22670ad32.png)

![スクリーンショット 2018-05-16 15.21.42.png](https://qiita-image-store.s3.amazonaws.com/0/54439/07ceec6e-7e1a-b631-2910-b53bc935ed21.png)

![スクリーンショット 2018-05-16 15.21.50.png](https://qiita-image-store.s3.amazonaws.com/0/54439/7a46a4db-bc41-5bff-6a59-07461ce0b838.png)


```html:&lt;body&gt;タグ内のコード
<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](https://qiita-image-store.s3.amazonaws.com/0/54439/862ff48e-9a75-2d76-38ec-5d75519e8751.png)

![スクリーンショット 2018-05-16 15.31.06.png](https://qiita-image-store.s3.amazonaws.com/0/54439/a562b9e4-e28d-ef9f-ebf6-53db6cc81e08.png)

![スクリーンショット 2018-05-16 15.31.16.png](https://qiita-image-store.s3.amazonaws.com/0/54439/109a9ab4-2fe1-0dc2-4a7e-df8916f39e43.png)

![スクリーンショット 2018-05-16 15.31.22.png](https://qiita-image-store.s3.amazonaws.com/0/54439/2ef3022f-c560-080a-368b-fb23931fbea1.png)


```html:&lt;body&gt;タグ内のコード
<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>
```