業務アプリケーションにおけるこれからのweb開発 in 札幌
DESCRIPTION
TRANSCRIPT
![Page 1: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/1.jpg)
佐川 夫美雄@albatrosary
![Page 2: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/2.jpg)
佐川 夫美雄
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)
![Page 3: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/3.jpg)
HTML5が2014年に正式勧告
![Page 4: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/4.jpg)
業務系Web開発のすべてこれを読めばモダンな業務系Webアプリケーション開発が解る
http://html5experts.jp/albatrosary/3191/
![Page 5: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/5.jpg)
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年
![Page 6: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/6.jpg)
HTML5の方向性
Webのプラットフォーム化
Elements Offline Web Application
Application Cache Web Strage Indexed Database File API
Network WebSocket SPDY
マルチメディア対応 video audio canvas SVG WebGL
![Page 7: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/7.jpg)
ElementsHTML4 HTML5
![Page 8: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/8.jpg)
カレンダーやデートピッカー 月の入力 週の入力 時刻の入力 詳細な日時や時刻の入力 自分のいる地域の日付と時刻
inputタイプの種類
検索ボックス スピンボックス スライダ カラーピッカー 電話番号 Webページのアドレス メールアドレス
![Page 9: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/9.jpg)
マルチメディアタグ
プラグイン無しで再生
![Page 10: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/10.jpg)
audio要素
audio オーディオを再生する controls オーディオコントロールの表示 autoplay 自動再生 loop 繰り返し実行
source メディアリソース src リソース type メディア型
![Page 11: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/11.jpg)
video要素
video 動画を再生する controls ビデオコントロールの表示 autoplay 自動再生 loop 繰り返し実行
source メディアリソース src リソース type メディア型
![Page 12: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/12.jpg)
SVG
SVGはHTML5とは独自企画
HTML5普及と共にサポート
![Page 13: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/13.jpg)
D3.jsSVGの応用として最近流行ってます
Data Driven Decument
![Page 14: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/14.jpg)
Canvas
グラフを書く
写真を合成する
アニメーション
![Page 15: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/15.jpg)
WebGL
3DCGプログラミングを実現
![Page 16: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/16.jpg)
重要な要素
シーン 作成する3Dの世界
カメラ シーンの状態を撮影する
光源 光の当て方
物体 撮影するもの
![Page 17: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/17.jpg)
シーン
![Page 18: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/18.jpg)
カメラ
fov 画角 aspect 撮影結果の縦横比 near ニアークリップ:nearより近い領域は表示されない far ファークリップ:farより遠い領域は表示されない
![Page 19: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/19.jpg)
光源
![Page 20: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/20.jpg)
物体ジオメトリー(形状)とマテリアル(表面素材)を用意した上で、メッシュ(物体)を作成
![Page 21: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/21.jpg)
完成
![Page 22: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/22.jpg)
WebGLは難しい
WebGLを利用するための手順
3DCGプログラミングの基礎知識
行列やベクトルといった知識
学習コストが高い
![Page 23: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/23.jpg)
Three.js高度なWebGLをうまく利用するためのJavaScriptライブラリ
WebGLのラッパーライブラリ
![Page 24: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/24.jpg)
WebGLプログラミング
http://html5experts.jp/yomotsu/5225/
![Page 25: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/25.jpg)
ブラウザはどうなっているか
http://html5test.com/
![Page 26: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/26.jpg)
クライアントとサーバが接続し続ける
双方向通信
WebSocket
![Page 27: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/27.jpg)
既存のHTTPを拡張
複数のリクエストを送受信することが可能
![Page 28: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/28.jpg)
通信 - より早く双方向に
![Page 29: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/29.jpg)
Geolocation
![Page 30: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/30.jpg)
Webなのに
Offline Web Application
![Page 31: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/31.jpg)
Webを標準化することで
難しい技術が扱いやすくなる
![Page 32: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/32.jpg)
業務系をどう開発するか業務系Webアプリケーションを構築するのに必要な要素JavaScriptフレームワーク
altJS
CSS Preprocessor
開発環境
通信技術
バックエンド
![Page 33: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/33.jpg)
SPA(Single-page Application)
単一ページによるWebアプリケーション
ページはDOMの操作による切替え
サーバとのやりとりはRESTやWebSocket等
![Page 34: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/34.jpg)
SPAは簡単?HTML CSS
JavaScript
image
![Page 35: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/35.jpg)
SPAは簡単?HTML CSS
JavaScript
Sass Compass
image
![Page 36: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/36.jpg)
SPAは簡単?HTML CSS
JavaScript
Sass
CoffeeScript
Compass
image
![Page 37: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/37.jpg)
SPAは簡単?HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image
![Page 38: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/38.jpg)
SPAは簡単?HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image
Yuidoc
![Page 39: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/39.jpg)
SPAは簡単?HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
Yuidoc
![Page 40: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/40.jpg)
SPAは簡単?HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
mocha chaiテスト
Yuidoc
![Page 41: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/41.jpg)
SPAは簡単?HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
mocha chaiテスト
Yuidoc
easymock
![Page 42: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/42.jpg)
http://yeoman.io/
![Page 43: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/43.jpg)
いいところ
テンプレートがそろってる
Web開発に必要なツールがたくさんある
lint,hint,ビルド,テストが行える
html,css,js,画像をminifyしてくれる
まだまだ色々あります
![Page 44: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/44.jpg)
エディターは何でも
Sublime Text
Vim
Emacs
![Page 45: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/45.jpg)
YEOMANというのは
Web開発のscaffolding
scaffoldingとは、1(建築現場などの)足場/2[集合的に] 足場材料
![Page 46: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/46.jpg)
使い始めるのは簡単!
![Page 47: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/47.jpg)
nodejsをインストール
$ npm install -g yo
![Page 48: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/48.jpg)
yo 雛形作成ツール
bower フロントエンドパッケージマネージャ
grunt タスクランナー
![Page 49: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/49.jpg)
scaffoldingツール
多くのgenerator
![Page 50: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/50.jpg)
OFFICIAL GENERATORS 20
COMMUNITY GENERATORS 782
![Page 51: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/51.jpg)
パッケージマネージャ
Twitter, opne-source community
bower.jsonで設定管理
![Page 52: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/52.jpg)
Bower Packages 13,178
![Page 53: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/53.jpg)
JavaScriptラスクランナー
package.jsonで設定管理
Gruntfile.jsでタスクを定義
![Page 54: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/54.jpg)
Grunt plugin 2,990
![Page 55: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/55.jpg)
構成(概要)
generator
bower.jsonGruntfile.json
package.json
Node Packager Managergithub
![Page 56: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/56.jpg)
普通にWeb開発
普通にWeb開発
![Page 57: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/57.jpg)
backboneにYEOMAN
$ npm install -g generator-backbone $ mkdir backbone && cd $_ $ yo backbone $ grunt serve $ grunt build
![Page 58: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/58.jpg)
angularにYEOMAN
$ npm install -g generator-angular $ mkdir angular && cd $_ $ yo angular $ grunt serve $ grunt build
![Page 59: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/59.jpg)
EmberにYEOMAN
$ npm install -g generator-ember $ mkdir ember && cd $_ $ yo embar $ grunt serve $ grunt build
![Page 60: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/60.jpg)
Three.jsにYEOMAN
$ npm install -g generator-threejs $ mkdir threejs && cd $_ $ yo threejs $ grunt serve $ grunt build
![Page 61: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/61.jpg)
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
![Page 62: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/62.jpg)
CordovaにYEOMAN
$ npm install -g generator-cordova $ mkdir corcova && cd $_ $ yo cordova $ grunt cordova-buildemulate
![Page 63: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/63.jpg)
FirfoxOSにYEOMAN
$ npm install -g generator-firfoxos $ mkdir firfoxos && cd $_ $ yo firfoxos
![Page 64: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/64.jpg)
イカしてるだろ?
![Page 65: 業務アプリケーションにおけるこれからのWeb開発 in 札幌](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b74f6a4a795967588b45fd/html5/thumbnails/65.jpg)
Thanks