2010/11/27 FxUG熊本 Flex/AIRとクラウド

Copyright © CLASSMETHOD. 1

FxUG熊本

Flex/AIRとクラウド

⽇時：2010/11/27場所：ホテルサンルート熊本不知⽕


アジェンダ


アジェンダ• RIA開発の現状• RIAとクラウド


スピーカー紹介• 福⽥寅成（Tomonari FUKUDA）

• Twitter

• 某⼤⼿SIer技術部 → クラスメソッドなう• Adobe様、Microsoft様、Amazon様と共催セミナー開催• ＠IT、弊社技術サイト等にて技術記事執筆


最近やっていること• Adobe様とFlex＋Javaなセミナー（3回実施）• ぷちゲーム開発のディレクション• UXセミナーの企画• Microsoft様向けデモアプリケーション開発⼤規模カンファレンスで利⽤されるクライアント〜クラウドまで先進技術のみで構成

• 再来週リリースされる某○○のデザイン


クラスメソッドの


クラスメソッド


ユーザーコミュニティ運営

Flex User Group

Silverlight User Group

Japan AWS User Group

http://www.fxug.net/ #fxug http://sl.ria-ug.net/ #slug http://jaws-ug.jp/ #jawsug

http://www.devlove.org/ #devloveクラスメソッドでは「良い技術」とそれを使いたい「デベロッパ」や

「ユーザー企業」の間の溝を埋め、相互コミュニケーションを促進させる⽬的で各種セミナーを地域ごとに開催しています。


クラスメソッド関連セミナー紹介開催⽇時セミナータイトル

2010/01/28（⽊） Microsoft社共催セミナー：Silverlight で実現する業務RIA 02

2010/02/19（⾦） Developer Summit 2010

2010/02/23（⽕） Microsoft TechDays 2010（キーノート向けアプリケーション構築）

2010/02/25（⽊） Amazon Data Services Japan共催：Business RIA × クラウドセミナー 03

2010/03/24（⽔） Adobe社共催：Flash Builder 4を⽤いた⾼品質RIA開発セミナー 04

2010/04/02（⾦） Amazon Data Services Japan共催：Business RIA × クラウドセミナー #02 05

2010/05/12（⽔） SODEC 第19回ソフトウェア開発環境展

2010/05/26（⽔） Adobe社共催：AIR2.0を⽤いた業務RIA⾰新セミナー 06

2010/05/27（⽊） Silverlight 勉強会 #01

2010/05/29（⼟） Flex User Group Japan Tour 2010 名古屋

2010/06/05（⼟） Flex User Group Japan Tour 2010 札幌

2010/06/19（⼟） Silverlight 勉強会 #02

2010/06/19（⼟） Flex User Group Japan Tour 2010 ⾦沢

2010/06/25（⾦） Microsoft社、GrapeCity社共催 Silverlightセミナー 07


クラスメソッド関連セミナー紹介開催⽇時セミナータイトル

2010/07/28（⽔） Flex User Group Japan Tour 2010 ファイナル東京

2010/08/30（⽉） Silverlight 勉強会 #03

2010/09/01（⽔） Adobe社共催 Flex × Java 業務システム改善セミナー（ビジネス編） 08

2010/09/01（⽔） Adobe社共催 Flex × Java 業務システム改善セミナー（デベロッパー編） 09

2010/10/14（⽊） HP社共催 QTPセミナー 10

2010/10/19（⽕） Adobe社共催 Flex × Java 業務システム改善セミナー 11

2010/11/17（⽔） Adobe社共催 Flex × Java 業務システム改善セミナー 12

2010/11/25（⽔） Adobe MAX 2010 RETWEET

2010/11/27（⼟） FxUG熊本

2010/12/08（⽔） Adobe社共催Flexセミナー（仮） 13


UXとは


⽤語定義：UXとは• ユーザーの体験• UX（価値）利⽤者⽣産性向上経営ダッシュボードによる経営情報の共有他社と⽐べて競争⼒のあるWebサイト・・・

ユーザーの期待に対する何らかの価値を提供する


UXハニカム

使いやすい

価値がある

信頼できる

求められる

ヒトに優しい

役⽴つ

探しやすい

Peter Morville “User Experience Design”http://semanticstudios.com/publications/semantics/000029.php

（⽇本語訳はInfragistics社によるもの）


RIA開発の現状


RIA開発の現状：利⽤技術• クライアントサイドAdobe Flex、Adobe AIR、Silverlight

• サーバーサイドStruts、SpringASP.NETPHP、Perl

• Flexとサーバーを繋ぐ技術Adobe系LiveCycle DataServicesBlazeDS

Seasar系S2Flex2、S2BlazeDS

AMFサポートの拡⼤WebORB for .NET、AMFPHP、AMF::Perl、Zend_AMF…


Flex関連重要技術：AMF• AMF＝Action Message Format• Flexとサーバーサイドの⾼速通信を実現するHTTP通信フォーマット

• 通信コストAMF：JSON：XML：HTML＝１：４：８：∞

• メリット軽量、⾼速、低コスト


AMF呼び出しイメージ

■Flex側呼び出しitemService.insert(item, resultHandler);

■Flex側結果ハンドラfunction void resultHandler(event:Event) {

var dto:Result = event as Result;}

■Java側サービス（ItemServiceクラス）Result insert(Item item)

item（AMF形式）

Result（AMF形式）


ポイント：AMFポイント

新規案件の場合は必ず採用

移行、置き換え案件などの場合も、サーバー側にラッパーを用意してAMF化


サーバーサイドJava• 安定したサーバー開発技術Struts、Spring、Seasar

• FlexとはXMLまたはAMFで通信• Flex+Seasar2(S2)の安定感S2Flex2S2BlazeDS


ポイント：サーバーサイドポイント

開発技術としては成熟、安定クラウドでも技術的ジャンプが少ない


参考：Flex＋Struts

Flash Player 10

QuizView.mxmlQuizViewHelper.as

QuizApp.mxml

View ViewHelper XMLREST Action DAO


参考：Flex＋S2BlazeDS＋Seasar2

Flash Player 10

HelloWorldView.mxmlHelloWorldViewHelper.as

View ViewHelper DTO Service DAOLogic


ポイント：RIAアーキテクチャ

どのRIA技術、どのサーバー技術を使っても下記のようなイメージ




Flex DTOAMF Java Service

Flex XML Java Service

Flex DTOAMF PHP Service

Flex DTOAMF .NET Service

全部同じ


ポイント：クライアントからの視点

クライアントはサーバーとHTTPを通じてXMLなりAMFフォーマットのオブジェクトと通信

クライアントからはサーバーの実装技術や地理的な要因などはすべて隠蔽されている


地理的な要因？• サーバーはローカルにあるのか？• サーバーは社内にあるのか？• サーバーは国内にあるのか？• サーバーは海外にあるのか？• それともサーバーは・・・


事例があったページ

削除しています



どのRIA技術、どのサーバー技術を使っても下記のようなイメージ



システム教育コスト/移⾏コスト

例）全国１００店舗から２名が１回集まると、、(交通費30,000+宿泊費10,000+⼈件費10,000)×2⼈×100店舗=10,000,000円＝1千万円/⽉※何よりもビジネスが1⽇遅れてしまう。

半年〜 1 年かかった新コースの追加なども、マスタに追加するだけで即座に反映できるようになった。例）掛かっていたシステム対応がで！

例）新サービス開始、⾒込み客アップ、地域やコンセプトに毎に多様化したサービスを展開！CRMとして活⽤できるようになった！

「⽉1 回ある全国の店⻑会議の際、2 時間の教育を2 回⾏うだけで全体教育は不要という判断になり、移⾏はびっくりするくらいうまくいきました。教育予算も削減でき嬉しい誤算でした。」

ビジネススピード１０倍速を達成！

事例：ABC Cooking Studio様導⼊効果


RIA開発の現状まとめ• FlexによるRIA開発が活発化• サーバーサイド開発技術は成熟、安定• シンプルなアーキテクチャで⼗分開発リソースをクライアント側に集中

本業への集中


RIA開発の問題点• 問題点様々なクライアントデバイスへの対応PC、スマートフォン、TV

「経年劣化」したシステムが増⼤し始める最新プラットフォームに乗り換えざるを得ない

»ライセンス切れ、サポート切れ、技術者不⾜/価格⾼騰

サーバー管理運営コスト依然⼤サーバーそのもののコストサーバー管理者のコストRIAに投資を回し競争⼒をつける余裕が無い

Flexで解決！


RIAとクラウド


Flex周辺技術のポジション

⼭を駆け登るスピード爆速！

⼤規模基幹案件での事例あり

抜群の安定感（だが。。。）

⼭を駆け登るスピード爆速！

キャズム


RIAとクラウド：利⽤技術• Adobe Flex 4、AIR 2.*、Silverlight 4• HTML5（要注意）• モバイル対応AIR for AndroidSilverlight/XNA for Windows Phone 7

• クラウドの登場Amazon Web ServicesMicrosoft Windows AzureGoogle App Engine国産：ニフティクラウド、さくらインターネット


クラウドとは

http://www.atmarkit.co.jp/fnetwork/rensai/5mincloud/01.html

クラウド

DB DB


ちょっとざっくり⾔うと

レンタルサーバーの最新版（一般的に時間貸し）

この認識だけだと騙される


Amazon Web Services• クラウドの⽼舗AWSの売り上げ＞ECサイトの売り上げ

• 多様なサービスを公開している多様なユーザーニーズに対応プログラマブルクラウド

• ⾮常に進化が速い毎週画期的な新機能が追加されている

• 2010年09⽉01⽇よりAmazon Data Services Japan本格始動


Amazon Web Services のサービス• EC2：Amazon Elastic Compute Cloud• EBS：Amazon Elastic Block Strage• S3：Amazon Simple Strage Services• ELB：Elastic Load Balancing• Amazon Cloud Front• Amazon SimpleDB• Amazon RDS• SQS：Amazon Simple Queue Service• Virtual Private Cloud• Elastic Map Reduce• Cloud Watch• Auto Scaling


クラウドがもたらす恩恵• IT投資の本業への集中サーバー機器を購⼊/管理する必要が無いビジネス環境に合わせたIT環境の断続的最適化

• ⾼コストタスクの超低価格化CDN:Contents Delivery Network⾼速コンテンツ配信絶対落ちないWebサイト

Hadoop、MapReduce⼤規模分析処理

スーパーコンピューターのレンタルAmazon EC2 Cluster Compute InstanceAmazon EC2 Cluster GPU Instance


「クラウドである」ポイント• 規模の経済が働いている激安

• 時間貸しタイムセールあり、3年契約割引あり

• 動的に環境を変化させられるサーバー数の増減サーバースペックの増減パッチ⾃動適⽤、特定Verへダウングレード

• プログラマブルAPIを⽤いてサーバー環境を構築できるサーバーの新規作成といった作業


クラウド商法に騙されないポイント• 単なる仮想化とクラウドを⾒極める価格（激安）、時間貸し、API等⾼付加価値：CDN、Hadoop、スパコン絶対落ちない

• クラウド初⼼者はまずは3⼤クラウド（安⼼）Amazon Web ServicesMicrosoft Windows AzureGoogle App Engine


クラウドによる投資の最適化

※AWSエコノミクスセンター：http://aws.amazon.com/jp/economics/


RIAとクラウドのおいしい関係 Ver1.1

ハードウェア（購⼊/設置/設定等）

クラウド設定のみ

開発費⽤

開発費⽤

教育

UI開発

利⽤者補助

教

育

サーバ保守

サ｜バ保守

規模に応じてスケールアウトしやすい。安価に⾼信頼な

構成を組みやすい

追加開発

追加開発

利⽤者視点でのUIデザインとRIA技術を使った⾼品質設計

サーバー側と疎結合な設計であれば、追加開発やUIの

変更に対応しやすい。

従来のシステム開発前後に掛かる費⽤

初期コストを押さえつつ、使い勝⼿の良いアプリケーションに

よって、導⼊時や運⽤時のコストを削減

クラウドとRIAを活⽤した場合に掛かる費⽤


RIA×クラウド• クライアントサイド、サーバーサイド双⽅でメリットを享受利⽤者⽣産性改善サーバーインフラ購⼊/運⽤コスト改善

• RIAとクラウドの相互技術親和性S2Flex2、S2BlazeDS

• スマートフォン時代の新しい開発スタイルAIR for Android+AWSWindows Phone 7+Azure


ポイント：RIAクラウドのROI

不要なインフラ投資の消滅必要なインフラ投資の最適化経費化

RIAの導⼊による競争⼒強化


Inter Cloud

External Site/On-premise

RIA×AWSアーキテクチャ：詳細

AdobeAIR/WPF(Desktop)

Flex/Silverlight(Browser)

iPhone, Android, Windows Phone 7(Mobile)

AMF

AMF

REST

Amazon EC2(Tomcat on Linux: AMI)

Web

Fra

mew

ork

S2Container

Service (POJO)

Service (POJO)

Auto Scaling

AWS

ELBAWS

AWS

Amazon S3（画像/動画）

AWS

Amazon CloudFront

AWS

AutoReplication

Amazon RDS（ログイン）

AWS

Service(POJO)

Service (POJO)

Service (POJO)

Service (POJO)

Service (POJO)

Service (POJO)

Amazon SimpleDB

（メタ情報）

AWS

外部サービス（軽い）（SNS、決済）

External Site/On-premise

外部サービス（重い）（画像変換、解析、PDF）

AmazonSQS

AWS

AmazonSNS

AWS

Download/Streaming

NotificationAW

S SD

K fo

r Ja

va

Upload

Amazon EC2

REST

REST

S2JDBC

Amazon Cloud Watch

AWSREST=REST/XML/JSON

ConsistentReadSticky

Session

Versioning

Amazon Elastics

MapReduce


クラウドクライアント

ポイント：RIAクラウドアーキテクチャ

どのRIA技術、どのクラウド技術を使っても下記のようなイメージ

View ViewHelper DTO ServiceLogic


デモ：AWS on AIR

クラウド（AWS）をデスクトップから管理するAIRクライアント


デモ：BRiGHT


デモ：おみスタ

HTML 5 × AWS


デモ：Casiopeia (for Android)


参考：Burst 〜⼀括URL短縮サービス

HTML 5 × GAE


技術デモ：スクリーンロック


技術デモ：AIR－センサー連携• AIRと⼈感センサーを連携Adobe AIR 2.0Windows 7センサーAPIVisual Studio 2010コマンドラインアプリケーション開発

アイ・オー・データ SENSOR-HM/ECOWindows 7センサーAPI対応デバイス


技術デモ：AIR－Excel連携• AIRからExcelにデータを渡す


技術デモ：ストレージデバイス連携• ストレージデバイスの検知と画像の表⽰


RIAとクラウドまとめ• RIA活躍の場の拡⼤Web/デスクトップスマートフォン組み込み機器（TV、サイネージ）

• サーバー側開発は従来通りでOK！• クラウドを利⽤してサーバーコスト削減• ユーザーを意識したUI作りITコストのクライアント開発への集中UXへの理解が広がり始めている


全体のまとめ

クラウドを利⽤して環境改善↓

ビジネスロジック開発に集中

RIAを活⽤しUIの使い勝⼿向上利⽤者⽣産性向上、競争⼒強化

サーバー

クライアント



参考：Flexでのテスト


Flexでのテスト

詳細設計/実装/テスト

詳細設計

実装

動的単体テスト静的テスト

シナリオテスト

結合テスト/システムテスト

最新のAdobe Flash Builder 4では上記すべてのテストタスクに対応したツールが存在


アジャイルテストの4象限

http://codezine.jp/devsumi/2010/report/07/

機能テスト例

ストーリーテストプロトタイプ

シミュレーション

探索的テストシナリオ

ユーザビリティテストユーザー受⼊テスト

アルファ/ベータ

単体テストコンポーネントテスト

パフォーマンス/負荷テストセキュリティテスト

「〜性」テスト

⾃動と⼿動⼿動

ツール⾃動技術⾯

ビジネス⾯

チームを⽀援する

製品を評価する

第1象限

第2象限第3象限

第4象限

FlexUnit4FlexPMD

FlexFormetter

HP QuickTest Professional

HP LoadRunner

TracHP Quality Center


動的単体テスト：FlexUnit 4• Flex、AS3向け単体テストフレームワーク• JUnit の機能を移植したもの• グラフィカルテストランナー• Adobe Flash Builder 4からはツールに統合されている

今後のFlash、Flex開発で⼤きく威⼒を発揮するツールの⼀つ


FlexUnit 4


FlexUnit 4

FlexUnit結果ビュー


静的テスト：品質管理• コーディング規約• コーディング規約を守らせる⼿段Flash Builder 4の設定FlexFormatterFlexPMD

• コードレビュー• イテレーション毎のコード品質振り返りAgile開発時は時間取って必ず振り返るようにする


コーディング規約• 「Javaのコーディング標準」をベースにするオブジェクト倶楽部

»http://www.objectclub.jp/community/codingstandard/

• ActionScript、MXML独⾃ルールはFlex SDKのソースと「⾃らの経験」を参考に

• Adobe の規約はサーバーサイドを⼀切開発しない会社さん向け（参考になる部分は多い）http://opensource.adobe.com/wiki/display/fle

xsdk/Coding+Conventions


クラスメソッドコーディング規約

・外部未公開・⼤規模案件で納品実績あり・dclick.com.br というブラジルの企業が公開しているルールがベース（それがJavaがベースになっている）

－dclick.com.br coding ruleで検索


FlexFormatter• ActionScript、MXMLのソースコードをフォーマットするEclipseのJava向けフォーマット機能と同様

• きめ細やかな設定が可能• 「Ctrl+Shift＋F」でフォーマット• 個別ファイル、プロジェクト全体などフォーマット対象を選択可能

■FlexFormatterhttp://flexformatter.sourceforge.net/

■FlexFormatter UpdateSitehttp://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite/site.xml（※Flash Builder 4はEclipse 3.5ベースなので最後に必ず/site.xmlを付ける）


FlexPMD• バグチェック、品質チェックツール• JavaではPMDとFindBugsの⼆つが有名• 以下をチェック：潜在的なバグ⾮推奨なコーディングパフォーマンスに影響のあるコード低メンテナンス性のコード

PMDは何の略でもありません。


FlexPMD の実⾏


FlexPMD 実⾏結果


HP QuickTest Professional 10.0• 歴史の⻑い⾃動テストツール• Windows上のあらゆる技術を⾃動テスト• Adobe Flexの⾃動テストの最終兵器！

⽇本HP様とセミナー開催中


Technology

2010/11/27 FxUG熊本 Flex/AIRとクラウド