トップエスイー勉強会2014第1回-INTER-Mediator

NTER-Mediator:エンドユーザーが保守可能な

Webアプリを開発できるフレームワークJune 12, 2014

2014年度第1回ＳＥ勉強会

フリーランスエンジニア電気通信大学大学院

新居雅行 - [email protected]

14年6月13日金曜日

自己紹介

新居雅行（にいまさゆき）- [email protected]• 2008年よりフリーエンジニアとしてシステム開発を行う• FileMaker，iOS，Webでの業務系システムが主要なフィールド2011年よりトップエスイー第6期生• 1年半コースで，2012年9月に修了• 修了制作は，鄭先生の指導でパターンに関するテーマ2013年より電気通信大学大学院へ進学• 独自に開発したWebアプリケーションフレームワークに基づき，「システム開発型」での博士取得を目指している

2


mailto:[email protected]

mailto:[email protected]

Agenda

論文採録実績（ソフトウェア論文）• 新居雅行，鄭顕志，石川冬樹；エンドユーザーによる保守作業を可能にするWebアプリケーションフレームワーク；コンピュータソフトウェア，pp.60-74，Vol. 31 No. 1 (2014)

開発フレームワークINTER-Mediatorの概要フレームワークの動作上での特徴INTER-Mediatorでの開発と保守INTER-Mediatorの利用実績と今後の開発計画

3


開発フレームワークINTER-Mediatorの概要

背景とモチベーション問題を解決する手法

開発において作成が必要な2つのファイル

4


開発フレームワークの背景

Webアプリケーション• Webブラウザをクライアントとして，Webサーバでの情報共有を中心としたアプリケーション• 一般には，動的なWebページを生成する• 業務系のWebアプリケーションは，一般にはリレーショナルデータベースを用いて情報の保存を行う

Webフレームワーク• Webアプリケーションを開発するためのソフトウエア• ライブラリ的なものから，継承可能なクラス群を持つものまで• 本来のフレームワークの意味を超えて，アプリケーション開発のサポートが可能なソフトウエアを「フレームワーク」と呼ぶ

5


モチベーション

Webアプリケーションによるシステム開発の現状• サーバサイドのMVCフレームワークが発展し，大規模なシステム構築が可能となる• 手続き的なプログラミングをチームで行う仕組みが発達

システム開発現場での問題点• 実装からメンテナンスまで，手続き的なプログラミングが必要なため，開発の多くの部分を開発会社に依頼する必要が発生する• 予算規模の少ない組織では，十分なメンテナンスが行われない可能制があり，システム化のメリットを享受できない

問題点の克服• エンドユーザが開発やメンテナンスに参画することで，予算規模の少ない組織でのシステム開発やメンテナンスを推進できないか？

6


開発フレームワークの方向性

宣言的な記述でWebアプリケーションを構築できる• HTMLへの属性への記述の追加と，データベースアクセス定義で，アプリケーションを構築できる

プログラマ以外も開発やメンテナンスに参画できる• エンドユーザや，Webデザイナも開発に参画できる• カットオフまでは，分析や実装でソフトウエアエンジニアでなければできないことがある• 一方，メンテナンスタスクでは，一定範囲であれば，宣言的な記述で修正することが可能である

モダンなWebアプリケーション• AJAXをベースにした使い勝手の良いアプリケーションを可能にする

7


定義ファイル実体はPHPの連想配列• 使用するテーブルや検索条件，リレーションシップ定義などを記述• Webアプリケーションによるエディタを開発済み

<?phprequire_once('../../INTER-Mediator.php');

IM_Entry( array( array( 'name' => 'postalcode', 'records' => 10, 'paging' => true, ), ), null, array('db-class' => 'PDO'), false);

コンテキスト

name: postalcoderecords: 10paging: true

以後は以下のように記述する

定義ファイルエディタ8


ページファイル

合成するページのHTMLによるテンプレート

<!DOCTYPE html><html><head> <title>INTER-Mediator - Sample</title> <script type="text/javascript" src="search_def.php"> </script></head><body onload="INTERMediator.construct()"><div id="IM_NAVIGATOR"></div><table border="1" id="resultTable"> <thead>...</thead> <tbody> <tr> <td><div data-im="postalcode@f3"></div></td> <td><div data-im="postalcode@f7"></div></td> <td><div data-im="postalcode@f8"></div></td> <td><div data-im="postalcode@f9"></div></td> </tr> </tbody></table></body></html>

1.定義ファイルの読み込み

4.ページ合成の開始処理

2.要素にフィールドとのバインドを指定

3.ページネーションの生成場所

合成したページ

9


フレームワークの動作上での特徴

要素とフィールドとのバインディングユーザの編集結果を更新する仕組み

複数のレコードを表示するための繰り返しその他の特徴的な動作

10


バインディングの実装

11

データベース

<input type=“text” data-im=“invoice@issueddt” />

data-im属性を元にデータベースアクセス

クエリー結果をタグにマージ

ページファイルでの記述

<input type=“text” data-im=“invoice@issueddt”value=“2014-5-22 14:32” />

2014-5-22 14:32発行日：

更新のための情報を記憶

発行日：

レコード：invoiceid=4332フィールド：issueddt初期値：2014-5-22 14:32

クエリー結果{ invoiceid: 4332, customerid: 3456,issueddt: 2014-5-22 14:32,total: 45230 }

invoiceテーブルにアクセス

name: invoicekey: invoiceid

定義ファイルでの記述作成するファイルへの記述内容


編集結果からデータベースへの更新

12

ユーザがテキストフィールドを修正

2014-5-21 16:59発行日：

初期値：2014-5-22 14:32 ?データベース側で変更があるかをチェック

変更がなければデータベースを更新

現在の値：2014-5-21 16:59

データベース

コントローラーで更新を受け付ける更新処理を呼び出せるHTMLの構成

一般的なサーバ稼働のフレームワークの場合データ修正が可能なモデルにする

リクエストに応じてモデルにアクセスしてフィールドを変更できるようにする

ページ上にある同一データの別フィールド表示の更新

INTER-Mediatorの場合同一データとバインドした他の要素に自動的に反映

様々な機能をクラス内に実装する必要がある

要素へのバインディングの設定のみで機能


繰り返しの実装(1)

<table> <tbody>　←エンクロージャー <tr>　←リピーター <td> <span data-im=“invoice@issueddt”> </span> </td> </tr> </tbody></table>

data-im属性の存在からバインディングが必要と判断

上位ノードにさかのぼり、リピーターとエンクロージャーを識別する

<table> <tbody>　←エンクロージャー <tr>　←リピーター <td> <span data-im=“invoice@issueddt”> </span> </td> </tr> </tbody></table>

data-im属性を元にデータベースアクセス

ページファイルの内容

クエリー結果[{ invoiceid: 4332, ssueddt: 2014-5-22 14:32, total: 45230 },{ invoiceid: 4333, ssueddt: 2014-5-22 14:56, total: 2301 },….]

複数レコードが得られた

13


繰り返しの実装(2)クエリー結果[{ invoiceid: 4332, ssueddt: 2014-5-22 14:32, total: 45230 },{ invoiceid: 4333, ssueddt: 2014-5-22 14:56, total: 2301 },….]

リピーターを削除して別途保存しておく

<tr><td><span data-im=“invoice@issueddt”></span></td></tr>

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

リピーターを複製し、1レコード分をマージ

マージしたリピーターをエンクロージャーの下位ノードとして追加

<tr><td><span data-im=“invoice@issueddt”>2014-5-22 14:32</span></td></tr>

<table><tbody><tr><td><span data-im=“invoice@issueddt”>2014-5-22 14:32</span></td></tr></tbody></table>

レコードの数だけ繰り返す

<table><tbody><tr><td><span data-im=“invoice@issueddt”>2014-5-22 14:32</span></td></tr><tr><td><span data-im=“invoice@issueddt”>2014-5-22 14:32</span></td></tr></tbody></table>

14


その他の特徴的な動作リレーションシップに基づく関連レコードの展開データベースアクセス時の動作定義• 検索条件や並べ替えの適用• フィールド単位での書式設定と逆変換要素やその属性へのアクセス• 要素の内容だけでなく，属性へのバインディングも可能計算プロパティの利用ローカルコンテキスト• ページローカルに利用できるキーバリューストア認証・認可のサポートセキュリティへの配慮，CSP対応

15


INTER-Mediatorでの開発と保守

INTER-Mediatorを使った場合の開発プロセス保守作業の分類

INTER-Mediatorでの保守作業の実際

16


INTER-Mediatorを使った場合の開発プロセス

業務分析設計

UXデザイン

スキーマ定義

定義ファイルの作成

要求定義ページファイルの作成

プログラム開発

テストメンテナンス

開発プロセス

INTER-Mediatorと通常の開発では大きな違いはない

宣言的な記述が中心

通常の開発では手続的プログラミングが主体

17


メンテナンス作業に見る他のフレームワークとの違い

想定するメンテナンス作業• 伝票には税込み合計が表示されている．• 税抜き合計金額も並記したくなった．一般的なサーバベースで稼働するフレームワーク• MVCの各要素を手続き的なプログラミングを行って修正INTER-Mediatorの場合• HTMLや設定ファイルでの宣言的な記述の変更で可能

18


19

一般的なサーバベースで稼働するフレームワークによるWebアプリケーション

INTER-Mediatorで開発したWebアプリケーション

クライアント

ページファイルHTML 定義ファイル

(PHPでの項目リスト)

データベース

フレームワーク

テンプレート(View)PHP

コントローラPHP

モデルPHP

クライアント

INTER-Mediator

データベース

INTER-Mediator

‘field’ => ‘beforeTax’,‘expression’ => ‘Round(total / 1.08)’

<span data-im=“invoice@befereTax”></span>

1.モデルにプロパティを定義

2.計算式の設定

3.計算結果のビューへの伝達

4.ビューへの要素の追加

5.計算結果を要素に表示

1.モデルにプロパティを定義

2.計算式の設定

3.計算結果のビューへの伝達

4.ビューへの要素の追加

5.計算結果を要素に表示

手続き的なプログラミングが必要

宣言的な記述の追加だけで可能

メンテナンス作業の比較


メンテナンス作業の分類概要宣言的な記述でできる作業例宣言的な記述だけではできない例

1 ページ要素•文字の色や罫線などスタイルを変更•要素を表示する順序を変更•フィールドを新たに追加表示•計算結果を表示するフィールドを追加

•現実にはスキーマ変更も伴うような改変•UI要素以外に応答させるなど，イベントへの特別な対応

2 データベース要求

•レコード取得のための検索や並べ替え条件の変更

•要求の動的な変更•副問い合わせを含む要求

3 単一フィールド応答•小数以下の桁数を2桁から3桁に増加•一定の文字列を前後に追加する

•未サポートの変換処理(単位変換処理など)

4 クライアントスクリプト

•特別な処理を行うボタンの設置•未サポートのJavaScriptライブラリの利用

5 データベース応答

•データベースだけで実現できないような集計処理

6 スキーマ変更 •テーブルやフィールド，ビューを新たに作成する

* 新規ページ追加 •スクラッチから作成する•既存ページを複製後，1～6の改変をする•スクラッチから作成する•既存ページを複製後，1～6の改変をする

20


開発と保守に関するまとめ

開発に関して• 分析とスキーマ定義のように，エンジニアリングの知識が必要な作業があり，全工程をエンドユーザーが行うのは難しい

保守に関して• 一定の範囲内の保守作業は宣言的な記述の修正や追加で可能• INTER-Mediatorは宣言的な記述で開発可能な点を重視しており，エンドユーザーによる保守の可能性を高める

21


INTER-Mediatorの利用実績

22


利用実績について

想定した利用状況• 中小企業や組織内で使う，情報共有を目的とした利用実際の利用状況• ホスティングサービス両者向けFileMakerデータベース変換• サーバアプリケーションとして稼働するレジスタシステム• PHPのフレームワーク，CakePHP，CodeIgniter，Yiiとの統合を行いビュー構築部分にINTER-Mediatorを利用• 看護師の勤務割当表の作成システム• オンデマンド印刷の受注および進行管理• ISO認証事業における会員向け情報提供システム• 海外出張申請承認システム　など

23


ふち無しはがき印刷

適用業務年賀状や書中見舞い等のオンデマンド印刷．官製はがきへのふち無し印刷対応

目的

顧客の発注それぞれに対する進捗管理を行う．内部の処理はFileMakerで行う一方，顧客はWebアクセスが要求される

採用理由

レコード単位のアクセス権を含む認証・認可の仕組みがあり，ファイルのアップロードやダウンロードに関してもサポートしている

24


ふち無しはがき印刷

適用業務年賀状や書中見舞い等のオンデマンド印刷．官製はがきへのふち無し印刷対応

目的

顧客の発注それぞれに対する進捗管理を行う．内部の処理はFileMakerで行う一方，顧客はWebアクセスが要求される

採用理由

レコード単位のアクセス権を含む認証・認可の仕組みがあり，ファイルのアップロードやダウンロードに関してもサポートしている

24

メンテナンスの例：領収書の印刷ページの追加

このページを複製してHTMLの調整をした14年6月13日金曜日

FMPress（開発：株式会社エミック）

適用業務 FileMakerデータベースを変換してWeb共有

目的

FileMaker Serverの標準機能とは別に，ホスティングサービス会社が自社顧客向けに提供

採用理由

制約の多い標準のWeb公開機能ではなく，カスタマイズを視野に入れた現実的なWeb公開手法として顧客に提供

25


他のフレームワークとの統合PHP系のフレームワークとの統合実績がある• INTER-MediatorのサーバサイドはPHPで記述されているため• コントローラとモデルを利用し，ビュー構築部分にINTER-Mediatorを統合している

CakePHP• IMCakeとしてレポジトリで公開中• FMPressの開発者が手がけているCodeIgniter• 開発者がブログに掲載Yii• 開発者がブログに掲載• Webアプリとして使えるオープンソースの簡易レジスタシステムの「naha_regi」を開発する基盤となっている

26


今後の展望とまとめ

27


関連研究

宣言的な記述でのWebアプリケーション開発• XFormsDB：XForms，XPath等W3C標準で構築• Visual Studio LightSwitch (Microsoft)フロントエンド向けJavaScriptフレームワーク• AngularJS (Google)，Knockout (Microsoft) が代表的サービス• Kintone (Cybouz)，UnitBase (Just System)• Salesforce.com

28


今後の研究計画

INTER-Mediatorの開発に関して• 宣言的な記述で開発可能な範囲をさらに広げる• マルチクライアント状況でのリアルタイム更新を手続き的なプログラミングを必要とせずに実現する• プラクティスを中心としたドキュメンテーションの充実

利用者評価に関して• Webデザイナを中心に行った評価実験（学習と試験）に関しての論文を投稿• 開発に使用しているユーザへの調査（インタビュー）

29


まとめ

宣言的な記述でデータベース連動のWebアプリケーションを作成可能なフレームワークを開発した繰り返しや更新処理，リレーションシップなどを，宣言的な設定から稼働させる実装に成功した特にメンテナンス作業において，エンドユーザやWebデザイナの参画の機会を増やす事が期待できる

30

http://inter-mediator.org




Technology

トップエスイー勉強会2014第1回-INTER-Mediator