adobe® air™が拓くweb2.0 on desktopの世界 ·

2007 Adobe Systems Incorporated. All Rights Reserved.

アドビシステムズ株式会社テクニカルエバンジェリスト太田禎一 <[email protected]>

2007.11.11

Adobe®

AIR™が拓く Web 2.0 on Desktopの世界

2007 Adobe Systems Incorporated. All Rights Reserved.2

Webの現在と、Adobeの取り組みAIR開発にはFlexフレームワークがオススメFlexアプリを「脱ブラウザ」化するAIRAIRは理想的なSOA統合クライアントAIRサンプル集参考資料

本日のトピック


Webアプリケーションの変わらぬ隆盛AjaxをはじめとするWebページのリッチ化とその一般化Web APIを公開し、外部開発者を取り入れるサービス戦略Blog/SNSをはじめとするCGM (ユーザー投稿型メディア)オープンな技術を核とした開発手法

Webの現在


無償クライアントの活用Adobe ReaderとFlash Player

プラットフォーム中立Windows/Mac/Linux/携帯...LAMP/Java/.NET/etc...IE/Firefox/Safari/Opera/etc...

標準技術の確立とサポートECMAScript Edition 4 (AS3)PDF仕様のAIIM提出

オープンソースへの積極的な関与Mozilla財団へTamarin VM寄贈Spry Ajax/Flex 3 SDK/etc...

Adobeの取り組み


Flex/AIR周辺技術のオープン化

ツールMXMLコンパイラ (mxmlc、compc)AS3コンパイラFlexコマンドラインデバッガ (FDB)View SourceユーティリティWeb Tierコンパイラモジュール

ライブラリFlexコアコンポーネントFlex AIRコンポーネントグラフィックスタグライブラリテーマ (Halo等)RPC ライブラリ (SOAP、HTTP、Client Remoting)FABridgeSDK自動テストエンジン (mustella)SDKビルドスクリプト、自動テスト

バイナリ

Saffron / FlashTypeライブラリコアプレーヤーAPI定義 (playerglobal.swc)

コアAIR API定義*配布において開示されないソース部分は、既存の

ライセンス条項と制限を維持

オープンソース化を計画しているものクローズドソース (SDKに含まれる)

クローズドソース (SDKに含まれない)

バイナリMercury QTPプラグイン

Charts & Advanced DataGridコンポーネントFlex Builder

Flex Profiler

クローズドソース (配布は未定...)バイナリデバッグ版& リリース版のFlash Player

デバッグ版& リリース版のAIRランタイム


AIR開発には Flexフレームワークがオススメ


Flexフレームワークで開発された Flashベースのリッチインターネットアプリケーション (RIA)

Flash Player 9 以降が必要


<mx:Button label="Hello" click="myAlert('Hello World')"/>

<mx:Script>

<![CDATA[

import mx.controls.Alert

private function myAlert(alertStr:String):void{

Alert.show(alertStr);

}

]]>

</mx:Script>

ボタン自体はMXMLタグをコード記述するだけ、あるいはVBのようなドラッグ&ドロップ配置ボタンの動作はActionScript 3.0で記述するソースはテキスト形式

Flexフレームワークにおける開発手法


<mx:Style>

Button {

cornerRadius: 9;

highlightAlphas: 0.3, 0.3;

fillAlphas: 0.6, 1, 0.75, 0.65;

fillColors: #ff0000, #000000,

#ff0000, #999999;

color: #ffffff;

textRollOverColor: #ffffff;

textSelectedColor: #ffffff;

themeColor: #ff0000;

}

</mx:Style>

<mx:Style>

Button {

cornerRadius: 0;

highlightAlphas: 1, 0.23;

fillAlphas: 0.79, 0, 1, 0.64;

fillColors: #000066, #000066,

#000066, #ffffff;

color: #000000;

textRollOverColor: #000000;

textSelectedColor: #000000;

themeColor: #000066;

}

</mx:Style>

コンポーネントのCSSスタイリング


CODE：簡単なMXML+ActionScriptサンプル

たったこれだけのコードで：<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var myAC:ArrayCollection=new ArrayCollection;

public function addItemToMyAC():void{

myAC.addItem({Data:Math.floor(Math.random()*100)});

}

]]>

</mx:Script>

<mx:ColumnChart dataProvider="{myAC}">

<mx:series>

<mx:ColumnSeries yField="Data"/>

</mx:series>

</mx:ColumnChart>

<mx:DataGrid width="200"

dataProvider="{myAC}"

editable="true"

itemEditEnd="myAC.refresh()"/>

<mx:Button label="Add Item"

click="addItemToMyAC()"/>

こんなアプリケーションが⇒

ColumnChartコンポーネントDataGridコンポーネントButtonコンポーネント3つのコンポーネントの組み合わせとActionScript 3.0データバインディング


Flex User Grouphttp://www.fxug.net/

設立：2005年10月

Java開発者を中心に、登録者メンバー1,500名超 (日本国内)

すでに各地で勉強会を25回実施。活発な情報交換

Flex開発技術者コミュニティ

http://www.fxug.net/


Flash Player 6(Express Install対応) = 99.5%Flash Player 9(Flexフレームワーク対応)= 93.7%高い普及率の理由のひとつ：Flash Player 6以降で対応するワンクリックアップデート機構(Express Install)

*2007年9月調査

出典：http://www.adobe.com/products/player_census/flashplayer/version_penetration.html

圧倒的なFlash Player普及率*

ワンクリックアッ

プデート対応の

Flash Player 6は

99.5%

Flexフレームワーク

対応の

Flash Player 9は

93.7%Express Installダイアログ

http://www.adobe.com/products/player_census/flashplayer/version_penetration.html


Flexアプリを「脱ブラウザ」化するAIR


Adobe Integrated Runtime (AIR)


Web標準のメディア・アプリケーション技術だけで Win/Mac対応のデスクトップアプリケーションを開発・配布するためのランタイム

AIRとは？


WPF (ClickOnce) Java (JWS)

対応OS Win/Mac

(1.0後にLinux予定）

Windows Vista

(XP/2003 Svr.)

Win/Mac/Linux/

Solaris Win/Mac

ランタイムサイズ

(Windowsの場合)

9.4MB

（Beta 2）

50.3MB+言語パック

(XP/2003 Svr.の場合) 15.82MB 9.2MB

クライアントロジック

開発言語

JavaScript/

ActionScript

(Web言語)

C#/VB.NET

(アプリ言語)

Java

(アプリ言語)

JavaScript

(Web言語)

画面設計言語 HTML/CSS/MXML XAML なし

(Swing等GUI Lib.) XML

Ajaxがそのまま稼動可能不可能不可能不可能

組み込みWebブラウザ

エンジン WebKit なしなしなし

外部DLLサポート 1.0ではなしありありあり

※AIRは2008年前半に1.0リリースを予定

※SilverlightはデスクトップRIAではない

他のデスクトップRIAランタイムとの比較


Browser: WebKit (JavaScript)Flash Player 9

(ActionScript 3)Adobe Reader 8.1(JavaScript)

AIR = Browser + Flash Player + Adobe Reader


AIR = Windows + Mac (+ Linux…)


クロスOSアプリケーション

各テクノロジーを統合レンダリング

DOMアクセスとスクリプティング

の統合

Flash HTML

FlexActionScriptXML音声ビデオ

HTMLJavaScriptXMLCSS

HTML

PDF

Flash

PDF

Adobe AIR API

Mac、Windows (Linux & デバイスOS)

ファイル

システム

アクセス

ファイル

システム

アクセス

ネット

ワーク

検知

ネット

ワーク

検知

システム

告知

システム

告知

アプリ

更新

アプリ

更新

ドラッグ

&ドロップ

ドラッグ

&ドロップ

ローカル

DB

ローカル

DB ......

AIRアーキテクチャ


Windows/Mac (Linux)Windows/Mac (Linux)

インストール済みの

AIR実行環境

インストール済みの

AIR実行環境

クロスプラットフォームなAIR

パッケージファイルを作成

クロスプラットフォームなAIR

パッケージファイルを作成SWFSWF

PDFPDF

PNGPNG

JPEGJPEG

GIFGIF

HTMLHTML

JavaScriptJavaScript

CSSCSS

APP.XMLAPP.XML

制作・開発

するのは

Web標準

ファイル

AIRファイルに

パッケージ化

Flex Builder 3

OR

AIR SDK(無償)

AIRランタイム(5

～9MB)を1回イン

ストール

AIR用のアプリ

ケーション記述

XMLファイル

SWFSWF

HTMLHTML


APP.XMLAPP.XML

SWFSWF

HTMLHTML


APP.XMLAPP.XML

AIRアプリケーションの開発・配信フロー


Flash Player 6 r65以降で対応のExpress Install機能を利用

ワンクリックでインストールを開始

AIRが未インストールの場合は、ランタイムも同時にインストール

http://labs.adobe.com/technologies/ air/samples/

AIRの特徴１：超スムーズなインストール

http://labs.adobe.com/technologies/air/samples/


VIDEO


Flashで構築した、操作性に優れたインターフェイス充実のメディアサポート(FLV/MP3/H.264...)

ドラッグ&ドロップ対応、常駐アプリケーション

eBay San Dimasプロジェクト

Salesforce

AIRサンプル

AIRの特徴２：優れたインターフェイスと操作感


AIR MXML CODE：ドラッグ&ドロップ<?xml version="1.0" encoding="utf‐8"?><mx:WindowedApplication

xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"><mx:Script><![CDATA[

import flash.desktop.Clipboard;import flash.desktop.ClipboardFormats;import flash.desktop.DragActions;import flash.desktop.DragManager;import flash.events.NativeDragEvent;import flash.filesystem.File;import mx.controls.Image;private function init():void{

this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragIn);this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDrop);}

public function onDragIn(event:NativeDragEvent):void{DragManager.acceptDragDrop(this);}

public function onDrop(event:NativeDragEvent):void{DragManager.dropAction=DragActions.COPY;var

dropfiles:Array=event.clipboard.dataForFormat(ClipboardFormats.FILE_LIST_FORMAT) as Array;for each (var

file:File

in dropfiles){addImage(file.nativePath);

}}private function addImage(nativePath:String):void{

var

i:Image=new Image();if(Capabilities.os.search("Mac")>=0){

i.source="file://"+nativePath;} else {

i.source=nativePath;}

this.addChild(i);}]]></mx:Script><mx:Text

text="画像ファイルをドロップしてください"/></mx:WindowedApplication>


ブラウザそのものを内蔵オープンソースのWebKit(Safariブラウザのコア)JavaScripterのためのガイドブック："Adobe®Integrated Runtime (AIR) for JavaScript Developers" CCで提供中有志で邦訳されました！

株式会社antsさんのWiki：http://gizmo.anthill.jp/fgug/modules/bwiki/

http://ajaxian.com/archives/adobe-air-free-book-download

AIRの特徴３：HTML/JavaScriptも主役

http://gizmo.anthill.jp/fgug/modules/bwiki/

http://gizmo.anthill.jp/fgug/modules/bwiki/

http://ajaxian.com/archives/adobe-air-free-book-download


AIR MXML CODE：HTML

inside Flash<?xml version="1.0" encoding="utf‐8"?><mx:WindowedApplication

xmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical" width="800" height="600"><mx:TextInput

id="ti"text="type in any URL"width="90%"enter="h.location=ti.text"/><mx:HTML

id="h"location="http://www.google.com/"width="90%" height="90%"/><mx:HBox><mx:Label

text="Rotation"/><mx:HSlider

id="hs_rotate"value="0"liveDragging="true"snapInterval="5"change="h.rotation=hs_rotate.value"minimum="‐180" maximum="180" enabled="true"/>

</mx:HBox><mx:HBox><mx:Label

text="Alpha"/><mx:HSlider

id="hs_alpha"value="1"liveDragging="true"snapInterval=".1"change="h.alpha=hs_alpha.value"minimum="0" maximum="1" enabled="true"/>

</mx:HBox></mx:WindowedApplication>


AIRは理想的な SOA統合クライアント


Webブラウザはサーバー側で生成されたViewを受け取る：JSP/ASP/PHPユーザーのViewに対する操作はネット越し

従来のWebアプリケーション

Model

View

Controller

クライアント

サーバー

Viewの

コピー

Model

View

Controller

Viewの

コピー

サービスBサービスA

統合が非常に難しい

サーバー

応答・ユーザ

ビリティがボ

トルネック


サービスにAPI経由でアクセスすることで、Viewが切り離されるさまざまなサービスが統合しやすくViewへの操作がネット越しなのは変わらず

サーバーサイドSOA統合

クライアント

サーバー

Model

View

Controller

Model

Controller

SOA

エンドポイント

SOA


Viewの

コピー


API提供

サーバー

応答・ユーザ

ビリティのボ

トルネックは

変わらない


Viewをクライアント側に持ってくる (分散協調)：Ajax/Java/WPF/Silver-light/Flash/Flex/AIRユーザーは、Viewを直接操作ユーザビリティが向上Model/Controlの一部をクライアント側で構築できるRIAが最適X-domainアクセス重要

クライアントサイドSOA統合 (マッシュアップ)とAIR

クライアント

サーバー

Model

View

Controller

Model

Controller

Modelの

一部コピー

Controllerの

サブセット

SOA


SOA


Modelの

一部コピー

Controllerの

サブセット


API提供

クライアントサイドで統合

非同期通信と

ユーザ

ビリティ向上

が実現


価格.com デモ

価格.comのWebサービスAPIが一般公開（登録不要）されているhttp://apiblog.kakaku.com/

商品検索API http://apiblog.kakaku.com/KakakuItemSearchV1.0.html

キーワードで商品を検索し、一度に5件の検索結果をXML形式で取得できる

WebサービスのURI: http://api.kakaku.com/Ver1/ItemSearch.asp

リクエストパラメータkeyword：検索キーワード。デフォルトでは、検索結果はキーワードスコア（合致率）の高い順に返される

リターンパラメータ検索結果全体は<ProductInfo>要素として返される商品ごとに<Item>要素にまとめられているImageUrl：商品画像のURIProductName：商品名MakerName：製造メーカー名LowestPrice：最低価格

http://apiblog.kakaku.com/

http://apiblog.kakaku.com/KakakuItemSearchV1.0.html

http://apiblog.kakaku.com/KakakuItemSearchV1.0.html

http://apiblog.kakaku.com/

http://api.kakaku.com/Ver1/ItemSearch.asp

http://api.kakaku.com/Ver1/ItemSearch.asp


AIR MXML CODE：価格.com

<?xml version="1.0" encoding="utf‐8"?><mx:WindowedApplication

xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"><mx:HTTPService

id="srv" url="http://api.kakaku.com/Ver1/ItemSearch.asp?keyword={ti.text}"/><mx:HBox>

<mx:TextInput

id="ti" width="200" enter="srv.send()"/><mx:Button

label="価格.comで探す" click="srv.send()"/></mx:HBox><mx:TileList

id="tl" dataProvider="{srv.lastResult.ProductInfo.Item}" width="100%"

height="100%">

<mx:itemRenderer><mx:Component>

<mx:VBox

height="200" width="200" verticalScrollPolicy="off"

horizontalScrollPolicy="off"

horizontalAlign="center" borderStyle="none"><mx:Image

source="{data.ImageUrl}" width="100" height="100"/><mx:Label

text="{data.ProductName}" width="200" truncateToFit="true"/><mx:Label

text="メーカー：{data.MakerName}"/><mx:Button

label="最低価格：{data.LowestPrice}円" click="navigateToURL(new

URLRequest(data.ItemPageUrl));"/></mx:VBox>

</mx:Component></mx:itemRenderer>

</mx:TileList></mx:WindowedApplication>


ActionScript 3.0 API for YouTubehttp://code.google.com/p/as3youtubelib/

As3awss3lib (Amazon S3)http://code.google.com/p/as3awss3lib/

As3Crypto (暗号化ライブラリ)http://crypto.hurlant.com/

ebay APIhttp://code.google.com/p/as3ebaylib/

facebook-as3http://code.google.com/p/facebook-as3/

lastfm-as3http://code.google.com/p/lastfm-as3/

MapQuesthttp://company.mapquest.com/mqbs/4a.html

Salesforce Flex Toolkithttp://wiki.apexdevnet.com/index.php/Flex_ToolkitTwitter AS3 APIhttp://twitter.com/blog/2006/10/twitter-api-for-flash-developers.html

Yahoo AS3 APIshttp://developer.yahoo.com/flash/

Flexで使える、ActionScript 3.0用API &ライブラリ

http://code.google.com/p/as3youtubelib/

http://code.google.com/p/as3awss3lib/

http://crypto.hurlant.com/

http://code.google.com/p/as3ebaylib/

http://code.google.com/p/facebook-as3/

http://code.google.com/p/lastfm-as3/

http://company.mapquest.com/mqbs/4a.html

http://wiki.apexdevnet.com/index.php/Flex_Toolkit

http://wiki.apexdevnet.com/index.php/Flex_Toolkit

http://twitter.com/blog/2006/10/twitter-api-for-flash-developers.html

http://twitter.com/blog/2006/10/twitter-api-for-flash-developers.html

http://developer.yahoo.com/flash/


1.データを瞬時に処理できる強力なスクリプトエンジン

2.データ同期やプッシュなど高度なデータサービス

3.オフライン稼動を実現するローカルストレージ

理想のSOAクライアントに必要なもの


１．強力なスクリプトエンジンと通信機能

JavaScriptとは桁違いのActionScript 3.0処理速度強い型付けJITコンパイルXMLデータの高速処理：E4X (ECMAScript for XML)

AMF3通信HTTPベースのバイナリ通信。要サーバーサイドミドルウェア↓ColdFusionhttp://www.adobe.com/jp/products/coldfusion/LiveCycle Data Services EShttp://www.adobe.com/jp/products/livecycle/dataservices/S2Flex2http://s2flex2.sandbox.seasar.org/ja/

↑ベンチマーク：http://www.jamesward.org/census/

http://www.adobe.com/jp/products/coldfusion/

http://www.adobe.com/jp/products/coldfusion/

http://www.adobe.com/jp/products/livecycle/dataservices/

http://www.adobe.com/jp/products/livecycle/dataservices/

http://s2flex2.sandbox.seasar.org/�ja/

http://s2flex2.sandbox.seasar.org/�ja/

http://www.jamesward.org/census/


バックエンド

システム

Java

(JSP/Svlt.)

.NET (ASP)

ColdFusion

PHP

CGI/REST

XML Web Svc.

POJO

メッセージング

JMS

J2EE

フレームワーク

SpringHibernate

バックエンド

システム

Java

(JSP/Svlt.)

.NET (ASP)

ColdFusion

PHP

CGI/REST

XML Web Svc.

POJO

メッセージング

JMS

J2EE

フレームワークSpringHibernate

２．高度なデータサービス

Flex Builder

Flash/AIR

アプリを開発 Ajaxと同じ

テキストベー

スのHTTP通

信による限界

データ更新頻度が高い、

または同じデータを複数

の接続ユーザーが参照・

更新する場合、

LiveCycle Data Services ES

が有効

より効率的な

バイナリ通信、

ページング、デー

タ同期・排他制御、

データプッシュ


３．ローカルストレージ

サイズ備考

Browser Cookie ～4 KB All Browsers

Local Shared Object

～100 KB

(ユーザー許

可により

Unlimited)

Flash Player 6+

userData～1 MB

(イントラで

は～10 MB)

IE 5+

DOM Storage ～5 MB Firefox

2+

Google Gears (SQLite) Unlimited ブラウザ

プラグイン

AIR (SQLite) Unlimited ランタイム

Webブラウザ内でユーザーデータを永続化するのは難しいBrowser Cookie：単純なプロファイル保持以外には使えないBrowser Cache：コントロール不可能オフライン稼動を想定したアプリだけでなく、処理の応答性を高めるためには必須の機能


AIRサンプル集


AIRアプリケーション：SQLite Admin Application for AIR

AIR内蔵SQLite機能デモンストレーション任意のDBファイルをローカルに生成SQL文を発行して操作

ダウンロード↑※このサンプルはBeta 2未対応

http://coenraets.org/blog/2007/06/

sqlite-admin-application-for-air/

http://coenraets.org/blog/2007/06/sqlite-admin-application-for-air/

http://coenraets.org/blog/2007/06/sqlite-admin-application-for-air/


AIRアプリケーション：SALES BUILDER

案件追跡・管理ツールセールス情報をサーバーから取得し、AIRのローカルSQLサーバーに保持ローカルでデータの修正・追加を行い、オンライン時に「同期」ドラッグ&ドロップ対応オフラインでも利用可能

ダウンロード↑

http://coenraets.org/blog/2007/10/

salesbuilder-for-flex-3-air-beta-2-air-file-source-code/

http://coenraets.org/blog/2007/10/�salesbuilder-for-flex-3-air-beta-2-air-file-source-code/

http://coenraets.org/blog/2007/10/�salesbuilder-for-flex-3-air-beta-2-air-file-source-code/


AIRアプリケーション：ADOBE DIRECTORY

社員データや会議室を検索・表示できるAIRアプリケーション情報の一部をAIRのローカルSQLサーバーに保持オフライン、あるいはイントラに繋げないときでも利用できるサンプル「EMPLOYEE DIRECTORY」がソースとともにLabsで入手可能

サンプル版→

http://labs.adobe.com/

technologies/air/

samples/

↑社内で実際に使われ

ているもの





AIRアプリケーション：Analytics Reporting Suite for Google Analytics

Google Analytics (サイト解析サービス) と連携したAIRアプリケーションFlexコンポーネントで情報を視覚化シングルスクリーンに複数の機能を集約レポートをPDF/XLS/XML形式で生成し、ローカルディスクに保存

ダウンロード↑

http://www.aboutnico.be/index.php/

google-analytics-air-beta-sign-up/

http://www.aboutnico.be/index.php/google-analytics-air-beta-sign-up/

http://www.aboutnico.be/index.php/google-analytics-air-beta-sign-up/


参考資料


http://labs.adobe.com

Adobe Labs

http://labs.adobe.com/


http://fxug.net

Flex User Group

http://fxug.net/


http://weblogs.macromedia.com/ akamijo/

Akihiro Kamijo

Blog

http://weblogs.macromedia.com/akamijo/

http://weblogs.macromedia.com/akamijo/


オススメAIR関連書籍

Adobe Flex2プロフェッショナルガイド (3,800円/マイコミ)http://book.mycom.co.jp/book/978-4-8399-2589-5/978-4-8399-2589-5.shtml

Adobe AIR 完全解説 (2,000円/アスキー)http://www.ascii.co.jp/books/books/detail/978-4-7561-5032-5.shtml※Beta 2対応していないため、一部コードの書き換えが必要。でも基本がわかる良書！

http://book.mycom.co.jp/book/978-4-8399-2589-5/978-4-8399-2589-5.shtml

http://book.mycom.co.jp/book/978-4-8399-2589-5/978-4-8399-2589-5.shtml

http://www.ascii.co.jp/books/books/detail/978-4-7561-5032-5.shtml

http://www.ascii.co.jp/books/books/detail/978-4-7561-5032-5.shtml


アドビシステムズは、人とアイデア、

人と情報の関わりを変革します

adobe® air™が拓くweb2.0 on desktopの世界 ·

Documents