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

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

マイクロソフトコーポレーションプラットフォーム・アーキテクチャ・チームシニアアーキテクト成本正史masashin@microsoft.com

Web 1.0

Web 2.0

Web 3.0

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

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

セマンティック Web

Web の変遷

Web スタートアップ

エンタープライズ

…

Web2.0アプリケーション

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

Web2.0 サービス

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

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

O – OpenP – ProgrammableE – ExtensibleN - Neutral

http://www.myspace.com

Service

http://www.linkedin.com

Service

http://slideshare.net

Service

http://twitter.com

Service

http://www.livemocha.com

Application

http://www.popfly.com

Service

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 – 全体像

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

デモ : Planet PPT

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

Architecture Layers Tools

Users

Designers

Developers

Administrators

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

Repository

Adapter

Tools

Designers

Developers

Administrators

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

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

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

Architecture Layers Tools

Popfly

Expression

Visual Studio

Server Admin Tools

Repository

Planet PPT R1

Implementation Architecture

Tools

Expression

Visual Studio

Server Admin Tools

Adapter

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

Web サービス

フレームワーク

ウィジェット

ブラウザー

AJAX

ブラウザプラグ

イン

Web ＵＩフレーム

ワーク

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

ユビキタスチャネ

ル

サービスロ

ジック

非構造化ストレージ

ユーザー管理

ソーシャルサービス

広告

検索

データ

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

アーキテクチャ要素 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

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

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

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

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

実装ドリルダウン

Web サービス

フレームワーク

ウィジェット

ブラウザー

AJAX

ブラウザプラグ

イン

Web ＵＩフレーム

ワーク

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

ユビキタスチャネ

ル

サービスロ

ジック

非構造化ストレージ

ユーザー管理

ソーシャルサービス

広告

検索

データ

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

MVC vs. Classic ASP.NET

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

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

ASP.NET MVC

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

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

RIA テクノロジー

Rich Internet Application?

RIA はこれを提供する…

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

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.

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

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

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

RESTful Web サービス

AddressabilityUniform Interface

StatelessConnectedness

REST: 原則

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

Windows Communication Foundation

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

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

- データ駆動 Web

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

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

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

REST: 実装

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

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

ServiceLogic

SQL D

B PRO

VIDER

Ads PROVID

ER

Image

PROVID

ERSearch

PROVID

ER

これらを適用した結果

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

Threat Modeling

http://www.microsoft.com/downloads/details.aspx?familyid=59888078-9DAF-4E96-B7D1-944703479451&displaylang=en

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

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

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

プロダクションへの移行

今後の予定

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

Repository

Planet PPT R2

Implementation Architecture

Adapter

Tools

Expression

Visual Studio

Server Admin Tools

Popfly

みなさんへのお願い

PlanetPPT

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

www.microsoft.com/azuredev.live.com

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