ExtJSで作るAIRアプリケーション

ExtJS で作る AIR アプリケーションフィードパス株式会社山本　大策

自己紹介山本　大策フィードパス株式会社 tunejaxx http://tunejaxx.com/ tunebuzz http://neupunk.net/tunebuzz/ MIRAI THE FUTURE http://d.hatena.ne.jp/yamamotodaisaku/

アーティスト関連情報検索サービス

TAGGY マッシュアップコンテスト

音楽動画を簡単に検索・閲覧できる AdobeAIR アプリケーション

AdobeAIR 　 × 　 ExtJS で開発

AdobeAIR とはクロスプラットフォームの実行環境 2007/3 Apollo アルファ　リリース 2007/6 AIR ベータ　リリース 2008/2 AIR1.0 　リリース 2008/6 AIR1.1 　リリース

AdobeAIR が生まれた背景 Web の標準的な技術と、 Flash 技術を組み合わせたリッチインターネットアプリケーション (RIA) をベースにしたデスクトップアプリケーションを提供するために開発された。

AIR の開発工程 AIR プロジェクトの作成 ↓ コードの記述 ↓ テスト・デバッグ ↓ パッケージング (.air) ↓ 公開

ExtJS を使った AIR アプリの作り方 HTML + JavaScript + CSS でコードを記述 ↓ Web アプリ開発と同じ

開発環境 AdobeAIR ランタイム AdobeAIR SDK ExtJS ライブラリ Aptana Studio(AIR プラグイン )

AIR プロジェクトの種類アプリケーション・サンドボックス（デフォルト）・ AIR API の利用　…　可能・ eval() など動的な機能の使用　…　不可能・外部スクリプトの取り込み　…　不可能クラシック・サンドボックス・ AIR API の利用　…　不可能・ eval() など動的な機能の使用　…　可能・外部スクリプトの取り込み　…　可能 jQuery はアプリケーション・サンドボックスでも動作する ExtJS はクラシック・サンドボックスで動作させる必要があるサンドボックスの切換えアプリケーション・サンドボックスの HTML に、 iframe タグを追加する

開発 Aptana で AIR プロジェクトを作成 (non-application sandbox) アプリケーション・サンドボックス・ air.html ・ AIRAliases.js(AIR API のエイリアスを定義 ) ・ air.js(AIR API を利用 ) クラシック・サンドボックス・ ui.html ・ ui.js(ExtJS を利用 )

air.html <html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>AIR</title> </head><body>  <iframe id="UI" src="ui.html" sandboxRoot="http://example.com" documentRoot="app:/" style="width:100%; height:100%; border:none"> </iframe>  <script src="lib/AIRAliases.js"></script> <script src="air.js"></script> </body> </html>

air.js var public_obj = {}; public_obj.saveToLocal = saveToLocal; public_obj.loadFromLocal = loadFromLocal; var e = document.getElementById("UI"); e.contentWindow. parentSandboxBridge = public_obj; var my_so = air.SharedObject.getLocal ("air"); function saveToLocal (data) { my_so.data.saveData = data; } function loadFromLocal () { return my_so.data.saveData; }

ui.html  <html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/>  <script src="lib/ext/adapter/ext/ext-base.js"></script> <script src="lib/ext/ext-all-debug.js"></script> <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/>  <script src="ui.js"></script> </head><body> <div id="form_div"></div> <div id="grid_div"></div> </body></html>

ui.js Ext.onReady(function(){ // 親で定義された関数を使う // 保存されているデータの読み込み var save_data = window.parentSandboxBridge.loadFromLocal (); }

パッケージング Aptana でワンクリック

公開シームレスインストール AIR ランタイムをインストール ↓ AIR アプリをインストール

AIR 　 × 　 ExtJS 　の良さ AIR ・既存の Web 技術でクライアントアプリが開発可能 ExtJS ・リッチで高機能な UI 完成度の高いクライアントアプリを手軽に開発可能

参考 Adobe AIR プロフェッショナルガイド

ExtJSで作るAIRアプリケーション

More Related Content

Viewers also liked (19)

Similar to ExtJSで作るAIRアプリケーション (6)

More from Daisaku Yamamoto (12)

ExtJSで作るAIRアプリケーション