業務アプリケーションにおけるこれからのweb開発 in 札幌
DESCRIPTION
TRANSCRIPT
佐川 夫美雄@albatrosary
佐川 夫美雄
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)
HTML5が2014年に正式勧告
業務系Web開発のすべてこれを読めばモダンな業務系Webアプリケーション開発が解る
http://html5experts.jp/albatrosary/3191/
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
ElementsHTML4 HTML5
カレンダーやデートピッカー 月の入力 週の入力 時刻の入力 詳細な日時や時刻の入力 自分のいる地域の日付と時刻
inputタイプの種類
検索ボックス スピンボックス スライダ カラーピッカー 電話番号 Webページのアドレス メールアドレス
マルチメディアタグ
プラグイン無しで再生
audio要素
audio オーディオを再生する controls オーディオコントロールの表示 autoplay 自動再生 loop 繰り返し実行
source メディアリソース src リソース type メディア型
video要素
video 動画を再生する controls ビデオコントロールの表示 autoplay 自動再生 loop 繰り返し実行
source メディアリソース src リソース type メディア型
SVG
SVGはHTML５とは独自企画
HTML５普及と共にサポート
D3.jsSVGの応用として最近流行ってます
Data Driven Decument
Canvas
グラフを書く
写真を合成する
アニメーション
WebGL
3DCGプログラミングを実現
重要な要素
シーン 作成する3Dの世界
カメラ シーンの状態を撮影する
光源 光の当て方
物体 撮影するもの
シーン
カメラ
fov 画角 aspect 撮影結果の縦横比 near ニアークリップ：nearより近い領域は表示されない far ファークリップ：farより遠い領域は表示されない
光源
物体ジオメトリー(形状)とマテリアル(表面素材)を用意した上で、メッシュ(物体)を作成
完成
WebGLは難しい
WebGLを利用するための手順
3DCGプログラミングの基礎知識
行列やベクトルといった知識
学習コストが高い
Three.js高度なWebGLをうまく利用するためのJavaScriptライブラリ
WebGLのラッパーライブラリ
WebGLプログラミング
http://html5experts.jp/yomotsu/5225/
ブラウザはどうなっているか
http://html5test.com/
クライアントとサーバが接続し続ける
双方向通信
WebSocket
既存のHTTPを拡張
複数のリクエストを送受信することが可能
通信 - より早く双方向に
Geolocation
Webなのに
Offline Web Application
Webを標準化することで
難しい技術が扱いやすくなる
業務系をどう開発するか業務系Webアプリケーションを構築するのに必要な要素JavaScriptフレームワーク
altJS
CSS Preprocessor
開発環境
通信技術
バックエンド
SPA(Single-page Application)
単一ページによるWebアプリケーション
ページはDOMの操作による切替え
サーバとのやりとりはRESTやWebSocket等
SPAは簡単？HTML CSS
JavaScript
image
SPAは簡単？HTML CSS
JavaScript
Sass Compass
image
SPAは簡単？HTML CSS
JavaScript
Sass
CoffeeScript
Compass
image
SPAは簡単？HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image
SPAは簡単？HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image
Yuidoc
SPAは簡単？HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
Yuidoc
SPAは簡単？HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
mocha chaiテスト
Yuidoc
SPAは簡単？HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
mocha chaiテスト
Yuidoc
easymock
http://yeoman.io/
いいところ
テンプレートがそろってる
Web開発に必要なツールがたくさんある
lint,hint,ビルド,テストが行える
html,css,js,画像をminifyしてくれる
まだまだ色々あります
エディターは何でも
Sublime Text
Vim
Emacs
YEOMANというのは
Web開発のscaffolding
scaffoldingとは、1(建築現場などの)足場/2[集合的に] 足場材料
使い始めるのは簡単！
nodejsをインストール
$ npm install -g yo
yo 雛形作成ツール
bower フロントエンドパッケージマネージャ
grunt タスクランナー
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
普通にWeb開発
普通にWeb開発
backboneにYEOMAN
$ npm install -g generator-backbone $ mkdir backbone && cd $_ $ yo backbone $ grunt serve $ grunt build
angularにYEOMAN
$ npm install -g generator-angular $ mkdir angular && cd $_ $ yo angular $ grunt serve $ grunt build
EmberにYEOMAN
$ npm install -g generator-ember $ mkdir ember && cd $_ $ yo embar $ grunt serve $ grunt build
Three.jsにYEOMAN
$ npm install -g generator-threejs $ mkdir threejs && cd $_ $ yo threejs $ grunt serve $ grunt build
PhonGapにYEOMAN
$ npm install -g generator-phonegap $ mkdir phonegap && cd $_ $ yo phonegap $ grunt platform-build $ cd phonegap $ cordova emulate ios -d $ cordova emulate android -d
CordovaにYEOMAN
$ npm install -g generator-cordova $ mkdir corcova && cd $_ $ yo cordova $ grunt cordova-buildemulate
FirfoxOSにYEOMAN
$ npm install -g generator-firfoxos $ mkdir firfoxos && cd $_ $ yo firfoxos
イカしてるだろ？
Thanks