1. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGapでハイブリッド開発 for Firefox OS
Andy Hall 開発エバンジェリスト、アドビジャパン

2. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
だれだこいつ
@fenomas
§ 日本在住歴もFlash歴も十ん年
§ 物理学専攻 → ウェブ制作 → Flash開発 → アドビで色々
§ 現在の肩書がテクニカルエバンジェリスト
§ 興味はデザインとコードをまたぐところ
§ カタコトでゴメンね
§ ゲーム好き、などなど

3. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
まずは
ハイブリッドアプリ
の開発について。

4. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hybridアプリは箱です。

5. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hybridアプリは箱です。
HTML, JS,
CSS など
ネイティブの
シェルアプリ
(WebViewを実装)

6. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ハイブリッドの
メリットは大きい。

7. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Firefox OS
メリット１：クロスプラットフォーム

8. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Dreamweaver Muse
メリット2：デザインツールなど

9. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ツールの入手はCreative Cloudから
creative.adobe.com/

10. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ハイブリッドの
難点の２つ：

11. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hybridアプリ難点
１．純HTML5からデバイス機能に
アクセス出来なかったりする
CameraRoll
(または、出来るけどAPIが
デバイス毎に変わる)

12. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hybridアプリ難点
２．プラットフォーム毎に
箱の作り方が変わる

13. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGapとは、
難点を解決してくれる
ハイブリッド開発
フレームワークのこと。

14. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGapの由来
iPhoneDevCampで始まった (2009)
ニトビ社にて作られ
アドビ社にて買収され (2011)

15. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGapの特徴
無料
オープンソース
（Apache Cordovaとして）

16. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGapアプリって
どんなもの？

17. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
BBC Olympics

18. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Zombie Jombie

19. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Untappd

20. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGapアプリ
の開発について

21. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Webコンテンツから
始めます。

22. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
> sudo npm install
–g cordova

23. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
> cordova create
appFolder com.hoge.app HogeApp
> cd appFolder

24. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
箱はこれ！
適当に
上書きしよう。
(後、Firefox OS用の
config.xmlの追加など)

25. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
> cordova platform add firefoxos
> cordova prepare firefoxos

26. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
FFOSアプリ

27. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
> cordova platform add android
> cordova run android
ほかに build、install

28. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

29. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
デバイス機能を
使うには
プラグイン使います。

30. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
実機
アプリ (HTML)
プラグイン設計
実機 実機
プラグイン

31. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
実機
アプリ (HTML)
プラグイン設計
実機 実機
navigator.vibrate()
プラグイン
ネイティブAPI
ネイティブAPI
ネイティブAPI

32. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
> cordova plugin add
org.apache.cordova.device-motion

33. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

34. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
まとめ：

35. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ご清聴ありがとうございました！
phonegap.com/
html.adobe.com/jp
@fenomas
aphall.com/

36. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.