Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Monacaでつくるハイブリッドアプリ

4,885 views

Published on

日本アンドロイドの会 9月定例会/4周年記念パーティーでのスライドです

  • Be the first to comment

Monacaでつくるハイブリッドアプリ

  1. 1. 日本アンドロイドの会 9月定例会/4周年記念パーティー Monacaでつくるハイブリッドアプリ Monacaの仕組みとその裏側について紹介します アシアル株式会社 田中正裕 masahiro@asial.co.jpURL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 |
  2. 2. 自己紹介田中正裕 (@massie)アシアル株式会社 ファウンダー、代表取締役Monacaプロダクトマネージャー1981年生まれの飛行機好き URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 |
  3. 3. Monacaとは?URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 |
  4. 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. 5. PhoneGapとは?• Apache Software Foundationにてホストされているプロジェクトが「Cordova」• Adobeがリリースする製品名として「PhoneGap」が使われる• ネイティブ機能を呼び出せるWebViewのようなもの。• 「DroidGap」アクティビティと「CordovaWebView」の2種類の使い方が可能。 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. 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. 7. Monacaとは、 HTML5でクロスプラットフォーム アプリが作れるプラットフォーム バイナリーをビルドで きるブラウザーベース エディター内蔵 ライブプレビューAndroidとiOSに対応 デバッガーで WebDAVで接続可能 リアルタイム開発 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 |
  8. 8. Monacaの特徴: SDKやコンパイルが不要!コード 実機上のデバッガーで動作確認IDE上でデバッグ URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 |
  9. 9. Monacaの特徴: リモートビルドでローカル環境も不要! そのままAPKを ダウンロード可 Android版ビルドはデバッグとリリースの2種類 もしくは iOS版は デバッガーから OTA Distribution 直接インストール に対応 (Wireless AdHoc) URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 |
  10. 10. MonacaのデモURL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 |
  11. 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. 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 |
  13. 13. ありがとうございましたURL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/9/26 |

×