INTER-Mediator

エピソードを使ったINTER-Mediatorのハンズオン 1 - 基本機能


はじめに

大勉強会のハンズオンのエピソードです。全員でエピソードに沿ってハンズオンを行います。マシンは各自持参したマシンかイベントで用意したマシンを1名1台使用します。


シナリオ


背景

私は、社員10名の会社に勤める総務課の社員です。コンピュータが得意な為、コンピュータの購入や社員への配布にも携わっています。日頃から他の社員にコンピュータの使い方やトラブルシューティングの相談なども受けています。最近は、コンピュータサポートは私の業務の一部となってきました。

私がコンピュータが得意な理由の一つに、以前から、趣味のWebサイトをレンタルサーバで運用しています。その中で、参考書を見ながらではありますが、HTMLやCSSを書いて見栄えの良いWebページを作成したり、苦労しましたが、MySQLとPHPを使って、データベースの情報をWebページに反映させたりもしています。

弊社は、請求書と決算書の為に経理システムを導入しています。その他の業務は、それぞれの部署がExcelやWordを使って書類を作成しています。社長は日頃から、経理システム以外の業務もシステム化したいと考えていますが、費用の問題があり、外注できない状況にあります。業務は紙ベースですすめているので、どこからシステム化をすれば良いかもわからない状態です。

ある日、外回り営業マンの同僚が、交通費など、1日に使った『経費メモ』をとっていることを知りました。そのメモから経理に提出する『支払伝票』を作成しているそうです。使った当日に経費精算できる場合もあれば、数日たまる場合もあり、メモを無くしたり、いくら経費を精算したかわからなく場合もあるそうです。メモをExcelの表にしたこともありますが、手間が増えるでやめたと言っていました。そこで同僚は簡単にメモを残して、どこまで精算したかをシステム化できないか相談されました。

メモ

スクリーンショット 2018-05-17 9.57.53.png

支払伝票

スクリーンショット 2018-05-17 10.20.39.png

スクリーンショット 2018-05-17 10.20.49.png


動機付け

この同僚の希望であれば、MySQL、HTML、PHPを使えば、Webベースの『経費メモ』のシステムをわたしのスキルでも作成できそうです。ただ、PHPを使ってスクラッチから開発するには、たとえ小さなシステムでもわたしにとっては大変です。開発を簡単にする為にWebアプリケーション開発フレームワークを使ってみようと思いました。

Webアプリケーション開発フレームワークには、『CakePHP』、『CodeIgniter』、『Ruby on Rails』などメジャーなものがありますが、学習コストが高そうです。そこで、最近知った『INTER-Mediator』というWebアプリケーション開発フレームワークを使ってみようと思いました。このフレームワークの大きな特徴の一つに、データベースをデータを『html』と『定義ファイル』を書くだけで、データの『追加, 更新, 削除』がWebページから簡単にできるようです。

初めて、Webアプリケーション開発フレームワークを使った開発に取り組むっていうのも楽しそうなので、同僚にも感謝されそうだし、いっちょやってみようと考えてみました。

image.png


課題

あなたは、この総務課の社員役となります。『INTER-Mediator』で『経費メモ』Webアプリを作りながら仕組みや開発方法をハンズオンで体験します。課題をこなすことで、『経費メモ』Webアプリを完成していきます。ゴールはこの同僚が気に入って使ってくれることです。


課題0: バーチャルマシンの用意

一般的に、Webアプリケーション開発フレームワークを使用するには、そのフレームワークを始め、データベース、Webサーバ、開発言語のインストールとセットアップ、が必要になります。『INTER-Mediator』では、開発の体験を簡単にできるよう、すべてがセットアップされたバーチャルマシンが用意されています。まずは、バーチャルマシンを用意しよう。


課題1: Webアプリのモックの作成

同僚との打ち合わせをする為、メモをもとにHTMLで一覧表画面のWebアプリのモックを作りましょう。HTMLを一部用意したので、そちらをコピーしてから作成してください。

手順1: 『page01.htmlを編集する』をクリックし、次のHTMLを<body>タグの間にコピーする。


一覧表画面(page01.html)

<table>

<thead>
<tr>
<th>日付</th>
<th>借方科目</th>
<th>貸方科目</th>
</tr>
</thead>
<tbody>
<tr>
<td>2018-05-17</td>
<td>旅費交通費</td>
<td>現金</td>
</tr>
</tbody>
</table>

手順2: 『page01.htmlを表示する』をクリックし、ページを確認する。

スクリーンショット 2018-05-17 11.59.16.png

手順3: 完成イメージを見ながら、HTMLを完成される。

スクリーンショット 2018-05-17 12.00.01.png

解答例: うまくいかなった方はこちらこコピーしてください。


一覧表画面(page01.html)

  <table>

<thead>
<tr>
<th>日付</th>
<th>借方科目</th>
<th>貸方科目</th>
<th>相手先</th>
<th>摘要</th>
<th>出金</th>
<th>起票</th>
</tr>
</thead>
 <tbody>
<tr>
<td>2018-05-17</td>
<td>旅費交通費</td>
<td>現金</td>
<td>公共交通機関</td>
<td>新小岩&lt;-&gt;新宿 @302x2</td>
<td>604</td>
<td><input type="checkbox" name="issued" value="1" checked / ></td>
</tr>
<tr>
<td>2018-05-17</td>
<td>通信費</td>
<td>現金</td>
<td>葛飾郵便局</td>
<td>レターパックライト</td>
<td>360</td>
<td><input type="checkbox" name="issued" value="1" checked / ></td>
</tr>
<tr>
<td>2018-05-17</td>
<td>旅費交通費</td>
<td>現金</td>
<td>公共交通機関</td>
<td>四ツ木&lt;-&gt;浅草 @328x2</td>
<td>656</td>
<td><input type="checkbox" name="issued" value="1" checked / ></td>
</tr>
</tbody>
</table>


課題2: MySQLのスキーマを作成

同僚にWebページを見せたら、『この感じで、データが入力できれば、、、』という話なりました。つぎに、データベース作成に入ります。それぞれの経費を1レコードするテーブルを考えてMySQLのスキーマを作ります。

タグ内の要素が、MySQLでのテーブル定義となります。また

タグ内の要素がレコードとなります。

手順1: テーブル名を決める。

『経費のメモ』というアプリのテーブルなので、『expenses_memo』にします。

手順2: テキストエディタを使って、HTMLのテーブルをカンマ切りテキスト化する。

スクリーンショット 2018-05-17 12.00.01.png


テーブルデータ

日付,借方科目,貸方科目,相手先,摘要,出金,起票

2018-05-17,旅費交通費,現金,公共交通機関,新小岩<->新宿 @302x2,604,√
2018-05-17,通信費,現金,葛飾郵便局,レターバックライト,360,√
2018-05-17,旅費交通費,現金,公共交通機関,四ツ木<->浅草 @302x2,656,√

手順3: ヘッダデータ部分を英単語にする。


ヘッダデータ(日本語)

日付,借方科目,貸方科目,相手先,摘要,出金,起票



ヘッダデータ(英単語)

date,debit,credit,destination,summary,withdraw,issued


手順4: PRIMARY KEYとして一意なデータを入れるid列を追加する。


id列を追加

id,date,debit,credit,destination,summary,withdraw,issued

1,2018-05-17,旅費交通費,現金,公共交通機関,新小岩<->新宿 @302x2,604,√
2,2018-05-17,通信費,現金,葛飾郵便局,レターバックライト,360,√
3,2018-05-17,旅費交通費,現金,公共交通機関,四ツ木<->浅草 @302x2,656,√

手順5: ヘッダとデータを分離する


ヘッダ

id,date,debit,credit,destination,summary,withdraw,issued



データ

1,2018-05-17,旅費交通費,現金,公共交通機関,新小岩<->新宿 @302x2,604,√

2,2018-05-17,通信費,現金,葛飾郵便局,レターバックライト,360,√
3,2018-05-17,旅費交通費,現金,公共交通機関,四ツ木<->浅草 @302x2,656,√

手順6: ヘッダをカンマで改行する。(issuedのあとにもカンマを入れる)

id,

date,
debit,
credit,
destination,
summary,
withdraw,
issued,

手順7: ヘッダ(列名)あとに半角スペースを入れて、列のデータ型を入力する。

id           INT(11),

date DATE,
debit VARCHAR(10),
credit VARCHAR(10) ,
destination VARCHAR(20),
summary VARCHAR(20) ,
withdraw NUMERIC(8,0),
issued CHAR(1),

手順8: idにNOT NULLとAUTO_INCREMENTを追加してPRIMARYキーにする。

id           INT(11) NOT NULL AUTO_INCREMENT,

date DATE,
debit VARCHAR(10),
credit VARCHAR(10) ,
destination VARCHAR(20),
summary VARCHAR(20) ,
withdraw NUMERIC(8,0),
issued CHAR(1),
PRIMARY KEY (id)

手順9: ここまで列の定義ができたので、create文を追加してSQLにする。

CREATE TABLE expenses_memo (

id INT(11) NOT NULL AUTO_INCREMENT,
date DATE,
debit VARCHAR(10),
credit VARCHAR(10) ,
destination VARCHAR(20),
summary VARCHAR(20) ,
withdraw NUMERIC(8,0),
issued CHAR(1),
PRIMARY KEY (id)
);

手順10: INSERT文でデータを追加する。(id列は、AUTO INCREMENTなので、挿入しなくてもナンバリングされる。)

INSERT INTO expenses_memo(date,debit,credit,destination,summary,withdraw,issued) VALUES ('2018-05-17','旅費交通費','現金','公共交通機関','新小岩<->新宿 @302x2',604,'1');

INSERT INTO expenses_memo(date,debit,credit,destination,summary,withdraw,issued) VALUES ('2018-05-17','通信費','現金','葛飾郵便局','レターバックライト',360,'1');
INSERT INTO expenses_memo(date,debit,credit,destination,summary,withdraw,issued) VALUES ('2018-05-17','旅費交通費','現金','公共交通機関','四ツ木<->浅草 @302x2',656,'1');


課題3: SQL文のコマンド入力

作成したSQL文を使って、データベースにテーブルを作成します。シェルを使ってコマンドを入力します。

手順1: シェルからサーバにアクセスする。


command

$ ssh developer@192.168.56.101

[password]

$ mysql -u root -p test_db
[password]


手順2: tableを作成する。


作成

CREATE TABLE expenses_memo (

id INT(11) NOT NULL AUTO_INCREMENT,
date DATE,
debit VARCHAR(10),
credit VARCHAR(10) ,
destination VARCHAR(20),
summary VARCHAR(20) ,
withdraw NUMERIC(8,0),
issued CHAR(1),
PRIMARY KEY (id)
);


確認

describe expenses_memo;


手順3: データ追加する。


追加

INSERT INTO expenses_memo(date,debit,credit,destination,summary,withdraw,issued) VALUES ('2018-05-17','旅費交通費','現金','公共交通機関','新小岩<->新宿 @302x2',604,'1');

INSERT INTO expenses_memo(date,debit,credit,destination,summary,withdraw,issued) VALUES ('2018-05-17','通信費','現金','葛飾郵便局','レターバックライト',360,'1');
INSERT INTO expenses_memo(date,debit,credit,destination,summary,withdraw,issued) VALUES ('2018-05-17','旅費交通費','現金','公共交通機関','四ツ木<->浅草 @302x2',656,'1');


確認

select * from expenses_memo;



課題4: INTER-Mediatorを使ってWebアプリを作成

ここまで、データベースの準備ができました。INTER-Mediatorフレームワークを使って、データベースと連動するWebアプリを作成します。

INTER-Mediatorフレームワークは、データベース、定義ファイル、ページファイルが必要です。定義ファイルとは、PHPで記述したKEYとVALUEをセットにした設定ファイルです。ページファイルは、HTML5で記述します。タグの属性にINTER-Mediator特有の設定を行うことで、データベースの情報を表示させられます。

はじめてINTER-Mediator体験される方は、解説ムービーをみましょう。

手順1:定義ファイル(def02.php)を作成する。


入力項目

name: expenses_memo

key: id

db-class: PDO
dsn: mysql:host=localhost;dbname=test_db;charset=utf8
user: web
password: password
Debug: false


スクリーンショット 2018-07-10 14.00.28.png

手順2:page01.htmlをpage02.htmlへコピーし、定義ファイルを変更する。


編集

編集前: <script type="text/javascript" src="def01.php"></script>

編集後: <script type="text/javascript" src="def02.php"></script>

手順3:htmlを編集する


  • 繰り返しは1つにする

  • <input>にすると編集可能

  • data-imで関連付け

  • 編集方法

    編集前: <td>2018-05-17</td>
    
    編集後: <td><input type="text" data-im="expenses_memo@date"/></td>



    <tbody>の間を差し替え

    <tbody>
    
    <tr>
    <td><input type="text" data-im="expenses_memo@date"/></td>
    <td><input type="text" data-im="expenses_memo@debit"/></td>
    <td><input type="text" data-im="expenses_memo@credit"/></td>
    <td><input type="text" data-im="expenses_memo@destination"/></td>
    <td><input type="text" data-im="expenses_memo@summary"/></td>
    <td><input type="text" data-im="expenses_memo@withdraw"/></td>
    <td><input type="checkbox" data-im="expenses_memo@issued" value="1"/></td>
    </tr>
    </tbody>


    スクリーンショット 2018-07-10 15.06.29.png

    課題5:追加(insert)、削除(delete)を追加する。ナビゲーションも追加する。

    手順1:定義ファイル(def02.php)を編集する。


    入力項目

    repeat-control: confirm-insert confirm-delete
    

    手順2:HTMLファイル(page02.html)を編集して、tableに列を追加する。

    <table>
    
    <thead>
    <tr>
    <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="expenses_memo@date"/></td>
    <td><input type="text" data-im="expenses_memo@debit"/></td>
    <td><input type="text" data-im="expenses_memo@credit"/></td>
    <td><input type="text" data-im="expenses_memo@destination"/></td>
    <td><input type="text" data-im="expenses_memo@summary"/></td>
    <td><input type="text" data-im="expenses_memo@withdraw"/></td>
    <td><input type="checkbox" data-im="expenses_memo@issued" value="1"/></td>
    <td></td>
    </tr>
    </tbody>
    </table>

    スクリーンショット 2018-07-10 15.19.51.png

    手順3:ナビゲーションを追加する為、定義ファイル(def02.php)を編集する。


    入力項目

    paging: true
    
    records: 10
    maxrecords: 100

    手順4:ナビゲーションを追加する為、HTMLファイル(page02.html)の<body>直下に次を追加する。

    <body>
    
    <div id="IM_NAVIGATOR"></div>

    スクリーンショット 2018-07-10 15.39.26.png