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

4,696
-1

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,696
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • ExtJSで作るAIRアプリケーション

    1. 1. ExtJS で作る AIR アプリケーション フィードパス株式会社 山本 大策
    2. 2. 自己紹介 <ul><li>山本 大策 </li></ul><ul><li>  </li></ul><ul><li>フィードパス株式会社 </li></ul><ul><li>  </li></ul><ul><li>tunejaxx </li></ul><ul><li>http://tunejaxx.com/  </li></ul><ul><li>  </li></ul><ul><li>tunebuzz </li></ul><ul><li>http://neupunk.net/tunebuzz/  </li></ul><ul><li>  </li></ul><ul><li>MIRAI THE FUTURE </li></ul><ul><li>http://d.hatena.ne.jp/yamamotodaisaku/ </li></ul>
    3. 3.   アーティスト関連情報検索サービス
    4. 4. <ul><li>TAGGY マッシュアップコンテスト </li></ul>
    5. 5. <ul><li>グランプリ受賞 </li></ul>
    6. 6. <ul><li>応募作品数  7 </li></ul>
    7. 7. <ul><li>ExtJS を使用 </li></ul>
    8. 8. <ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>音楽動画を簡単に検索・閲覧できる </li></ul><ul><li>AdobeAIR アプリケーション </li></ul>
    9. 9.   <ul><li>AdobeAIR   ×   ExtJS で開発 </li></ul>
    10. 10. AdobeAIR とは <ul><li>クロスプラットフォームの実行環境 2007/3 Apollo アルファ リリース 2007/6 AIR ベータ リリース 2008/2 AIR1.0  リリース 2008/6 AIR1.1  リリース </li></ul>
    11. 11. AdobeAIR が生まれた背景 <ul><li>Web の標準的な技術と、 Flash 技術を組み合わせたリッチインターネットアプリケーション (RIA) をベースにしたデスクトップアプリケーションを提供するために開発された。 </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul>
    12. 12. AIR の仕組み
    13. 13. AIR の開発工程 <ul><li>AIR プロジェクトの作成  ↓   コードの記述 ↓ </li></ul><ul><li>テスト・デバッグ ↓ パッケージング (.air) </li></ul><ul><li>↓ </li></ul><ul><li>公開 </li></ul>
    14. 14. ExtJS を使った AIR アプリの作り方 <ul><li>  </li></ul><ul><li>HTML + JavaScript + CSS でコードを記述 </li></ul><ul><li>  </li></ul><ul><li>↓  </li></ul><ul><li>  </li></ul><ul><li>  Web アプリ開発と同じ  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul>
    15. 15. 開発環境 <ul><li>AdobeAIR ランタイム AdobeAIR SDK ExtJS ライブラリ Aptana Studio(AIR プラグイン ) </li></ul>
    16. 16. AIR プロジェクトの種類 <ul><li>アプリケーション・サンドボックス(デフォルト)     ・ AIR API の利用 … 可能      ・ eval() など動的な機能の使用 … 不可能     ・外部スクリプトの取り込み … 不可能   クラシック・サンドボックス      ・ AIR API の利用 … 不可能      ・ eval() など動的な機能の使用 … 可能      ・外部スクリプトの取り込み … 可能   </li></ul><ul><li>jQuery はアプリケーション・サンドボックスでも動作する ExtJS はクラシック・サンドボックスで動作させる必要がある   </li></ul><ul><li>サンドボックスの切換え アプリケーション・サンドボックスの HTML に、 iframe タグを追加する </li></ul>
    17. 17. 開発 <ul><li>Aptana で AIR プロジェクトを作成 (non-application sandbox) </li></ul><ul><li>  </li></ul><ul><li>アプリケーション・サンドボックス  </li></ul><ul><li>・ air.html </li></ul><ul><li>・ AIRAliases.js(AIR API のエイリアスを定義 ) </li></ul><ul><li>・ air.js(AIR API を利用 ) </li></ul><ul><li>  </li></ul><ul><li>クラシック・サンドボックス  </li></ul><ul><li>・ ui.html </li></ul><ul><li>・ ui.js(ExtJS を利用 ) </li></ul>
    18. 18. air.html <ul><li><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=&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> </li></ul>
    19. 19. air.js <ul><li>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; } </li></ul>
    20. 20. ui.html <ul><li><!-- UI のためのファイル --> <html><head> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html;charset=utf-8&quot;/> <!-- ExtJS ライブラリの取り込み --> <script src=&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> </li></ul>
    21. 21. ui.js <ul><li>Ext.onReady(function(){ // 親で定義された関数を使う // 保存されているデータの読み込み var save_data = window.parentSandboxBridge.loadFromLocal (); </li></ul><ul><li>} </li></ul>
    22. 22. パッケージング <ul><li>Aptana でワンクリック </li></ul>
    23. 23. 公開 <ul><li>シームレスインストール </li></ul><ul><li>AIR ランタイムをインストール ↓ AIR アプリをインストール </li></ul>
    24. 24. AIR   ×   ExtJS  の良さ <ul><li>AIR </li></ul><ul><li>・既存の Web 技術でクライアントアプリが開発可能 </li></ul><ul><li>ExtJS </li></ul><ul><li>・リッチで高機能な UI </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>完成度の高いクライアントアプリを手軽に開発可能 </li></ul>
    25. 25. 参考 <ul><li>Adobe AIR プロフェッショナルガイド </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×