jQuery と MVC で実践する標準志向 Web 開発
2 likes1,888 views
Presentation for OSC 2010 in Hokkaido. http://www.ospn.jp/osc2010-do/
![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>](https://image.slidesharecdn.com/oschokkaidojquerymvc-100626010422-phpapp01/85/jQuery-MVC-Web-13-320.jpg)
jQuery と MVC で実践する標準志向 Web 開発
- 4. Demo も あるよ！
- 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 開発は これ！
- 7. コンポーネントやアプリの一括管理ツール 無償ツール http://www.microsoft.com/web/downloads/platform.aspx
- 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
- 16. 新しい Web アプリ開発フレームワーク − ASP.NET MVC 1.0 − ASP.NET MVC 2 − HTML ベース 疎結合 − 単体テスト − URL ルーティング
- 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 条
- 23. Visual Studio 2010 入力支援機能 − インテリセンス − コード スニペット
- 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) 対策
- 29. Controller の単体テスト 生成された テストプロジェクト
- 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.