© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGapとハイブリッド開発
Andy Hall 開発エバンジェリスト、アドビジャパン
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
だれだこいつ
@fenomas
§  日本在住歴もFlash歴も十ん年
§  物理学専攻 ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
一旦アドビとHTMLについて
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobeとしての活躍
contribute to a better web
better w...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS Filters
Webの進化の事例:
filter:
sepia(0.8);
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom Filters
Webの進化の事例:
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS Shapes
Webの進化の事例:
.css-shape {
shape-outsid...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS Regions
Webの進化の事例:
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
詳細情報:
html.adobe.com/jp
© 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.
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からデバイス機能に
  アクセス出来なかったりする
C...
© 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の特徴
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.
では開発話。
© 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 
HogeAp...
© 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.
> 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.
> 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.
ポイント!
> phonegap build android
[phonegap] detec...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
> phonegap remote
build android など
つまり・・
© 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.vibrati...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
remoteでプラグインを使う場合:
・・など
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
まとめ!
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ご清聴ありがとうございました!
phonegap.com
build.phonegap.com...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Upcoming SlideShare
Loading in …5
×

PhoneGapとハイブリッド開発

4,740 views

Published on

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

Published in: Technology, Business

PhoneGapとハイブリッド開発

  1. 1. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. PhoneGapとハイブリッド開発 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. 一旦アドビとHTMLについて
  4. 4. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  5. 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. 6. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. CSS Filters Webの進化の事例: filter: sepia(0.8);
  7. 7. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Custom Filters Webの進化の事例:
  8. 8. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. CSS Shapes Webの進化の事例: .css-shape { shape-outside: circle(44% at 50% 50%); }
  9. 9. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. CSS Regions Webの進化の事例:
  10. 10. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 詳細情報: html.adobe.com/jp
  11. 11. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  12. 12. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. というわけで ハイブリッドアプリ の開発について。
  13. 13. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Hybridアプリは箱です。
  14. 14. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Hybridアプリは箱です。 HTML, JS, CSS など ネイティブの シェルアプリ (WebViewを実装)
  15. 15. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ハイブリッドの メリットは大きい。
  16. 16. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Firefox OS メリット1:クロスプラットフォーム
  17. 17. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Dreamweaver Muse メリット2:デザインツールなど
  18. 18. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ツールの入手はCreative Cloudから creative.adobe.com/
  19. 19. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ハイブリッドの 難点の2つ:
  20. 20. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Hybridアプリ難点 1.純HTML5からデバイス機能に   アクセス出来なかったりする CameraRoll (または、出来るけどAPIが デバイス毎に変わる)
  21. 21. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Hybridアプリ難点 2.プラットフォーム毎に 箱の作り方が変わる
  22. 22. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. PhoneGapとは、 難点を解決してくれる ハイブリッド開発 フレームワークのこと。
  23. 23. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. PhoneGapの由来 iPhoneDevCamp で始まった(2009) ニトビ社にて作られ アドビ社にて買収され(2011)
  24. 24. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. PhoneGapの特徴 無料 オープンソース (Apache Cordovaとして)
  25. 25. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. PhoneGapの特徴 PhoneGapアプリって どんなもの?
  26. 26. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. BBC Olympics
  27. 27. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Zombie Jombie
  28. 28. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Untappd
  29. 29. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. では開発話。
  30. 30. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Webコンテンツから 始めます。
  31. 31. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. > sudo npm install –g cordova
  32. 32. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. > cordova create appFolder com.hoge.app HogeApp > cd appFolder
  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. > cordova platform add android > cordova run android
  36. 36. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  37. 37. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. > cordova platform add firefoxos > cordova prepare firefoxos
  38. 38. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. FFOSアプリ
  39. 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. 40. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  41. 41. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. > phonegap remote build android など つまり・・
  42. 42. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. アプリ設計の話
  43. 43. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. デバイス機能を いじるには プラグイン使います。
  44. 44. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 実機 アプリ (HTML) プラグイン設計 実機 実機 プラグイン
  45. 45. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 実機 アプリ (HTML) プラグイン設計 実機 実機 navigator.vibrate() プラグイン ネイティブAPI ネイティブAPI ネイティブAPI
  46. 46. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. > cordova plugin add org.apache.cordova.vibration
  47. 47. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  48. 48. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. remoteでプラグインを使う場合: ・・など
  49. 49. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. まとめ!
  50. 50. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ご清聴ありがとうございました! phonegap.com build.phonegap.com html.adobe.com/jp aphall.com/ @fenomas
  51. 51. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

×