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

4,104 views
4,006 views

Published on

Presentation for OSC 2010 in Hokkaido.
http://www.ospn.jp/osc2010-do/

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,104
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
40
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

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

×