Successfully reported this slideshow.
Infragistics Developer DaysVisual Studio 2012 が可能にするタッチ デバイス業務アプリケーション開発 ~ Web ソリューション構築編 ~Visual Studio 2012 で実現するHTML5 &...
セッションのゴールSession Takeaways• Visual Studio 2012 の Web 開発新機能 を学ぶ• Web 開発の最新事情 を知る
モダン Web アプリと マルチデバイス対応
マルチデバイス エクスペリエンスDevices, Platforms, Browsers• クロス デバイス  • PC, スマートフォン, タブレット ...• クロス プラットフォーム  • iOS, Android, Windows Ph...
レスポンシブ Web デザインMobile Web Experience• CSS3 メディア クエリによるスタイルとレイアウト変更 • デザイン中心のマルチデバイス対応手法 • 共通した HTML マークアップによる UI エクスペリエンスの提供
モダン Web アプリ エクスペリエンスSingle Page Application Architecture                                       ASP.NET                    ...
Visual Studio 2012マルチデバイス向け新機能
ASP.NET MVC 4Improvements of ASP.NET MVC 4          HTML ベースの UI 開発          Model-View-Controller パターン• HTML5 対応プロジェクト テン...
モバイル アプリケーション テンプレート新しいモバイル向け プロジェクト テンプレートの追加• jQuery Mobile の採用
Display Modesモバイル デバイスへの対応• MVC フレームワークによるモバイル デバイスの判別• モバイル向けビュー (*.mobile.*) へ自動切り替え
ASP.NET Web APINew Framework for HTTP Services      RESTful サービス構築のためのフレームワーク      MVC 4 プロジェクト テンプレートの一部として提供            ...
ASP.NET SignalRAsync library for .NET       リアルタイム・非同期・双方向通信ライブラリ       NuGet パッケージとして提供• クライアント - サーバー間の永続的コネクション• トランスポー...
コーディング支援機能Improvements of Editors• インテリセンス・コード スニペットの強化• HTML5 / CSS3 スキーマ対応• 開始タグと終了タグの同期リネーム• CSS カラー ピッカー• ベンダー プレフィックス...
さらに進化した Web 開発 IDEImprovements of Web Development• Page Inspector (ページ インスペクター) • HTML, CSS の確認と検査 • サーバー サイド コード連動 • ページの...
デバッグとテスト
Web アプリのテストImprovements of Testing Tools• JavaScript の単体テスト • Jasmine / QUnit をテスト エクスプローラーに統合可能 • 拡張機能: Chutzpah※ test ad...
Visual Studio 2012 / ASP.NET               Web 開発の今後
Web アプリ開発のトレンドこれからの Web アプリケーションで考えなければならないこと• マルチデバイス対応  • Web アプリか? ネイティブ アプリか?  • HTTP 通信ペイロード削減• レスポンシブ Web デザイン  • デザ...
One ASP.NETASP.NET Web Stack※ One ASP.NET - Making JSON Web APIs with ASP.NET MVC 4 Beta and ASP.NET Web API : www.hanselm...
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Upcoming SlideShare
Loading in …5
×

Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発

3,543 views

Published on

Published in: Technology
  • Be the first to comment

Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発

  1. 1. Infragistics Developer DaysVisual Studio 2012 が可能にするタッチ デバイス業務アプリケーション開発 ~ Web ソリューション構築編 ~Visual Studio 2012 で実現するHTML5 & マルチ デバイス時代の Web 開発日本マイクロソフト株式会社デベロッパー & プラットフォーム統括本部エバンジェリスト井上 章 (いのうえ あきら)blogs.msdn.com/chack twitter.com/chack411
  2. 2. セッションのゴールSession Takeaways• Visual Studio 2012 の Web 開発新機能 を学ぶ• Web 開発の最新事情 を知る
  3. 3. モダン Web アプリと マルチデバイス対応
  4. 4. マルチデバイス エクスペリエンスDevices, Platforms, Browsers• クロス デバイス • PC, スマートフォン, タブレット ...• クロス プラットフォーム • iOS, Android, Windows Phone ...• クロス ブラウザー • Web 標準と HTML5 / CSS3 • 実装レベル差異への対応
  5. 5. レスポンシブ Web デザインMobile Web Experience• CSS3 メディア クエリによるスタイルとレイアウト変更 • デザイン中心のマルチデバイス対応手法 • 共通した HTML マークアップによる UI エクスペリエンスの提供
  6. 6. モダン Web アプリ エクスペリエンスSingle Page Application Architecture ASP.NET HTML View HTTP Async View Model REST Web API JSON クライアント XML サーバー
  7. 7. Visual Studio 2012マルチデバイス向け新機能
  8. 8. ASP.NET MVC 4Improvements of ASP.NET MVC 4 HTML ベースの UI 開発 Model-View-Controller パターン• HTML5 対応プロジェクト テンプレート• モバイル アプリケーション テンプレート• Display Modes とビューの切り替え• スクリプトの自動縮小化 & 結合処理• Task, async, await による非同期アクション • Task-based Asynchronous Pattern (TAP)
  9. 9. モバイル アプリケーション テンプレート新しいモバイル向け プロジェクト テンプレートの追加• jQuery Mobile の採用
  10. 10. Display Modesモバイル デバイスへの対応• MVC フレームワークによるモバイル デバイスの判別• モバイル向けビュー (*.mobile.*) へ自動切り替え
  11. 11. ASP.NET Web APINew Framework for HTTP Services RESTful サービス構築のためのフレームワーク MVC 4 プロジェクト テンプレートの一部として提供 • URL ルーティング • モデル バインディング • スキャフォールディング (w/ Entity Framework) • OData クエリパラメータ (Microsoft.AspNet.WebApi.Odata)
  12. 12. ASP.NET SignalRAsync library for .NET リアルタイム・非同期・双方向通信ライブラリ NuGet パッケージとして提供• クライアント - サーバー間の永続的コネクション• トランスポートの自動ネゴシエーション • WebSocket, Server-Sent Events, Forever Frames, Long Polling• サーバーからクライアントへのプッシュや RPC 通信• 1 サーバーあたり数千の接続を非同期で処理
  13. 13. コーディング支援機能Improvements of Editors• インテリセンス・コード スニペットの強化• HTML5 / CSS3 スキーマ対応• 開始タグと終了タグの同期リネーム• CSS カラー ピッカー• ベンダー プレフィックスとメディア クエリー• ECMAScript 5 / HTML5 APIs サポート• アウトライン表示
  14. 14. さらに進化した Web 開発 IDEImprovements of Web Development• Page Inspector (ページ インスペクター) • HTML, CSS の確認と検査 • サーバー サイド コード連動 • ページのプレビュー• 画像のサムネイル表示• デバッグ用ブラウザーの 切り替え機能
  15. 15. デバッグとテスト
  16. 16. Web アプリのテストImprovements of Testing Tools• JavaScript の単体テスト • Jasmine / QUnit をテスト エクスプローラーに統合可能 • 拡張機能: Chutzpah※ test adapter for Visual Studio 2012• Web パフォーマンスとロード テストのプロジェクト • 容易なパフォーマンスとストレス テストの実施 • 同時アクセス ユーザー数や使用ブラウザーなどをシミュレート ※ フツパ
  17. 17. Visual Studio 2012 / ASP.NET Web 開発の今後
  18. 18. Web アプリ開発のトレンドこれからの Web アプリケーションで考えなければならないこと• マルチデバイス対応 • Web アプリか? ネイティブ アプリか? • HTTP 通信ペイロード削減• レスポンシブ Web デザイン • デザイン・開発ツールの選択• Single Page Application アーキテクチャ (SPA) • AJAX 処理における SEO 対策やブラウザ履歴管理対応 • オフライン実行への対応• HTTP REST サービス (Web API)• リアルタイム コミュニケーション
  19. 19. One ASP.NETASP.NET Web Stack※ One ASP.NET - Making JSON Web APIs with ASP.NET MVC 4 Beta and ASP.NET Web API : www.hanselman.com
  20. 20. © 2012 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 acommitment 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 INTHIS PRESENTATION.

×