佐川 夫美雄@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はHTML５とは独自企画

HTML５普及と共にサポート

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