![[Table("authors")]
public class Author {
[Column("au_id"), Required, MaxLength(11), Key]
public string AuthorId { get; set; }
[Column("au_fname"), Required, MaxLength(20)]
public string AuthorFirstName { get; set; }
[Column("au_lname"), Required, MaxLength(40)]
public string AuthorLastName { get; set; }
...
}
public class PubsEntities : DbContext {
protected override void OnConfiguring(DbContextOptionsBuilder options) {
options.UseSqlServer("...(接続文字列)...");
}
public DbSet<Author> Authors { get; set; }
...
}
DAC
EF](https://image.slidesharecdn.com/dev-010web-171221065809/85/DEV-010_-Web-SPA-Web-8-320.jpg)
![public class Sample01Controller : Controller
{
[HttpGet]
public ActionResult ShowAllAuthors()
{
using (PubsEntities pubs = new PubsEntities())
{
ViewData["Authors"] = pubs.Authors.ToList();
}
return View();
}
}
コントローラ
UI](https://image.slidesharecdn.com/dev-010web-171221065809/85/DEV-010_-Web-SPA-Web-9-320.jpg)
![<table class="...">
<thead>...</thead>
<tbody>
@foreach (Author a in (ViewData["Authors"] as List<Author>))
{
<tr>
<td>@a.AuthorId</td>
<td>@a.AuthorFirstName @a.AuthorLastName</td>
<td>@a.Phone</td>
<td>@a.State</td>
...
</tr>
}
</tbody>
</table>
ビュー
UI
サーバで
描画処理](https://image.slidesharecdn.com/dev-010web-171221065809/85/DEV-010_-Web-SPA-Web-10-320.jpg)
![[Table("authors")]
public class Author {
[Column("au_id"), Required, MaxLength(11), Key]
public string AuthorId { get; set; }
[Column("au_fname"), Required, MaxLength(20)]
public string AuthorFirstName { get; set; }
[Column("au_lname"), Required, MaxLength(40)]
public string AuthorLastName { get; set; }
...
}
public class PubsEntities : DbContext {
protected override void OnConfiguring(DbContextOptionsBuilder options) {
options.UseSqlServer("...(接続文字列)...");
}
public DbSet<Author> Authors { get; set; }
...
}
DAC
EF](https://image.slidesharecdn.com/dev-010web-171221065809/85/DEV-010_-Web-SPA-Web-12-320.jpg)
![public class Sample02Controller : Controller
{
[HttpGet]
public List<Author> GetAllAuthors()
{
using (PubsEntities pubs = new PubsEntities())
{
return pubs.Authors.ToList();
}
}
}
Web API
SI
サーバは
データ返信のみ](https://image.slidesharecdn.com/dev-010web-171221065809/85/DEV-010_-Web-SPA-Web-13-320.jpg)
![$(function() {
$("#btnShowAuthors").click(function () {
$.getJSON(
"/Sample04/GetAuthorsByState",
{ state: $("#ddlStates").val() },
function (result) {
$("#grdAuthors").kendoGrid({
rowTemplate: kendo.template($("#rowTemplate").html()),
columns: [
{ field: "AuthorId", title: "著者ID" },
{ field: "AuthorName", title: "著者名" },
{ field: "Phone", title: "電話番号" },
{ field: "State", title: "州" }, ...
],
dataSource: { data: result, pageSize: 10 },
});
});
});
});
書き方が
大きく違う！
.kendoGrid() 命令で
<div> をテーブルに変化](https://image.slidesharecdn.com/dev-010web-171221065809/85/DEV-010_-Web-SPA-Web-29-320.jpg)
![[HttpPost]
public GetRichMessageResult GetRichMessage(string name)
{
return new GetRichMessageResult(...);
}
public class GetRichMessageResult {
public ResultEnum Result { get; set; }
public string Message { get; set; }
public DateTime CurrentDateTime { get; set; }
}](https://image.slidesharecdn.com/dev-010web-171221065809/85/DEV-010_-Web-SPA-Web-56-320.jpg)
![public class UpdateAuthorRequest
{
public string AuthorId { get; set; }
[Required(ErrorMessage = "著者名（名）は必須入力項目です。")]
[RegularExpression(@"^[¥u0020-¥u007e]{1,20}$",
ErrorMessage = "著者名（名）は半角 20 文字以内で指定してください。")]
public string AuthorFirstName { get; set; }
[Required(ErrorMessage = "著者名（姓）は必須入力項目です。")]
[RegularExpression(@"^[¥u0020-¥u007e]{1,40}$",
ErrorMessage = "著者名（姓）は半角 40 文字以内で指定してください。")]
public string AuthorLastName { get; set; }
...
}
AuthorFirstName
AuthorLastName
Phone
ViewModel
クラス
チェック
ロジック](https://image.slidesharecdn.com/dev-010web-171221065809/85/DEV-010_-Web-SPA-Web-62-320.jpg)
![[HttpPost]
public void UpdateAuthor(
UpdateAuthorRequest request)
{
// 送信されてきたデータを再チェック
if (ModelState.IsValid == false)
{
throw new ArgumentException()
}
... データ更新処理 ...
}
単体入力
再チェック
JSON データ
Web API](https://image.slidesharecdn.com/dev-010web-171221065809/85/DEV-010_-Web-SPA-Web-65-320.jpg)
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
- 2. ROOM B
- 7. Web ブラウザ Web サーバ DB サーバ コントローラ ビュー EF DACUI ※ 細かいコードは理解しなくて OK です （本日のサンプルコードは後日配布します）
- 8. [Table("authors")] public class Author { [Column("au_id"), Required, MaxLength(11), Key] public string AuthorId { get; set; } [Column("au_fname"), Required, MaxLength(20)] public string AuthorFirstName { get; set; } [Column("au_lname"), Required, MaxLength(40)] public string AuthorLastName { get; set; } ... } public class PubsEntities : DbContext { protected override void OnConfiguring(DbContextOptionsBuilder options) { options.UseSqlServer("...(接続文字列)..."); } public DbSet<Author> Authors { get; set; } ... } DAC EF
- 9. public class Sample01Controller : Controller { [HttpGet] public ActionResult ShowAllAuthors() { using (PubsEntities pubs = new PubsEntities()) { ViewData["Authors"] = pubs.Authors.ToList(); } return View(); } } コントローラ UI
- 10. <table class="..."> <thead>...</thead> <tbody> @foreach (Author a in (ViewData["Authors"] as List<Author>)) { <tr> <td>@a.AuthorId</td> <td>@a.AuthorFirstName @a.AuthorLastName</td> <td>@a.Phone</td> <td>@a.State</td> ... </tr> } </tbody> </table> ビュー UI サーバで 描画処理
- 11. Web サーバ DB サーバ Web API EF DACSI JavaScriptHTML Web ブラウザ ※ 細かいコードは理解しなくて OK です （本日のサンプルコードは後日配布します） UI
- 12. [Table("authors")] public class Author { [Column("au_id"), Required, MaxLength(11), Key] public string AuthorId { get; set; } [Column("au_fname"), Required, MaxLength(20)] public string AuthorFirstName { get; set; } [Column("au_lname"), Required, MaxLength(40)] public string AuthorLastName { get; set; } ... } public class PubsEntities : DbContext { protected override void OnConfiguring(DbContextOptionsBuilder options) { options.UseSqlServer("...(接続文字列)..."); } public DbSet<Author> Authors { get; set; } ... } DAC EF
- 13. public class Sample02Controller : Controller { [HttpGet] public List<Author> GetAllAuthors() { using (PubsEntities pubs = new PubsEntities()) { return pubs.Authors.ToList(); } } } Web API SI サーバは データ返信のみ
- 14. <script type="text/javascript"> $(function () { var viewModel = { Authors: ko.observableArray() }; ko.applyBindings(viewModel); $.getJSON("/Sample02/GetAllAuthors", null, function (result) { viewModel.Authors(result); }); }); </script> サーバから データ取得 UI JavaScript
- 15. <table id="tblAuthors" class="table ..."> <thead> ... </thead> <tbody data-bind="foreach: Authors"> <tr> <td data-bind="text: AuthorId"></td> <td data-bind="text: AuthorFirstName + ' ' + AuthorLastName"></td> <td data-bind="text: Phone"></td> <td data-bind="text: State"></td> ... </tr> </tbody> </table> UI HTML 描画は ブラウザ側で
- 16. HTML ファイル DB サーバ Web サーバ Web ブラウザ BC DACSI UI ASP.NET Web API EF UI SPA 型 jQuery など データ 返信のみ UI 処理
- 17. 難しい！
- 18. 大きな ギャップ
- 19.
- 20. 1. クライアント側 のライブラリ選択 3. Web API 接続 2. サーバ側の ページ構築
- 21. HTML ファイル DB サーバ Web サーバ Web ブラウザ BC DACSI UI ASP.NET Web API EF UI SPA 型 1. クライアント側 のライブラリ選択 3. Web API 接続 2. サーバ側の ページ構築
- 22. jQuery, Bootstrap knockout.js AngularJS, jQuery React, jQuery jQuery, Kendo UI Professional ユーザアプリ ユーザアプリ ユーザアプリ HTML5, CSS3, JavaScript HTML5, CSS3, JavaScript ユーザアプリ HTML5, CSS3, JavaScript HTML5, CSS3, JavaScript ランタイム フロントエンド ライブラリ ユーザアプリ 互換性 なし 異なる スキル
- 25. <div class="table-responsive"> <table id="tblAuthors" class="table ..."> <thead> ... </thead> <tbody data-bind="foreach: Authors"> <tr> <td data-bind="text: AuthorId"></td> <td data-bind="text: AuthorName"></td> <td data-bind="text: Phone"></td> <td data-bind="text: State"></td> ... </tr> </tbody> </table> </div> テーブルとテンプレートを 用意しておく
- 26. $(function() { var viewModel = { Authors: ko.observableArray() }; ko.applyBindings(viewModel); $("#btnShowAuthors").click(function () { $.getJSON("/Sample03/GetAuthorsByState", { state: $("#ddlStates").val() }, function (result) { viewModel.Authors(result); }); }); ViewModel を介して データバインド
- 28. <div id="grdAuthors" class="k-grid"></div> <script id="rowTemplate" type="text/x-kendo-tmpl"> <tr> <td>#= AuthorId #</td> <td>#= AuthorName #</td> <td>#= Phone #</td> <td>#= State #</td> <td>... </td> </tr> </script>
- 29. $(function() { $("#btnShowAuthors").click(function () { $.getJSON( "/Sample04/GetAuthorsByState", { state: $("#ddlStates").val() }, function (result) { $("#grdAuthors").kendoGrid({ rowTemplate: kendo.template($("#rowTemplate").html()), columns: [ { field: "AuthorId", title: "著者ID" }, { field: "AuthorName", title: "著者名" }, { field: "Phone", title: "電話番号" }, { field: "State", title: "州" }, ... ], dataSource: { data: result, pageSize: 10 }, }); }); }); }); 書き方が 大きく違う！ .kendoGrid() 命令で <div> をテーブルに変化
- 30. jQuery AngularJS jQuery UI Modernizr prototype .js React jQuery Mobile Errorception SASS OOCSS Kendo UI Core QUnit LESS SMACSKendo UI Professional Mocha Type Script knockout .js Bootstrap Jasmine Coffee Script jQuery Validation Semantic UI JSLint Stylus BEM YUI Library Karma Dojo toolkit NPM Reset CSS Wijmo Ignite UI Zino UI Highcharts SlickGrid hammer .js Gulp Grant Yo 多すぎ！ 選ぶのが 難しい！
- 31. 古い仕様の言語を多少でも使い やすくするもの アプリの設計・実装方法を大き く左右するもの UI 部品を多少でも使いやすくす るためのもの 開発作業を容易化するための周 辺ツール ① 言語拡張 ③ 設計・実装方法論、フレ ームワーク ② UI ライブラリ ④ 各種ツール、ユーティリ ティ
- 32. 古い仕様の言語を多少でも使いやすくするもの アプリの設計・実装方法を大きく左右するもの UI 部品を多少でも使いやすくするためのもの 開発作業を容易化するための周辺ツール ① 言語拡張 ③ 設計・実装方法論、フレームワーク ② UI ライブラリ ④ 各種ツール、ユーティリティ DOM 操作、 AJAX 処理 • jQuery • prototype.js 各種フレームワーク • AngularJS • React • knockout.js • backbone.js 低水準 UI ライブラリ • jQuery UI, Mobile • Bootstrap • Kendo UI Core • Semantic UI, etc... ユーティリ ティライブラ リ • Modernizr, etc... CSS 命名規約 • OOCSS • SMACS • BEM 高水準 UI ライブラリ • Kendo UI Pro • highcharts • Wijmo • Ignite UI, etc... CSS プリプロ セッサ • LESS • SASS • Stylus 周辺ツール • NPM • Gulp • Grunt • Bower, etc.. テストツール • Jasmine • JSLint • QUnit • Mocha, etc.. altJS • TypeScript • CoffeeScrip t
- 33. HTML DOM 操作, 通信処理 CSS 基本言語仕様 （ECMAScript） jQuery CSS プリプロセッサ LESS, SASS, Stylus など altJS TypeScript, CoffeeScript など 便利！
- 34. http://getbootstrap.com/examples/theme/ Bootstrap http://demos.telerik.com/kendo-ui/financial/stock-history http://www.highcharts.com/demo Kendo UI Professional Highcharts ボタン、ラベル、 テキストボックスなど グリッド、チャート、 地図など ギャップ 有償製品が 多い
- 35. ベタ実装 抽象化ライブラリ MVx フレームワーク 双方向バインド コンポーネント指向 prototype.js jQuery Backbone.js knockout.js Angular.js 1.0 React.js Angular.js 2.0
- 37. 古い仕様の言語を多少でも使いやすくするもの アプリの設計・実装方法を大きく左右するもの UI 部品を多少でも使いやすくするためのもの 開発作業を容易化するための周辺ツール ① 言語拡張 ③ 設計・実装方法論、フレームワーク ② UI ライブラリ ④ 各種ツール、ユーティリティ DOM 操作、 AJAX 処理 • jQuery • prototype.js 各種フレームワーク • AngularJS • React • knockout.js • backbone.js 低水準 UI ライブラリ • jQuery UI, Mobile • Bootstrap • Kendo UI Core • Semantic UI, etc... ユーティリ ティライブラ リ • Modernizr, etc... CSS 命名規約 • OOCSS • SMACS • BEM 高水準 UI ライブラリ • Kendo UI Pro • highcharts • Wijmo • Ignite UI, etc... CSS プリプロ セッサ • LESS • SASS • Stylus 周辺ツール • NPM • Gulp • Grunt • Bower, etc.. テストツール • Jasmine • JSLint • QUnit • Mocha, etc.. altJS • TypeScript • CoffeeScrip t
- 38. ユーザアプリ ライブラリ A ライブラリ B ライブラリ P ライブラリ Q ライブラリ R ライブラリ X 1.0.0 2.0.0 ver up ver up ver up
- 39. ユーザアプリ SPA 開発 フレームワークBootstrap + knockout.js jQuery JavaScript （ECMAScript）基本言語ランタイム DOM 操作ライブラリ 基盤フレームワーク Angular.js なし（要追加）高水準 UI 部品 なし（要追加） ユーザアプリ ユーザアプリユーザアプリ
- 40. http://demos.telerik.com/kendo-ui/grid/index http://demo.grapecity.com/wijmo/5/Angular /FlexChartIntro/FlexChartIntro/ http://jp.igniteui.com/ http://zinoui.com/charts http://docs.sencha.com/extjs/4.0.7/#!/exam ple http://www.highcharts.com/demo Teleric Kendo UI Professional GrapeCity Wijmo Infragistics Ignite UI Zino UI Sencha Ext JS Highsoft Highcharts
- 41. ① OSS ライブラリ 組み合わせ型開発 ② SPA フレームワーク ライブラリ依存型開発 高水準 UI 部品を 必要とするか？ jQuery TypeScript CoffeeScript prototype.js jQuery UI knockout Bootstrap AngularReact Kendo UI Professional Wijmo Ignite UI Zino UI Sencha Ext JS Highcharts
- 42. ① 言語拡張 ③ 設計・実装 方法論、 フレームワーク ② UI ライブラリ ④ 各種ツール、 ユーティリティ ① OSS ライブラリ 組み合わせ型開発 ② SPA フレームワーク ライブラリ依存型開発
- 43. Web サーバWeb ブラウザ 完全な SPA 型 Web サーバWeb ブラウザ サーバ技術の併用 SPA Web API Web API MVC SPA
- 44. HTML ファイル DB サーバ Web サーバ Web ブラウザ BC DACSI UI ASP.NET Web API EF UI ASP.NET MVC UI 処理は こちらで
- 45.
- 46. 個別のページ CSS （共通） JavaScript ライブラリ（共通） HTML （ヘッダー） HTML （フッター） jQuery CSS （ページ固有） JavaScript ライブラリ（ページ固有） HTML （コンテンツ） JavaScript コード （ページ固有）
- 47. 個別のページ CSS （ページ固有） JavaScript ライブラリ（ページ固有） HTML （コンテンツ） JavaScript コード （ページ固有） *.cshtml個別のページ CSS （ページ固有） JavaScript ライブラリ（ページ固有） HTML （コンテンツ） JavaScript コード （ページ固有） *.cshtml レイアウトページ CSS （共通） CSS （ページ固有） JavaScript ライブラリ（共通） JavaScript ライブラリ（ページ固有） HTML （ヘッダー） HTML （コンテンツ） HTML （フッター） JavaScript コード （ページ固有） _Layout.cshtml jQuery Knockout jQuery Validation 入力フォーム スタイルセット よく使うものを 部品として用意
- 50. <!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-2.1.4.min.js"></script> <script src="bootstrap.min.js"></script> @RenderSection("Libraries", required: false) @RenderSection("Styles", required: false) </head> <body> ... (次ページ) ... </body> </html> 個別ページの差分
- 51. <body> <nav class="navbar ... "> ... (ヘッダー) ... </nav> <div class="contentWrapper"> <div class="container contentBody"> @RenderBody() </div> </div> <footer class="footer"> ... (フッター) ... </footer> @RenderSection("Scripts", required: false) </body> </html> 個別ページの差分 個別ページの差分
- 52. @{ ViewBag.Title = "州による著者一覧表示"; } @section Libraries { @Html.Partial("_ImportLibraryKnockout") } <h4>jQuery + Bootstrap + knockout.js による実装</h4> <table id="tblAuthors" class="table ... "> ... </table> @section Scripts { <script type="text/javascript"> $(function () { ... }; </script> } 個別ページの差分 個別ページの差分 個別ページの差分 個別ページの差分
- 53. DB サーバ Web サーバ Web ブラウザ BC DACSI UI ASP.NET Web API EF単体入力 チェック 単体入力 再チェック
- 54. 商品発注サービス カタログ管理サービス 注文伝票 注文結果伝票 サービス 呼び出し 商品 口コミ GET PUT DELETE GET PUT DELETE CRUD 処理 RESTful 設計 RPC スタイル設計 業務アプリではこちらの方が設計しやすい
- 55. Web サーバクライアント jQuery ASP.NET Web API Enum Date Time JSON シリアル化
- 56. [HttpPost] public GetRichMessageResult GetRichMessage(string name) { return new GetRichMessageResult(...); } public class GetRichMessageResult { public ResultEnum Result { get; set; } public string Message { get; set; } public DateTime CurrentDateTime { get; set; } }
- 57. コンテンツ application/json（JSON形式） 本文 (Body) {"Result": 2, "Message":"Hello World, Nobuyuki", "CurrentDateTime": "2015-10-06T11:09:23.385863+09:00"} public class GetRichMessageResult { public ResultEnum Result { get; set; } public string Message { get; set; } public DateTime CurrentDateTime { get; set; } } 数値型
- 62. public class UpdateAuthorRequest { public string AuthorId { get; set; } [Required(ErrorMessage = "著者名（名）は必須入力項目です。")] [RegularExpression(@"^[¥u0020-¥u007e]{1,20}$", ErrorMessage = "著者名（名）は半角 20 文字以内で指定してください。")] public string AuthorFirstName { get; set; } [Required(ErrorMessage = "著者名（姓）は必須入力項目です。")] [RegularExpression(@"^[¥u0020-¥u007e]{1,40}$", ErrorMessage = "著者名（姓）は半角 40 文字以内で指定してください。")] public string AuthorLastName { get; set; } ... } AuthorFirstName AuthorLastName Phone ViewModel クラス チェック ロジック
- 63. @using (Html.BeginForm("EditAuthor", "Sample07", ...)) { <dl> <dt>著者名（名）</dt> <dd>@Html.TextBoxFor(m => m.AuthorFirstName) @Html.ValidationMessageFor(m => m.AuthorFirstName, "*")</dd> </dl> <dl> <dt>著者姓（姓）</dt> <dd>@Html.TextBoxFor(m => m.AuthorLastName) @Html.ValidationMessageFor(m => m.AuthorLastName, "*")</dd> </dl> ... }
- 64. $("#btnUpdate").click(function () { if ($("#frmInput").valid() == true) { $.post( "/Sample07/UpdateAuthor", { AuthorId: AuthorId, AuthorFirstName: $("#AuthorFirstName").val(), AuthorLastName: $("#AuthorLastName").val(), ... }, function (result) { ... } ); } }); カスタ マイズ
- 65. [HttpPost] public void UpdateAuthor( UpdateAuthorRequest request) { // 送信されてきたデータを再チェック if (ModelState.IsValid == false) { throw new ArgumentException() } ... データ更新処理 ... } 単体入力 再チェック JSON データ Web API
- 66. DB サーバ Web サーバ Web ブラウザ BC DACSI UI ASP.NET Web API EF単体入力 チェック 単体入力 再チェック
- 68. • 論理タグと物理タグの使 い分けなどを理解する • HTML5 は後でよい • 基礎的なコードの書き方 をしっかり理解する • TypeScript は後でよい • jQuery の使い方をしっ かり理解する • 割とよく使うので重要 • クラス設計の基本セオ リーの理解が重要 • Bootstrap で学習する JavaScript (DOM 操作)
- 69. • ランタイムとモデルバインディング機能を理解する • レイアウトページの使い方を理解する • LINQ to EF の書き方を理解する
- 70. • OSS の組み合わせで DB 参照アプリを作ってみる 例) サーバ側 : ASP.NET Web API + Entity Framework クライアント側 : jQuery + Bootstrap + knockout.js • 何らかの商用 SPA フレームワークライブラリを使って 上記と同じアプリを作ってみる
- 71. • AngularJS, ReactJS など を使ってみる • Canvas など HTML5 の 機能の活用を検討する • TypeScript などでライ ブラリを開発する • NPM, Bower, Gulp など で生産性を高める
- 73. 1. クライアント側 のライブラリ選択 3. Web API 接続 2. サーバ側の ページ構築 多彩な 技術重要
- 75. アンケートにご協力ください。 ●アンケートに 上記の Session ID のブレイクアウトセッションに チェックを入れて下さい。 ●アンケートはお帰りの際に、受付でご提出ください。 マイクロソフトスペシャルグッズと引換えさせていただきます。
- 76. ROOM B Ask the Speaker のご案内 ●本セッションの詳細は、EXPO 会場内 『Ask the Speaker』コーナー Room B カウンタにてご説明させて いただきます。是非、お立ち寄りください。 Ask the Speaker EXPO会場MAP