HTML5Jのエンタープライズ部の、「120分聞けばドヤ顔で語れる Apache Cordova スーパー勉強会」イベントでプレゼンしました資料です。

1. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGapとハイブリッド開発
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.
一旦アドビとHTMLについて

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

5. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobeとしての活躍
contribute to a better web
better web experience
bring innovations to the web better tools for the web

6. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS Filters
Webの進化の事例：
filter:
sepia(0.8);

7. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom Filters
Webの進化の事例：

8. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS Shapes
Webの進化の事例：
.css-shape {
shape-outside:
circle(44% at 50% 50%);
}

9. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS Regions
Webの進化の事例：

10. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
詳細情報：
html.adobe.com/jp

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

12. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
というわけで
ハイブリッドアプリ
の開発について。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

29. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
では開発話。

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

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

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

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.
> cordova platform add android
> cordova run android

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

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

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

39. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ポイント！
> phonegap build android
[phonegap] detecting Android SDK environmen
[phonegap] using the local environment
[phonegap] compiling Android...
[phonegap] successfully compiled Android ap
>

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

41. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
> phonegap remote
build android など
つまり・・

42. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アプリ設計の話

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

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

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

46. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
> cordova plugin add
org.apache.cordova.vibration

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

48. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
remoteでプラグインを使う場合：
・・など

49. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
まとめ！

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

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