Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PhoneGapでハイブリッド開発 for Firefox OS

4,297 views

Published on

PhoneGapを使ったFirefox OSアプリ開発の話。(もちろんAndroid・iOSにも対応する)
Firefox OSデブコンin京都でプレゼンしました資料です。

Published in: Internet, Technology, Business

PhoneGapでハイブリッド開発 for Firefox OS

  1. 1. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. PhoneGapでハイブリッド開発 for Firefox OS Andy Hall 開発エバンジェリスト、アドビジャパン
  2. 2. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. だれだこいつ @fenomas §  日本在住歴もFlash歴も十ん年 §  物理学専攻 → ウェブ制作 → Flash開発 → アドビで色々 §  現在の肩書がテクニカルエバンジェリスト §  興味はデザインとコードをまたぐところ §  カタコトでゴメンね §  ゲーム好き、などなど
  3. 3. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. まずは ハイブリッドアプリ の開発について。
  4. 4. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Hybridアプリは箱です。
  5. 5. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Hybridアプリは箱です。 HTML, JS, CSS など ネイティブの シェルアプリ (WebViewを実装)
  6. 6. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ハイブリッドの メリットは大きい。
  7. 7. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Firefox OS メリット1:クロスプラットフォーム
  8. 8. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Dreamweaver Muse メリット2:デザインツールなど
  9. 9. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ツールの入手はCreative Cloudから creative.adobe.com/
  10. 10. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ハイブリッドの 難点の2つ:
  11. 11. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Hybridアプリ難点 1.純HTML5からデバイス機能に  アクセス出来なかったりする CameraRoll (または、出来るけどAPIが デバイス毎に変わる)
  12. 12. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Hybridアプリ難点 2.プラットフォーム毎に 箱の作り方が変わる
  13. 13. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. PhoneGapとは、 難点を解決してくれる ハイブリッド開発 フレームワークのこと。
  14. 14. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. PhoneGapの由来 iPhoneDevCampで始まった (2009) ニトビ社にて作られ アドビ社にて買収され (2011)
  15. 15. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. PhoneGapの特徴 無料 オープンソース (Apache Cordovaとして)
  16. 16. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. PhoneGapアプリって どんなもの?
  17. 17. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. BBC Olympics
  18. 18. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Zombie Jombie
  19. 19. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Untappd
  20. 20. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. PhoneGapアプリ の開発について
  21. 21. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Webコンテンツから 始めます。
  22. 22. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. > sudo npm install –g cordova
  23. 23. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. > cordova create appFolder com.hoge.app HogeApp > cd appFolder
  24. 24. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 箱はこれ! 適当に 上書きしよう。 (後、Firefox OS用の config.xmlの追加など)
  25. 25. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. > cordova platform add firefoxos > cordova prepare firefoxos
  26. 26. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. FFOSアプリ
  27. 27. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. > cordova platform add android > cordova run android ほかに build、install
  28. 28. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  29. 29. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. デバイス機能を 使うには プラグイン使います。
  30. 30. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 実機 アプリ (HTML) プラグイン設計 実機 実機 プラグイン
  31. 31. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 実機 アプリ (HTML) プラグイン設計 実機 実機 navigator.vibrate() プラグイン ネイティブAPI ネイティブAPI ネイティブAPI
  32. 32. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. > cordova plugin add org.apache.cordova.device-motion
  33. 33. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  34. 34. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. まとめ:
  35. 35. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ご清聴ありがとうございました! phonegap.com/ html.adobe.com/jp @fenomas aphall.com/
  36. 36. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

×