© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGapでハイブリッド開発 for Firefox OS
Andy Hall 開発エバ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
だれだこいつ
@fenomas
§  日本在住歴もFlash歴も十ん年
§  物理学専攻 ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
まずは
ハイブリッドアプリ
の開発について。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hybridアプリは箱です。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hybridアプリは箱です。
HTML, JS,
CSS など
ネイティブの
シェルアプリ
(...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ハイブリッドの
メリットは大きい。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Firefox OS
メリット1:クロスプラットフォーム
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Dreamweaver Muse
メリット2:デザインツールなど
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ツールの入手はCreative Cloudから
creative.adobe.com/
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ハイブリッドの
難点の2つ:
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hybridアプリ難点
1.純HTML5からデバイス機能に
 アクセス出来なかったりする
Ca...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hybridアプリ難点
2.プラットフォーム毎に
箱の作り方が変わる
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGapとは、
難点を解決してくれる
ハイブリッド開発
フレームワークのこと。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGapの由来
iPhoneDevCampで始まった (2009)
ニトビ社にて作られ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGapの特徴
無料
オープンソース
(Apache Cordovaとして)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGapアプリって
どんなもの?
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
BBC Olympics
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Zombie Jombie
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Untappd
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGapアプリ
の開発について
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Webコンテンツから
始めます。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
> sudo npm install
–g cordova
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
> cordova create
appFolder com.hoge.app HogeApp...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
箱はこれ!
適当に
上書きしよう。
(後、Firefox OS用の
config.xmlの追加な...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
> cordova platform add firefoxos
> cordova prep...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
FFOSアプリ
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
> cordova platform add android
> cordova run an...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
デバイス機能を
使うには
プラグイン使います。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
実機
アプリ (HTML)
プラグイン設計
実機 実機
プラグイン
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
実機
アプリ (HTML)
プラグイン設計
実機 実機
navigator.vibrate()...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
> cordova plugin add
org.apache.cordova.device-...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
まとめ:
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ご清聴ありがとうございました!
phonegap.com/
html.adobe.com/jp...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Upcoming SlideShare
Loading in …5
×

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

4,127 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.

×