Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
タチゾノ マサヒコ12年5月17日木曜日
タチゾノマサヒコ  • 最初は、組み込みソフトウェア・エンジニア  • ウェブのスピード感に憧れて業種チェンジ→ナタリー  • DeNAで海外版mobage→ngCore  • 現在は、再びウェブメディアのお仕事12年5月17日木曜日
アジェンダ     • ウェブアプリか、ネイティブアプリか?     • ハイブリッドアプリという選択肢     • PhoneGapのご紹介     • サンプルアプリケーション12年5月17日木曜日
ウェブアプリか、    ネイティブアプリか?12年5月17日木曜日
ウェブアプリの良いところ     • 色んなプラットフォームに対応しやすい。     • アップデートが簡単。     • HTML/CSS/JavaScriptなど、ウェブの         技術が使える。12年5月17日木曜日
ウェブアプリの弱いところ     • App Store/Google Playが使えない。     • → 課金を自前で実装、集客が大変。     • カメラ、傾きセンサー、アドレス帳などスマホ          固有の機能が利用できない。1...
ネイティブアプリの良いところ     • Objective-C/Java/C++で開発。     • カメラ/センサー/ローカルファイルなど、シ         ステム機能をフルで活用できる。パフォーマン         ス最大化。     ...
ネイティブアプリの弱いところ     • Objective-C/Java/C++で開発。     • 開発が大変。     • プラットフォーム毎に開発が必要。     • iOSでApp Storeを使う場合など、審査が必         ...
まとめると     • アプリ形式でないと色々厳しい。     • が、ネイティブで開発するのは単一プラット         フォームでも大変だし、横展開はもっと大変。12年5月17日木曜日
ハイブリッドアプリ         という選択肢12年5月17日木曜日
ハイブリッドアプリとは?     • ネイティブアプリ上に配置されたWebView         で、HTML/CSS/JavaScriptで記述され         たアプリケーションを動かす。     • 単体アプリとして提供されるので、...
そこで、PHONEGAP12年5月17日木曜日
PHONEGAP         (APACHE CORDOVA)     • WebViewをベースに、各種プラットフォーム上で         動くアプリとして「ラップ」する。     • JavaScriptから、ネイティブAPIへのブリ...
対応プラットフォーム12年5月17日木曜日
ネイティブAPIサポート     • Accelerometer   • Events     • Camera          • File     • Capture         • Geolocation     • Compass...
ネイティブAPIサポート     • UIウィジェットは無い。     • プラットフォームによっては、サポートされないものもある。12年5月17日木曜日
PHONEGAPプラグイン     • PhoneGapに機能追加を   • Twitterプラグイン         行える。                        • Facebookプラグイン     • ネイティブ実装も含めるこ...
PHONEGAPベースの                アプリケーション12年5月17日木曜日
TINY TERRORS12年5月17日木曜日
WIKIPEDIA12年5月17日木曜日
コードサンプル12年5月17日木曜日
CAMERA API   <html>   <script type="text/javascript" charset="utf-8">   navigator.camera.getPicture(onSuccess, onFail, { q...
ACCELERATOR API   function onSuccess(acceleration) {       alert(Acceleration X:  + acceleration.x + n +             Accel...
PHONEGAP BUILD12年5月17日木曜日
PHONEGAP BUILD     • PhoneGapベースのアプリケーション書き出         しを行ってくれるウェブサービス。     • HTML, CSS, JavaScriptをアップロード         すると、各プラット...
ビルド設定画面12年5月17日木曜日
ビルド中画面12年5月17日木曜日
DREAMWEAVER連携12年5月17日木曜日
DREAMWEAVER連携     • Adobe Dreamweaver CS6で、モバイル         向けテンプレートでサイトを作成。     • Dreamweaverから、PhoneGap Build         を使って、各...
DREAMWEAVER編集画面12年5月17日木曜日
DREAMWEAVERからのビルド12年5月17日木曜日
ANDROIDエミュレータで起動12年5月17日木曜日
まとめ12年5月17日木曜日
まとめ     • PhoneGapはHTML5ベース。     • UIは、JavaScript/CSSを使って自前でなん       とかする。     • サポートしているプラットフォームが多い。     • PhoneGap Build...
ご静聴ありがとうございました  • Twitter:   @mshk  • Tumblr:    http://mshkb.tumblr.com/  • WWDC      2012行きます!12年5月17日木曜日
参考URL  • PhoneGap:   http://phonegap.com/  • PhoneGap  Plugins: https://github.com/     phonegap/phonegap-plugins  • Phone...
Upcoming SlideShare
Loading in …5
×

PhoneGapで作るハイブリッドアプリケーション

21,695 views

Published on

2012.5.17 渋谷ヒカリエのDeNAオフィスで行われた「HTML5とか勉強会」でのPhoneGapのプレゼン資料です。

スライド中のイラストは、PhoneGapウェブサイトのものを利用しています。

Published in: Technology
  • Be the first to comment

PhoneGapで作るハイブリッドアプリケーション

  1. 1. タチゾノ マサヒコ12年5月17日木曜日
  2. 2. タチゾノマサヒコ • 最初は、組み込みソフトウェア・エンジニア • ウェブのスピード感に憧れて業種チェンジ→ナタリー • DeNAで海外版mobage→ngCore • 現在は、再びウェブメディアのお仕事12年5月17日木曜日
  3. 3. アジェンダ • ウェブアプリか、ネイティブアプリか? • ハイブリッドアプリという選択肢 • PhoneGapのご紹介 • サンプルアプリケーション12年5月17日木曜日
  4. 4. ウェブアプリか、 ネイティブアプリか?12年5月17日木曜日
  5. 5. ウェブアプリの良いところ • 色んなプラットフォームに対応しやすい。 • アップデートが簡単。 • HTML/CSS/JavaScriptなど、ウェブの 技術が使える。12年5月17日木曜日
  6. 6. ウェブアプリの弱いところ • App Store/Google Playが使えない。 • → 課金を自前で実装、集客が大変。 • カメラ、傾きセンサー、アドレス帳などスマホ 固有の機能が利用できない。12年5月17日木曜日
  7. 7. ネイティブアプリの良いところ • Objective-C/Java/C++で開発。 • カメラ/センサー/ローカルファイルなど、シ ステム機能をフルで活用できる。パフォーマン ス最大化。 • アプリストアを通じて集客が可能。課金システ ムも利用できる。12年5月17日木曜日
  8. 8. ネイティブアプリの弱いところ • Objective-C/Java/C++で開発。 • 開発が大変。 • プラットフォーム毎に開発が必要。 • iOSでApp Storeを使う場合など、審査が必 要でアップデートに時間がかかる。12年5月17日木曜日
  9. 9. まとめると • アプリ形式でないと色々厳しい。 • が、ネイティブで開発するのは単一プラット フォームでも大変だし、横展開はもっと大変。12年5月17日木曜日
  10. 10. ハイブリッドアプリ という選択肢12年5月17日木曜日
  11. 11. ハイブリッドアプリとは? • ネイティブアプリ上に配置されたWebView で、HTML/CSS/JavaScriptで記述され たアプリケーションを動かす。 • 単体アプリとして提供されるので、ネイティブ アプリと同じようにアプリストアで配布可能。 • 1ソースで多くのプラットフォームに対応。12年5月17日木曜日
  12. 12. そこで、PHONEGAP12年5月17日木曜日
  13. 13. PHONEGAP (APACHE CORDOVA) • WebViewをベースに、各種プラットフォーム上で 動くアプリとして「ラップ」する。 • JavaScriptから、ネイティブAPIへのブリッジを 提供。 • Adobeが買収し、現在はオープンソースプロジェ クトとして運営をしながら、Dreamweaverなど のAdobe製品との連携を行っている。12年5月17日木曜日
  14. 14. 対応プラットフォーム12年5月17日木曜日
  15. 15. ネイティブAPIサポート • Accelerometer • Events • Camera • File • Capture • Geolocation • Compass • Media • Connection • Notification • Contacts • Storage • Device12年5月17日木曜日
  16. 16. ネイティブAPIサポート • UIウィジェットは無い。 • プラットフォームによっては、サポートされないものもある。12年5月17日木曜日
  17. 17. PHONEGAPプラグイン • PhoneGapに機能追加を • Twitterプラグイン 行える。 • Facebookプラグイン • ネイティブ実装も含めるこ • Notificationプラグイン とができる。 • 公開されているプラグイン • MapKitプラグイン は、必ずしも全てのプラッ • などなど トフォームをサポートして いない。12年5月17日木曜日
  18. 18. PHONEGAPベースの アプリケーション12年5月17日木曜日
  19. 19. TINY TERRORS12年5月17日木曜日
  20. 20. WIKIPEDIA12年5月17日木曜日
  21. 21. コードサンプル12年5月17日木曜日
  22. 22. CAMERA API <html> <script type="text/javascript" charset="utf-8"> navigator.camera.getPicture(onSuccess, onFail, { quality: 50,     destinationType: Camera.DestinationType.FILE_URI }); function onSuccess(imageURI) {     var image = document.getElementById(myImage);     image.src = imageURI; } function onFail(message) {     alert(Failed because: + message); } </script> <img style="display:none;width:60px;height:60px;" id="myImage" src="" /> </html>12年5月17日木曜日
  23. 23. ACCELERATOR API function onSuccess(acceleration) {     alert(Acceleration X: + acceleration.x + n +           Acceleration Y: + acceleration.y + n +           Acceleration Z: + acceleration.z + n +           Timestamp:      + acceleration.timestamp + n); }; function onError() {     alert(onError!); }; navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);12年5月17日木曜日
  24. 24. PHONEGAP BUILD12年5月17日木曜日
  25. 25. PHONEGAP BUILD • PhoneGapベースのアプリケーション書き出 しを行ってくれるウェブサービス。 • HTML, CSS, JavaScriptをアップロード すると、各プラットフォーム向けバイナリが書 き出される。 • githubと連携可能。12年5月17日木曜日
  26. 26. ビルド設定画面12年5月17日木曜日
  27. 27. ビルド中画面12年5月17日木曜日
  28. 28. DREAMWEAVER連携12年5月17日木曜日
  29. 29. DREAMWEAVER連携 • Adobe Dreamweaver CS6で、モバイル 向けテンプレートでサイトを作成。 • Dreamweaverから、PhoneGap Build を使って、各種プラットフォーム向けバイナリ を生成・ダウンロード可能。12年5月17日木曜日
  30. 30. DREAMWEAVER編集画面12年5月17日木曜日
  31. 31. DREAMWEAVERからのビルド12年5月17日木曜日
  32. 32. ANDROIDエミュレータで起動12年5月17日木曜日
  33. 33. まとめ12年5月17日木曜日
  34. 34. まとめ • PhoneGapはHTML5ベース。 • UIは、JavaScript/CSSを使って自前でなん とかする。 • サポートしているプラットフォームが多い。 • PhoneGap Builderを使える。 • ウェブサイトをベースに、アプリにも展開するよ うな用途に向きそう。12年5月17日木曜日
  35. 35. ご静聴ありがとうございました • Twitter: @mshk • Tumblr: http://mshkb.tumblr.com/ • WWDC 2012行きます!12年5月17日木曜日
  36. 36. 参考URL • PhoneGap: http://phonegap.com/ • PhoneGap Plugins: https://github.com/ phonegap/phonegap-plugins • PhoneGap App Gallery: http:// phonegap.com/apps12年5月17日木曜日

×