64
Web2.0 サササササササササササササササ サササササササササササササササ ササササササササ ササササササササ サササ ・・ サササササササササ ササササ [email protected]

Web2.0 サービスのアーキテクチャと実装

Embed Size (px)

DESCRIPTION

Web2.0 サービスのアーキテクチャと実装. マイクロソフトコーポレーション プラットフォーム・アーキテクチャ・チーム シニアアーキテクト 成本正史 [email protected]. Web の変遷. …. Web スタートアップ. Web 3.0. セマンティック Web. エンタープライズ. Web 2.0. ユーザー参加型、ソーシャルダイナミクス. Web 1.0. インターネットプレゼンス、サーチエンジン. - PowerPoint PPT Presentation

Citation preview

Page 1: Web2.0 サービスのアーキテクチャと実装

Web2.0 サービスのアーキテクチャと実装

マイクロソフトコーポレーションプラットフォーム・アーキテクチャ・チームシニアアーキテクト成本正史[email protected]

Page 2: Web2.0 サービスのアーキテクチャと実装

Web 1.0

Web 2.0

Web 3.0

インターネットプレゼンス、サーチエンジン

ユーザー参加型、ソーシャルダイナミクス

セマンティック Web

Web の変遷

Web スタートアップ

エンタープライズ

Page 3: Web2.0 サービスのアーキテクチャと実装

Web2.0アプリケーション

オンラインコミュニティにおける活発なソーシャル活動を通じてユーザーの参加を促すWebアプリケーション

Page 4: Web2.0 サービスのアーキテクチャと実装

Web2.0 サービス

アクセスはWebブラウザーに限定されない、サイトの成長は自社プロバイダーに限定されない

Page 5: Web2.0 サービスのアーキテクチャと実装

OPEN な Web2.0アプリケーション

O – OpenP – ProgrammableE – ExtensibleN - Neutral

Page 6: Web2.0 サービスのアーキテクチャと実装

http://www.myspace.com

Service

Page 7: Web2.0 サービスのアーキテクチャと実装

http://www.linkedin.com

Service

Page 8: Web2.0 サービスのアーキテクチャと実装

http://slideshare.net

Service

Page 9: Web2.0 サービスのアーキテクチャと実装

http://twitter.com

Service

Page 10: Web2.0 サービスのアーキテクチャと実装

http://www.livemocha.com

Application

Page 11: Web2.0 サービスのアーキテクチャと実装

http://www.popfly.com

Service

Page 12: Web2.0 サービスのアーキテクチャと実装

Aggregators E-mail

HTTP Wikis

Collective Intelligence

Viral

Social Networking

Folksonomies Sharing

Collaboration

Scalable Crowd Sourcing

Browsers

Social Media

IM

JavaScript

AJAX

CSS

Interoperable

Atom

Ruby on Rails

Programmable

RSS

Semantic Web

MVC

SEO

OpenID

Mashups

REST

Social

Accessible

Microformats

Syndication

XML

Modular

SOAP

XHTML

Blogs • 業界標準およびテクノロジー• デザインの原則 • 実装のパターン• 開発プラットフォーム• アプリケーションやサービス

Social Graphs

Blogosphere

ASP.NET PHP

Joomla Drupal

Social Web

Mobile

ユーザー

企業

Web2.0

Webスタートアッ

Web2.0 – 全体像

Page 13: Web2.0 サービスのアーキテクチャと実装

Web2.0 アプリケーションの構築

Page 14: Web2.0 サービスのアーキテクチャと実装

デモ : Planet PPT

Page 15: Web2.0 サービスのアーキテクチャと実装

Web 2.0 サービスの概念アーキテクチャ

Page 16: Web2.0 サービスのアーキテクチャと実装

Architecture Layers Tools

Users

Designers

Developers

Administrators

Page 17: Web2.0 サービスのアーキテクチャと実装

プラネット PPT R1 ソリューションアーキテクチャ

Page 18: Web2.0 サービスのアーキテクチャと実装

Repository

Adapter

Tools

Designers

Developers

Administrators

Page 19: Web2.0 サービスのアーキテクチャと実装

開発プラットフォームの選択

Page 20: Web2.0 サービスのアーキテクチャと実装

マイクロソフトの開発プラットフォーム

Page 21: Web2.0 サービスのアーキテクチャと実装

http://www.microsoft.com/web/

Page 22: Web2.0 サービスのアーキテクチャと実装

Architecture Layers Tools

Popfly

Expression

Visual Studio

Server Admin Tools

Page 23: Web2.0 サービスのアーキテクチャと実装

Repository

Planet PPT R1

Implementation Architecture

Tools

Expression

Visual Studio

Server Admin Tools

Adapter

Page 24: Web2.0 サービスのアーキテクチャと実装

Web2.0 サービスの一般的なアーキテクチャ

Page 25: Web2.0 サービスのアーキテクチャと実装

Web サービス

フレームワーク

ウィジェット

ブラウザー

AJAX

ブラウザプラグ

イン

Web UIフレーム

ワーク

ファウンデーショナルサービスアダプター

ユビキタスチャネ

サービスロ

ジック

非構造化ストレージ

ユーザー管理

ソーシャルサービス

広告

検索

データ

Page 26: Web2.0 サービスのアーキテクチャと実装

テクノロジーとパターンの選択

Page 27: Web2.0 サービスのアーキテクチャと実装

アーキテクチャ要素 Microsoft technology

ブラウザープラグイン Silverlight

Ajax ライブラリ ASP.NET AJAX

ウィジェット Windows Live Writer, Photo gallery, Office

ユビキタスチャネル Windows Mobile, Zune, XBOX, Windows Media Center

リッチクライアント Windows Presentation Foundation

Web ページフレームワーク ASP.NET , ASP.NET MVC

Web サービスフレームワーク Windows Communication Foundation, ADO.NET Data Services

サービスロジック .NET Services

ファウンデーショナルサービスアダプター

LINQ , Entity Framework , ASP.NET Dynamic Data

データ/非構造化ストレージ SQL Server, SSDS, Azure Storage

ユーザー管理ソーシャルサービス

Windows Live

広告 AdCenter

検索 Live Search

Page 28: Web2.0 サービスのアーキテクチャと実装

Category Type Pattern

Application Structuring Architectural MVC

Browser Client User Experience

Design AJAX(RIA)

Implementation Predictive Fetch

Auto Complete

Partial Page Update

Web Services Design/Implementation RESTful Services

SOAP Messaging

Syndication (RSS & Atom)

Data Access Architectural Repository

Design/Implementation ORM

Foundational Services Architectural Adapter

Implementation Provider

Page 29: Web2.0 サービスのアーキテクチャと実装

選択基準=アーキテクチャの観点

Page 30: Web2.0 サービスのアーキテクチャと実装

ファインダビリティプログラマビリティ

エクステンシビリティ……

Page 31: Web2.0 サービスのアーキテクチャと実装

実装ドリルダウン

Page 32: Web2.0 サービスのアーキテクチャと実装

Web サービス

フレームワーク

ウィジェット

ブラウザー

AJAX

ブラウザプラグ

イン

Web UIフレーム

ワーク

ファウンデーショナルサービスアダプター

ユビキタスチャネ

サービスロ

ジック

非構造化ストレージ

ユーザー管理

ソーシャルサービス

広告

検索

データ

Page 33: Web2.0 サービスのアーキテクチャと実装

Webアプリケーションの構造RIA テクノロジーRESTful Web サービスファウンデーショナルサービス

Page 34: Web2.0 サービスのアーキテクチャと実装

MVC vs. Classic ASP.NET

Page 35: Web2.0 サービスのアーキテクチャと実装

MVC - 関心事の分離- クリーンな URL- テスト容易性- HTML 出力に対するコントロール

Classic ASP.NET - インスタント開発- 豊富なサーバーコントロール- MS テクノロジーとの融合

Page 36: Web2.0 サービスのアーキテクチャと実装

ASP.NET MVC

Page 37: Web2.0 サービスのアーキテクチャと実装

基本動作AJAXとの組み合わせ

Silverlightとの組み合わせModelの実装

Page 38: Web2.0 サービスのアーキテクチャと実装

RIA テクノロジー

Page 39: Web2.0 サービスのアーキテクチャと実装

Rich Internet Application?

Page 40: Web2.0 サービスのアーキテクチャと実装

RIA はこれを提供する…

- 非同期アクセス- マルチメディアコンテンツの統合- 部分的なレンダリング- DOMを多用するレンダリング- ネットワークの効果的な利用- インタラクティブなUI- ローカルリソースの活用

Page 41: Web2.0 サービスのアーキテクチャと実装

RIA パターン

Pattern category Patterns Brief summary

Ajax Predictive fetch Predict what will be the next move of the user, and retrieve and cache the data before user takes any acti on

Periodical refresh

Automati cally updates the UI periodically without the full page postback

User Navigation Carousel Show only a selected few items at a time from a large set of items to utilize the limited real estate effectively

Breadcrumb Let users know their location in the website's hierarchical structure

Multi-media Integration

Thumbnail Provide miniature version of multi-media contents to browse quickly through a collection of contents

Zoom Provide users ability to zoom in on an image to view a details in a high resolution

Responsiveness Guesstimate Make a reasonable guess instead of requesting information from server to reduce the number of roundtrips.

Auto complete Display a list of suggested items that most closely match what the user has typed.

Page 42: Web2.0 サービスのアーキテクチャと実装

Presentation Viewer

Contextual Ads

<Slide Navigation Controls> | Notes

Embed Download + Favorites Tweet FriendFeed+ Recommend

Related Presentations By Topic Related Presentations By Author

Slide/Presentation User Comments+ Comment

X

Site Search

Home Community Business AccessoriesMy ZoneBrowse Upload

Logo | Welcome <User> (Sign out) | Invite

Title Description Title Description

Title Description Title Description

Multi-Media Integration Partial Rendering

Partial Rendering

Auto CompleteAnimation

Page 43: Web2.0 サービスのアーキテクチャと実装

RIA テクノロジーの選択方法

Page 44: Web2.0 サービスのアーキテクチャと実装

Either of the “Rich” UI elements required?

Static HTML

Multi-media content

NO

YES

Silverlight

rendering

NO

YES

ASP.NETAJAX

jQuery

Server interaction

ASP.NETAJAX

Simple

Complex

Visual pages

Data

RIA: テクノロジー選択

サービスとの対話

Retrieve Page or Data?

Controller

Page

Data

API

Page 45: Web2.0 サービスのアーキテクチャと実装

RESTful Web サービス

Page 46: Web2.0 サービスのアーキテクチャと実装

AddressabilityUniform Interface

StatelessConnectedness

REST: 原則

Page 47: Web2.0 サービスのアーキテクチャと実装

ASP.NET MVC - コードの再利用

Windows Communication Foundation

- プロトコルのコントロール-バインディングオプション-クリーンな URL

ADO.NET Data Services - インスタント開発

- データ駆動 Web

Page 48: Web2.0 サービスのアーキテクチャと実装

クリーンURLシリアライゼーション

シンディケーションエラーコード

キャッシュコントロールユーザー認証

REST: 実装

Page 49: Web2.0 サービスのアーキテクチャと実装

ファウンデーショナルサービス

Page 50: Web2.0 サービスのアーキテクチャと実装

変化に対応するためのデザイン

Page 51: Web2.0 サービスのアーキテクチャと実装

ServiceLogic

SQL D

B PRO

VIDER

Ads PROVID

ER

Image

PROVID

ERSearch

PROVID

ER

Page 52: Web2.0 サービスのアーキテクチャと実装

これらを適用した結果

Page 53: Web2.0 サービスのアーキテクチャと実装

Planet PPT Framework

ASP.NET MVC

SQL Server2008

BrowserController

Repository+

EntityFramework

View

ServiceImplementat

ion

jQueryASP.NET

AJAX

WCF Service Interface

Silverlight

Power PointDIA

WindowsMobile

Windows Live

AzureStorage

Provider

Twitter

AdCenter

R2

Page 55: Web2.0 サービスのアーキテクチャと実装

Threat ModelingThreats CountermeasuresXSS Encoding output texts

One-Click Attack Make the request that encapsulates the user action unique for each authenticated user

HTTP replay attack SSLNetwork Eavesdropping SSL or IPSECPassword brute Force Implement lockout policyRepudiation attack Implement proper and effective loggingFile Canonicalization Validate length of file names and verify regular expression on

the file name inputsDenial of Service Validate #of requests, file size

Implement proper exceptionsDon’t display detailed error messages to users

Forceful Browsing Authorization controlEncrypting data

Man in the middle attack SSL or IPSECSQL injection LINQ eliminates the possibilities of SQL injectionSession hijacking We don’t have to do this because all information we store in

the session is images.Response splitting Context sensitive encoding

Page 56: Web2.0 サービスのアーキテクチャと実装

XHTML/RSS バリデーション http://validator.w3.org

Page 57: Web2.0 サービスのアーキテクチャと実装

Web Deployment Tool http://www.iis.net/downloads/default.aspx?tabid=34&g=6&i=1602

プロダクションへの移行

Page 58: Web2.0 サービスのアーキテクチャと実装

今後の予定

Page 59: Web2.0 サービスのアーキテクチャと実装

Planet PPT R2

Requirements R2

Scalable Social Services X

Scalable Storage – Presentations and Structured Data X

Scalable Operating Environment X

Usage Analytics X

Microsoft Ad Center/Atlas Integration X

Add-in for PowerPoint 2007 (Desktop Edition) X

Page 60: Web2.0 サービスのアーキテクチャと実装

Repository

Planet PPT R2

Implementation Architecture

Adapter

Tools

Expression

Visual Studio

Server Admin Tools

Popfly

Page 61: Web2.0 サービスのアーキテクチャと実装

みなさんへのお願い

Page 62: Web2.0 サービスのアーキテクチャと実装

PlanetPPT

Page 63: Web2.0 サービスのアーキテクチャと実装

コミュニティへの参加@ www.microsoft.com/webwww.asp.net

www.microsoft.com/azuredev.live.com

Page 64: Web2.0 サービスのアーキテクチャと実装

ありがとうございました !