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

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. そこで、PHONEGAP 12年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 • Notiﬁcation • Contacts • Storage • Device 12年5月17日木曜日

16. ネイティブAPIサポート • UIウィジェットは無い。 • プラットフォームによっては、サポートされないものもある。 12年5月17日木曜日

17. PHONEGAPプラグイン • PhoneGapに機能追加を • Twitterプラグイン行える。 • Facebookプラグイン • ネイティブ実装も含めるこ • Notiﬁcationプラグインとができる。 • 公開されているプラグイン • MapKitプラグインは、必ずしも全てのプラッ • などなどトフォームをサポートしていない。 12年5月17日木曜日

18. PHONEGAPベースのアプリケーション 12年5月17日木曜日

19. TINY TERRORS 12年5月17日木曜日

20. WIKIPEDIA 12年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 BUILD 12年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/apps 12年5月17日木曜日

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

You are reading a preview.

Check these out next

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

More Related Content

Slideshows for you (20)

Similar to PhoneGapで作るハイブリッドアプリケーション (20)

Recently uploaded (20)