Your SlideShare is downloading. ×
0
タチゾノ マサヒコ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で作るハイブリッドアプリケーション

20,277

Published on

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

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

Published in: Technology
0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
20,277
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
123
Comments
0
Likes
25
Embeds 0
No embeds

No notes for slide

Transcript of "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日木曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×