html5入門(マルチメディア編)
DESCRIPTION
HTML5Experts.jpの記事をご紹介軸で、プレゼンしましたTRANSCRIPT
佐川 夫美雄@albatrosary 株式会社ゼノフィ(http://www.xenophy.com/)
HTML5を使えば難しくない ３Dグラフィックス
2014/6/7(土) 第26回 岡山WEBクリエイターズ「現場で使えるHTML5」
佐川 夫美雄http://html5experts.jp/albatrosary/ http://albatrosary.hateblo.jp/
(Fumio SAGAWA)
HTML5Expert.jpコントリビュータ html5jエンタープライズ部 - 副部長 html5j Web Platform部 - メンバー KnockoutJS Japan User Group - 代表 Sencha Japan User Group - CO-ORGANIZER AngularJS Japan User Group - メンバー
いつもしてること
HTML5エンタープライズ分野に生息しているシステムエンジニア
業務系Web開発のすべてこれを読めばモダンな業務系Webアプリケーション開発が解ります
http://html5experts.jp/albatrosary/3191/
業務系Web開発のすべてちなみにHTML5 experts.jpで結構読まれてます
ただの自慢話です…
5月 2位 6回連続ランクイン！
4月 2位 5回連続ランクイン！
3月 2位 4回連続ランクイン！
2月 3位 3回連続ランクイン！
2014年 1月 1位 2回連続ランクイン！
2013年12月 2位 ランクイン！
業務系Web技術業務系Webアプリケーションを構築するのに必要な要素
JavaScriptフレームワーク
altJS
CSS Preprocessor
開発環境
通信技術
バックエンド技術
フロントエンド技術
SPA(Single-page Application)HTML5を使えばRIAと同等のユーザビリティが可能
単一ページによるWebアプリケーション
ページはDOMの操作による切替え
サーバとのやりとりはRESTやWebSocket等を利用
2014年のデベロッパーサミットでもお話させて頂きました
YEOMAN統合開発ツール(Modern Workflows for Modern WebApps)
yo(ひな形作成)bower(パッケージマネージャ)
grunt(タスクランナー)
http://yeoman.io/
今日お伝えしたいこと
Web標準(HTML5)を進めると⬆️
本日のテーマ
HTML5とマルチメディア
HTML5の目指すところHTML5はRIA(Rich Internet Application)に変わる技術
プロプライエタリなRIAの置換え
プロプライエタリなプラグイン JavaFX、Adobe Flash、MIcrosoft Silverlight等
つまり
Webを標準化する（Web標準）
具体的には
Webのプラットフォーム化
マルチメディア対応
Web Applicationプラットフォーム化
タグの充実 Offline Web Application
Application Cache Web Strage Indexed Database File API
通信 WebSocket SPDY
マルチメディア対応
video audio canvas Web Audio API SVG WebGL
audio要素
プラグイン無しで再生
audio要素重要なマークアップ
audio オーディオを再生する controls オーディオコントロールの表示 autoplay 自動再生 loop 繰り返し実行
source メディアリソース src リソース type メディア型
audio要素重要なマークアップのサンプル
<audio controls autoplay loop>
<source src="audio.ogg" type='video/ogg' />
</audio>
video要素
Flashを超えたvideoタグ
動画を用意してvideoタグを書こう！
video要素重要なマークアップ
video 動画を再生する controls ビデオコントロールの表示 autoplay 自動再生 loop 繰り返し実行
source メディアリソース src リソース type メディア型
video要素重要なマークアップのサンプル
<video controls>
<source src="movie.mp4" type='video/mp4"' />
<source src="movie.webm" type='video/webm"' />
<source src="movie.ogv" type='video/ogg' />
</video>
video要素参考までに
<audio controls>
<source src="movie.mp4" type='video/mp4"' />
<source src="movie.webm" type='video/webm"' />
<source src="movie.ogv" type='video/ogg' />
</audio>
音だけ再生されます
SVGScalable Vector Graphics
SVGはHTML５とは独自企画
HTML５普及と共にサポート
SVGSVGは簡単に作れます
http://svg-edit.googlecode.com/svn/branches/2.4/editor/svg-editor.html
http://www.inkscape.org/
svg-editor
inkscape
D3.jsSVGの応用として最近流行ってます
Data Driven Decument
D3.jsSVGとCSSを使ってデータを可視化する
D3.jsはデータに基づいて
ドキュメントを操作するための
JavaScriptライブラリ
D3.jshttp://bl.ocks.org/mbostock/4063269
D3.jshttp://bl.ocks.org/mbostock/4060606
D3.jshttp://bl.ocks.org/mbostock/3231298
CanvasJavaScriptとかで図形を作ることができる
グラフを書く
写真を合成する
アニメーション
Canvasマークアップ
<canvas id="canvas" width=“640" height=“480">
</canvas>
CanvasJavaScriptのメソッドとプロパティ
四角形 fillRect() 枠線の色 strokeStyle 塗りつぶしの色 fillStyle 矩形 strokeRect() 円弧 arc()
もっといっぱいあります
CanvasとSVG
CanvasはExcelに貼付け容易
SVGは印刷しても綺麗
WebGL
3DCGプログラミングを実現
WebGL
CanvasとJavaScriptを使って3D
OpenGLに密接に従ったAPI
重要な要素
シーン 作成する3Dの世界 カメラ シーンの状態を撮影する 光源 光の当て方 物体 撮影するもの
重要な要素シーン
重要な要素カメラ
fov 画角 aspect 撮影結果の縦横比 near ニアークリップ：nearより近い領域は表示されない far ファークリップ：farより遠い領域は表示されない
重要な要素光源
重要な要素表示する物体
ジオメトリー(形状)とマテリアル(表面素材)を用意した上で、メッシュ(物体)を作成
完成イメージ
WebGLは難しい
WebGLを利用するための手順 3DCGプログラミングの基礎知識 行列やベクトルといった知識 学習コストが高い
Three.js高度なWebGLをうまく利用するためのJavaScriptライブラリ
WebGLのラッパーライブラリ
Three.js
Three.jsシーン
var scene = new THREE.Scene();
Three.jsカメラ
var camera = new THREE.PerspectiveCamera(
15, 500/500);
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
Three.jsライト
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(
0.577, 0.577, 0.577);
var ambient = new THREE.AmbientLight(0x333333);
Three.js表示する物体
var geometry = new THREE.SphereGeometry(1, 32, 16);
var material = new THREE.MeshPhongMaterial({
color: 0xffffff, specular: 0xcccccc,
shininess:50, ambient: 0xffffff,
map: THREE.ImageUtils.loadTexture('images/earth.jpg') });
var mesh = new THREE.Mesh(geometry, material);
WebGLプログラミングhttp://html5experts.jp/yomotsu/5225/
Addition
UI/UXの新しい考え方http://html5experts.jp/girlie_mac/4558/
最後に
Web標準(HTML5)を進めることで
難しい技術が扱いやすくなる
HTML5！
Thanks