Weitere ähnliche Inhalte Ähnlich wie jQuery と MVC で実践する標準志向 Web 開発 (20) Mehr von Akira Inoue (20) jQuery と MVC で実践する標準志向 Web 開発6. なんでもできる統合開発環境
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 開発は
これ!
9. 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
11. デバッグ対応
ブレーク スクリプト
ポイント ドキュメント
ツールヒント
による変数の
ウォッチ イミディエイト
ウィンドウ
ウォッチ ブレーク
ウィンドウ ポイント一覧
12. Visual Studio と jQuery
http://jquery.com/
$(function() {
$('#button1').click(function() {
$('#div1').fadeIn('slow');
});
});
13. 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>
15. Technology Radar January 2010
出典: Technology Radar January 2010 © ThoughtWorks
https://www1.vtrenz.net/imarkownerfiles/ownerassets/
1013/Technology%20Radar%20Jan%202010.pdf
17. Web アプリにおける MVC パターン
1. Controller が
リクエストを受信
HTTP Request Controller 2. Controller が
Model を初期化
3. ビジネス ロジック
を実行
入力と制御
4. Controller が View
を呼び出す Model
プレゼンテーション
5. View が Model
データ表現と
HTTP Response View を参照 ビジネス ロジック
6. View がレスポンス
を送信
18. 実装コード例
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);
}
}
20. ~ 標準志向 Web 開発のために ~
標準技術を生かした Web 開発
サーバーサイド技術を生かした Web 開発
22. HTML / CSS 支援機能
− HTML 検証
− CSS 検証
− CSS 1.0 / 2.0 / 2.1 に対する検証
− アクセシビリティ検証※
※ アクセシビリティ検証は Visual Studio Professional 以上の機能
※ WCAG (Web Content Accessibility Guidelines) : W3C 勧告
※ Access Board 508 : 米国連邦政府ハビリテーション法 508 条
24. 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 ファイル
への参照の追加
25. Visual Studio 2010 入力支援機能
− jQuery コードスニペット
http://jquerysnippets.codeplex.com/
対象 ショートカット 概要
HTML jq スクリプトタグと $(document).ready()
ショートカットを挿入
HTML jqscript jQuery ソースファイルへのスクリプト
タグを挿入
JavaScript func JavaScript の匿名関数を挿入
JavaScript jqclick click イベントハンドラを挿入
JavaScript jqfadein fadeIn 関数を挿入
26. CDN から jQuery を利用する
− Microsoft Ajax Content Delivery Network
Web サーバー
エッジ キャッシュ
サーバー
ajax.microsoft.com
27. ホストされる 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>
28. クリーン URL の生成
Web ページの配置パスに依存した URL
URL ルーティング
Web ページの URL を柔軟に構築可能
RESTful な Web アプリケーションの構築
SEO (Search Engine Optimization) 対策
30. Web 開発会社様 支援プログラム
プログラム特典:
開発ツール
サーバー ソフトウェア(検証、デモ用)
参加要件:
• Web 開発ビジネスを主業務としていること
これらのソフトウェアは MSDN サブスクリプションの (個人事業主を含む)
ダウンロード サイトから提供させていただきます • 従業員数が 25 名以下であること
技術サポート • プログラム加盟後、6 カ月以内に Windows
プラットフォームを用いた新しいドメインの
Web サイトを開発すること。
その他 期間:最大 3 年間
費用:無料(プログラム終了時にプログラム提供料
として 100 米ドルお支払いいただきます)
www.microsoft.com/web/websitespark
32. © 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.