【13-C-3】　RIA 開発をとりまく技術の進化と環境の変化

Developer Summit 2009：

RIA環境を取り巻く技術の進化と環境の変化
- technology evolution and changing environment in RIA development -

2009/02/13
株式会社セカンドファクトリー
シニアエクスペリエンスアーキテクト
東賢

2nd FACTORY CO.,Ltd. CONFIDENTIAL

2nd FACTRY Co., ltd

アプリケーションに優しさを。
そして、おもてなしの心を。

長年のＲＩＡ開発経験と独自の構築プロセスに基づき、革新的なイ
ンターフェイスを持つアプリケーションを提供します。

アプリケーションやＷｅｂサイトを使いやすい「道具」と考え、毎日
使うものだからこそユーザビリティや優しさを確保した豊かなエク
スペリエンスを実現します。

2ndfactory=2FCはＲＩＡを通じクライアントにはＲＯＩの最大化とビジ
ネスの成功を、そしてエンドユーザーには豊かなエクスペリエンス
をお届けします。

1

About me : Ken Azuma （東賢）

Senior Experience Architect of 2ndfactory

azuma@2ndfactory.com
http://www.syncrare.com/
Twitter / BrightKite / FriendFeed: kenazuma
LinkedIn : http://www.linkedin.com/in/kenazuma
Adobe Community Expert
http://www.adobe.com/communities/expert
s/members/KenAzuma.html
Microsoft MVP
https://mvp.support.microsoft.com/profile=B
DE5E9FE‐2703‐4846‐A5AA‐0247C32632DA

2

2008年に何が起こったか？

2008年は
UX元年だった

3


各企業は
UXの重要性を
（一応）
理解／認識した
4


What is UX
↓
How to do
For better UX
5

Portions of “How”: 知りたいところ

6


プラットフォーム

7

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Platform Overview

Applications, Content and Video

Framework Clients Servers
Tools to Design and Develop

Flash Catalyst Flex
Flex Builder AIR
Flash CS4 Flash Media
Professional Server Family

Flash Player Data Services

®


Adobe Flash Platform Architecture


Framework
Flex

Flash CS4
Professional

Clients
AIR Flash Player
Flash Catalyst

AMF, XML, JSON, SOAP, RSS, ATOM, etc.
HTTP/S, Sockets, RTMP, etc.

Servers
Flex Builder
BlazeDS
Flash Media
Data Services
Server Family

®


Adobe Flash Platform Architecture: Client


Framework Components MXML
Flex
Declarative UI ActionScript

Runtimes

Browsers JavaScript, PixelBender
E4X, Binary Data
ActionScript
HTML, CSS, etc
Flash Player
H.264 Video
DOM APIs Real-time data 3D Effects
AAC Audio

JavaScript, OS / Desktop
PDF Integration
HTML, CSS, etc. Integration
AIR
Persistent
ActionScript Local Storage
Applications

Operating Systems Mac, Windows, Linux, Symbian,
Windows Mobile, Wii, PlayStation, etc.

Clients / Servers AMF, XML, JSON, SOAP, RSS, ATOM, etc.

®




Framework
Flex

Flash CS4
Professional

Clients
AIR Flash Player
Flash Catalyst


Servers
Flex Builder
BlazeDS
Flash Media ColdFusion
Data Services
Server Family “Centaur”

®


Adobe Flash Platform Architecture: Server

XML, JSON, SOAP, RSS, ATOM, etc.
Clients / Servers HTTP/S, Sockets, RTMP, etc.

Partner Services and
Servers
other Server Platforms

ColdFusion
Flash Media BlazeDS LiveCycle ES
Server Family Data Services

On-Demand & Live Enterprise Data Capture
Messaging
Streaming Services and Output
Real Time Process
Remoting Remoting/AMF
Interactivity Automation

Protected Streams Data Management Security
Data Management

Resource Tiers ECM Message Legacy
ECM Message Legacy
Databases Directories
Databases Directories Repository Queues Systems
Repository Queues Systems

®




Framework
Flex®

Flash CS4
Professional

Clients
AIR™ Flash® Player
Flash Catalyst


Servers
Flex Builder
BlazeDS
Flash Media
Data Services
Server Family

®


Adobe Flash Platform Architecture: Tooling
Creative Suite Tools

After Effects®
Interactive
Content
Flash CS4
Animation
Professional
Illustrator®
Visual Layout

Dreamweaver
®
Proto-typing FXG
Flash Catalyst
Design / Develop
Workflow
Fireworks®

Eclipse IDE
Photoshop®
Flex Builder Code Profiling

Debugging
Acrobat®

®


© 2008 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
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 cannot guaranteeguarantee the of any information provided after the date of this presentation.
not be interpreted to be a commitment on the part of Microsoft, and Microsoft Microsoft cannot the accuracy 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.

Copyright 2008 Microsoft Corporation . All rights reserved.

プレゼンテーションテクノロジの選択

ASP.NET ASP.NET Windows
(HTML) AJAX Silverlight Presentation
Foundation

Windows Microsoft
Forms Office

DHTML
Win32
(AJAX)
開発生産性

Direct 3D Direct 3D
v9 v10

ユーザーインターフェイスの
リッチさ Availability: 1997 2005 2006


マイクロソフトのクライアント技術

技術概要
(X)HTML (+ CSS) W3C標準。Webブラウザのみで動作可能。基本的にネットワーク接続が前提。
クロスプラットフォーム。
上記 + JavaScript Dynamic HTMLを駆使し、インタラクティブ性を向上
(ASP.NET) AJAX Asynchronous JavaScript + XML
Silverlight XAMLをベースとしたRIA技術。クロスプラットフォーム。JavaScriptや.NET対
応言語が使用可能。
Windows フォーム .NET FrameworkベースのWindows クライアントと技術。ドラッグ＆ドロップでUI
を構築可能。
MFC (Visual C++) Win32をベースとしたMFCベース
Office system Excel や Wordをプラットフォームとしてアプリケーションを実装
.NET Compact Framework Windows Mobileをターゲットとしたアプリケーション開発
WPF GPUのパワーをシンプルな方法(XAML)で活用
DirectX 10 GPUをフル活用。最新ゲーム品質のUIを実現
Media Center Edition MCML。7フィート(2.2M)インターフェース。リモコン操作

19

Iterative releases (6‐8w)
• Customer Feedback Driven
• May include new components
CodePlex
New Controls • “No‐brainer” upgrade

Project
Component “Quality Bands”
Experimental
Preview
Stable
Mature

• “Mature” band controls
Core
delivered with SDK/Tools
•
Runtime
Customers can replace with
CodePlex release for full
SDK/Tools Some controls may
control package
Release move to core runtime

Business Application Frameworks

Business Business
Validation Data Loading App Services
Logic Controls

Base Frameworks

Controls
Data Shaping
Network / Data
• XML Navigation
Services Binding
• LINQ Control Model

Base Platform
CLR

Core UI Engine

Application Architecture for .NET

USERS

UI components

UI Process components

Service Interfaces
Operational Management

Business
Business Business
Components
Workflows Entities
Communication

Service
Security

Data Access Logic Components
Agents

Data Sources Services


開発手法

26

Key components of RIA platform

27

インタラクティブアプリケーションに必要な要素

ビットマップやベクターなどを用いた様々なグラフィックファイル
Asset ＜XAMLそのものやJPEG/PNGなどのファイル＞

アニメーションやステート間のトランジション
Interaction ＜XAMLのstoryboardによるアニメーション＞

アプリケーションの各画面におけるUIのレイアウト
Layout ＜XAMLのLayoutコントロールによるレイアウト＞

イベントハンドラやデータホルダを含むUIコントロール
UI Control ＜XAMLによるボタンやグリッドなどのUIコントロール＞

画面制御のためのコントロールロジック
Control Logic ＜.NET言語による画面ステートの制御ロジックやバリデーションなど＞

アプリケーションの実態であるビジネスロジック
Business Logic ＜.NET言語によるビジネスロジックの実装＞

29

開発手法：Des/Devチームの分け方

インテグレータモデル
ハーベストモデル
コラボレーションモデル

30

セカンドファクトリーのチームモデル

31

Business Domain

Presentation Domain

System Domain

32

Business Domain

inside-out Outside-in
Presentation Domain

System Domain

33

Business Domain

ビジネスゴール

Presentation Domain
デザイン（広義）

実装
System Domain

34

ロールとツールの関係（Microsoft）

システムインタラクショングラフィック
デベロッパーデベロッパーデザイナー
XAML
C# graphics
Visual Studio Expression Blend Expression Design
Other Tools

XAMLを媒介として、すべての実装メンバーが開発中のUI
におけるUXを常に確認しながら開発できる体制が
ツールとの連携によって整っている

35

ロールとツールの関係（Adobe）

システムインタラクショングラフィック
デベロッパーデベロッパーデザイナー
MXML
Action Script FXG / graphics
Flex Builder Flash Catalyst Illustrator
Other Tools

新たにFXGフォーマットが加わることによって、
CS4シリーズの圧倒的シェアを活かす土壌が整い、
Flexフレームワークによる開発でより高度な分業が
可能となった。

36

開発手法：会社／拠点間の分業

ある規模以上の開発を行う場合、
調達の観点からも分業可能な体制が
望まれるが、ＵＸ検討そのものは
分業が難しい作業が多い

同じコンセプトを共有しつつも実装を
確定的に落とし込んでいくことが重要
多くのケースでは、下層レイヤーの
分業が検討しやすい
37

開発手法：テスト

オートメーションテスト

エモーショナルテスト

38


プロトタイピング

39

プロトタイプとは？

デモンストレーション目的や新技術・新機構の
検証、量産前での問題点の洗い出しのために
設計・仮組み・製造された試験機・試作回路・
コンピュータプログラムのことを指す。

検証／問題点の洗い出しのため
に存在し、その全てを製品開発に
流用できるものではない。
40

プロトタイプ／モックアップ

プロトタイプ

モックアップ

41

どこをプロトタイピングするか？

多くのUXに優れた製品で
は、大きく差別化をできる
ポイントは全体に対して一
部であり、多くの部分で典
型的なパターンを利用して
いることが多い。

42

Demo : Quince

43

ビルディングブロック

44

市販コンポーネント

45

オープンソースコンポーネント／ライブラリ

46

SaaS

Amazon EC2
Akamai Edge Computing
Windows Azure

SalesForce
SAP
Social API

47

改善のための計測

49

復習：RIAテクノロジー選択のポイント

アプリケーションライフサイクルの視点で検討する

十分なエクスペリエンスを提供できるか
クライアントの動作環境にマッチしているか
将来の配布にあたって不要なコストがかからないか
開発者人口が十分か
提供企業が安定した体制を持っているか

総合的に見てマイクロソフトやアドビの
テクノロジーが優位といえる
50

復習：従来のHTMLやWinFormではだめなのか？

根本的にはテクノロジーの問題では
ない。状況に応じてもっとも都合のよ
いテクノロジーを選択すればよい。

• コンセプトに従い、一貫した操作性
を提供しているか？
• 優れたUXを継続的に支えるアーキテ
クチャ設計があるか？
51

ユーザーエクスペリエンスとは？（復習）

情報システム部門の連中は分
かっていない。今変更／改善
することがどれだけ重要か。
ユーザー部門の連中は分かっ
ていない。システムを安定稼
動させることがどれだけ重要
か。

52

結論：どちらも正しい

システム開発

検
討
レ
ギャップを埋めるための
ベ
ル
アーキテクチャが必要
ユーザー部門

時間軸

53

カットオーバーはスタートライン

プロジェクトはカットオーバーをもって
終了するようなものではなく、
アプリケーションのライフサイクルに
沿って継続的に改善されるべきものだ。

そのため、利用動向を知るための計測が
必要であり、計測データをもとに改善に
対応するアーキテクチャ設計が必要。

54

アーキテクチャの分割検討を行った場合

グラフィック等のアセット

インタラクション

UI（WF）

ビジネスロジック

ゲートウェイ

可変領域と安定領域にアーキテクチャ的な分割を行うことで
長期運用に対応した変更しやすい構造を作ることが出来る

55

• マーケティング部門のテクノロジーパートナー

• オンラインビジネス最適化を実現するための
オンラインマーケティングスイートを提供

© 2009 Omniture Inc.
56

Experience is an iceberg

見えている部分は全体の一部分にしか過ぎない。
検討するべきエクスペリエンスは
見えない部分も含めた全体を対象とする。

57

Question
?
58

59

1 参考：UXとは？

60

ユーザーエクスペリエンスとは？

ユーザーが商品／サー
ビスを通じて感じる
すべての体験

61

体験とは？

哲学で、個々の主観のうち
に直接的または直観的に見
いだされる生き生きとした
意識過程や内容＜広辞苑＞

62

体験とつく言葉…

体験学習、体験談、体験記、アハ体験、体験版ダウ
ンロード、感動体験、追体験、悲しい体験、
トラウマ的体験…

「体」の字が入っていることからも、自らの体を使っ
たり、体にしみこんでくるような強い経験をすることで、
良いこともあれば悪いこともある。

63

エクササイズ：

情報システム／
アプリケーション
×
体験
64

UXケーススタディ：スターバックス

65

UXケーススタディ：ハーレーダビッドソン

66

UXケーススタディ：寿司屋

67

リアルな体験から学ぶべきこと

これらの体験は
点ではなく線で
生み出されている
68

ユーザーエクスペリエンスとは？（復習）

ユーザーが商品／サービスを
通じて感じるすべての体験
↓
最良の体験の提供が競合に対
する優位を得るための
差別化要因となる
69

プロダクトの進化

産業革命以後の生産能力向上に
よって多くの製品が差別化を考
えるに至った

1885年製メルセデス

70

ソフトウェアの進化

既に多くのソフトウェアが機能的には
成熟し、機能だけでは競争優位を保つ
ことができない状態

更なる顧客確保、生産性の向上のため、
この転換期においてエクスペリエンス
を差別化要因として考えてみては？
71

重要なファクター：クラウドコンピューティング

「クラウドコンピューティングは、ITサービスの工業化と
コモディティ化に向かう破壊的なトレンドである」
「市場の利益率を超えているサービスは減少する」
「価格モデルはさらに競争が激化し、簡素化され、標準化が進む」
「あらたなITサービスを調達するときのオプションとして、
クラウドコンピューティングサービスを検討すべき」
「ベンダーが提示する価格の競争力を確認し、クラウドと従来のITモデル
を比較したときに、クラウドコンピューティングプロバイダとの関係管理に
必要となる作業の削減方法を見つけるべき」
「ベンダー管理の必要性の低下」「定期的なサービスレベルの報告と追
跡は標準化され、最小限にできる」「ベンダー関係とそのために必要な管
理の重要性が低下する」「ベンダーとの関係は、個々の取引ごとになり、
戦略性が薄れる」

2008.11 – Gartner -

72

エクササイズ：大手SIのシステム／ソリューションのカタログ

アーキテクチャ図などをのぞいて、ほ
ぼすべてのシステム／ソリューション
に関して「画面キャプチャ」が無い

コンシューマ向けのアプリケーション
や他業種の製品ではほぼありえないこ
とが普通になっている。
73

For users …

WYS IWYG

“What You Get Is What You See”
「ユーザーにとっては、目に見えるものがすべて」

74

1953 75

76

77

78

79

80

FPD International 2008
81

FPD International 2008
82

HITACHI CEATEC JAPAN 2008
83

Microsoft Surface

84

NUI + Microsoft

85

iPod → iPhone

86

エクササイズ：身の回りの「UI」を思い出してみよう

日常生活に優れたユーザーインター
フェイスが浸透しつつある

ユーザーは、
業務システムを
どのように見ているだろうか？
87

エクササイズ：水道の蛇口

88

エクササイズ：大変だ！このままじゃ火事になる！

89

エクササイズ：大変だ！このままじゃ火事になる！

① ② ③ ④

90

基本的なユーザビリティの概念

91

業務システムとUX

システムの顔であり入出力
の起点であるUIを通じて、
ユーザーの業務システム
を通じた体験をよりよい
ものにできるはず！

92

2 参考：RIAとは？

93

リッチインターネットアプリケーションとは？

wikipedia :
リッチインターネットアプリケーション
（Rich Internet Application、RIA）は、
ウェブブラウザなどのクライアントの機能
を活かした、柔軟なインターフェースをも
つウェブアプリケーションのこと。従来の
DHTMLやFlashなどの新しい技術が含まれ
る総称的な概念である。

94

では、アプリケーションとは？

wikipedia :
アプリケーションソフトウェア、応用ソ
フトウェア（Application Software）とは、
コンピュータの基本ソフトウェアの上で
動作し、
特定の目的を果たすための機能を提供
するソフトウェアのこと。

95

再：リッチインターネットアプリケーションとは？

なんらかのリッチな要素があり、イン
ターネットを利用していて、特定の目的
を果たすための機能を提供するソフト
ウェア

ユーザーを含む全てのステークホル
ダーに豊かな体験を提供し、リッチを感
じていただく取り組み

96

では、リッチとは？

Adobe Systems Technical Evangelist
James Wardが考える”リッチ”を構成する要素

Connected（接続性）

Alive（躍動感）

Interactive（双方向）

Responsive（反応が良い）

97

そのリッチで変わるものは？

システムの利用率

単位時間当たりの生産性

成功割合の向上とユーザーエラーの削減

サポートコストの削減

なによりユーザーのロイヤルティ！

98

成功割合の向上とユーザーエラーの削減

NCRの調査によると、良いデザインの基本原理に従ってスクリーンを再デザインす
ると、スループットは25%向上し、かつエラーは25%減少します。

[Gallaway, 1981]

Zone Researchの調査によると、62%のWeb顧客はオンラインで購入したい項目を
探すのをあきらめています。（そして、20%は2ヶ月の間に3回以上あきらめていま
す。）

[Nielsen, 1998b]

15の大きなコマーシャルサイトのJared Spoolの研究によると、たとえテスト作業
が与えられる前に正しいホームページにいたとしても、ユーザーは時間内に42%し
か情報を見つけられません。

[Nielsen, 1998b]

99

エクササイズ：最近提案したプロジェクトのきっかけは？

「残念ながら現在のIT投資状況は
保守・運用管理向けが8割で、革新向
けの投資はわずか2割にすぎない。」
-マイクロソフト -

新しくパイを広げるような
新規プロジェクトを作るためには、
わかりやすい訴求が必要
100

UXと数字

JAL 1.6 -> 2.3

JRA 95%

PASONA “0”
101

アーキテクチャ設計の重要性

102

アーキテクチャ分割の検討をしない場合


UI（WF）
ゲートウェイ

最表層以外の要素の変更が全体に影響する

103

アーキテクチャの分割検討を行った場合



UI（WF）


ゲートウェイ

可変領域と安定領域にアーキテクチャ的な分割を行うことで
長期運用に対応した変更しやすい構造を作ることが出来る

104

インタラクション≠アニメーション

「業務システムにはアニメーションは
必要ないだろう」という意見

インタラクションはユーザーの動きを
正しく促すためのガイドと捉える

105

クラウドコンピューティング等の台頭にあたり：

機能の一つ一つではなく、それらが相
互に作用し、一連の文脈的意味を持つ
シナリオを作る必要がある

業務知識を持って、それぞれの機能を
縫い合わせ、デザインされたUXと
一体となるアーキテクチャ設計が必要
106

アーキテクチャとともに重要な考え方

デザイン
は
実装
するものである。
107

プロジェクトファシリテーションタイプ

system design

Architecture
I/O, API
I/O, API

108

ユーザーエクスペリエンスコンサルティングタイプ

Customer
PM

Development Team, Companies

109

エクスペリエンスデザイン適用タイプ

system

110

エクスペリエンスアーキテクチャ適用タイプ

Design

111

エクスペリエンスデベロップメント提供タイプ

Customer
PM

Produce, Direction

112

セカンドファクトリーの基本開発ワークフロー

113

マイクロソフトのRIAテクノロジーへのアプローチ

114

これまでのRIA : Surfing

変化する環境の中である時点で最高のパフォーマンスを出す。
同様のパフォーマンスを安定して提供することは難しい。
個人の技能に依存する割合が非常に大きい。
115

これからのRIA : sk8 + rampage

ある安定した環境をベースとして信頼し、
その上で最高のパフォーマンスを出す。
安定環境に再現性があるため、パフォーマンスに集中できる。
環境を作成／維持するメンバーを含めたチームプレイ。

116

【13-C-3】　RIA 開発をとりまく技術の進化と環境の変化

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (9)

Ähnlich wie 【13-C-3】　RIA 開発をとりまく技術の進化と環境の変化

Ähnlich wie 【13-C-3】　RIA 開発をとりまく技術の進化と環境の変化 (20)

Mehr von devsumi2009

Mehr von devsumi2009 (20)