LoginSignup
3
1

More than 5 years have passed since last update.

@motofumi(飯島 基文)

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

Last updated at Posted at 2018-05-17

はじめに

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

シナリオ

背景

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

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

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

ある日、外回り営業マンの同僚が、交通費など、１日に使った『経費メモ』をとっていることを知りました。そのメモから経理に提出する『支払伝票』を作成しているそうです。使った当日に経費精算できる場合もあれば、数日たまる場合もあり、メモを無くしたり、いくら経費を精算したかわからなく場合もあるそうです。メモを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

3
1
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
3
1