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

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

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

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

http://twitter.com/chack411/



http://www2.clr-h.jp/

Demo もあるよ！

なんでもできる統合開発環境

製品版http://www.microsoft.com/japan/msdn/vstudio/

無償版！要登録

http://www.microsoft.com/japan/msdn/vstudio/express/

− Visual Web Developer 2010 Express

Web Windows

Cloud Office

さまざまなアプリ開発

Web 開発はこれ！

http://www.microsoft.com/japan/msdn/vstudio/



http://www.microsoft.com/japan/msdn/vstudio/express/

コンポーネントやアプリの一括管理ツール

無償ツール

http://www.microsoft.com/web/downloads/platform.aspx



Technology Radar January 2010

出典: 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.

オーバービュー

− JavaScript

デバッグ対応

ブレークポイント

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

スクリプトドキュメント

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

ブレークポイント一覧

ウォッチウィンドウ

Visual Studio と jQuery

http://jquery.com/

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

http://jquery.com/

http://jquery.com/

Microsoft <3 jQuery

<script src="jquery.tmpl.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(function(){ var products = [{name:"dog", price:12.0}, {name:"cat", price:35.5}]; $("#list").append("#template", products); }); </script> <script id="template" type="text/html"> <li>{%= name %} - {%= price %}</li> </script> <ul id="list"></ul>

jQuery Template

Technology Radar January 2010

出典: Technology Radar January 2010 © ThoughtWorks

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

新しい Web アプリ開発フレームワーク

− ASP.NET MVC 1.0

− ASP.NET MVC 2

− HTML ベース

疎結合

− 単体テスト

− URL ルーティング

Web アプリにおける MVC パターン

HTTP Request

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

2. Controller が Model を初期化

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

4. Controller が View を呼び出す

5. View が Model を参照

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

Model

Controller

View HTTP Response

入力と制御

プレゼンテーション

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

Model と Controller

View

実装コード例

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>

～標準志向 Web 開発のために～

標準技術を生かした Web 開発

サーバーサイド技術を生かした Web 開発

HTML / CSS 支援機能

− HTML 検証

− CSS 検証 − CSS 1.0 / 2.0 / 2.1 に対する検証

− アクセシビリティ検証※

※ アクセシビリティ検証は Visual Studio Professional 以上の機能 ※ WCAG (Web Content Accessibility Guidelines) : W3C 勧告 ※ Access Board 508 : 米国連邦政府ハビリテーション法 508 条

Visual Studio 2010 入力支援機能

− インテリセンス

− コードスニペット


− jQuery インテリセンス

-vsdoc

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

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

への参照の追加


− jQuery コードスニペット

http://jquerysnippets.codeplex.com/

対象ショートカット概要

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

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

JavaScript func JavaScript の匿名関数を挿入

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

JavaScript jqfadein fadeIn 関数を挿入

http://jquerysnippets.codeplex.com/

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

Web サーバー

ajax.microsoft.com

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

ホストされる JavaScript ライブラリ

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

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

使用方法

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





クリーン URL の生成

Web ページの配置パスに依存した URL

URL ルーティング

Web ページの URL を柔軟に構築可能 RESTful な Web アプリケーションの構築

SEO (Search Engine Optimization) 対策

Controller の単体テスト

生成されたテストプロジェクト

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

プログラム特典：

開発ツール

サーバーソフトウェア（検証、デモ用）

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

技術サポート

その他

参加要件： • Web 開発ビジネスを主業務としていること

（個人事業主を含む） • 従業員数が 25 名以下であること • プログラム加盟後、6 カ月以内に Windows

プラットフォームを用いた新しいドメインの Web サイトを開発すること。

期間：最大 3 年間費用：無料（プログラム終了時にプログラム提供料として 100 米ドルお支払いいただきます）

www.microsoft.com/web/websitespark

http://msdn.microsoft.com/ja-jp/asp.net/default.aspx

http://www.asp.net/

http://aspnet.codeplex.com/

http://msdn.microsoft.com/ja-jp/asp.net/ff602016.aspx


http://edtter.codeplex.com

http://jquery.com/





http://www.asp.net/

http://www.asp.net/












http://edtter.codeplex.com/

http://jquery.com/

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market

conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT

MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.