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

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

アジェンダ

ー Web概観ー Web2.0 概念アーキテクチャー Web2.0サービスの実装

Web2.0とは?

Web 1.0

Web 2.0

Web 3.0

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

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

セマンティックWeb

Webの変遷

Web スタートアップ

エンタープライズ

…

Web2.0アプリケーションとは?

AJAXを使用したWebサイト?

RIA?

ソーシャルアプリケーション？

すべてはWeb2.0アプリケーションの要素

どれも全体像ではない

ではこれはどうでしょう？

Web2.0アプリケーション

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

Web2.0サービスとは?

Web2.0 サービス

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

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

O – Open

P – Programmable

E – Extensible

N - Neutral

http://www.myspace.com

http://www.linkedin.com

http://slideshare.net

http://twitter.com

http://www.smugmug.com

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

Emerging Web

Challenges and Opportunities

Consumers &

Communities

Enterprise/

Business

Web2.0

Web Startups

• The Long Tail • Discoverability • Aggregation

• Optimize Investments • Increase Eyeballs• Long Tail Reach• Passive-to-Active• Business Services

• Next Gen Web Presence• Enterprise 2.0• Social Web Integration

Consumer Challenges

Discover, Collect, Organize Share, Recommend, Create

Web Startup Challenges

Discover, Collect, Organize Share, Recommend, Create

Opportunities

• The Long Tail• Discoverability• Multi-channel access• Aggregation

Desktop BrowserMobile

Multi-channel Clients

LOB Services

ECM BI

LOB Integration

Portal Framework

WCM BPM

Enterprise Search

User Profiles

Customers Partners

Enterprise Productivity Services

Social Computing Services

EMM

Enterprise Social Computing Platform

Employees

Desktop BrowserMobile

Clo

ud

Inte

rop

Se

rvic

es

Business Challenges

Business Non-affiliated Communities

Social Web Integration

Business Non-affiliated Communities

CommunicateListen

EngageOnboard

Marketing & SalesCustomer Support

Training New Product/Service Development

Hiring

Social Web Integration

Business Non-affiliated Communities

CommunicateListen

EngageOnboard

Social Web Integration

Facebook in the Enterprise

Workbook

Security, SSO,

data access, integration

Adapter Adapter

Enterprise

employees

Web2.0サービスの構築

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

Infrastructure

Compute Storage Web Server Database Networking Messaging Virtualization

Foundational Services

Content Management

Data AccessUser

ManagementSocial Search

Usage Analytics

Sync Monetization

IP Services

Your Intellectual Property Services

Service Interfaces/APIs

REST SOAPSyndication (RSS/Atom)

JavaScript LibrariesProgramming

Language Wrappers

Delivery Channels

Browser PC Mobile Device External ServicesService

Repository/Bus

Architecture Layers Tools

Users

Designers

Developers

Administrators

アーキテクチャの選択肢

インフラストラクチャ

Infrastructure

Compute Storage Web Server Database Networking Messaging Virtualization

セルフホスティング

ホスティングプロバイダー

クラウドコンピューティング

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

Foundational Services

Content Management

Data AccessUser

ManagementSocial Search

Usage Analytics

Sync Monetization

自分で構築するか

プラットフォームを利用

ホワイトラベルサービスを利用

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

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

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

-SQL Server 2008 Express- IIS7- Visual Web Developer 2008 Express- .NET Framework 3.5- Silverlight tools for Visual Studio

Infrastructure

Windows Server, IIS, SQL ServerAzure Services Platform (Widows Azure, SQL Data Services, Live Services, .NET Services)

Foundational Services

Microsoft .NET Framework

ASP.NET Services

SharePoint Search Server Live Services .NET Services Ad Center/Atlas

IP Services

Microsoft .NET Framework

Service Interfaces/APIs

Windows Communication Foundation

ADO.NET Data Services JavaScript.NET Programming

Languages

Delivery Channels (Browser, PC, Mobile, Device, Service Repository/Bus)

ASP.NET

Web Forms

ASP.NET MVC

ASP.NET AJAX

jQuery SilverLight WPF VSTO.NET

Services

Architecture Layers Tools

Expression

Visual Studio

Server Admin Tools

デモ: Planet PPT

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

Web サービスフレームワーク

ウィジェット

ブラウザー

AJAX

ブラウザプラグイン

Web アプリフレームワーク

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

ユビキタスチャネル

サービスロジック

非構造化ストレージ

ユーザー管理

ソーシャルサービス

広告

検索

データ

プラネットPPT R1

ソリューションアーキテクチャ

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

Kobe.Web.UI Kobe.Services Kobe.FoundationalServices

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

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

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

従来の観点に加え

Web2.0特有の観点

ファインダビリティプログラマビリティエクステンシビリティアジャイル開発

……

それほどシンプル？

現実の開発作業は

もう少しややこしい

実装ドリルダウン

Web サービスフレームワーク

ウィジェット

ブラウザー

AJAX

ブラウザプラグイン

Web アプリフレームワーク

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

ユビキタスチャネル

サービスロジック

非構造化ストレージ

ユーザー管理

ソーシャルサービス

広告

検索

データ

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

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 action

Periodical refresh

Automatically 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.

RIA 要素を特定

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

Web アプリケーション構造

ASP.NET MVC vs. ASP.NET

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

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

ASP.NET MVC

RESTful Webサービス

REST: 原則

Addressability

Uniform Interface

Stateless

Connectedness

REST: 実装

クリーンURLシリアライゼーションシンディケーションエラーコード

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

ASP.NET MVC -コードの再利用-クリーンなURL

WindowsCommunication Foundation

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

ADO.NET Data Services

-インスタント開発-データ駆動Web

WCF

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

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

ServiceLogic

これらを適用した結果

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

Foundational Services

Data AccessContent Mgmt

User Mgmt Social SearchUsage

AnalyticsAdvertising

IP Services

.NET Framework

Service Interfaces/APIs

Windows Communication Foundation

Delivery Channels

Browser - ASP.NET MVC, ASP.NET AJAX, SilverLight

PC (PowerPoint 2007) - VSTO

Repository

Planet PPT R2

Implementation Architecture

Adapter

Tools

Expression

Visual Studio

Server Admin Tools

Popfly

Infrastructure - Cloud Platforms

Windows Azure SQL Data Services Live Services Ad Center/Atlas

みなさんへのお願い

PlanetPPT

2月下旬公開予定

本日何枚のスライドを使ったでしょう？

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