Upload
sho-ito
View
2.530
Download
0
Embed Size (px)
DESCRIPTION
Flex meets HTML5 Familyと題して、Flex勉強会第121回@福井での発表。 内容はFlashとHTML5 Familyの連携
Citation preview
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)