The Microsoft Conference 2014

ROOMD

Web アプリのリフォーム～モバイルとクラウド活用に向けた技術選択～

日本マイクロソフト株式会社

エバンジェリスト

井上章 (いのうえあきら)

http://aka.ms/chack

MSC 2014 開発系関連セッションの位置づけ

ビジネス環境の変化に伴うアプリケーションのリフォーム方法と技術選択

デスクトップアプリリフォーム

Visual Studio で実現するクラウド時代の Rapid Release

Web アプリのリフォーム

マルチデバイスを見据えたこれからのアプリケー

ション開発技術

実践 !! IoT(Internet of

Things)

オープンテクノロジによる O365 アプリ

の可能性

DE-241

DE-261 DE-251

DE-211DE-121 DE-271

DE-131

セッションのゴールSession Takeaways

Web アプリ開発のトレンドを振り返る

ASP.NET アプリのモバイル & クラウド活用を学ぶ

.NET のモバイル & クラウド最適化の流れを知る

アプリケーションの技術トレンドと近未来Productivity Future Vision

デバイスの多様化

マルチデバイス (PC, Tablet, Smartphone ...)

クロスプラットフォーム

IoT (Internet of Things)

不可欠な Web 技術

HTML, CSS, JavaScript, HTTP, REST ...

クラウド環境の普及と活用

スケーラビリティとアベイラビリティ

ビッグデータ分析

MOBILE CLOUD

MOBILE-FIRST CLOUD-FIRST

Mobile First

PC, Tablet, Phone

ASP.NET 4.5

クロスブラウザー

レスポンシブ Web

ディスプレイモード

レスポンシブ Web デザインMobile Web Experience

CSS3 メディア クエリによるスタイルとレイアウト変更

デザイン中心のマルチデバイス対応手法

共通した HTML マークアップによる UI エクスペリエンスの提供

Twitter Bootstrap with ASP.NET

Bootstrap http://getbootstrap.com/

http://bootswatch.com/

デバイス判別とビューの切り替えマルチデバイスへの対応

ASP.NET の Display Modes 機能によるデバイスの判別

モバイル向けビュー (*.mobile.*) へ自動切り替え

Web アプリにおけるマルチデバイス対応手法の選択Design and Mobile Experience

レスポンシブ Web

デザイン重視

デスクトップとモバイルで同じ URL の Web サイトを提供

jQuery Mobile

タッチ操作重視

モバイルに特化した Web サイトを提供

デバイス判別とビューの切り替え (ASP.NET Display Modes 機能)

モバイルデバイス毎に最適化した Web サイトを提供

Cloud First

クラウドの利用目的と形態

社外公開向け

Web サイト開発 &

テスト環境

社内向けアプリ

& インフラ基盤

外部向けアプリ基盤

コンピューティング

データ サービス

TrafficManager

仮想ネットワーク

ExpressRoute

モバイルサービスWEB サイト

クラウドサービス仮想マシン

アプリケーションサービス

Blobs テーブル キュー

SQL データベース

MachineLeaningHD Insight 復旧サービス StoreSimple

ActiveDirectory

BizTalk サービスService Bus

CDNAPI 管理

メディアサービス 通知ハブ

スケジューラ

Automation

CachingRemoteApp

VisualStudioOnline

ネットワーク

Files

Visual Studio 2013 & Microsoft Azure

アプリケーションの負荷パターン

増加

バッチ処理Lo

ad

No

load

Lo

ad

予測可能

予測不可能

スケール

スケール

スケール

Web アプリケーションパターンの進化とASP.NET 技術選択

"More and more of ASP.NET is open source. We want to make ASP.NET more pluggable, more open, more fun."

"We've got big things planned - some that will surprise you."

February 25, 2012by Scott Hanselman

One ASP.NET 構想One ASP.NET Vision

• NuGet (ぬげっと / にゅーげっと)

– オープンソース ライブラリなどのパッケージ管理の仕組み（インストール、更新、配布）

– Visual Studio で標準採用

– NuGet ギャラリーを利用したパッケージの公開が可能

http://nuget.org/

Web フォームと ASP.NET MVCWeb Forms vs. MVC

Web フォーム

豊富なサーバー コントロール

イベント駆動型プログラミング

ASP.NET MVC

HTML ベースの UI 開発

Model-View-Controller パターン

D & D 配置容易な UI 開発

Web 標準志向テスト駆動開発

Evolution of Web Application Patterns

サービス

デバイス+

+

次世代型のパターン(Emerging Patterns)

サーバー

クライアント

従来型のパターン(Established Patterns)

Single Page Application Architecture

クライアント サーバー

ASP.NET

REST

JSON

XML

HTML

View

Model

HTTP

View

Async

Web API

ASP.NET Single Page Application (SPA)

単一ページ構成の Ajax アプリケーション

HTML5/CSS3 や JavaScript を活用

優れた Web UX とマルチデバイス対応

SPA

Framework for HTTP Services

RESTful HTTP サービス構築のためのフレームワーク

ASP.NET プロジェクトテンプレートの一部として提供

URL ルーティング

モデルバインディング

スキャフォールディング

OData クエリパラメータ

ASP.NET SignalRReal Time Web Application Library

サーバーからクライアントへのプッシュや RPC 通信

クライアント - サーバー間の永続的コネクション

トランスポートの自動ネゴシエーション (WebSocket, Long Polling …)

1 サーバーあたり数千の接続を非同期で処理

リアルタイム・非同期・双方向通信ライブラリ

NuGet パッケージとして提供

ASP.NETアプリ

SignalRハブ JavaScript / .NET

アプリ

SignalRハブ Proxyリアルタイム

通信サーバークライアント

ASP.NET / Azure Web 開発ハンズオントレーニング

スライド, GeekQuiz デモソースコード

http://aka.ms/geekquiz

ASP.NET vNext

モダンWeb と ASP.NET の今後Modern Web and ASP.NET

エディターや開発ツールの選択

オープンソースへの貢献 クロスプラットフォームOSS

クラウドへシームレスな移行

迅速な開発サイクルモジュール化

パフォーマンス向上

Visual Studio “14” & ASP.NET vNextCommunity Technology Preview

次期バージョン Visual Studio “14” CTP リリース

RTM (正式リリース) は 2015 年を予定 (CTP 版は Go-live ライセンスではない)

Azure 仮想マシンイメージが利用可能

Windows Server 2012 R2 + Visual Studio “14” Professional CTP 4

ASP.NET vNext オープンソース ( http://github.com/aspnet )

新しい ASP.NET vNext プロジェクトテンプレート (*.kproj) の採用

新しい設定システム (project.json) の採用

モジュラー設計, 完全な Side by Side 実行, 高速化, 低メモリ使用量

Windows, Mac, Linux での実行* CTP: Community Technology Preview

.NET と Web アプリの今後

.NET の今後Future of .NET

.NETvNext

Next gen JIT (“RyuJIT”)

SIMD (Data Parallelization)

ランタイム コンパイラー.NET Compiler Platform (“Roslyn”)

Languages innovation

BCL and PCL

Entity Framework

ライブラリ

Web アプリのリフォームに向けて

NuGet ASP.NET

Appendix

書籍：プログラミング ASP.NET MVC / SignalRProgramming ASP.NET MVC / SignalR

プログラミング ASP.NET MVC 5 対応版Dino Esposito 著、日本マイクロソフト井上章監訳

http://ec.nikkeibp.co.jp/item/books/P98380.html

2014 年 10 月 30 日一般発売開始

プログラミング ASP.NET SignalRJose M. Aguilar 著、日本マイクロソフト井上章監訳

http://ec.nikkeibp.co.jp/item/books/P98410.html

2014 年 10 月 30 日一般発売開始

Expo会場 Visual Studioブースにお越しください

Deploy InsightTestBuildWorkCode

抽選会やってます！豪華景品を当てよう

最新ツールを体験

http://aka.ms/TryAz

http://aka.ms/Free-Azure

開発・テストで使える MSDN Azure 無料特典

MSDN サブスクライバー向け Azure 特典http://aka.ms/azure-msdn-benefits

MSDN サブスクライバー向け Azure 無償特典利用方法http://aka.ms/azure-msdn-use

チーム開発で！

Visual Studio Online月額約 2,000円

※ A1 + ストレージ 127GB を1ヶ月間平日に 24 時間利用した場合の料金

開発環境として！

Windows+Visual Studio ※

月額約 4,500円

テスト環境として！

Windows Server ※月額約 4,500円

エディション別の Azure 無償枠

無償枠内で例えばこんな使い方

すぐ利用可能

Pro Premium Ultimate

月々 5,500 円分 10,500 円分 15,500 円分

年間 66,000 円分 126,000 円分 186,000 円分

※無償枠を超過して自動的に課金されることはありません。

マイクロソフトのオンライントレーニング

Microsoft Virtual Academy (MVA)

• 専門家が提供する質の高い無料コンテンツ

• 100 以上の日本語コースを提供

• C# や HTML5 などプログラミングの基礎も網羅

• MCSD* 受験対策コースも用意* Microsoft Certified Solution Developer

http://aka.ms/msmvaこちらの URL よりアクセス

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows 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.