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.

120分聞けばドヤ顔で語れる apache cordova スーパー勉強会

13,197 views

Published on

「120分聞けばドヤ顔で語れる Apache Cordova スーパー勉強会」にて発表したCordovaに関する紹介です。

http://atnd.org/events/51539

Published in: Software
  • Dating for everyone is here: ♥♥♥ http://bit.ly/2ZDZFYj ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❤❤❤ http://bit.ly/2ZDZFYj ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

120分聞けばドヤ顔で語れる apache cordova スーパー勉強会

  1. 1. Apache Cordvaの話 2014年6月10日 アシアル株式会社 田中正裕 MASAHIRO@ASIAL.CO.JP 120分聞けばドヤ顔で語れる Apache Cordova スーパー勉強会
  2. 2. 自己紹介 田中正裕 アシアル株式会社 代表取締役 Twitter: @massie E-mail: masahiro@asial.co.jp アシアル執筆の最近の書籍 2011年発刊、PhoneGap 0.9ベース
  3. 3. アシアル株式会社 事業内容 HTML5アプリ開発、ハイブリッドアプリ開発、ネイティブアプリ サーバーサイド(PHP)開発、インフラ、教育事業など
  4. 4. PhoneGap/Cordovaの会社  PhoneGapを用いたアプリ開発  Monaca  http://monaca.mobi/  Onsen UI  http://onsenui.io/
  5. 5. Monaca  クラウドベースのPhoneGap/Cordova開発環境(GUI)  iOS, Android, Windows 8対応 Firefox OS, Chrome Appsに近日対応予定  コマンドラインにも近日対応  無料~(商用利用でも)  デバッガーを組み込み  日本語サポート・ドキュメント  Windowsマシンでも開発OK http://monaca.mobi/
  6. 6. Monacaのユーザー  2000アプリが既にリリース  200以上の法人アカウント  カジュアルアプリのデベロッパー  システムインテグレータの方  同じスキルでiOS、Androidいずれ のアプリも開発可能
  7. 7. Cordovaとは? ?
  8. 8. ストリート名
  9. 9. Cordova通りの場所 Nitobi
  10. 10. Cordovaの歴史  NitobiがPhoneGapをつくる  AdobeがNitobiを買収  PhoneGapはAdobeの商標に  Apache FoundationにPhoneGapソースコードを移管  旧Nitobiチームは、ゆかりのある名前をつけたかった  「Cordova」に決定
  11. 11. CordovaとPhoneGapの違い 結論 同じ (APIレベルでは)
  12. 12. 細かい違い① コマンド コマンド コマンド phonegapコマンドはcordovaコマンドを使用
  13. 13. 細かい違い① コマンド コマンド サブコマンド cordova Phonegap 説明 create ○ ○ プロジェクトを作成する serve ○ ○ ローカルWebサーバーで起動(Developer App等で使 用) build ○ ○ ビルド install ○ デバイスへのインストール run ○ ○ デバイス上で実行 plugin ○ ○ プラグインの追加/削除/検索 prepare ○ ビルドイメージを作成 compile ○ コンパイルを実施 emulate ○ エミュレータ上で実行(run --emulatorと同じ) remote login/logout/build/install/ run ○ PhoneGap Build用コマンド local build/install/run/plugin ○ ローカル開発用コマンド
  14. 14. 細かい違い②config.xml cordovaのデフォルトのconfig.xml
  15. 15. 細かい違い②config.xml phonegapのデフォルトのconfig.xml
  16. 16. その他の違い  使用できるバージョンが異なる  Cordova = 3.5  PhoneGap Build = 3.4  ネイティブコードの記述できる範囲が異なる  Cordova = 自由にネイティブ側に手を入れられる  PhoneGap Build = PhoneGapプラグインのみ  PhoneGapには追加機能が  PhoneGap Enterprise  PhoneGap Developer App等
  17. 17. Cordovaと、その一味 PhoneGap Monaca Ionic Framework MS Visual Studio Google Chrome Apps Mobile IBM Worklight 全部、同じものがつくれる。
  18. 18. モバイルWebとの違い モバイルブラウザー Cordova ブラウザエンジン iOS: SafariかUIWebView Android: WebView、Chrome等 iOS: UIWebView (Nitro非対応) Android: WebView HTML5、CSS、JSの対応度 同じ JavaScript APIの拡張 × ○ Same-Origin Policy CORSヘッダー 適用されない Access Originで制御
  19. 19. モバイルWebとの違い 結論 同じ (APIレベルでは) よって Webアプリ≒ハイブリッドアプリ
  20. 20. HTML5アプリ と ネイティブアプリ の違い
  21. 21. ネイティブアプリとの比較 作り方から動作の仕組みまで、全く異なる世界。
  22. 22. HTML5アプリの抱える課題  ユーザーインターフェース  ネイティブアプリのようなスムーズなUIの実現  実行パフォーマンス  ストレスのない画面描画  セキュリティ  HTMLやJavaScriptコードの漏洩を防止  デバイスAPI / ネイティブ機能  iOSやAndroidの全APIをHTML5から呼び出す
  23. 23. 最近の動向  新しいブラウザーエンジンの登場  ChromiumベースのWebView互換エンジン  iOS 8で登場するWKWebView  モダンなUIフレームワークの登場  AngularJSベース:Ionic Framework、Onsen UI  CSS3への最適化:famo.us  Cordova Plugin Registryの充実
  24. 24. Android WebView  Intel Crosswalk Project  Chrominiumベースのブラウザーエンジン。  TizenとAndroidに対応。  Ludei WebView+ (Cocoon JS)  WebGLを有効にしたブラウザーエンジン。  3Dゲーム等に活用できる。  Amazon Silk  Kindle Fire向けのブラウザーエンジン。  現状はAmazon HTML5/Web Apps Storeのみで有効。
  25. 25. WebView内包アプリの利点  Androidデバイスにおける差異を吸収  Android 4.0以上であれば同じHTML5/CSS3/JS機能  デバッグのしやすさ  Chrome Dev Toolsを使ったUSBデバッグが有効に  端末依存が少ない(画面サイズのみ)  パフォーマンスの向上  最新のBlinkエンジンを利用できる  デメリット  ファイルサイズが大きく(8MB~15MB)  起動時間が長い
  26. 26. iOS 8のWKWebView iOS 8 WKWebView iOS 8 UIWebView iOS 7 UIWebView WebGL 3D Graphics ✓ ✓ IndexedDB ✓ HTML5 Coverage Score 440/555 427/555 410/555 SunSpider Benchmark 949.8ms 4249.6ms 3659.5ms CSS Shapes ✓ ✓
  27. 27. モダンなJS UI Framework  Ionic Framework (http://ionicframework.com)  AngularJSベースのUIフレームワーク。  Onsen UI (http://onsenui.io)  日本製。タブレットとAndroid 2.3にも対応。  Famo.us (http://famo.us)  CSS3を用いて高速な描画を行うJSフレームワーク。
  28. 28. Cordova Plugin Registry http://plugins.cordova.io/  Cordova 3.4からコアとプラグインを分離  これまでのAPIは全てプラグイン形式で配布  npmのプラグイン版  cordova pluginコマンドでインストール  ユーザーがプラグインを投稿することも可能
  29. 29. 時間があればMonacaのデモ たぶん無くなる
  30. 30. ありがとうございました P.S. 是非MONACAも使ってみてください。

×