• Like
PhoneGapとハイブリッド開発
Upcoming SlideShare
Loading in...5
×

PhoneGapとハイブリッド開発

  • 3,834 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,834
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
13
Comments
0
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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.