• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
最新 ASP.NET Web 開発オーバービュー
 

最新 ASP.NET Web 開発オーバービュー

on

  • 2,843 views

 

Statistics

Views

Total Views
2,843
Views on SlideShare
2,829
Embed Views
14

Actions

Likes
1
Downloads
17
Comments
0

4 Embeds 14

http://us-w1.rockmelt.com 7
http://twitter.com 3
http://localhost 3
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    最新 ASP.NET Web 開発オーバービュー 最新 ASP.NET Web 開発オーバービュー Presentation Transcript

    • 最新 ASP.NET Web 開発 オーバービュー 日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト 井上 章 (いのうえ あきら) Blog: blogs.msdn.com/chack Twitter: @chack411© 2011 Microsoft Corporation. All rights reserved. 1
    • セッションの目的とゴール Session Objectives and Takeaways • ASP.NET MVC 3 を中心とした Web 開発の全体像を把握する • Visual Studio 2010 と ASP.NET の Web 開発の魅力 を体感!© 2011 Microsoft Corporation. All rights reserved. 2
    • アジェンダ • Web 開発の技術トレンド • ASP.NET と Visual Studio • ASP.NET MVC 概要 • Razor 構文とヘルパーの利用 • jQuery と Visual Studio • Web 標準への対応 • ASP.NET MVC 3 on Windows Azure© 2011 Microsoft Corporation. All rights reserved. 3
    • Web 開発の技術トレンド© 2011 Microsoft Corporation. All rights reserved. 4
    • Web 技術トレンド ECMAScript 5 CSS3 HTML5 jQuery Ajax Web API MVC RIA REST Atom JSON© 2011 Microsoft Corporation. All rights reserved. 5
    • アプリケーション構成のトレンド WPF Web API Win フォーム HTTP ASP.NET HTML / JS Silverlight REST JSON クライアント サーバー© 2011 Microsoft Corporation. All rights reserved. 6
    • Web 開発 プラットフォーム サーバー サイド クライアント サイド© 2011 Microsoft Corporation. All rights reserved. 7
    • ASP.NET と Visual Studio© 2011 Microsoft Corporation. All rights reserved. 8
    • ASP.NET とは? Web 開発のフレームワーク • 動的 Web アプリケーションの開発・実行基盤 – サーバー側で動的に HTML を生成 (ASP, PHP 等と同じ) • さまざまな形態の Web 開発に対応 – 個人規模 Web サイト ⇔ 大規模 Web アプリケーション ASPX Razor クライアント HTML 処理ロジック 動的生成 Web ブラウザー ASP.NET サーバー© 2011 Microsoft Corporation. All rights reserved. 9
    • ASP.NET と Visual Studio フレームワーク構成図 Web フォーム ASP.NET ASP.NET AJAX MVC 3 動的データ ASP.NET 4 .NET Framework 4© 2011 Microsoft Corporation. All rights reserved. 10
    • Web フォーム vs. MVC それぞれの特徴 D & D 配置 Web フォーム 容易な UI 開発  豊富なサーバー コントロール  イベント駆動型プログラミング ASP.NET MVC Web 標準志向 テスト駆動開発  HTML ベースの UI 開発  MVC パターン© 2011 Microsoft Corporation. All rights reserved. 11
    • ASP.NET MVC 概要© 2011 Microsoft Corporation. All rights reserved. 12
    • What is MVC ? デザイン パターン M V C • Model データとビジネス ロジック を表現 • View Model から取得したデータを プレゼンテーション (UI) へ出力する • Controller ユーザーからの入力を受付け View と Model を制御する© 2011 Microsoft Corporation. All rights reserved. 13
    • MVC オーバービュー Web アプリにおける MVC パターン 1. Controller が リクエストを受信 HTTP Request Controller 2. Controller が Model を初期化 3. ビジネス ロジック を実行 入力と制御 4. Controller が View を呼び出す Model プレゼンテーション データ表現と View 5. View が Model HTTP Response を参照 ビジネス ロジック 6. View がレスポンス を送信© 2011 Microsoft Corporation. All rights reserved. 14
    • ASP.NET MVC 3 最新 Web アプリ開発フレームワーク • Visual Studio 2010 用の追加コンポーネント – Web Platform Installer (Web PI) からセットアップ可能 • オープン ソース (CodePlex) • 主な新機能 – Razor ビュー エンジン の搭載 – ダイナミック ViewBag プロパティ – グローバル Action Filters – JsonValueProviderFactory と JSON モデル バインド – ・・・© 2011 Microsoft Corporation. All rights reserved. 15
    • ASP.NET MVC 3 Tools Update プロジェクト テンプレート機能強化 • HTML5 / CSS3 対応プロジェクト テンプレート • Windows 認証 対応プロジェクト テンプレート • スキャフォールディング機能の強化 • 標準搭載コンポーネントの強化と NuGet 対応 – Entity Framework 4.1 – jQuery 1.5.1 – jQuery Validation 1.8.0 – jQuery UI 1.8.11 – Modernizr  ASP.NET MVC 3 RTM (2011 年 1 月 13 日)  ASP.NET MVC 3 Tools Update (2011 年 4 月 12 日) - ランタイム (System.Web.Mvc.dll) は変更なし© 2011 Microsoft Corporation. All rights reserved. 16
    • パッケージ マネージャ NuGet でゲット! http://nuget.org/ • NuGet (ぬげっと) とは ... – ヘルパーやオープンソース ライブラリのパッケージ公開と 管理の仕組み – Visual Studio や WebMatrix のパッケージ マネージャ機能 – GUI / コンソール の 2 通りの利用方法 – NuGet ギャラリーを利用したヘルパーの公開© 2011 Microsoft Corporation. All rights reserved.
    • Razor 構文と ASP.NET Web ページ© 2011 Microsoft Corporation. All rights reserved. 18
    • Razor (レイザー) !© 2011 Microsoft Corporation. All rights reserved.
    • ビューの特徴と HTML 生成 埋め込みコード ブロックの利用 • MVC 3 では 2 つの ビュー エンジン が標準搭載  Web フォーム (.aspx) <div><%: DateTime.Now.ToString() %></div> <div><%: Html.TextBox("text", Model) %></div>  Razor (.cshtml / .vbhtml) <div>@DateTime.Now.ToString()</div> <div>@Html.TextBox("text", Model)</div> – コーディング ベースのビュー記述 – Web サーバー コントロールは使用しない (ポストバックや ViewState は使用しない) – ヘルパー メソッドで HTML タグ ブロックを生成© 2011 Microsoft Corporation. All rights reserved. 20
    • "Razor" とは Small, Simple, Seamless • ページ記述のための新しい 構文 (記法) @{ var title = "Hello Razor"; } .cshtml <h1>@title</h1> <ul> @foreach (var item in products) { <li>@item.Name</li> } </ul> <p>Time is @DateTime.Now</p> – シンプル & クリーン – タイピング量とコード サイズの低減 (vs. PHP, ASPX) – 便利なヘルパー ライブラリと容易な拡張 – C# (.cshtml), Visual Basic (.vbhtml) をサポート© 2011 Microsoft Corporation. All rights reserved. 21
    • ASP.NET Web ページ とは Razor 構文で記述するページ定義と処理エンジン WebMatrix ASP.NET MVC 3 Web サイト Web 開発 作成ツール HTML 生成 フレームワーク エンジン ASP.NET Web ページ Razor HTML .cshtml .vbhtml ※ 英語表記では ASP.NET Web Pages© 2011 Microsoft Corporation. All rights reserved. 22
    • ヘルパー の利用© 2011 Microsoft Corporation. All rights reserved. 23
    • ヘルパー とは? 便利な Web パーツ ライブラリ @Bing.SearchBox() @Facebook.LikeButton()@LinkShare.GetHtml() @Twitter.Search() @GamerCard.GetHtml()© 2011 Microsoft Corporation. All rights reserved. 24
    • MVC 標準 ヘルパー メソッド HTML 生成を助ける関数群 メソッド名 概要 ActionLink アクション名などから a タグを生成 BeginForm form タグを生成 TextBox input タグによる入力フィールドを生成 TextBoxFor … … 使用例 @Html.ActionLink("Go to Home", "Index") @Html.TextBox("message", model.Message) @Html.TextBoxFor(model => model.Message)© 2011 Microsoft Corporation. All rights reserved. 25
    • カスタム ヘルパーの作成 便利な Web パーツ ライブラリ • App_Code フォルダ にファイルを作成 ファイル名: <ヘルパー名>.cshtml (または .vbhtml) • @helper でヘルパーを定義 (@functions で内部関数の定義も可能) MyHelper.cshtml @helper Memo(string content) { <div class="memo"> <p><strong>メモ:</strong>@content</p> </div> } 使用例 <html> @MyHelper.Memo("ヘルパーを作りました!") </html>© 2011 Microsoft Corporation. All rights reserved. 26
    • カスタム ヘルパーの配布 NuGet ギャラリーへの公開 • カスタム ヘルパーの登録方法 1. NuGet ギャラリー サイト (www.nuget.org) で ユーザー登録 2. NuGet Package Explorer または NuGet.exe を ダウンロード • CodePlex - NuGet プロジェクト : http://nuget.codeplex.com/releases 3. 作成したヘルパーに必要なファイル群を パッケージング (.nupkg) 4. NuGet ギャラリーの My Account ページから Access Key を入手 5. 上記ツールで Access Key を使って NuGet ギャラリー へ発行© 2011 Microsoft Corporation. All rights reserved. 27
    • jQuery と Visual Studio© 2011 Microsoft Corporation. All rights reserved. 28
    • jQuery のサポート Visual Studio と jQuery • 高速・軽量な JavaScript ライブラリ – DOM / CSS / Ajax 処理を容易に – オープンソース $(function() { – 公式サイト - jquery.com });$(#div1).fadeIn(slow); – 最新バージョンは 1.6.2 • Visual Studio と jQuery – Visual Studio 2010 & ASP.NET 4 • jQuery 1.4.1 標準搭載 – ASP.NET MVC 3 Tools Update • jQuery 1.5.1 & jQuery UI 1.8.11 搭載© 2011 Microsoft Corporation. All rights reserved.
    • jQuery コーディング支援機能 インテリセンスとコード スニペット • インテリセンス – オート コンプリート – オート コレクト • コード スニペット – コード ブロックのひな形を挿入 Tab キー入力 jQuery Code Snippets for Visual Studio 2010 ダウンロード http://jquerysnippets.codeplex.com/© 2011 Microsoft Corporation. All rights reserved. 30
    • Visual Studio 2010 Web 標準への対応© 2011 Microsoft Corporation. All rights reserved. 31
    • Visual Studio 2010 と Web 標準 HTML5 / CSS3 を使う • Web Standards Update for Visual Studio 2010 SP1 (無償) – 拡張機能マネージャー または Visual Studio ギャラリー http://visualstudiogallery.msdn.microsoft.com/ から入手してインストール – HTML5 / CSS3 スキーマによるインテリセンスと検証 – GeoLocation & Local Storage API インテリセンス© 2011 Microsoft Corporation. All rights reserved. 32
    • ASP.NET MVC 3 on Windows Azure© 2011 Microsoft Corporation. All rights reserved. 33
    • Azure で ASP.NET MVC 3 MVC 3 Web Role テンプレート • Windows Azure Tools for Visual Studio 2010 v1.4 (August 2011 Release) – ダウンロードは Web Platform Installer (Web PI) から可能 – ASP.NET MVC 3 Web Role テンプレート搭載© 2011 Microsoft Corporation. All rights reserved. 34
    • (参考) MVC 3 アプリの配置 依存関係のアセンブリの追加 • 配置可能な依存関係の追加 から 必要なアセンブリを追加可能 • ホスティング サーバーなどに 容易に配置が可能 ビルド時に bin へコピーされる© 2011 Microsoft Corporation. All rights reserved. 35
    • Edtter を作ろう!ハンズオンラボ テキスト&サンプル公開中• ダウンロード: http://edtter.codeplex.com/• サンプルが Windows Azure 上で 期間限定公開中: http://www.edtter.com/ 36
    • まとめ© 2011 Microsoft Corporation. All rights reserved. 37
    • まとめ ASP.NET MVC 3 Web 開発フレームワーク .cshtml ASP.NET Web ページ .vbhtml HTML ページ生成エンジン Razor ヘルパー Web ページ記述構文 Web パーツ ライブラリ© 2011 Microsoft Corporation. All rights reserved. 38
    • リファレンス #1 Microsoft Web Platform http://www.microsoft.com/web/ MSDN ASP.NET デベロッパー センター http://msdn.microsoft.com/ja-jp/asp.net/default.aspx ASP.NET MVC 3 ダウンロード http://www.microsoft.com/downloads/details.aspx?FamilyID=d2928bc1 -f48c-4e95-a064-2a455a22c8f6&displayLang=ja ASP.NET MVC チュートリアル http://msdn.microsoft.com/ja-jp/asp.net/ff630143.aspx ASP.NET MVC サンプル ソース コード ~ Edtter ~ http://edtter.codeplex.com/ THE TRUTH IS OUT THERE ~ 井上 章のブログ ~ http://blogs.msdn.com/chack/© 2011 Microsoft Corporation. All rights reserved. 39
    • リファレンス #2 ASP.NET MVC: The Official Microsoft ASP.NET Site (英語) http://www.asp.net/mvc CodePlex - ASP.NET MVC (英語) http://aspnet.codeplex.com/wikipage?title=MVC ScottGus Blog (英語) http://weblogs.asp.net/scottgu/default.aspx Phil Haacks Blog (英語) http://haacked.com/Default.aspx Scott Hanselmans Blog (英語) http://www.hanselman.com/blog/ K. Scott Allens Blog (英語) http://odetocode.com/Blogs/scott/default.aspx© 2011 Microsoft Corporation. All rights reserved. 40
    • © 2011 Microsoft Corporation. All rights reserved. 41