1. ASP.NET シングル ページ
アプリケーション (SPA) 詳説
日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
エバンジェリスト
井上 章 (いのうえ あきら)
http://aka.ms/chack

2. 2
自己紹介
井上 章 (チャック)
日本マイクロソフト株式会社（2008 年 3 月入社）
デベロッパー & プラットフォーム統括本部
テクニカル エバンジェリスト
Blog: aka.ms/chack Twitter: @chack411
専門分野
現在：ASP.NET, HTML, JavaScript, Web Technology ...
過去：C++/MFC/ATL, Z80, DSP, Hardware Design ...
WebMatrix マン

3. 3
セッションのゴール
Session Takeaways
 SPA 登場の背景を学ぶ
 SPA アーキテクチャを理解する
 Web 開発トレンドを体感する

4. 4
AJAX
Web アプリケーション

5. 5

6. 6

7. 7

8. 8

9. 9
Ajax Web アプリケーションの普及と課題
Asynchronous JavaScript + XML Application
目的
• Web アプリの UX 向上（ページ遷移非依存）
• マルチデバイス 対応
実装
• XMLHttpRequest と DOM 操作
• Raw JSON データの操作
課題
• JavaScript コードの増加とスパゲッティ化
• ブラウザー履歴や更新ボタン、ブックマークが機能しない
• SEO (検索エンジン最適化) に弱い
• オフライン実行に未対応 (オンライン前提の実装)

10. 10
HTML5 とモダン Web ブラウザー
Web Standards and Modern Web Browsers
HTML5/CSS3 の登場 (+ ECMAScript 5)
対応 Web ブラウザーの普及 (モダン Web ブラウザー)
jQuery のデファクト スタンダード
各種 JavaScript の登場と普及
Ajax Web アプリケーション
モダン Web アプリケーション

11. 11
モダン Web アプリ エクスペリエンス
Single Page Application Architecture
クライアント サーバー
ASP.NET
REST
JSON
XML
HTML
View
Model
HTTP
View
Async
Web API

12. 12
ASP.NET
シングル ページ アプリケーション

13. 13
One ASP.NET
ASP.NET Web Stack

14. 14
ASP.NET シングル ページ アプリケーション
ASP.NET Single Page Application (SPA)
• 単一ページ構成の Ajax アプリケーション
• HTML5/CSS3 や JavaScript ライブラリを活用
• 優れた Web UX の実現とマルチデバイス対応
SPA
※ SPA テンプレートの利用には Visual Studio 2012 Update 2 が必要です
http://www.microsoft.com/visualstudio/jpn/visual-studio-update

15. 15
ASP.NET シングル ページ アプリケーション構成
ASP.NET Single Page Application Architecture
/Home/Index
サーバー
Web UI
ASP.NET MVC
Data Services
ASP.NET Web API
Entity Framework
クライアント
knockout
jQuery
Todo List
Todo Item
/Home/Index
/api/todolist
/api/todo
HTML/CSS/JS
JSON/XML

16. 16
ASP.NET SPA サーバー サイド構成 #1
Server Side Technologies in ASP.NET SPA
• ASP.NET MVC 4 – メイン ビュー (Home/Index) の生成
• コントローラー : HomeController クラス, AccountController クラス
• メイン ビュー : Index.cshtml + _Layout.cshtml
• 部分ビュー : _Login.chstml + _Register.cshtml
• 認証 : ASP.NET 認証、OAuth/OpenID 認証 (DotNetOpenAuth)
• CSRF 対策 : Html.AntiForgeryToken, ValidateAntiForgeryToken 属性
public class HomeController : Controller
{
public ActionResult Index(string returnUrl)
{
ViewBag.ReturnUrl = returnUrl;
return View();
}
}
Index のみ
(シングル ページ) OAuth/OpenID 認証
(AuthConfig.cs)

17. 17
ASP.NET SPA サーバー サイド構成 #2
Server Side Technologies in ASP.NET SPA
• ASP.NET Web API – HTTP REST サービス インターフェース
• コントローラー : ToDoListController クラス, ToDoController クラス
• api/TodoList : Todo リストの 参照・追加・更新・削除
• api/Todo : Todo アイテムの 追加・更新・削除
• API ヘルプページの自動生成、Authorize 属性による API 呼び出しの認証フィルター
• Entity Framework 5 – O/R マッピング フレームワーク
• DB コンテキスト : TodoItemContext クラス
• エンティティ : TodoList モデル クラス, TodoItem モデル クラス
• データ転送オブジェクト : TodoListDto クラス、TodoItemDto クラス

18. 18
ASP.NET SPA クライアント サイド構成
Client Side Technologies in ASP.NET SPA
• jQuery, jQuery UI, jQuery Validation, Knockout JS
• CSS3 メディア クエリ によるレイアウト変更
• Todo アプリケーション JavaScript ライブラリ
• todo.datacontext.js : Web API アクセス 層
• todo.viewmodel.js : TodoList ビュー モデル
• todo.model.js : TodoList, TodoItem モデル
• todo.bindings.js : knockout カスタム バインディング
• ScriptBundle / StyleBundle によるペイロード削減
bundles.Add(new ScriptBundle("~/bundles/todo").Include(
"~/Scripts/app/todo.bindings.js",
"~/Scripts/app/todo.datacontext.js",
"~/Scripts/app/todo.model.js",
"~/Scripts/app/todo.viewmodel.js"));
スクリプトの
結合と縮小化

19. 19
Knockout JS
JavaScript Library for Data Binding
• JavaScript MVVM ライブラリ
• 双方向データ バインディング & UI の自動更新
• View (HTML) ⇔ View Model (JavaScript)
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full name: <span data-bind="text: fullName"></span></p>
var ViewModel = function(firstName, lastName) {
this.firstName = ko.observable(firstName);
this.lastName = ko.observable(lastName);
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
};
ko.applyBindings(new ViewModel("Akira, "Inoue"));
knockoutjs.com

20. 20
さまざまな JS ライブラリと
SPA テンプレートの強化

21. 21
さまざまな SPA テンプレート
Community-Created SPA Templates
• Visual Studio 2012 Update 2 より標準で利用可能
• ASP.NET SPA (Knockout) テンプレート
• その他の SPA テンプレート
• Backbone テンプレート
• Breeze/Angular テンプレート
• Breeze/Knockout テンプレート
• Durandal テンプレート
• Ember テンプレート
• Hot Towel テンプレート
各テンプレートの詳細: http://www.asp.net/single-page-application/overview/templates

22. 22
SPA テンプレート比較
Community-Created SPA Templates
ASP.NET
SPA
Backbone
Breeze
Angular
Breeze
Knockout
Durandal Ember Hot Towel
ToDo サンプル
ベース ✓ ✓ ✓ ✓
ナビゲーション
履歴管理 ✓ ✓ ✓ ✓ ✓
使用ライブラリ
Angular ✓
Backbone ✓
Breeze ✓ ✓ ✓
Durandal ✓ ✓
Ember ✓
Knockout ✓ ✓ ✓ ✓

23. 23
Breeze JS
データ管理 JavaScript ライブラリ
• シンプルなデータアクセスとクエリ
• クライアント キャッシング
• 自己追跡エンティティ
• データ バインディング
(Knockout/Angular)
• Promise 非同期パターン
• ...
www.breezejs.com
var manager =
new breeze.EntityManager('api/northwind');
var query = new breeze.EntityQuery()
.from("Employees")
.orderBy("LastName")
.where("LastName", "startsWith", "P");
manager.executeQuery(query)
.then(function(data){
ko.applyBindings(data);})
.fail(function(e) { alert(e); });
if (manager.hasChanges()) {
manager.saveChanges()
.then(saveSucceeded)
.fail(saveFailed);
}

24. 24
ナビゲーション/履歴管理 #1
SPA (Ajax) の弱点
• SPA (Ajax) では各操作が履歴に残らない（URL が変わらない）
• [戻る] ボタンなどが意図した動作をしない
• ブラウザー ナビゲーションを考慮した実装が必要
• [戻る] [進む] ボタンと [F5] キー、ブックマークへの対応
• SEO (検索エンジン最適化) 対策
Ajax 操作
同じ URL
履歴に
残らない

25. 25
ナビゲーション/履歴管理 #2
SPA 弱点への対応
• ハッシュ フラグメント (#, #!) による Ajax コンテンツの固定リンク化
• jQuery Back Button & Query (BBQ) Library
benalman.com/projects/jquery-bbq-plugin
• Sammy.js
sammyjs.org
• Hash.js
github.com/blasten/hash.js
• HTML5 pushState / popState の利用
• pjax (pushState + ajax)
github.com/defunkt/jquery-pjax
http://www.example.com/#/details
ベース URL ハッシュ フラグメント

26. 26
SPA のオフライン実行への対応 #1
HTML5 Application Cache と Local Data Store
Client Codes
HTML/CSS/JavaScript ...
サーバー
Web UI
HTML/CSS/JS
MVC 4
Data Services
JSON/XML
Web API
Local Storage
HTML5
Entity Framework
Breeze.js
DataContext
Cache
Manifest
HTML5
クライアント
online/offline Events
HTML5

27. 27
SPA のオフライン実行への対応 #2
Online/Offline events と Breeze Export/Import API
• Online/Offline イベント
• Breeze Export/Import API と localStorage
// Save changes offline; restore later
var changes = manager.getChanges();
var exportData = manager.exportEntities(changes);
window.localStorage.setItem("changes", exportData);
...
var importData = window.localStorage.getItem("changes");
manager.importEntities(importData);
window.addEventListener("online", function () { ... }, false);
window.addEventListener("offline", function () { ... }, false);

28. 28
Web 開発の
トレンドとプラットフォーム

29. 29
Web アプリ開発のトレンド
これからの Web アプリケーションで考えなければならないこと
• マルチデバイス対応
• クロス デバイス、クロス プラットフォーム、クロス ブラウザー
• レスポンシブ Web デザイン、jQuery Mobile、デバイス判別
• モダン Web アプリケーション
• Single Page Application (SPA) アーキテクチャ
• HTTP REST サービス (Web API)
• リアルタイム コミュニケーション
• クラウド環境の活用とサービス品質の向上
• アプリケーション スケーラビリティの確保
• 運用・保守・管理コストの削減

30. 30
ASP.NET プラットフォーム
ASP.NET Web Stack and Web Standards