Html5入門(マルチメディア編)
-
Upload
fumio-sagawa -
Category
Technology
-
view
588 -
download
1
description
Transcript of Html5入門(マルチメディア編)
![Page 1: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/1.jpg)
佐川 夫美雄@albatrosary 株式会社ゼノフィ(http://www.xenophy.com/)
HTML5を使えば難しくない 3Dグラフィックス
2014/6/7(土) 第26回 岡山WEBクリエイターズ「現場で使えるHTML5」
![Page 2: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/2.jpg)
佐川 夫美雄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 - メンバー
![Page 3: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/3.jpg)
いつもしてること
HTML5エンタープライズ分野に生息しているシステムエンジニア
![Page 4: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/4.jpg)
業務系Web開発のすべてこれを読めばモダンな業務系Webアプリケーション開発が解ります
http://html5experts.jp/albatrosary/3191/
![Page 6: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/6.jpg)
業務系Web開発のすべてちなみにHTML5 experts.jpで結構読まれてます
ただの自慢話です…
5月 2位 6回連続ランクイン!
4月 2位 5回連続ランクイン!
3月 2位 4回連続ランクイン!
2月 3位 3回連続ランクイン!
2014年 1月 1位 2回連続ランクイン!
2013年12月 2位 ランクイン!
![Page 7: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/7.jpg)
業務系Web技術業務系Webアプリケーションを構築するのに必要な要素
JavaScriptフレームワーク
altJS
CSS Preprocessor
開発環境
通信技術
バックエンド技術
![Page 8: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/8.jpg)
フロントエンド技術
![Page 9: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/9.jpg)
SPA(Single-page Application)HTML5を使えばRIAと同等のユーザビリティが可能
単一ページによるWebアプリケーション
ページはDOMの操作による切替え
サーバとのやりとりはRESTやWebSocket等を利用
2014年のデベロッパーサミットでもお話させて頂きました
![Page 10: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/10.jpg)
YEOMAN統合開発ツール(Modern Workflows for Modern WebApps)
yo(ひな形作成)bower(パッケージマネージャ)
grunt(タスクランナー)
http://yeoman.io/
![Page 11: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/11.jpg)
今日お伝えしたいこと
Web標準(HTML5)を進めると⬆️
![Page 12: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/12.jpg)
本日のテーマ
HTML5とマルチメディア
![Page 13: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/13.jpg)
HTML5の目指すところHTML5はRIA(Rich Internet Application)に変わる技術
プロプライエタリなRIAの置換え
プロプライエタリなプラグイン JavaFX、Adobe Flash、MIcrosoft Silverlight等
![Page 14: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/14.jpg)
つまり
Webを標準化する(Web標準)
![Page 15: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/15.jpg)
具体的には
Webのプラットフォーム化
マルチメディア対応
![Page 16: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/16.jpg)
Web Applicationプラットフォーム化
タグの充実 Offline Web Application
Application Cache Web Strage Indexed Database File API
通信 WebSocket SPDY
![Page 17: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/17.jpg)
マルチメディア対応
video audio canvas Web Audio API SVG WebGL
![Page 18: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/18.jpg)
audio要素
プラグイン無しで再生
![Page 19: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/19.jpg)
audio要素重要なマークアップ
audio オーディオを再生する controls オーディオコントロールの表示 autoplay 自動再生 loop 繰り返し実行
source メディアリソース src リソース type メディア型
![Page 20: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/20.jpg)
audio要素重要なマークアップのサンプル
<audio controls autoplay loop>
<source src="audio.ogg" type='video/ogg' />
</audio>
![Page 21: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/21.jpg)
video要素
Flashを超えたvideoタグ
動画を用意してvideoタグを書こう!
![Page 22: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/22.jpg)
video要素重要なマークアップ
video 動画を再生する controls ビデオコントロールの表示 autoplay 自動再生 loop 繰り返し実行
source メディアリソース src リソース type メディア型
![Page 23: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/23.jpg)
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>
![Page 24: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/24.jpg)
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>
音だけ再生されます
![Page 25: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/25.jpg)
SVGScalable Vector Graphics
SVGはHTML5とは独自企画
HTML5普及と共にサポート
![Page 26: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/26.jpg)
SVGSVGは簡単に作れます
http://svg-edit.googlecode.com/svn/branches/2.4/editor/svg-editor.html
http://www.inkscape.org/
![Page 27: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/27.jpg)
svg-editor
![Page 28: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/28.jpg)
inkscape
![Page 29: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/29.jpg)
D3.jsSVGの応用として最近流行ってます
Data Driven Decument
![Page 30: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/30.jpg)
D3.jsSVGとCSSを使ってデータを可視化する
D3.jsはデータに基づいて
ドキュメントを操作するための
JavaScriptライブラリ
![Page 31: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/31.jpg)
D3.jshttp://bl.ocks.org/mbostock/4063269
![Page 32: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/32.jpg)
D3.jshttp://bl.ocks.org/mbostock/4060606
![Page 33: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/33.jpg)
D3.jshttp://bl.ocks.org/mbostock/3231298
![Page 34: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/34.jpg)
CanvasJavaScriptとかで図形を作ることができる
グラフを書く
写真を合成する
アニメーション
![Page 35: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/35.jpg)
Canvasマークアップ
<canvas id="canvas" width=“640" height=“480">
</canvas>
![Page 36: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/36.jpg)
CanvasJavaScriptのメソッドとプロパティ
四角形 fillRect() 枠線の色 strokeStyle 塗りつぶしの色 fillStyle 矩形 strokeRect() 円弧 arc()
もっといっぱいあります
![Page 37: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/37.jpg)
CanvasとSVG
CanvasはExcelに貼付け容易
SVGは印刷しても綺麗
![Page 38: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/38.jpg)
WebGL
3DCGプログラミングを実現
![Page 39: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/39.jpg)
WebGL
CanvasとJavaScriptを使って3D
OpenGLに密接に従ったAPI
![Page 40: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/40.jpg)
重要な要素
シーン 作成する3Dの世界 カメラ シーンの状態を撮影する 光源 光の当て方 物体 撮影するもの
![Page 41: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/41.jpg)
重要な要素シーン
![Page 42: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/42.jpg)
重要な要素カメラ
fov 画角 aspect 撮影結果の縦横比 near ニアークリップ:nearより近い領域は表示されない far ファークリップ:farより遠い領域は表示されない
![Page 43: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/43.jpg)
重要な要素光源
![Page 44: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/44.jpg)
重要な要素表示する物体
ジオメトリー(形状)とマテリアル(表面素材)を用意した上で、メッシュ(物体)を作成
![Page 45: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/45.jpg)
完成イメージ
![Page 46: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/46.jpg)
WebGLは難しい
WebGLを利用するための手順 3DCGプログラミングの基礎知識 行列やベクトルといった知識 学習コストが高い
![Page 47: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/47.jpg)
Three.js高度なWebGLをうまく利用するためのJavaScriptライブラリ
WebGLのラッパーライブラリ
![Page 48: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/48.jpg)
Three.js
![Page 49: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/49.jpg)
Three.jsシーン
var scene = new THREE.Scene();
![Page 50: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/50.jpg)
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));
![Page 51: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/51.jpg)
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);
![Page 52: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/52.jpg)
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);
![Page 53: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/53.jpg)
WebGLプログラミングhttp://html5experts.jp/yomotsu/5225/
![Page 54: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/54.jpg)
Addition
![Page 55: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/55.jpg)
UI/UXの新しい考え方http://html5experts.jp/girlie_mac/4558/
![Page 56: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/56.jpg)
最後に
![Page 57: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/57.jpg)
Web標準(HTML5)を進めることで
![Page 58: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/58.jpg)
難しい技術が扱いやすくなる
![Page 59: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/59.jpg)
HTML5!
![Page 60: Html5入門(マルチメディア編)](https://reader034.fdocuments.net/reader034/viewer/2022052618/54b74f744a79592b5b8b45b0/html5/thumbnails/60.jpg)
Thanks