Más contenido relacionado
La actualidad más candente (20)
Similar a Monacaでつくるハイブリッドアプリ (20)
Monacaでつくるハイブリッドアプリ
- 1. 日本アンドロイドの会
9月定例会／4周年記念パーティー
Monacaでつくるハイブリッドアプリ
Monacaの仕組みとその裏側について紹介します
アシアル株式会社 田中正裕
masahiro@asial.co.jp
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 ｜
- 4. PhoneGap (WebView) を用いたハイブリッドアプリ開発に対応
※ 「#CEDEC2012 JavaScriptベースゲームエンジン徹底比較」より転載
http://www.slideshare.net/sidestepism/cedec2012-javascript
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 ｜
- 5. PhoneGapとは？
• Apache Software Foundationにてホストされているプロジェクトが「Cordova」
• Adobeがリリースする製品名として「PhoneGap」が使われる
• ネイティブ機能を呼び出せるWebViewのようなもの。
• 「DroidGap」アクティビティと「CordovaWebView」の２種類の使い方が可能。
JavaScriptプログラム
（アプリ実体）
Cordova.js (JS API)
XHR
CallbackServer
加速度
HTTP にて待機 GPS
センサー
CordovaWebView File
Camera
API
DroidGap Activity
Cordova本体 プラグイン群
PhoneGapの構造
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 ｜
- 6. ハイブリッドアプリのよくある質問と私的回答
• HTML5は動作がモッサリ？ユーザーエクスペリエンスが保てない？
– WebGLなどが普及しない限り、3Dゲームなどは厳しいだろう
– 情報提供のようなアプリであれば、十分な速度でアニメーション可能です（後述）
• 本当にクロスプラットフォーム？
– HTML5、JS、CSS3とあるなかで、CSS3で機種・バージョン依存が大きい
– HTML5やJSについては、独自にプラグインを作ることで何とでもなる
• ただ、それをしていくと、どんどんクロスプラットフォームのメリットがなくなる
• 注意点は？
– JavaScriptフレームワークやCSS3の知識が必須
– jQuery MobileなどのUIフレームワークは重い
– JavaScriptインジェクションなどの脆弱性に注意
• 結論としてHTML5ハイブリッドアプリってどうなの？
– 情報が増えてくれば、サクッと便利に作ることができるはずです
– 複数プラットフォームのアプリ開発するための費用が取れないときの選択肢として最有力
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 ｜
- 7. Monacaとは、
HTML5でクロスプラットフォーム アプリが作れるプラットフォーム
バイナリーをビルドで
きる
ブラウザーベース
エディター内蔵
ライブプレビュー
AndroidとiOSに対応
デバッガーで
WebDAVで接続可能
リアルタイム開発
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 ｜
- 8. Monacaの特徴: SDKやコンパイルが不要！
コード
実機上のデバッガーで動作確認
IDE上でデバッグ
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 ｜
- 9. Monacaの特徴: リモートビルドでローカル環境も不要！
そのままAPKを
ダウンロード可
Android版ビルドは
デバッグとリリースの２種類
もしくは
iOS版は デバッガーから
OTA Distribution 直接インストール
に対応
(Wireless AdHoc)
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 ｜
- 11. Monacaの仕組み
Remote
Ext.JS
Build
＋
Nginx
PHP
(Ant, Xc
(fcgi)
ode)
リバースプロキシー Webサーバー リモートビルドサーバー
HTTPS→HTTP変換 JSフレームワークには
Ext.JSを利用
独自認証モジュール
＋
Push用モジュール WebDAV
(Apache) Redis NFS
WebDAVサーバー
MongoDB
Node.js
デバッガーサーバー
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 ｜
- 12. Monaca Framework
オープンソースのPhoneGap拡張ライブラリ
Monacaの機能をEclipse上で開発
するために、OSSでリリース。
Monaca-framework-android:
Android用フレームワーク
monaca.js
JavaScriptライブラリ
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 ｜
