Your SlideShare is downloading. ×
0
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Phone gap by yeoman
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Phone gap by yeoman

2,390

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,390
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
13
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 佐川 夫美雄@albatrosary 株式会社ゼノフィ yoからはじまるPhoneGap物語
  • 2. 佐川 夫美雄 HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 html5j Web Platform部 - メンバー knockoutjs Japan User Group Sencha UG CO-ORGANIZER AngularJS Japan User Group - メンバー http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ (Fumio SAGAWA)
  • 3. Xenophy CO.,LTD Webアプリケーション開発をトータルサポート 開発者の生産力向上 複数のプラットフォーム開発環境の提供 高品質なユーザーエクスペリエンスの提供 モバイル、タブレット、デスクトップへの対応
  • 4. Sencha Ext JS Ext JS 3.0がリリースされました
  • 5. Sencha Touch
  • 6. Sencha Architect Build for Mobile and Desktop Build apps using Sencha Architect 3 and reach more people on more platforms leveraging HTML5. Sencha Architect 3 is the fastest way to build HTML5 apps for the web and mobile devices.
  • 7. Sencha Space
  • 8. 本日のテーマ http://phonegap.com/
  • 9. HTML5のお話
  • 10. HTML5が2014年に正式勧告
  • 11. Webの歴史 SGML(standard Generalized Markup Language) 1986年 HTML(HyperText Markup Language) 1989年 HTML 4.0(HyperText Markup Language) 1997年 XML(eXtensible Markup Language) 1998年 XHTML(eXtensible HyperText Markup Language) 2000年 HTML 5.0(HyperText Markup Language) 2012年 CSS 1 1996年 CSS 2 1998年 CSS 2.1 2004年 CSS 3 2011年 HTTP 1.1 1999年 HTTP 1.0 1996年 HTTP 0.9 1993年 SPDY 2011年 XHTML 2.0(eXtensible HyperText Markup Language) 2010年 HTTP 2(draft) 2012年
  • 12. HTML5の方向性 Webのプラットフォーム化 Elements Offline Web Application Application Cache Web Strage Indexed Database File API Network WebSocket SPDY マルチメディア対応 video audio canvas SVG WebGL
  • 13. Webの標準化
  • 14. 難しい技術が扱いやすくなる
  • 15. Over View
  • 16. HTML5の問題 まだハードウェアすべてを コントロールできない
  • 17. ネイティブ Webアプリ OS固有の機能 ○ ○ オフラインでの動作 ○ ○ 動作スピード ○ △ 開発言語 ネイティブ HTML5+JavaScript+CSS 開発の容易さ △ ○ マルチプラットフォーム ○ ハードウェア ○ △ Storeでの配布 ○
  • 18. いいとこ取りしたい
  • 19. HTML5+JavaScript+CSSを使って 開発できるネイティブ Titanium Unity PhoneGap Apache Cordova
  • 20. PhoneGapとCordova Nitobi という会社が開発したクロスプラット フォームのスマートフォンアプリ開発・実行環境
  • 21. Nitobiは2011年10月にAdobeに買収された ! PhoneGapはApache Software Foundationへ寄贈 Apache Cordovaへ名称変更
  • 22. Apache Cordova http://cordova.apache.org/
  • 23. PhoneGap http://phonegap.com/
  • 24. PhoneGapの特徴 HTML5を使用したiPhone/Androiアプリ開発 ネイティブAPIのアクセス マルチプラットフォーム対応 既存のJavascriptフレームワークにも対応 様々なPhoneGapプラグイン
  • 25. PhoneGapは 問題を解決してくれる ハイブリット開発フレームワーク
  • 26. PhoneGapの仕組み
  • 27. 開発するための技術 ハイブリット構造はHTML5とJavaScriptで開発 周りをネイティブコードで取り囲むような構成
  • 28. iOS版はUIWebView Android版はWebView
  • 29. PhoneGap API Documentation http://docs.phonegap.com/en/3.4.0/guide_support_index.md.html#Platform%20Support
  • 30. http://yeoman.io/
  • 31. いいところ テンプレートがそろってる Web開発に必要なツールがたくさんある lint,hint,ビルド,テストが行える html,css,js,画像をminifyしてくれる まだまだ色々あります
  • 32. エディターは何でも Sublime Text Vim Emacs
  • 33. YEOMANというのは Web開発のscaffolding scaffoldingとは、1(建築現場などの)足場/2[集合的に] 足場材料
  • 34. 使い始めるのは簡単!
  • 35. これは必要 必須事項です。これ入れないと何もできません。 node.js nodeはnodebrewがおすすめ
  • 36. $ npm install -g yo
  • 37. YEOMANは YEOMANはyoとbowerとgruntから成り立ってます yo bower grunt
  • 38. yo 雛形作成ツール bower フロントエンドパッケージマネージャ grunt タスクランナー
  • 39. 具体的には $ npm install -g generator-hoge $ yo hoge (※$ bower installも実行してます) $ grunt serve $ grunt build
  • 40. ちなみに 入れる場合があります ruby comapss
  • 41. scaffoldingツール 多くのgenerator
  • 42. OFFICIAL GENERATORS 20 COMMUNITY GENERATORS 782
  • 43. パッケージマネージャ Twitter, opne-source community bower.jsonで設定管理
  • 44. Bower Packages 13,178
  • 45. JavaScriptラスクランナー package.jsonで設定管理 Gruntfile.jsでタスクを定義
  • 46. Grunt plugin 2,990
  • 47. 構成(概要) generator bower.json Gruntfile.json package.json Node Packager Manager github
  • 48. cordovaに関するgenerator
  • 49. phonegapに関するgenerator
  • 50. 見てみます
  • 51. 使い方(generator-phonegap) $ npm install -g generator-phonegap $ mkdir my-phonegap-project && cd $_ $ yo phonegap
  • 52. エミュレータでの起動 (generator-phonegap) $ grunt platform-build $ cd phonegap $ cordova emulate ios -d $ cordova emulate android -d
  • 53. 使い方(generator-cordova) $ npm install -g generator-cordova $ mkdir my-cordova-project && cd $_ $ yo cordova
  • 54. エミュレータでの起動 (generator-cordova) $ grunt cordova-buildemulate
  • 55. スマートデバイスへの取り込み (1) USBデバッグモードでMACにUSB接続 (2) スマートデバイスの開発者向けオプション設定 (3) アプリケーションの実機転送 $ cd platforms  $ cordova run android --device
  • 56. Android sdkは入れておく
  • 57. Thanks
  • 58. Webアプリケーション開発はゼノフィ http://www.xenophy.com/

×