マイクロソフトweb開発の今と今後
Post on 15-Jan-2015
3.952 Views
Preview:
DESCRIPTION
TRANSCRIPT
マイクロソフト Web 開発の今と今後
日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
エバンジェリスト
井上 章 (いのうえ あきら)
blogs.msdn.com/chack twitter.com/chack411
セッションのゴール Session Takeaways
Web 開発のトレンドと今後 を知る
ASP.NET の概要 を学ぶ
アジェンダ ASP.NET Web 開発の全体像
Web 開発のトレンド
ASP.NET Web 開発
Visual Studio 2010 Web 開発支援機能
jQuery の利用
Web 開発の今後
まとめ
Web 開発のトレンド
キーワードとトレンド Keywords and Trend
HTML5 CSS3
ECMAScript 5
Ajax jQuery
Web API MVC
REST JSON
async
Atom
Video Productivity Future Vision 2011
Productivity Future Vision 近未来の IT, Cloud, Web ...
不可欠な Web 技術 (HTTP, HTML5, CSS3 ...)
Web API の進化と普及 (REST, JSON ...)
サーバー ロジック と クライアント UI の疎結合
クライアント側実装の多様化
HTML5, CSS3, ECMAScript 5
RIA (Silverlight, Flash, WPF ... )
PC, スマートフォン ...
http://www.microsoft.com/office/vision/
クラウド時代のアプリケーション構成
クライアント サーバー
ASP.NET
Web API
HTTP REST JSON XML
ネイティブ アプリ
デスクトップ Web アプリ
モバイル Web アプリ
Demo クラウド時代の Web アプリケーション
マイクロソフト Web 開発プラットフォーム サーバー サイド 開発 クライアント サイド 開発
ASP.NET Web 開発
ASP.NET とは？
動的 Web アプリケーションの開発・実行基盤 サーバー側で動的に HTML を生成 (ASP, PHP 等と同じ)
さまざまな形態の Web 開発に対応 個人規模 Web サイト ⇔ 大規模 Web アプリケーション
クライアント
Web ブラウザー
処理ロジック
サーバー
ASPX
HTML
ASP.NET
動的生成
ASP.NET 4 フレームワーク構成 最適化された開発手法
.NET Framework 4
ASP.NET 4
Web フォーム ASP.NET MVC 3
ASP.NET AJAX
動的データ
Web フォーム vs. MVC それぞれの特徴
Web フォーム
豊富なサーバー コントロール
イベント駆動型プログラミング
ASP.NET MVC
HTML ベースの UI 開発
Model-View-Controller パターン
D & D 配置 容易な UI 開発
Web 標準志向 テスト駆動開発
Demo Web フォームと ASP.NET MVC
Web フォーム か？ それとも MVC か？ 技術選択ガイダンス
ASP.NET MVC と Web フォーム は適材適所で使い分けることが重要
プロジェクトの要求、アプリケーションの仕様、 エンジニアのスキル、開発手法、チーム編成など ...
Web フォーム ASP.NET MVC
主な技術スキル イベント駆動型プログラミング
(VB6.0/Win フォームなどと同様) C# / VB
Web 技術全般 (HTML, JavaScript, Ajax の知識など)
C# / VB MVC デザイン パターン
アプリの特徴 Web サーバー コントロールの活用
機能、納期重視 (業務アプリなど)
jQuery, Web API 等の Web 技術を活用 パフォーマンス、デザイン重視
(インターネット向けアプリなど)
移行の容易性 VB6.0/Win フォームからの移行 HTML ページ、Classic ASP からの移行
Visual Studio 2010 Web 開発支援機能
できることなら 楽 したい ... HTML, CSS, JavaScript のコーディング
支援機能がたくさん！
Visual Studio 2010 と Web 標準 コーディング支援機能
HTML 検証 HTML 4.01 / XHTML 1.0 等の スキーマに沿った検証 (HTML5 も可能)
CSS 検証 CSS 1.0 / 2.0 / 2.1 に対する検証
アクセシビリティ検証 WCAG / Access Board 508 に沿った アクセシビリティ検証
※ WCAG (Web Content Accessibility Guidelines) : W3C 勧告 ※ Access Board 508 : 米国連邦政府ハビリテーション法 508 条
インテリセンスとコード スニペット コーディング支援機能
インテリセンス
オート コンプリート
オート コレクト
コード スニペット
コード ブロックのひな形を挿入
HTML, JavaScript, C#, Visual Basic で使用可能
Tab キー入力
JavaScript のデバッグ Web 開発支援機能
ブレーク ポイント
ウォッチ ウィンドウ ブレーク
ポイント一覧
スクリプト ドキュメント
イミディエイト ウィンドウ
変数の ツール ヒント
表示
Demo Visual Studio コーディング支援機能
JavaScript のプロファイリング Web 開発支援機能
JavaScript のパフォーマンス分析
ASP.NET Web アプリケーション
静的 Web ページ (.htm, .js)
Demo JavaScript プロファイリング
パッケージ マネージャ NuGet でゲット！
NuGet (ぬげっと) とは ...
ヘルパーやオープンソース ライブラリのパッケージ公開と 管理の仕組み
Visual Studio や WebMatrix のパッケージ マネージャ機能
GUI / コンソール の 2 通りの利用方法
NuGet ギャラリーを利用したヘルパーの公開
http://nuget.org/
Demo NuGet パッケージ マネージャ
jQuery の利用
jQuery のサポート Microsoft <3 jQuery
jQuery は高速・軽量な JavaScript ライブラリ
DOM / CSS / Ajax 処理を容易に
オープンソース
MIX10 で jQuery のサポートを発表
John Resig (Creator of jQuery) のキーノート登壇
Visual Studio 2010 で標準採用 Web フォーム
jQuery 1.4.1 標準搭載
ASP.NET MVC 3 Tools Update
jQuery 1.5.1 & jQuery UI 1.8.11 搭載
$(function() { $('#div1').fadeIn('slow'); });
jQuery コーディング支援機能 インテリセンスとコードスニペット
インテリセンス
オート コンプリート
オート コレクト
コード スニペット
コード ブロックのひな形を挿入
Tab キー入力
jQuery Code Snippets for Visual Studio 2010 ダウンロード http://jquerysnippets.codeplex.com/
Demo jQuery の利用
Web 開発の今後
言語とフレームワークとライブラリと ... Web 開発の今後
HTML5 / CSS3
Web 標準として急速に普及
マルチ プラットフォームにおける共通 UI マークアップ
残るクロス ブラウザ・クロス プラットフォーム問題
Silverlight / Flash 不要？
言語とフレームワークとライブラリと ... Web 開発の今後
JavaScript
第一級のプログラミング言語としての進化と普及
オブジェクト指向の知識と理解
ECMAScript 5 にも注目
JavaScript ライブラリの活用
jQuery / jQuery UI / jQuery Mobile / Modernizr / knockout.js ...
サーバー サイドへの応用
サーバー サイド JavaScript "node.js"
サーバー サイドのサービス化とその利用 Web 開発の今後
進む Web API の利用
サーバー サイドのサービス インターフェースの実装と公開
実装手段の選択、非同期処理、ステートレス ...
クライアント サイド実装の多様化
クライアント サイドへの処理の分散にともなうアーキテクチャの変化
Ajax 技術の知識と理解
クロス デバイス、クロス プラットフォーム、クロス ブラウザ対応
PC、スマートフォン、スレート、各種家電、自動車・・・
ネイティブ アプリ開発のための Web 技術 Web 開発の今後
応用が進む HTML5 + CSS3 + JavaScript
PhoneGap (http://phonegap.com/)
スマートフォン向けアプリ開発フレームワーク
HTML5, CSS3, JavaScript でネイティブ アプリケーション開発
これまでも...
Windows デスクトップ ガジェット / Google デスクトップ ガジェット / AIR ...
そして次期 Windows へ
Windows デベロッパー センター: http://dev.windows.com/
HTML5 + CSS3 + JavaScript + APIs
Web 開発の今後に向けて
開発者が避けては通れない Web 技術
HTML5 / CSS3 / JavaScript ...
最適な技術選択と アプリケーション アーキテクチャの検討
複雑化するクライアント サイド実装への対応
最適な開発環境・ツールの選択
コーディング、デバッグ、テストへの支援
リファレンス #1
MSDN ASP.NET デベロッパー センター http://msdn.microsoft.com/ja-jp/asp.net/
MSDN Web 開発 http://msdn.microsoft.com/ja-jp/ff380144
Microsoft Web 開発ガイドライン http://msdn.microsoft.com/ja-jp/asp.net/ff602016
MSDN クラウド開発 http://msdn.microsoft.com/ja-jp/ff380142
THE TRUTH IS OUT THERE ～ 井上 章のブログ ～ http://blogs.msdn.com/chack/
リファレンス #2
The Official Microsoft ASP.NET Site (英語) http://www.asp.net/
ScottGu's Blog (英語) http://weblogs.asp.net/scottgu/default.aspx
Phil Haack's Blog (英語) http://haacked.com/Default.aspx
Scott Hanselman's Blog (英語) http://www.hanselman.com/blog/
Steven Sanderson's blog (英語) http://blog.stevensanderson.com/
© 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 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.
top related