asp.net mvc と jquery で実践する標準志向 web 開発

63
マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト 井上 章(いのうえ あきら) http://blogs.msdn.com/chack/ http://twitter.com/chack411/ 1 ASP.NET MVC と jQuery で 実践する標準志向 Web 開発

Upload: akira-inoue

Post on 11-May-2015

19.116 views

Category:

Technology


0 download

DESCRIPTION

2010.10.23 .NETラボ勉強会資料

TRANSCRIPT

Page 1: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

マイクロソフト株式会社

デベロッパー & プラットフォーム統括本部

エバンジェリスト

井上 章(いのうえ あきら)

http://blogs.msdn.com/chack/

http://twitter.com/chack411/

1

ASP.NET MVC と jQuery で 実践する標準志向 Web 開発

Page 2: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

アジェンダ ~ 本日の内容 ~

2

• JavaScript と jQuery

• ASP.NET MVC ~ 概要・入門編 ~

• ASP.NET MVC ~ 活用・応用編 ~

• 事例紹介

• まとめ

Page 3: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

JavaScript と jQuery

3

Page 4: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

注目される JavaScript Technology Radar January 2010

• Language 分野で 高い注目度

出典: Technology Radar January 2010 © ThoughtWorks

https://www1.vtrenz.net/imarkownerfiles/ownerassets/ 1013/Technology%20Radar%20Jan%202010.pdf

While JavaScript first appeared in 1995, it is only in the past couple of years that libraries such as Prototype and jQuery have helped the language become more accessible to a wider developer audience. As developers continue to embrace JavaScript for developing rich user web applications, we increasingly hold JavaScript in the same level of esteem as any other production language, ensuring that scripts are adequately tested, refactored and maintained.

Page 5: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

JavaScript の実装 オーバー ビュー • JavaScript にはさまざまな実装が存在

– ECMAScript (ECMA-262 言語仕様) として標準化

• 最新は ECMAScript 5 ECMA-262 5th Edition, December 2009

– JScript

• ECMA-262 3rd Edition のマイクロソフト実装

Page 6: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

JavaScript と Visual Studio デバッグ対応

ブレーク ポイント

ツールヒント による変数のウォッチ

スクリプト ドキュメント

イミディエイト ウィンドウ

ブレーク ポイント一覧

ウォッチ ウィンドウ

Page 7: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

jQuery のサポート Visual Studio と jQuery

• 高速・軽量な JavaScript ライブラリ – DOM 操作 / CSS 操作 / Ajax 処理を容易に – オープンソース

• jQuery 公式サイト http://jquery.com/ – 最新バージョンは 1.4.3

• Visual Studio と jQuery – jQuery 1.4.1 が標準搭載

• Web フォーム や MVC プロジェクト で標準採用

• インテリセンスとコードスニペット にも対応 (詳細は Appendix を参照)

$(function() { $('#button1').click(function() { $('#div1').fadeIn('slow'); }); });

Page 8: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

8

Page 9: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

ASP.NET 4 構成 フレームワーク関係図

9

.NET Framework 4

ASP.NET 4

Web フォーム

ASP.NET MVC 2

ASP.NET AJAX

動的データ

Page 10: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

注目される ASP.NET MVC Technology Radar January 2010

• 高い注目度 (Tool 分野)

• 試用から採用へ

出典: Technology Radar January 2010 © ThoughtWorks https://www1.vtrenz.net/imarkownerfiles/ownerassets/ 1013/Technology%20Radar%20Jan%202010.pdf

This is an exciting development in the .NET space from Microsoft, both in the programming model and in the open source license under which Microsoft has released the library. ASP.NET MVC is similar to MVC frameworks on the Java platform and is a move away from the ASP.NET Web Forms approach to one that supports greater levels of automated testing.

10

Page 11: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

What is MVC ? デザイン パターン

• Model データとビジネス ロジック を表現

• View Model から取得したデータを プレゼンテーション (UI) へ出力する

• Controller ユーザーからの入力を受付け View と Model を制御する

M C

V

11

Page 12: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

MVC オーバービュー Web アプリにおける MVC パターン

12

HTTP Request

1. Controller が リクエストを受信

2. Controller が Model を初期化

3. ビジネス ロジック を実行

4. Controller が View を呼び出す

5. View が Model を参照

6. View がレスポンス を送信

Model

Controller

View HTTP Response

入力と制御

プレゼンテーション

データ表現と ビジネス ロジック

Page 13: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

ASP.NET MVC 2 新しい Web アプリ開発フレームワーク • 2010 年 3 月 RTM リリース (for VS 2008 SP1)

• Visual Studio 2010 に標準搭載

• オープン ソース (CodePlex)

各モジュールが 疎結合 に

単体テスト (TDD) が容易に

HTML ベース のページ開発が容易に

URL ルーティング が可能に

13

Page 14: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

View の特徴と HTML 生成 埋め込みコード ブロックの利用

• View における HTML 生成 (View エンジン) は 既定で Web フォーム (.aspx) を使用 – System.Web.Mvc.WebFormViewEngine クラス

– 基本的に Web サーバー コントロールは使用しない

(ポストバックや ViewState は使用しない) – ヘルパー メソッドで HTML タグ ブロックを生成

View (.aspx)

<html> <div><%: DateTime.Now.ToString() %></div> <div><%: Html.TextBox("data", Model.data) %></div> </html>

埋め込み コード ブロック

14

Page 15: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

HTML ヘルパー メソッド HTML 生成を助ける関数群

メソッド名 概要

ActionLink アクション名などから a タグを生成

BeginForm form タグを生成

TextBox input タグによる入力フィールドを生成

TextBoxFor

<%: Html.ActionLink("Go to Home", "Index") %> <%: Html.TextBox("message", model.Message) %> <%: Html.TextBoxFor(model => model.Message) %>

使用例

15

Page 16: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

Controller と View の命名ルール コンセプト「規約は設定に勝る」 • CoC (Convention over Configuration)

• 命名ルールによってモジュール間の結合を疎に – コードや設定ファイルなどで関連付けない

public class HomeController : Controller { public ActionResult Index() { ViewData["Message"] = "MVC"; return View(); } }

アクション名

Controller 名 Controller クラス

16

Page 17: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

テスト駆動開発 (TDD) Controller Action の単体テストが容易に

• 単体テストには IIS などの Web サーバー は不要

• Visual Studio 2008/2010 Professional 以上が必要

• NUnit, MBUnit, XUnit なども利用可能

• テスト プロジェクトも同時に作成可能

– テスト コードの雛型が自動生成

[TestMethod] public void Index() { HomeController ctrl = new HomeController(); ViewResult result = ctrl.Index() as ViewResult; ViewDataDictionary viewData = result.ViewData; Assert.AreEqual("Hello", viewData["Message"]); }

17

Page 18: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

URL ルーティング クリーン URL で SEO 対策 • ASP.NET MVC では既定でルーティングが有効

– System.Web.Routing 名前空間

static void RegisterRoutes(RouteCollection routes) { routes.MapRoute( "Default", "{controller}/{action}/{id}", new { controller = "Car", action = "List", id = UrlParameter.Optional } ); } void Application_Start() { RegisterRoutes(RouteTable.Routes); }

例: http://example.com/Products/Car/Details/5

ルーティング定義

既定値 (省略時の値)

18

Page 19: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

ASP.NET MVC における AJAX 非同期処理と部分更新の実装方法

• AJAX ヘルパー メソッド を利用

• jQuery を利用

19

<%: Ajax.ActionLink("データの表示...", "ShowData", new AjaxOptions {UpdateTargetId = "results"}) %> <% using (Ajax.BeginForm("UpdateList", new AjaxOptions {UpdateTargetId = "results"})) { %> ... <% } %>

Page 20: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

Data Annotation バリデーション Model 中心の入力検証

• 宣言型で コードすっきり バリデーション Model

View

public class MyData { [DisplayName("年齢")] [Required(ErrorMessage = "{0}を入力してね")] [Range(0, 100)] public int Age { get; set; } }

<%: Html.TextBoxFor(model => model.Age) %> <%: Html.ValidationMessageFor(model => model.Age) %>

Controller

public ActionResult Create(MyData myData) { if (ModelState.IsValid) { … } }

属性ベースで 検証ルールを指定

エラー メッセージも指定可能

モデル バインドと 検証実行

20

Page 21: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

RenderPartial と RenderAction View の部分レンダリング • RenderPartial

– 部分 View をレンダリング

• RenderAction – コントローラー アクションの実行結果をレンダリング

View (.aspx) <html> <% RenderPartial(…); %> </html>

View (.ascx) <div>…</div>

View (.aspx) <html> <% RenderAction(…); %> </html>

Controller ActionResult Ad()

M

M

M

M

Html.RenderPartial(ViewName, … )

Html.RenderAction(ActionName, … )

※ M は Model の略 21

Page 22: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

セキュリティ対策 ASP.NET MVC でも忘れずに • Controller 実行時の認証の要求

– [Authorize] 属性 (ActionFilter)

• HTML Encoding 構文 (WebFormViewEngine)

– <%: SomeStringData %>

• Cross Site Scripting (XSS) – Microsoft Web Protection Library

http://wpl.codeplex.com/

• Cross Site Request Forgeries (CSRF) – Html.AntiForgeryToken() – [ValidateAntiForgeryToken]

• JSON Hijacking – JsonResult – return Json(data, JsonRequestBehavior.DenyGet);

22

Page 23: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

23

Page 24: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

MVC フレームワークの拡張 多くの拡張ポイントと容易なカスタマイズ

odel

ontroller iew Response

ModelBinder ActionFilter ActionResult

ViewEngine HtmlHelper

ValidationAttribute

Request

Routing

24

Page 25: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

View エンジンのカスタマイズ (1) ViewEngine = HTML 生成テンプレート エンジン

• View エンジンの変更 (Razor, NHaml, Spark, ...) • オリジナル View エンジンの作成 • View の検索パスの変更

などのカスタマイズが可能

View Engine

ontroller iew Response Request

25

HTML5 対応や 携帯向けサイトの HTML 生成が容易

Page 26: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

View エンジンのカスタマイズ (2) さまざまな View エンジンの記法

• WebFormViewEngine (.aspx 既定)

• NHaml - http://code.google.com/p/nhaml/

– Rails Haml View エンジンの .NET 実装版

• Spark - http://sparkviewengine.com/

– Castle Project - MonoRail 向け View エンジン

<h1><%: product.ProductName %></h1> <p><%: Html.ActionLink("Add...", "Add") %></p>

%h1= product.ProductName %p= Html.ActionLink("Add...", "Add")

<h1>${ product.ProductName }</h1> <p>${ Html.ActionLink("Add...", "Add") }</p>

26

Page 27: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

ASP.NET MVC 3 新機能 概要

• Beta (2010 年 10 月 6 日 リリース) http://go.microsoft.com/fwlink/?LinkID=191795

• 新機能 – Razor, ASPX, … などの View エンジンの選択機能 – ダイナミック View / ViewModel プロパティ – グローバル Action Filters – JsonValueProviderFactory と JSON モデル バインド – ValidationAttribute と IValidatableObject – 新しい ActionResult 型 と Permanent Redirect – Dependency Injection (DI) サポート

• ランタイム – ASP.NET 4 & Visual Studio 2010 以降

27

Page 28: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

MVC 3 と Razor View エンジン Small, Simple, Seamless

• 新しい "Razor 構文" View エンジンの追加 – Razor プロジェクト テンプレート

– [ View の追加 ] ダイアログ での View エンジン選択

• View 毎に使用するエンジンを選択可能

– Razor View 拡張子 (※変更の可能性あり)

• .cshtml (C#) / .vbhtml (VB)

28

Page 29: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

.cshtml

"Razor" 構文 Small, Simple, Seamless • Web ページ (View) の新しい記述構文

– シンプル & クリーン – タイピング量とコード サイズの低減 (vs. PHP, ASPX)

– 便利な HTML ヘルパーと容易な拡張 – C#, Visual Basic をサポート

@{ string title = "Hello Razor"; } <h1>@title</h1> <ul> @foreach (var item in Model) { <li>@item.Message</li> } </ul> <p>Time is @DateTime.Now</p> <p>@Html.ActionLink("Add...", "Add")</p>

29

Page 30: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

ASP.NET MVC 事例紹介

30

Page 31: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

StackOverflow.com アーキテクチャー

• トラフィック – 1600 万 ページ ビュー / 月 – 300 万 ユニーク ビジター / 月 – 600 万 ビジター / 月

• プラットフォーム・テクノロジー – ASP.NET MVC – SQL Server 2008 – C# – Visual Studio 2008 Team Suite – jQuery – LINQ to SQL

出典: Stack Overflow Architecture

http://highscalability.com/stack-overflow-architecture

31

Page 32: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

国内採用事例のご紹介 こちらも続々と増えてます ...

• 現場入退場管理システム「デイリ」 – 携帯コールによる遠隔地の現場労働時間管理システム – コムテックス株式会社様 開発 – http://www.ctx.co.jp/deiri_pr/index.html

– システム構成

• Windows Azure (Web Role + SQL Azure) • ASP.NET MVC + jQuery • ASP.NET メンバーシップ & ロール管理 • オンプレミス連携 (電話着信処理など)

32

Page 33: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

まとめ

33

Page 34: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

Web フォーム vs. MVC 特徴と使い分け

• ASP.NET MVC と Web フォーム は 適材適所で使い分けることが重要 • プロジェクトの要求、アプリケーションの仕様、

エンジニアのスキル、開発手法、チーム編成など ...

Web フォーム ASP.NET MVC

豊富なコントロール を使用可能 HTML ベース の UI 開発

イベント駆動型プログラミング アクション メソッドによる リクエスト処理

ViewState やポストバック処理を多用する

ViewState やポストバック処理を使用しない

ロジックの検証に Web サーバーが必要

ロジックの検証に Web サーバーが不要 (テスト駆動開発をサポート)

34

Page 35: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

ASP.NET MVC 2 Small + Simple + Seamless = Smart !

ASPX, Razor, ... M

C V

35

Page 36: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

Appendix.

36

Page 37: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

View (Edit.aspx)

Model / View / Controller 実装コード例

Model と Controller

public class HomeController : Controller { MyModelService myModel = new MyModelService(); public ActionResult Edit(int id) { MyData md = myModel.GetData(id); return View(md); } }

<html> <p><%: Html.TextBox("data", Model.data) %></p> </html>

Model の準備

HTTP リクエスト によるメソッドの

実行 (例: Home/Edit/5 )

View の呼び出し

ロジックの実行と データ取得

HTML タグ生成と データの埋め込み

37

Page 38: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

スキャフォールディング機能 (1) Controller の追加

38

Controllers 上で 右クリック

[コントローラー] を選択

コントローラー名

追加、更新、削除などの 各アクション メソッドを

自動生成

Page 39: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

スキャフォールディング機能 (2) View の追加

39

ビュー名

モデル クラス の指定

生成するビューの種類 を選択

アクション メソッド の上で右クリック

[ビューの追加] を選択

Page 40: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

ビュー データ の利用方法 モデル データをビューに渡すには ...

• ViewDataDictionary クラス

• ViewDataDictionary<TModel> クラス

40

public ActionResult Index() { ViewData["Name"] = "ジャイケル・マクソン"; ViewData["Song"] = "サラリー"; return View(); }

<p><%: ViewData["Name"] %></p> <p><%: ViewData["Song"] %></p>

public ActionResult Index() { var artist = new MyArtist(); artist.Name = "ジャイケル・マクソン"; artist.Song = "サラリー"; return View(artist); } <p><%: ViewData.Model.Name %></p>

<p><%: ViewData.Model.Song %></p>

TempDataDictionary でリクエスト間での データ永続化も可

Page 41: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

Web.config - <system.web><caching><outputCacheSettings>

出力キャッシュの利用 冗長なサーバー処理の回避 • OutputCacheAttribute (ActionFilter) を利用

– Controller Action の無駄な実行を制御 – アプリケーション パフォーマンスの改善

• キャッシュ プロファイル を利用した設定 – アプリケーションを再ビルドすることなく設定変更可

[OutputCache(Duration=3600, VaryByParam="id")] public ActionResult Details(int id) { return View(myModel.GetData(id)); }

id 毎に 1 時間キャッシュ

[OutputCache(CacheProfile="MyCache")] public ActionResult Index() {…}

<outputCacheProfiles> <add name="MyCache" duration="3600" … /> </outputCacheProfiles> 41

Page 42: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

Templated Helpers View の部分レンダリング

• データの表示や編集ための部分 View を生成 – DisplayForModel, EditorForModel 等のヘルパー

• テンプレート (部分 View) として .ascx ファイルを用意 – データ型やクラスに基づいた

部分 View の定義

42

<%@ Page Inherits="ViewPage<MyData>" %> <%: Html.DisplayForModel() %>

<%: Html.DisplayFor(m => m.Name, "NameTemplate") %>

A) データ型やクラスに基づいたテンプレートの利用

B) 名前付きテンプレートの利用

Page 43: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

AsyncController 非同期コントローラーの利用 • AsyncController クラス

– 命名規約による容易な非同期処理の実装が可能

※ View 名には Async / Completed の文字は不要

• 利点 – Web サーバーの他のリクエスト

処理がブロックされない – 時間のかかるネットワーク I/O

(Web API 呼び出し等) に有効

• 注意点 – 非同期処理はオーバーヘッドが大きい – 同期処理においてボトル ネックになる部分に適用

:AsyncController object1:

1: 開始

2: 完了

他の処理

開始 : void ActionNameAsync() 終了 : ActionResult ActionNameCompleted()

43

Page 44: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

ASP.NET MVC 2 その他の機能 • Areas (区分)

– 単一 MVC プロジェクト内で アプリケーションを分割

– AreaRegistration.RegisterAllAreas()

• アクション メソッドのデフォルト値

• HTTP Method 属性 – HttpPost, HttpGet, HttpPut, HttpDelete

[HttpPost] public ActionResult Create(MyData myData) { … }

ActionResult Index([DefaultValue(1)] int id) ActionResult Index(int id = 1)

44

Page 45: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

ActionFilter 拡張 アクション メソッド実行時の拡張ポイント

• アクション メソッドの実行前後に独自機能を追加 • ベース クラス

ActionFilterAttribute : FilterAttribute

• 既存の FilterAttribute 派生クラス AuthorizeAttribute, ValidateAntiForgeryTokenAttribute, ChildActionOnlyAttribute, RequireHttpsAttribute ...

使用例

public class LogAttribute : ActionFilterAttribute { public override void OnActionExecuting(…) {…} public override void OnResultExecuted(…) {…} } [Log] public class HomeController : Controller {…}

Controller や Action に属性を指定

45

Page 46: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

バインドなしの場合

バインドありの場合

ModelBinder とは ? HTTP リクエスト データの自動バインド • アクション メソッド 引数への自動バインド

• 既定のバインドは DefaultModelBinder • 以下のオブジェクト型をバインド

– Model クラス – プリミティブ型 (String, DateTime, ...) – コレクション (ICollection<T>, IList<T>, ...)

ActionResult Create() { string name = Request["Name"]; ...

ActionResult Create(MyData myData) { if (ModelState.IsValid) { string name = myData.Name; ...

MyData へバインド

46

Page 47: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

ModelBinder の登録

ModelBinder 拡張 カスタム機能の追加 • インターフェース : IModelBinder • ベース クラス : DefaultModelBinder

主な拡張ポイント

object BindModel(…); // モデル バインド実行 object CreateModel(…); // モデル型オブジェクト生成 bool OnModelUpdating(…); // モデル更新開始 void OnModelUpdated(…); // モデル更新完了 bool OnPropertyValidating(…); // プロパティ検証開始 void OnPropertyValidated(…); // プロパティ検証完了

// Application_Start() で下記のいずれかで指定 ModelBinders.Binders.DefaultBinder = new MyBinder(); ModelBinders.Binders.Add(typeof(MyData),new MyBinder()); // または、引数の属性で指定 [ModelBinder(typeof(MyBinder))] 47

Page 48: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

ASP.NET MVC 拡張ライブラリ もっと活用したい ! あなたのために ...

• MVC Contrib http://mvccontrib.codeplex.com/ – 様々な拡張ライブラリ群 – HTML Helper, Model Binder, Controller, Routing,

Action Result, Action Filter, Unit Test Helper, ...

• T4MVC http://mvccontrib.codeplex.com/releases/view/41582 – T4 テンプレートを利用した自動コード生成 – View や Controller コード内のリテラル文字列を排除 – インテリセンス利用可 & 容易なコード メンテナンス

<% Html.RenderPartial("Banner"); %>

<% Html.RenderPartial(MVC.Home.Views.Banner); %>

48

Page 49: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

ASP.NET MVC の採用事例 続々と増加中 ... • StackOverflow.com

– http://stackoverflow.com/

• Ruth's Chris Steakhouse – http://www.ruthschris.com/

• MarketWatch – http://www.marketwatch.com/

• Kelley Blue Book – http://www.kbb.com/

• CodePlex - Open Source Project – http://www.codeplex.com/

• Windows Live – http://home.live.com/

• Bing Shopping – http://www.bing.com/shopping/

49

Page 50: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

Orchard 新しい .NET ベース CMS

• Orchard (オーチャード)

– 2010 年 8 月 3 日 v.0.5 (Beta) リリース

– http://orchardproject.net/

– http://orchard.codeplex.com/ (ソース コード等)

• 軽量な CMS (Contents Management System)

– Web サイト、ブログ、 ドキュメント管理など ...

– ASP.NET MVC 2 ベース

– 容易なセットアップ (Web PI)

– 容易な拡張とカスタマイズ (Visual Studio, WebMatrix)

50

Page 51: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

最新テクノロジーと Web 開発 新しいプラットフォームも続々と ...

• WebMatrix (Beta) – http://www.microsoft.com/web/webmatrix/

– 軽量な Web サイトを構築・管理する統合ツール

– オープンソースの Web アプリのインストールやカスタマイズ

• Visual Studio LightSwitch (Beta) – http://www.microsoft.com/visualstudio/en-us/lightswitch/

– ベーシックな業務アプリケーションを迅速に構築

– 基本コードはテンプレートから自動生成

• Internet Explorer 9 (Beta) – http://ie.microsoft.com/testdrive/

– Web 標準への準拠、次世代規格 HTML5, CSS3 への対応

51

Page 52: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

インテリセンス と スニペット Visual Studio 2010 入力支援機能

• インテリセンス – オートコンプリート・オートコレクト

• コード スニペット – コード ブロックのひな形を簡単に挿入 – HTML と JavaScript でも使用可能 – カスタム スニペットを作成して拡張可能

Page 53: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

jQuery と インテリセンス Visual Studio 2010 入力支援機能

• jQuery インテリセンス対応 – jquery-1.x.x-vsdoc.js ファイルを提供

• インテリセンス向けのコメント情報が記述される • HTML では通常の jquery-1.x.x.js への参照を追

加 • IDE がプロジェクト内の –vsdoc ファイルを認識

• 外部 JavaScript ファイルでは ...

<script src="jquery-1.4.1.js" type="text/javascript"></script>

/// <reference path="jquery-1.4.1.js" /> function FadeOut() { $("#Text1").fadeOut(); ... jQuery ファイル

への参照の追加

Page 54: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

jQuery と スニペット Visual Studio 2010 入力支援機能 • jQuery コードスニペット対応

– jQuery Code Snippets for Visual Studio 2010 http://jquerysnippets.codeplex.com/

– 上記を含め 131 ものスニペットを提供

対象 ショートカット 概要

HTML jq スクリプトタグと $(document).ready() ショートカットを挿入

HTML jqscript jQuery ソースファイルへのスクリプト タグを挿入

JavaScript func JavaScript の匿名関数を挿入

JavaScript jqclick click イベントハンドラを挿入

JavaScript jqfadein fadeIn 関数を挿入

Page 55: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

Content Delivery Network CDN から jQuery を利用する • Microsoft Ajax Content Delivery Network

– ajax.microsoft.com ドメインで主要 JS ファイルをホスト

– jQuery などのスクリプトライブラリの利用を容易に

– 最小限のネットワーク ホップ数で効率的にロード

– ブラウザーキャッシュに格納されたスクリプトを アプリケーション間で再利用

– 無償サービス

Web サーバー

ajax.microsoft.com

エッジ キャッシュ サーバー

Page 56: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

Microsoft Ajax CDN ホストされる JavaScript ライブラリ • jQuery 1.4.2 • jQuery 1.4.1 • jQuery 1.4 • jQuery 1.3.2 • jQuery Validate 1.7 • jQuery Validate 1.6 • jQuery Validate 1.5.5 • jQuery UI 1.8.5 • …

http://www.asp.net/ ajaxLibrary/CDN.ashx

<script type="text/javascript" src= "http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"> </script>

使用方法

Page 57: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

Microsoft Web Platform ホーム まずはここからスタート !

• Web プラットフォームの紹介 – サーバー

– フレームワーク

– データーベース

– ツール

• Web App Gallery

• ダウンロード

• プログラム紹介

• ホスティング情報

• 事例紹介 • などなど ...

57

www.microsoft.com/web

Page 58: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

Web プラットフォーム インストーラー コンポーネントやアプリの一括管理ツール (Web PI)

マイクロソフトの コンポーネント

コミュニティの コンポーネント

www.microsoft.com/web 58

Page 59: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

WebsiteSpark Web 開発会社様 支援プログラム

プログラム特典:

開発ツール

Visual Studio 2010 Professional x 3

Expression Studio 4 x 1

Expression Web 4 x 2

サーバー ソフトウェア(検証、デモ用)

Windows Web Server 2008 R2 x 3

SQL Server 2008 Web Edition x 3 ※これらのソフトウェアは MSDN サブスクリプションの ダウンロード サイトから提供させていただきます

技術サポート

技術サポートを 2 インシデント無償提供

その他

参加企業の露出機会の提供

技術資料、トレーニングマテリアルなどの提供

参加要件:

• Web 開発ビジネスを主業務としていること

(個人事業主を含む)

• 従業員数が 25 名以下であること

期間:最大 3 年間

費用:無料(プログラム終了時にプログラム提供料

として 100 米ドルお支払いいただきます)

www.microsoft.com/japan/web/websitespark 59

Page 60: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

リファレンス #1 Microsoft Web Platform http://www.microsoft.com/web/

MSDN ASP.NET デベロッパー センター http://msdn.microsoft.com/ja-jp/asp.net/default.aspx

Microsoft Web 開発ガイドライン http://msdn.microsoft.com/ja-jp/asp.net/ff602016.aspx

ASP.NET MVC チュートリアル http://msdn.microsoft.com/ja-jp/asp.net/ff630143.aspx

ASP.NET MVC 2 サンプル ソース コード ~ Edtter ~ http://edtter.codeplex.com/

THE TRUTH IS OUT THERE ~ 井上 章のブログ ~ http://blogs.msdn.com/chack/

60

Page 61: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

リファレンス #2 ASP.NET MVC: The Official Microsoft ASP.NET Site (英語) http://www.asp.net/mvc

CodePlex - ASP.NET MVC (英語) http://aspnet.codeplex.com/wikipage?title=MVC

ScottGu's Blog (英語) http://weblogs.asp.net/scottgu/default.aspx

Scott Hanselman's Blog (英語) http://www.hanselman.com/blog/

K. Scott Allen's Blog (英語) http://odetocode.com/Blogs/scott/default.aspx

Phil Haack's Blog (英語) http://haacked.com/Default.aspx

61

Page 62: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

お疲れ様でした ...

62

Page 63: ASP.NET MVC と jQuery で実践する標準志向 Web 開発

63