佐川 夫美雄@albatrosary 2014/8/2(土) オープンソースカンファレンス@京都

佐川　夫美雄

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)

HTML5 Experts

http://html5exprts.jp/

業務Webアプリケーション

http://html5experts.jp/albatrosary/3191/

アジェンダ

HTML5の歩みと方向性 Web開発の現状 YEOMAN JavaScriptフレームワーク ちょっと将来 Web標準(Web Components/Oo()) 未来 Webプラットフォーム（ハイブリットの役割） FirefoxOS

アジェンダ

HTML5の歩みと方向性 Web開発の現状 YEOMAN JavaScriptフレームワーク ちょっと将来 Web標準(Web Components/Oo()) 未来 Webプラットフォーム（ハイブリットの役割） FirefoxOS

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年

Rich Internet Application

Adobe Air Adobe Flash Microsoft Silverlight DHTML

特徴

表現力の高さ

デスクトップアプケーションと同等なUI

ユーザーエクスペリエンス

2010年 Steve JobsがFlashを批判

2011年 Silverlight後退/

モバイルFlash開発中止

Web標準

プロプライエタリより

オープン性のあるHTML5

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

マルチメディア

プラグイン無し

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/

アジェンダ

HTML5の歩みと方向性 Web開発の現状 YEOMAN JavaScriptフレームワーク ちょっと将来 Web標準(Web Components/Oo()) 未来 Webプラットフォーム（ハイブリットの役割） FirefoxOS

技術要素

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

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/

Web開発のscaffolding

YEOMANワークフロー

yo 雛形作成ツール bower フロントエンドパッケージマネージャ grunt タスクランナー

特徴

テンプレートがそろってる

Web開発に必要なツールがたくさんある

lint,hint,ビルド,テストが行える

html,css,js,画像をminifyしてくれる

まだまだ色々あります

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

使い始めるのは簡単

1. nodejsをインストール

2. npm install -g yo

git、ruby、compassを入れておくといいよ

これだけ覚える

$ 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

アジェンダ

HTML5の歩みと方向性 Web開発の現状 YEOMAN JavaScriptフレームワーク ちょっと将来 Web標準(Web Components/Oo()) 未来 Webプラットフォーム（ハイブリットの役割） FirefoxOS

Web Components

Custom Elements Template Import Shadow DOM

HTMLをコンポーネント化するための仕組み

Custom Elements

独自要素（タグ）を定義 !

<x-component></x-component>

Template

HTMLをテンプレート化する !

<template> <div>Template used</div> <div>hoge</div> <style> div { font-size: 20px; } </style> </template>

Import

外部Templasteを取り込む !

<link rel="import" href="x-component.html">

Shadow DOM

DOMツリーのカプセル化問題を解決

AngularJSとCustum Elements

Custom Elements Directive(ng-) Template Template Import $routeProvider Shadow DOM -

Object.observe()

JavaScriptオブジェクトの変更を監視

ECMAScript 標準

AngularJSとObject.observe()

$watch !

監視（Observe）したいオブジェクトやプロパティが変化するのを監視し実行する（リスナー）

アジェンダ

HTML5の歩みと方向性 Web開発の現状 YEOMAN JavaScriptフレームワーク ちょっと将来 Web標準(Web Components/Oo()) 未来 Webプラットフォーム（ハイブリットの役割） FirefoxOS

続きは展示会場で！

Thanks