佐川 夫美雄@albatrosary 株式会社ゼノフィ yoからはじまるPhoneGap物語
佐川 夫美雄@albatrosary 株式会社ゼノフィ
yoからはじまるPhoneGap物語
佐川 夫美雄
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)
Xenophy CO.,LTDWebアプリケーション開発をトータルサポート
開発者の生産力向上 複数のプラットフォーム開発環境の提供 高品質なユーザーエクスペリエンスの提供 モバイル、タブレット、デスクトップへの対応
Sencha Ext JSExt JS 3.0がリリースされました
Sencha Touch
Sencha ArchitectBuild 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.
Sencha Space
本日のテーマ
http://phonegap.com/
HTML5のお話
HTML5が2014年に正式勧告
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年
HTML5の方向性
Webのプラットフォーム化
Elements Offline Web Application
Application Cache Web Strage Indexed Database File API
Network WebSocket SPDY
マルチメディア対応 video audio canvas SVG WebGL
Webの標準化
難しい技術が扱いやすくなる
Over View
HTML5の問題
まだハードウェアすべてをコントロールできない
ネイティブ Webアプリ
OS固有の機能 ○ ○
オフラインでの動作 ○ ○
動作スピード ○ △
開発言語 ネイティブ HTML5+JavaScript+CSS
開発の容易さ △ ○
マルチプラットフォーム × ○
ハードウェア ○ △
Storeでの配布 ○ ×
いいとこ取りしたい
HTML5+JavaScript+CSSを使って 開発できるネイティブ
Titanium
Unity
PhoneGap
Apache Cordova
PhoneGapとCordova
Nitobi という会社が開発したクロスプラットフォームのスマートフォンアプリ開発・実行環境
Nitobiは2011年10月にAdobeに買収された !
PhoneGapはApache Software Foundationへ寄贈 Apache Cordovaへ名称変更
Apache Cordova
http://cordova.apache.org/
PhoneGap
http://phonegap.com/
PhoneGapの特徴
HTML5を使用したiPhone/Androiアプリ開発 ネイティブAPIのアクセス マルチプラットフォーム対応 既存のJavascriptフレームワークにも対応 様々なPhoneGapプラグイン
PhoneGapは
問題を解決してくれる
ハイブリット開発フレームワーク
PhoneGapの仕組み
開発するための技術
ハイブリット構造はHTML5とJavaScriptで開発 周りをネイティブコードで取り囲むような構成
iOS版はUIWebView
Android版はWebView
PhoneGap API Documentation
http://docs.phonegap.com/en/3.4.0/guide_support_index.md.html#Platform%20Support
http://yeoman.io/
いいところテンプレートがそろってる
Web開発に必要なツールがたくさんある
lint,hint,ビルド,テストが行える
html,css,js,画像をminifyしてくれる
まだまだ色々あります
エディターは何でも
Sublime Text
Vim
Emacs
YEOMANというのは
Web開発のscaffolding
scaffoldingとは、1(建築現場などの)足場/2[集合的に] 足場材料
使い始めるのは簡単!
これは必要必須事項です。これ入れないと何もできません。
node.js
nodeはnodebrewがおすすめ
$ npm install -g yo
YEOMANはYEOMANはyoとbowerとgruntから成り立ってます
yo bower grunt
yo 雛形作成ツール
bower フロントエンドパッケージマネージャ
grunt タスクランナー
具体的には
$ npm install -g generator-hoge
$ yo hoge (※$ bower installも実行してます)
$ grunt serve
$ grunt build
ちなみに入れる場合があります
ruby
comapss
scaffoldingツール
多くのgenerator
OFFICIAL GENERATORS 20
COMMUNITY GENERATORS 782
パッケージマネージャ
Twitter, opne-source community
bower.jsonで設定管理
Bower Packages 13,178
JavaScriptラスクランナー
package.jsonで設定管理
Gruntfile.jsでタスクを定義
Grunt plugin 2,990
構成(概要)
generator
bower.jsonGruntfile.json
package.json
Node Packager Managergithub
cordovaに関するgenerator
phonegapに関するgenerator
見てみます
使い方(generator-phonegap)
$ npm install -g generator-phonegap $ mkdir my-phonegap-project && cd $_ $ yo phonegap
エミュレータでの起動 (generator-phonegap)
$ grunt platform-build $ cd phonegap $ cordova emulate ios -d $ cordova emulate android -d
使い方(generator-cordova)
$ npm install -g generator-cordova $ mkdir my-cordova-project && cd $_ $ yo cordova
エミュレータでの起動 (generator-cordova)
$ grunt cordova-buildemulate
スマートデバイスへの取り込み
(1) USBデバッグモードでMACにUSB接続 (2) スマートデバイスの開発者向けオプション設定 (3) アプリケーションの実機転送 $ cd platforms $ cordova run android --device
Android sdkは入れておく
Thanks
Webアプリケーション開発はゼノフィ http://www.xenophy.com/