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

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

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

Demo もあるよ！

なんでもできる統合開発環境 Web Windows さまざまなアプリ開発 Cloud Office 製品版 http://www.microsoft.com/japan/msdn/vstudio/ 無償版！要登録 http://www.microsoft.com/japan/msdn/vstudio/express/ − Visual Web Developer 2010 Express Web 開発はこれ！

コンポーネントやアプリの一括管理ツール無償ツール http://www.microsoft.com/web/downloads/platform.aspx

Technology Radar January 2010 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. 出典: Technology Radar January 2010 © ThoughtWorks https://www1.vtrenz.net/imarkownerfiles/ownerassets/ 1013/Technology%20Radar%20Jan%202010.pdf

オーバービュー − JavaScript

デバッグ対応ブレークスクリプトポイントドキュメントツールヒントによる変数のウォッチイミディエイトウィンドウウォッチブレークウィンドウポイント一覧

Visual Studio と jQuery http://jquery.com/ $(function() { $('#button1').click(function() { $('#div1').fadeIn('slow'); }); });

Microsoft <3 jQuery jQuery Template <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>

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 パターン 1. Controller がリクエストを受信 HTTP Request Controller 2. Controller が Model を初期化 3. ビジネスロジックを実行入力と制御 4. Controller が View を呼び出す Model プレゼンテーション 5. View が Model データ表現と HTTP Response View を参照ビジネスロジック 6. View がレスポンスを送信

実装コード例 View <html> <p><%: Html.TextBox("data", Model.data) %></p> </html> Model と Controller public class HomeController : Controller { MyModelService myModel = new MyModelService(); public ActionResult Edit(int id) { MyData md = myModel.GetData(id); return View(md); } }

～標準志向 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 入力支援機能 − インテリセンス − コードスニペット

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 ファイルへの参照の追加

Visual Studio 2010 入力支援機能 − jQuery コードスニペット http://jquerysnippets.codeplex.com/ 対象ショートカット概要 HTML jq スクリプトタグと $(document).ready() ショートカットを挿入 HTML jqscript jQuery ソースファイルへのスクリプトタグを挿入 JavaScript func JavaScript の匿名関数を挿入 JavaScript jqclick click イベントハンドラを挿入 JavaScript jqfadein fadeIn 関数を挿入

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>

クリーン URL の生成 Web ページの配置パスに依存した URL URL ルーティング  Web ページの URL を柔軟に構築可能  RESTful な Web アプリケーションの構築  SEO (Search Engine Optimization) 対策

Controller の単体テスト生成されたテストプロジェクト

Web 開発会社様支援プログラムプログラム特典：開発ツールサーバーソフトウェア（検証、デモ用）参加要件： • Web 開発ビジネスを主業務としていることこれらのソフトウェアは MSDN サブスクリプションの（個人事業主を含む）ダウンロードサイトから提供させていただきます • 従業員数が 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://msdn.microsoft.com/ja-jp/asp.net/ff630143.aspx 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.

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

by Akira Inoue

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

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