HTML5って必要？

ZENER NET WORKS
2013/02/28
sanoh

1.HTML5に将来はあるのか？
2.Webアプリ開発
3.開発環境準備
4.開発サンプル

1.HTML5に将来はあるのか？
2.WEBアプリ開発
3.開発環境準備
4.開発サンプル

スマートフォン（iPhone、Android、
WindowsPhone8）
スレートPC（iPad、Kindol）
スマートTV（AppleTV、GoogleTV、
KindolTV）
ディスクトップ（Windows、Mac）
コンシューマ（PS3、XBOX360、WiiU）
携帯ゲーム機（PSP、3DS）

課金
ストアストアストア
課金課金課金

ソーシャル
グラフリアル
グラフ利益

利益

利益
利益

ブラウザで
動作する
コンテンツ

チッリなコンテンツ

Flash? VS HTML5?

FLASH Java Silverlight

HTML5 Ajax CSS

JavaScrpt（JQuery,Json・・・)

HTML

HTTP XML

Perl PHP（Cake,Zend） C#（ASP・・）

MySQL SQL Azure Postgre

Linux クラウド(Amazon,Azure・・・・）

HTML5

JavaScrpt

HTML

Canvas
SVG
Audio
Video
WebSocket
WebWorker
WegStorage
WebGL

Desktop iPhone Android2.3
IE9 FireFox Chrome Safari Safari Chrome 標準 FireFox
15.0.1 21.0 5.1.7 5.1 12 15.0.1

Canvas ○ ○ ○ ○ ○ ○ ○ ○
SVG ○ ○ ○ ○ ○ ○ ○ ○
Audio ○ ○ ○ ○ ○ ○ ○ ○
Video ○ ○ ○ ○ ○ ○ ○ ○
WebSocket X ○ ○ ○ ○ ○ X ○
WebWorker X ○ ○ ○ ○ ○ X ○
WebStrage ○ ○ ○ ○ - - - -
WebGL X X ○ X X X X ○

3.1 デバッグ環境
3.2 ローカルサーバ環境
3.3 環境の選定

IE9
F12
Firefox
Firebug(エクステンション）
Safari
Web Inspector
Chrome
Chromeデベロッパーツール
VisualStudio2010 / WebMatrix2

XAMPP
VirtualPC
VMware
Azure
IIS
Apache

HTML5 HTML5

JavaScript(JQuery) JavaScript(JQuery)

Apache CakePHP IIS MVC-3、4

PHP ASP.NET

MySQL WindowsServer

4.1 表示
4.2 動きのある表示
4.3 色加算
4.4 パフォーマンス
4.5 Lib化
4.6 入力
4.7 ブラウザ互換
4.8 ページ遷移
4.9 バグの出にくいソース？

HTMK5
http://ie.microsoft.com/testdrive/

http://worldsbiggestpacman.com/play/#-7,6

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>Sample001.html</title>

<script>
function draw() {
var canvas = document.getElementById("canvas1");
var c = canvas.getContext("2d");
}
</script>

</head>
<body onload="draw()">
<canvas id="canvas1" width="300" height="300"></canvas>
</body>
</html>

<!DOCTYPE html>
<head>

<script>
function draw() {
c.font = "38px 'MS Gothic'";
c.fillStyle = "#666666";
c.fillText("こんにちは", 100, 100);
}
</script>

</head>
<body onload="draw()">
</body>
</html>

：
function draw() {

c.fillStyle = "#0099ff";
c.fillRect (15, 15, 50, 45);

c.fillStyle = "rgba(0, 0, 200, 0.5)";
c.fillRect (30, 30, 50, 45);
}
：

function draw() {

c.strokeStyle = "#ff9900";
c.beginPath();
c.arc(70, 70, 60, 0, Math.PI*2, false);
c.stroke();
}

function draw() {

c.beginPath();
c.arc(70, 70, 60, 0, Math.PI*2, false);
c.fill();
}

function draw() {

c.beginPath();
c.moveTo(10,10);
c.lineTo(200,50);
c.lineTo(100,120);
c.closePath();
c.fill();
}

function draw() {
Onloadなので読み込み終
了してない

var img = new Image();
img.src = "img/grand001.png";
c.drawImage(img, 0, 0);
}

function draw() {

c.drawImage(img, 0, 0, 640, 480);
}

function draw() {

img.src = "img/tree001.png";
c.drawImage(img, 10, 10, 64, 64, 100, 100, 128, 32);
}

<!DOCTYPE html>
<head>
<script>//<![CDATA[

var timerInterval = 25; //25msec
var timer1;
var c;

function draw() {
}

function init(){
c = canvas.getContext("2d");

timer1 = setInterval("draw()", timerInterval);
}

//]]></script>
</head>
<body onload="init()">
<canvas id="canvas1" width=“300" height=“300"></canvas>
</body>
</html>

Var Glib = function(name){ this.DrawPolygon3 = function( x1, y1, x2, y2, x3, y3 ){
this.canvas = document.getElementById(name); this.g.beginPath();
this.g = this.canvas.getContext("2d"); this.g.moveTo(x1,y1);
this.canvasW = this.canvas.width; this.g.lineTo(x2,y2);
this.canvasH = this.canvas.height; this.g.lineTo(x3,y3);
this.g.lineWidth = 1; this.g.closePath();
this.Cls = function() { this.g.fill();
this.g.clearRect(0, 0, this.canvasW, this.canvasH); }
this.Push(); this.DrawPolygon3 = function( x1, y1, x2, y2, x3, y3, s ){
} this.g.fillStyle = s;
this.Cls = function(s) { this.g.beginPath();
this.g.fillStyle = s; this.g.moveTo(x1,y1);
this.g.fillRect(0, 0, this.canvasW, this.canvasH); this.g.lineTo(x2,y2);
this.Push(); this.g.lineTo(x3,y3);
} this.g.closePath();
this.Draw = function() { this.g.fill();
this.Pop(); }
} this.DrawPolygon4 = function( x1, y1, x2, y2, x3, y3, x4, y4 ){
this.SetColor = function( s ){ this.g.beginPath();
this.g.fillStyle = s; this.g.moveTo(x1,y1);
} this.g.lineTo(x2,y2);
this.DrawBox = function( x, y, w, h ){ this.g.lineTo(x3,y3);
this.g.fillRect ( x, y, w, h); this.g.lineTo(x4,y4);
} this.g.closePath();
this.DrawBox = function( x, y, w, h, s ){ this.g.fill();
this.g.fillStyle = s; }
this.g.fillRect ( x, y, w, h); this.DrawPolygon4 = function( x1, y1, x2, y2, x3, y3, x4, y4, s ){
} this.g.fillStyle = s;
this.DrawLine = function( x1, y1, x2, y2 ){ this.g.beginPath();
this.g.lineWidth = 2; this.g.moveTo(x1,y1);
this.g.beginPath(); this.g.lineTo(x2,y2);
this.g.moveTo(x1,y1); this.g.lineTo(x3,y3);
this.g.lineTo(x2,y2); this.g.lineTo(x4,y4);
this.g.closePath(); this.g.closePath();
this.g.stroke(); this.g.fill();
} }
this.DrawLine = function( x1, y1, x2, y2, s ){
this.g.strokeStyle = s;
this.g.beginPath();
this.g.moveTo(x1,y1);
this.g.lineTo(x2,y2);
this.g.closePath();
this.g.stroke();
}

this.DrawImage = function( img, x, y ){
this.g.drawImage(img, x, y);
}
this.DrawImage4 = function( img, x, y, w, h ){
this.g.drawImage(img, x, y, w, h);
}
this.DrawImageObj = function( img, sx, sy, sw, sh ){
this.g.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh);
}
this.DrawImage6 = function( img, sx, sy, sw, sh, x, y){
this.g.drawImage(img, sx, sy, sw, sh, x, y, sw, sh);
}
this.DrawImage8 = function( img, sx, sy, sw, sh, x, y, w, h ){
this.g.drawImage(img, sx, sy, sw, sh, x, y, w, h);
}
this.Pos = function( x, y ){
this.g.translate( x, y );
}
this.Ang = function( a ){
this.g.rotate( a )
}
this.Push = function(){
this.g.save();
}
this.Pop = function(){
this.g.restore();
}
};

<!DOCTYPE html>
<head>
Lib化して楽しよう
<title>Test</title>

<script language="JavaScript" src="./Glib.js"></script>
<script>//<![CDATA[
var timerInterval = 16.7;
Var g;
var imgTmy;

function draw() {
g.Cls("#0000ff");
g.DrawImage( imgTmy, 40, 40);
g.DrawLine( 0, 0, 250, 200, "#00ffff");
g.Draw();
}
function init(){
g = new Glib( "canvas1");
setInterval("draw()", timerInterval);

imgTmy = new Image();
imgTmy.src = "./grand001.png";
}

//]]></script>
</head>
</body>
</html>

SmileBoom Petit Developer
スマイルブーム

Enchant.js
Ubiquitous Entertainment Inc

FLASH
Unity

JQuery

Googleを使う
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

ページ切り替え中身切り替え

<body>
<div id="MainFrame">
</body>
</html>

var命令による変数宣言は省略しない
比較演算子は「==」ではなく「===」を
配列の生成にはリテラルを使う
中括弧は省略しない
文の途中の改行に要注意

http://blog.livedoor.jp/ryo511-web/archives/13577395.html

Flash11
http://nissan-stagejuk3d.com/

WebGL
https://code.google.com/p/webglsamples/

やっておいて損はない

Mail: sanoh@zener.co.jp
Blog: http://d.hatena.ne.jp/sanoh/ (ポリゴン魂）
Facebook: 佐野浩章
Twitter: sanoh00

HTML5って必要？

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to HTML5って必要？ (20)

Recently uploaded (20)

HTML5って必要？