Mais conteúdo relacionado
Semelhante a PhoneGapで作るハイブリッドアプリケーション (20)
PhoneGapで作るハイブリッドアプリケーション
- 2. タチゾノマサヒコ
• 最初は、組み込みソフトウェア・エンジニア
• ウェブのスピード感に憧れて業種チェンジ→ナタリー
• DeNAで海外版mobage→ngCore
• 現在は、再びウェブメディアのお仕事
12年5月17日木曜日
- 3. アジェンダ
• ウェブアプリか、ネイティブアプリか?
• ハイブリッドアプリという選択肢
• PhoneGapのご紹介
• サンプルアプリケーション
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日木曜日
- 11. ハイブリッドアプリとは?
• ネイティブアプリ上に配置されたWebView
で、HTML/CSS/JavaScriptで記述され
たアプリケーションを動かす。
• 単体アプリとして提供されるので、ネイティブ
アプリと同じようにアプリストアで配布可能。
• 1ソースで多くのプラットフォームに対応。
12年5月17日木曜日
- 13. PHONEGAP
(APACHE CORDOVA)
• WebViewをベースに、各種プラットフォーム上で
動くアプリとして「ラップ」する。
• JavaScriptから、ネイティブAPIへのブリッジを
提供。
• Adobeが買収し、現在はオープンソースプロジェ
クトとして運営をしながら、Dreamweaverなど
のAdobe製品との連携を行っている。
12年5月17日木曜日
- 15. ネイティブAPIサポート
• Accelerometer • Events
• Camera • File
• Capture • Geolocation
• Compass • Media
• Connection • Notification
• Contacts • Storage
• Device
12年5月17日木曜日
- 16. ネイティブAPIサポート
• UIウィジェットは無い。
• プラットフォームによっては、サポートされないものもある。
12年5月17日木曜日
- 17. PHONEGAPプラグイン
• PhoneGapに機能追加を • Twitterプラグイン
行える。
• Facebookプラグイン
• ネイティブ実装も含めるこ • Notificationプラグイン
とができる。
• 公開されているプラグイン • MapKitプラグイン
は、必ずしも全てのプラッ • などなど
トフォームをサポートして
いない。
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日木曜日
- 25. PHONEGAP BUILD
• PhoneGapベースのアプリケーション書き出
しを行ってくれるウェブサービス。
• HTML, CSS, JavaScriptをアップロード
すると、各プラットフォーム向けバイナリが書
き出される。
• githubと連携可能。
12年5月17日木曜日
- 29. DREAMWEAVER連携
• Adobe Dreamweaver CS6で、モバイル
向けテンプレートでサイトを作成。
• Dreamweaverから、PhoneGap Build
を使って、各種プラットフォーム向けバイナリ
を生成・ダウンロード可能。
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日木曜日