Flex meets HTML5 Family@shoito

2010/09/11(Sat)

自己紹介 / shoito

宮城 → 福井 [4Y]

ソフトウェア設計ツールの開発

本日のアジェンダ

• HTML5とHTML5 Family

• Web Storage APIとas3webstorage

• Geolocation APIとas3geolocation

• まとめ

HTML5とHTML5 Family

HTML5 & HTML5 Family

HTML5

Indexed Database API

Geolocation API

Web workers

WebSocket

Web Storage

File API

Web SQL Database ...etc

Web Storage APIとas3webstorage

Web Storage API

KEY : VALUEKEY : VALUEKEY : VALUE

Session Storage

• ウィンドウ毎のデータを保持する

• ウィンドウが閉じられるとデータは消えるsessionStorage.setItem(“key”, “value”);

sessionStorage.removeItem(“key”);

sessionStorage.clear();

Local Storage

• ストレージは複数ウィンドウをまたがる

• オリジン毎にストレージは異なる

• ウィンドウが閉じられてもデータは保持されるlocalStorage.setItem(“key”, “value”);

localStorage.removeItem(“key”);

localStorage.clear();

as3webstorageActionScript3向けWeb Storageライブラリ

HTML

用途: 共通ストレージ

Flash

Flash

Web Storageほとんどのブラウザで上限5MBまで

SharedObject100KBまで(調整可能)

ActionScript <-> JavaScriptExternalInterfaceによる橋渡し

flash.external.ExternalInterface

ActionScript(Flash)

JavaScript(HTML)

ExternalInterface.call(funcJ);

ExternalInterface.addCallback(“funcA”, hoge);

function hoge( ):void

function funcJ( ) { } funcA();

Geolocation APIとas3geolocation

Geolocation API

as3geolocationActionScript3向けGeolocationライブラリ

開発の動機

記事書けてなくてゴメンなさい

Flash + HTML 5: Offline Flash Apps using DataStore API

Web SQL Database

まとめ

まとめ＆補足

• Flexでは履歴管理機能、ディープリンク機能でActionScript <-> JavaScript連携がされている

• ExternalInterfaceでAS <-> JS間のデータ交換はXML

形式なので、オブジェクトによってはデシリアライズできない

• シンプルなインターフェースならAS <-> JS連携で面白い機能が実現できる可能性がある

Thanks!

@shoito2010/09/11(Sat)