Mais conteúdo relacionado
Semelhante a PhoneGapとハイブリッド開発 (20)
PhoneGapとハイブリッド開発
- 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
メリット1:クロスプラットフォーム
- 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.
ハイブリッドの
難点の2つ:
- 20. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hybridアプリ難点
1.純HTML5からデバイス機能に
アクセス出来なかったりする
CameraRoll
(または、出来るけどAPIが
デバイス毎に変わる)
- 21. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hybridアプリ難点
2.プラットフォーム毎に
箱の作り方が変わる
- 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.