狠狠撸

狠狠撸Share a Scribd company logo

贰虫迟闯厂で作る础滨搁アプリケーション

?Download as PPT, PDF?
?
Daisaku Yamamoto
Daisaku Yamamoto
1 of 25
ExtJS で作る AIR アプリケーション フィードパス株式会社 山本　大策
自己紹介 山本　大策 ? フィードパス株式会社 ? tunejaxx http://tunejaxx.com/? ? tunebuzz http://neupunk.net/tunebuzz/? ? MIRAI THE FUTURE http://d.hatena.ne.jp/yamamotodaisaku/
? アーティスト関連情報検索サービス
TAGGY マッシュアップコンテスト
グランプリ受赏
応募作品数　 7
ExtJS を使用
? ? ? ? 音楽動画を簡単に検索?閲覧できる 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 プロジェクトの作成 ?↓ ? コードの記述 ↓ テスト?デバッグ ↓ パッケージング (.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=&quot;content-type&quot; content=&quot;text/html;charset=utf-8&quot;/> <title>AIR</title> </head><body> <!-- ui.html の取り込み --> <iframe id=&quot;UI&quot; src=/slideshow/extjsair-presentation/615858/&quot;ui.html&quot; sandboxRoot=&quot;http://example.com&quot; documentRoot=&quot;app:/&quot; style=&quot;width:100%; height:100%; border:none&quot;> </iframe> <!-- スクリプトの取り込み --> <script src=&quot;lib/AIRAliases.js&quot;></script> <script src=&quot;air.js&quot;></script> </body> </html>
air.js var public_obj = {}; public_obj.saveToLocal = saveToLocal; public_obj.loadFromLocal = loadFromLocal; var e = document.getElementById(&quot;UI&quot;); e.contentWindow. parentSandboxBridge = public_obj; var my_so = air.SharedObject.getLocal (&quot;air&quot;); function saveToLocal (data) { my_so.data.saveData = data; } function loadFromLocal () { return my_so.data.saveData; }
ui.html <!-- UI のためのファイル --> <html><head> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html;charset=utf-8&quot;/> <!-- ExtJS ライブラリの取り込み --> <script src=/slideshow/extjsair-presentation/615858/&quot;lib/ext/adapter/ext/ext-base.js&quot;></script> <script src=&quot;lib/ext/ext-all-debug.js&quot;></script> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/ext/resources/css/ext-all.css&quot;/> <!-- UI 記述プログラムの取り込み --> <script src=&quot;ui.js&quot;></script> </head><body> <div id=&quot;form_div&quot;></div> <div id=&quot;grid_div&quot;></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 プロフェッショナルガイド

More Related Content

贰虫迟闯厂で作る础滨搁アプリケーション

  • 1. ExtJS で作る AIR アプリケーション フィードパス株式会社 山本　大策
  • 2. 自己紹介 山本　大策 ? フィードパス株式会社 ? tunejaxx http://tunejaxx.com/? ? tunebuzz http://neupunk.net/tunebuzz/? ? MIRAI THE FUTURE http://d.hatena.ne.jp/yamamotodaisaku/
  • 8. ? ? ? ? 音楽動画を簡単に検索?閲覧できる AdobeAIR アプリケーション
  • 9. ? AdobeAIR 　 × 　 ExtJS で開発
  • 10. AdobeAIR とは クロスプラットフォームの実行環境 2007/3 Apollo アルファ　リリース 2007/6 AIR ベータ　リリース 2008/2 AIR1.0 　リリース 2008/6 AIR1.1 　リリース
  • 11. AdobeAIR が生まれた背景 Web の標準的な技術と、 Flash 技術を組み合わせたリッチインターネットアプリケーション (RIA) をベースにしたデスクトップアプリケーションを提供するために開発された。 ? ? ? ?
  • 13. AIR の開発工程 AIR プロジェクトの作成 ?↓ ? コードの記述 ↓ テスト?デバッグ ↓ パッケージング (.air) ↓ 公開
  • 14. ExtJS を使った AIR アプリの作り方 ? HTML + JavaScript + CSS でコードを記述 ? ↓? ? ? Web アプリ開発と同じ? ? ?
  • 15. 開発環境 AdobeAIR ランタイム AdobeAIR SDK ExtJS ライブラリ Aptana Studio(AIR プラグイン )
  • 16. AIR プロジェクトの種類 アプリケーション?サンドボックス（デフォルト） ??? ? AIR API の利用　…　可能 ?? ? ? eval() など動的な機能の使用　…　不可能 ??? ?外部スクリプトの取り込み　…　不可能?? クラシック?サンドボックス ?? ? ? AIR API の利用　…　不可能 ?? ? ? eval() など動的な機能の使用　…　可能 ?? ? ?外部スクリプトの取り込み　…　可能 ? jQuery はアプリケーション?サンドボックスでも動作する ExtJS はクラシック?サンドボックスで動作させる必要がある ? サンドボックスの切換え アプリケーション?サンドボックスの HTML に、 iframe タグを追加する
  • 17. 開発 Aptana で AIR プロジェクトを作成 (non-application sandbox) ? アプリケーション?サンドボックス? ? air.html ? AIRAliases.js(AIR API のエイリアスを定義 ) ? air.js(AIR API を利用 ) ? クラシック?サンドボックス? ? ui.html ? ui.js(ExtJS を利用 )
  • 18. air.html <html><head> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html;charset=utf-8&quot;/> <title>AIR</title> </head><body> <!-- ui.html の取り込み --> <iframe id=&quot;UI&quot; src=/slideshow/extjsair-presentation/615858/&quot;ui.html&quot; sandboxRoot=&quot;http://example.com&quot; documentRoot=&quot;app:/&quot; style=&quot;width:100%; height:100%; border:none&quot;> </iframe> <!-- スクリプトの取り込み --> <script src=&quot;lib/AIRAliases.js&quot;></script> <script src=&quot;air.js&quot;></script> </body> </html>
  • 19. air.js var public_obj = {}; public_obj.saveToLocal = saveToLocal; public_obj.loadFromLocal = loadFromLocal; var e = document.getElementById(&quot;UI&quot;); e.contentWindow. parentSandboxBridge = public_obj; var my_so = air.SharedObject.getLocal (&quot;air&quot;); function saveToLocal (data) { my_so.data.saveData = data; } function loadFromLocal () { return my_so.data.saveData; }
  • 20. ui.html <!-- UI のためのファイル --> <html><head> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html;charset=utf-8&quot;/> <!-- ExtJS ライブラリの取り込み --> <script src=/slideshow/extjsair-presentation/615858/&quot;lib/ext/adapter/ext/ext-base.js&quot;></script> <script src=&quot;lib/ext/ext-all-debug.js&quot;></script> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/ext/resources/css/ext-all.css&quot;/> <!-- UI 記述プログラムの取り込み --> <script src=&quot;ui.js&quot;></script> </head><body> <div id=&quot;form_div&quot;></div> <div id=&quot;grid_div&quot;></div> </body></html>
  • 21. ui.js Ext.onReady(function(){ // 親で定義された関数を使う // 保存されているデータの読み込み var save_data = window.parentSandboxBridge.loadFromLocal (); }
  • 23. 公開 シームレスインストール AIR ランタイムをインストール ↓ AIR アプリをインストール
  • 24. AIR 　 × 　 ExtJS 　の良さ AIR ?既存の Web 技術でクライアントアプリが開発可能 ExtJS ?リッチで高機能な UI ? ? 完成度の高いクライアントアプリを手軽に開発可能
  • 25. 参考 Adobe AIR プロフェッショナルガイド