トップエスイー勉強会2014第1回-INTER-Mediator
•
2 likes•1,375 views
トップエスイー勉強会（2014/6/12）で、INTER-Mediatorについて発表しました。
Recommended
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)
トップエスイー勉強会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日金曜日
- 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日金曜日
- 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 ‘field’ => ‘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日金曜日
- 23. 利用実績について 想定した利用状況 • 中小企業や組織内で使う，情報共有を目的とした利用 実際の利用状況 • ホスティングサービス両者向けFileMakerデータベース変換 • サーバアプリケーションとして稼働するレジスタシステム • PHPのフレームワーク，CakePHP，CodeIgniter，Yiiとの統合を行 いビュー構築部分にINTER-Mediatorを利用 • 看護師の勤務割当表の作成システム • オンデマンド印刷の受注および進行管理 • ISO認証事業における会員向け情報提供システム • 海外出張申請承認システム など 23 14年6月13日金曜日
- 27. 他のフレームワークとの統合 PHP系のフレームワークとの統合実績がある • INTER-MediatorのサーバサイドはPHPで記述されているため • コントローラとモデルを利用し，ビュー構築部分にINTER-Mediatorを統 合している CakePHP • IMCakeとしてレポジトリで公開中 • FMPressの開発者が手がけている CodeIgniter • 開発者がブログに掲載 Yii • 開発者がブログに掲載 • Webアプリとして使えるオープンソースの簡易レジスタシステムの 「naha_regi」を開発する基盤となっている 26 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日金曜日