佐川 夫美雄@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/