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

1. NTER-Mediator: エンドユーザーが保守可能な Webアプリを開発できるフレームワーク June 12, 2014 2014年度第1回ＳＥ勉強会フリーランスエンジニア電気通信大学大学院新居雅行 - nii@msyk.net 1 14年6月13日金曜日

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

3. Agenda 論文採録実績（ソフトウェア論文） • 新居雅行，顕志，石川冬樹；エンドユーザーによる保守作業を可能にするWebアプリケーションフレームワーク；コンピュータソフトウェア，pp.60-74，Vol. 31 No. 1 (2014) 開発フレームワークINTER-Mediatorの概要フレームワークの動作上での特徴 INTER-Mediatorでの開発と保守 INTER-Mediatorの利用実績と今後の開発計画 3 14年6月13日金曜日

4. 開発フレームワーク INTER-Mediatorの概要背景とモチベーション問題を解決する手法開発において作成が必要な2つのファイル 4 14年6月13日金曜日

5. 開発フレームワークの背景 Webアプリケーション • Webブラウザをクライアントとして，Webサーバでの情報共有を中心としたアプリケーション • 一般には，動的なWebページを生成する • 業務系のWebアプリケーションは，一般にはリレーショナルデータベースを用いて情報の保存を行う Webフレームワーク • Webアプリケーションを開発するためのソフトウエア • ライブラリ的なものから，継承可能なクラス群を持つものまで • 本来のフレームワークの意味を超えて，アプリケーション開発のサポートが可能なソフトウエアを「フレームワーク」と呼ぶ 5 14年6月13日金曜日

6. モチベーション Webアプリケーションによるシステム開発の現状 • サーバサイドのMVCフレームワークが発展し，大規模なシステム構築が可能となる • 手続き的なプログラミングをチームで行う仕組みが発達システム開発現場での問題点 • 実装からメンテナンスまで，手続き的なプログラミングが必要なため，開発の多くの部分を開発会社に依頼する必要が発生する • 予算規模の少ない組織では，十分なメンテナンスが行われない可能制があり，システム化のメリットを享受できない問題点の克服 • エンドユーザが開発やメンテナンスに参画することで，予算規模の少ない組織でのシステム開発やメンテナンスを推進できないか？ 6 14年6月13日金曜日

7. 開発フレームワークの方向性宣言的な記述でWebアプリケーションを構築できる • HTMLへの属性への記述の追加と，データベースアクセス定義で，アプリケーションを構築できるプログラマ以外も開発やメンテナンスに参画できる • エンドユーザや，Webデザイナも開発に参画できる • カットオフまでは，分析や実装でソフトウエアエンジニアでなければできないことがある • 一方，メンテナンスタスクでは，一定範囲であれば，宣言的な記述で修正することが可能であるモダンなWebアプリケーション • AJAXをベースにした使い勝手の良いアプリケーションを可能にする 7 14年6月13日金曜日

8. 定義ファイル実体はPHPの連想配列 • 使用するテーブルや検索条件，リレーションシップ定義などを記述 • Webアプリケーションによるエディタを開発済み <?php require_once('../../INTER-Mediator.php'); IM_Entry( array( array( 'name' => 'postalcode', 'records' => 10, 'paging' => true, ), ), null, array('db-class' => 'PDO'), false ); コンテキスト name: postalcode records: 10 paging: true 以後は以下のように記述する定義ファイルエディタ 8 14年6月13日金曜日

9. ページファイル合成するページの 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 14年6月13日金曜日

10. フレームワークの動作上での特徴要素とフィールドとのバインディングユーザの編集結果を更新する仕組み複数のレコードを表示するための繰り返しその他の特徴的な動作 10 14年6月13日金曜日

11. バインディングの実装 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: invoice key: invoiceid 定義ファイルでの記述作成するファイルへの記述内容 14年6月13日金曜日

12. 編集結果からデータベースへの更新 12 ユーザがテキストフィールドを修正 2014-5-21 16:59発行日：初期値： 2014-5-22 14:32 ? データベース側で変更があるかをチェック変更がなければデータベースを更新現在の値： 2014-5-21 16:59 データベースコントローラーで更新を受け付ける更新処理を呼び出せるHTMLの構成一般的なサーバ稼働のフレームワークの場合データ修正が可能なモデルにするリクエストに応じてモデルにアクセスしてフィールドを変更できるようにするページ上にある同一データの別フィールド表示の更新 INTER-Mediatorの場合同一データとバインドした他の要素に自動的に反映様々な機能をクラス内に実装する必要がある要素へのバインディングの設定のみで機能 14年6月13日金曜日

13. 繰り返しの実装(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 14年6月13日金曜日

14. 繰り返しの実装(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 14年6月13日金曜日

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

16. INTER-Mediatorでの開発と保守 INTER-Mediatorを使った場合の開発プロセス保守作業の分類 INTER-Mediatorでの保守作業の実際 16 14年6月13日金曜日

17. INTER-Mediatorを使った場合の開発プロセス業務分析設計 UXデザインスキーマ定義定義ファイルの作成要求定義ページファイルの作成プログラム開発テストメンテナンス開発プロセス INTER-Mediatorと通常の開発では大きな違いはない宣言的な記述が中心通常の開発では手続的プログラミングが主体 17 14年6月13日金曜日

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

19. 19 一般的なサーバベースで稼働するフレームワークによるWebアプリケーション INTER-Mediatorで開発したWebアプリケーションクライアントページファイル HTML 定義ファイル (PHPでの項目リスト) データベースフレームワークテンプレート (View) PHP コントローラ PHP モデル PHP クライアント INTER-Mediator データベース INTER-Mediator ‘ﬁeld’ => ‘beforeTax’, ‘expression’ => ‘Round(total / 1.08)’ <span data-im=“invoice@befereTax”> </span> 1.モデルにプロパティを定義 2.計算式の設定 3.計算結果のビューへの伝達 4.ビューへの要素の追加 5.計算結果を要素に表示 1.モデルにプロパティを定義 2.計算式の設定 3.計算結果のビューへの伝達 4.ビューへの要素の追加 5.計算結果を要素に表示手続き的なプログラミングが必要宣言的な記述の追加だけで可能メンテナンス作業の比較 14年6月13日金曜日

20. メンテナンス作業の分類概要宣言的な記述でできる作業例宣言的な記述だけではできない例 1 ページ要素 •文字の色や罫線などスタイルを変更 •要素を表示する順序を変更 •フィールドを新たに追加表示 •計算結果を表示するフィールドを追加 •現実にはスキーマ変更も伴うような改変 •UI要素以外に応答させるなど，イベントへの特別な対応 2 データベース要求 •レコード取得のための検索や並べ替え条件の変更 •要求の動的な変更 •副問い合わせを含む要求 3 単一フィールド応答 •小数以下の桁数を2桁から3桁に増加 •一定の文字列を前後に追加する •未サポートの変換処理(単位変換処理など) 4 クライアントスクリプト •特別な処理を行うボタンの設置 •未サポートのJavaScriptライブラリの利用 5 データベース応答 •データベースだけで実現できないような集計処理 6 スキーマ変更 •テーブルやフィールド，ビューを新たに作成する * 新規ページ追加 •スクラッチから作成する •既存ページを複製後，1∼6の改変をする •スクラッチから作成する •既存ページを複製後，1∼6の改変をする 20 14年6月13日金曜日

21. 開発と保守に関するまとめ開発に関して • 分析とスキーマ定義のように，エンジニアリングの知識が必要な作業があり，全工程をエンドユーザーが行うのは難しい保守に関して • 一定の範囲内の保守作業は宣言的な記述の修正や追加で可能 • INTER-Mediatorは宣言的な記述で開発可能な点を重視しており，エンドユーザーによる保守の可能性を高める 21 14年6月13日金曜日

22. INTER-Mediatorの利用実績 22 14年6月13日金曜日

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

24. ふち無しはがき印刷適用業務年賀状や書中見舞い等のオンデマンド印刷．官製はがきへのふち無し印刷対応目的顧客の発注それぞれに対する進管理を行う．内部の処理はFileMakerで行う一方，顧客はWebアクセスが要求される採用理由レコード単位のアクセス権を含む認証・認可の仕組みがあり，ファイルのアップロードやダウンロードに関してもサポートしている 24 14年6月13日金曜日

25. ふち無しはがき印刷適用業務年賀状や書中見舞い等のオンデマンド印刷．官製はがきへのふち無し印刷対応目的顧客の発注それぞれに対する進管理を行う．内部の処理はFileMakerで行う一方，顧客はWebアクセスが要求される採用理由レコード単位のアクセス権を含む認証・認可の仕組みがあり，ファイルのアップロードやダウンロードに関してもサポートしている 24 メンテナンスの例：領収書の印刷ページの追加このページを複製してHTMLの調整をした 14年6月13日金曜日

26. FMPress（開発：株式会社エミック）適用業務 FileMakerデータベースを変換してWeb共有目的 FileMaker Serverの標準機能とは別に，ホスティングサービス会社が自社顧客向けに提供採用理由制約の多い標準のWeb公開機能ではなく，カスタマイズを視野に入れた現実的な Web公開手法として顧客に提供 25 14年6月13日金曜日

27. 他のフレームワークとの統合 PHP系のフレームワークとの統合実績がある • INTER-MediatorのサーバサイドはPHPで記述されているため • コントローラとモデルを利用し，ビュー構築部分にINTER-Mediatorを統合している CakePHP • IMCakeとしてレポジトリで公開中 • FMPressの開発者が手がけている CodeIgniter • 開発者がブログに掲載 Yii • 開発者がブログに掲載 • Webアプリとして使えるオープンソースの簡易レジスタシステムの「naha_regi」を開発する基盤となっている 26 14年6月13日金曜日

28. 今後の展望とまとめ 27 14年6月13日金曜日

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

30. 今後の研究計画 INTER-Mediatorの開発に関して • 宣言的な記述で開発可能な範囲をさらに広げる • マルチクライアント状況でのリアルタイム更新を手続き的なプログラミングを必要とせずに実現する • プラクティスを中心としたドキュメンテーションの充実利用者評価に関して • Webデザイナを中心に行った評価実験（学習と試験）に関しての論文を投稿 • 開発に使用しているユーザへの調査（インタビュー） 29 14年6月13日金曜日

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

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

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

Recommended

More Related Content

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

Similar to トップエスイー勉強会2014第1回-INTER-Mediator(17)

More from Masayuki Nii

More from Masayuki Nii(20)

Recently uploaded

Recently uploaded(8)

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