業務アプリケーションにおけるこれからのweb開発@osc.名古屋
DESCRIPTION
TRANSCRIPT
佐川 夫美雄@albatrosary 2014/7/5(土) オープンソースカンファレンス@名古屋
佐川 夫美雄
HTML5 Experts.jp コントリビュータ html5jエンタープライズ部(副部長) html5j Web Platform部(メンバー) AngularJS Japan User Group(メンバー) Sencha UG(CO-ORGANIZER)
http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
(Fumio SAGAWA)
業務Webアプリケーション
http://html5experts.jp/albatrosary/3191/
HTML5が2014年に正式勧告
歴史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年
空白の時代
Webアプリケーションを
リッチにしてきたもの
Rich Internet Application
Rich Internet Application
表現力の高さ
デスクトップアプケーションと同等なUI
ユーザーエクスペリエンス
2010年 Steve JobsがFlashを批判
2011年 Silverlight後退/
モバイルFlash開発中止
プロプライエタリより
オープン性のあるHTML5
Webのプラットフォーム化
HTML5の方向性
Webのプラットフォーム化
Elements Offline Web Application
Application Cache Web Strage Indexed Database File API
Network WebSocket SPDY
Web Workers
マルチメディア対応 video audio canvas SVG WebGL
elementsHTML4 HTML5
inputタイプの種類
カレンダーやデートピッカー 月の入力 週の入力 時刻の入力 詳細な日時や時刻の入力 自分のいる地域の日付と時刻
検索ボックス スピンボックス スライダ カラーピッカー 電話番号 Webページのアドレス メールアドレス
マルチメディア
プラグイン無し!
audio オーディオを再生する controls オーディオコントロールの表示 autoplay 自動再生 loop 繰り返し実行
source メディアリソース src リソース type メディア型
SVGScalable Vector Graphics
SVGはHTML5とは独自企画
HTML5普及と共にサポート
D3.jsData Driven Decument
http://d3js.org/
Canvas
グラフを書く
写真を合成する
アニメーション
WebGL
3DCGプログラミングを実現
WebGLは難しい
WebGLを利用するための手順
3DCGプログラミングの基礎知識
行列やベクトルといった知識
学習コストが高い
重要な要素
シーン 作成する3Dの世界
カメラ シーンの状態を撮影する
光源 光の当て方
物体 撮影するもの
シーン
カメラ
fov 画角 aspect 撮影結果の縦横比 near ニアークリップ:nearより近い領域は表示されない far ファークリップ:farより遠い領域は表示されない
光源
物体
ジオメトリー(形状)とマテリアル(表面素材)を用意した上で、メッシュ(物体)を作成
完成
Three.jsWebGLのラッパーライブラリ
http://threejs.org/
WebGLプログラミング
http://html5experts.jp/yomotsu/5225/
Webなのに
Offline Web Application
Application Cache
Web Storage
Indexed Database API
File API
ここまでのまとめ
Webを標準化することで
難しい技術が扱いやすくなる
業務アプリケーションの開発は?
技術要素
JavaScriptフレームワーク
altJS
CSS Preprocessor
開発環境
通信技術
バックエンド
モダンWebアプリケーション
Controller
Browser
HTML JavaScript
アプリケーションサーバ RDBMS
Business Logic O/RPOJO
1. HTMLで作成された画面を表示 2. 必要な情報をAjaxにおいてXMLHttpRequestで非同期にJSONでサーバへ送信
3. サーバでは受け取った情報(JSON)をPOJOへ変換し登録・更新などの処理を行う
4. 表示データはJSONでクライアントへ画面へ表示
Old Web vs Multi-Deviace Architectures
Page Display
Page Generation
Logic & State
Data
Integration
User Interface
Interface Management
Logic & State
Data
Integration
APIs
Native & HTML5
Browser
App Server
Interface Elements
Server I/O
Logic & Data
View System
Basic Widgets buttons, bars, test fields…
Containers panels, cards, modals…
Layout Manager absolute, flexible
Templationg iterations, conditionals
Compound Widgets trees, grids, gauges…
Themes
Visualizations charts, infographics
Styles
Visual Effects animations, filters…
Localization RTL, local libraries
Accessibility focus manager, ARIA…
Interactions gestures, drag & drop
Drawing vector, bitmap
Theming computed styles
State Manager history, undo, routes
Data Objects queues, hoshtables
Data Models & Stores group, sort, validate
Persistent Data cache & sync
Mulitimedia 3D, audio, video
Data Binding 1-way, 2-way
Modularity components, modules
Testing IOC, test hooks
Server Calls asynch, conversion
Server Method Invocation 2-Way Data Server Notifications
Single-page Application
単一ページによるWebアプリケーション
ページはDOMの操作による切替え
サーバとのやりとりはRESTやWebSocket等
HTML CSS
JavaScript
image
HTML CSS
JavaScript
Sass Compass
image
HTML CSS
JavaScript
Sass
CoffeeScript
Compass
image
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image
Yuidoc
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
Yuidoc
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
mocha chaiテスト
Yuidoc
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
mocha chaiテスト
Yuidoc
easymock
http://yeoman.io/
YEOMAN
http://yeoman.io/
YEOMANワークフロー
いいところ
テンプレートがそろってる
Web開発に必要なツールがたくさんある
lint,hint,ビルド,テストが行える
html,css,js,画像をminifyしてくれる
まだまだ色々あります
yo 雛形作成ツール
bower フロントエンドパッケージマネージャ
grunt タスクランナー
つまりYEOMANというのは
Web開発のscaffolding
scaffoldingとは、1(建築現場などの)足場/2[集合的に] 足場材料
使い始めるのは簡単!
1. nodejsをインストール
2. npm install -g yo
git/ruby/compassを入れておくといいよ
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
これだけ覚える
$ npm install -g generator-hoge $ mkdir my-hoge-app && cd $_ $ yo hoge $ grunt serve $ grunt build
イカしてるだろ?
AngularJS
https://angularjs.org/
特徴
・双方向バインディング ・テンプレートとしてのHTML ・再利用可能なコンポーネント ・ビューとルーティング ・テストとテストのしやすさ
得意なところ
・CRUD系のアプリケーション ・管理画面、マイページ ・1ページで完結するアプリケーション
不得意なところ
・モバイル向けアプリケーション ・ゲームなどで使うグラフィック系、エフェクト系
Model View Whatever
Angular UI
http://angular-ui.github.io/
Onsen UI
http://onsenui.io/
html5jエンタープライズ部AngularJS+bootstrap+Application Cache
http://www.html5biz.org/
と、色々お話しましたが
どうでもいいから
とにかく触ってみようぜ!
by Angularな人たち
続きは展示会場で!
Thanks