PhoneGapで作るハイブリッドアプリケーション
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 16,766 views
Uploaded on

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

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

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

More in: Technology
  • 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
16,766
On Slideshare
14,846
From Embeds
1,920
Number of Embeds
10

Actions

Shares
Downloads
120
Comments
0
Likes
24

Embeds 1,920

http://mshkb.tumblr.com 1,851
http://tomiserver.mydns.jp 17
http://s.deeeki.com 14
http://d.hatena.ne.jp 10
http://tumblrmap.com 9
https://twitter.com 9
https://si0.twimg.com 5
http://us-w1.rockmelt.com 2
http://webcache.googleusercontent.com 2
http://translate.googleusercontent.com 1

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