![24
ナビゲーション/履歴管理 #1
SPA (Ajax) の弱点
• SPA (Ajax) では各操作が履歴に残らない（URL が変わらない）
• [戻る] ボタンなどが意図した動作をしない
• ブラウザー ナビゲーションを考慮した実装が必要
• [戻る] [進む] ボタンと [F5] キー、ブックマークへの対応
• SEO (検索エンジン最適化) 対策
Ajax 操作
同じ URL
履歴に
残らない](https://image.slidesharecdn.com/buildinsider-spaakirainouep-130608012214-phpapp02/85/ASP-NET-SPA-24-320.jpg)
ASP.NET シングル ページ アプリケーション (SPA) 詳説
- 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 開発トレンドを体感する
- 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
- 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);
- 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