Ctrl + カーソルキーにてページ移動します
2011/03/07 onozaty
1/34

第40回 社内勉強会

HTML5入門

HTML5とは

XHTMLからHTML5への流れ (1)

XHTMLからHTML5への流れ (2)

XHTMLからHTML5への流れ (3)

機能の追加と互換性

HTML5の現状

HTML5の記述方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>HTML5</title>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

セクショニング・コンテンツ

<nav>
  <ul>
    <li><a href="/">メイン</a></li>
    <li><a href="/category1">カテゴリ1</a></li>
  </ul>
</nav>
<article>
  <h1>大見出し</h1>
  <section>
    <h2>中見出し1</h2>
    <p>内容</p>
  </section>
  <section>
    <h2>中見出し2</h2>
    <p>内容</p>
    <aside>
      <h3>補足1</h3>
      <p>補足内容</p>
    </aside>
  </section>
</article>

Reference, Demo

Microdata

<div itemscope>
  <p>私の名前は<span itemprop="name">山田太郎</span>です。</p>
</div>
 
<div itemscope itemtype="http://data-vocabulary.org/Review" >
  <h1>Review: <span itemprop="itemreviewd">L'Amourita Pizza</span></h1>
  Written by <span itemprop="reviewer">Bob Smith</span>
  <time itemprop="dtreviewd" datetime="2010-01-15">Jan 15, 2010</time>
  Rated <b itmprop="rating">4.5</b> - Excellent
</div>

Reference, Demo

Forms (1)

<fieldset>
  <legend>各種type属性</legend>
  <p><label for="search">search：</label><input type="search" name="search" id="search" /></p>
  <p><label for="tel">tel：</label><input type="tel" name="tel" id="tel"/></p>
  <p><label for="url">url：</label><input type="url" name="url" id="url" size="50" /></p>
  <p><label for="email">email：</label><input type="email" name="email" id="email" multiple="true" /></p>
  <p><label for="number">number：</label><input type="number" name="number" id="number" min="-10" max="10" step="2" /></p>
  <p><label for="range">range：</label><input type="range" name="range" id="range" /></p>
  <p><label for="color">color：</label><input type="color" name="color" id="color" /></p>
  <p><label for="date">date：</label><input type="date" name="date" id="date" /></p>
  <p><label for="datetime">datetime：</label><input type="datetime" name="datetime" id="datetime" /></p>
  <p><label for="datetime-local">datetime-local：</label><input type="datetime-local" name="datetime-local" id="datetime-local" /></p>
  <p><label for="time">time：</label><input type="time" name="time" id="time" /></p>
  <p><label for="month">month：</label><input type="month" name="month" id="month" /></p>
  <p><label for="week">week：</label><input type="week" name="week" id="week" /></p>
</fieldset>

Reference, Demo

Forms (2)

<fieldset>
  <legend>その他属性</legend>
  <p>
    <label for="list">list：</label><input type="text" list="browsers" name="list" id="list"/>
    <datalist id="browsers">
      <option value="IE" />
      <option value="Firefox" />
      <option value="Opera" />
      <option value="Chrome" />
      <option value="Safari" />
    </datalist>
  </p>
  <p><label for="required">required：</label><input type="text" name="required" id="required" required /></p>
  <p><label for="pattern">pattern：</label><input type="pattern" name="pattern" id="pattern" pattern="[a-zA-Z]*"/></p>
  <p><label for="placeholder">placeholder：</label><input type="text" name="placeholder" id="placeholder" placeholder="input your name" /></p>
  <p><label for="autofocus">autofocus：</label><input type="text" name="autofocus" id="autofocus" autofocus /></p>
  <p><input type="submit" name="submit" /></p>
</fieldset>

Reference, Demo

video

<video width="640" height="360" controls>
  <source src="test.mp4" type="video/mp4" />
  <source src="test.webm" type="video/webm" />
  <source src="test.ogv" type='video/ogg" />
</video>

Reference, Demo

audio

<audio controls>
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
</audio>

Reference, Demo

Canvas

<canvas id="sample" width="300" height="200" />
<script>
  var canvas = document.getElementById("sample");
  var context = canvas.getContext("2d");

  // 四角形
  context.strokeStyle = "#666666";
  context.strokeRect(10, 10, 100, 100);

  // 三角形
  context.beginPath();
  context.strokeStyle = "#0000FF";
  context.moveTo(50, 20); // 頂点を指定
  context.lineTo(20, 60); // 左下
  context.lineTo(80, 60); // 右下
  context.closePath();
  context.stroke();

  // 円
  context.beginPath();
  context.arc(120, 90, 30, 0, Math.PI*2, false);
  context.stroke();
  context.fillStyle = "#FF9933";
  context.fill(); // 塗りつぶす
</script>

Reference, Demo

SVG

<!DOCTYPE html>
<html lang="ja">
  <body>
    <article>
      <h1>SVG</h1>
      <svg width="270" height="180" style="border: 1px solid #eee; background: #fff">
        <circle cx="135" cy="90" r="30" style="fill: #b22">
          <animate attributeType="XML" attributeName="r"
            dur="3s" values="30;60;30" repeatCount="indefinite"/>
        </circle>
      </svg>
    </article>
  </body>
</html>

Reference, Demo

アプリケーションキャッシュ

chache.manifest ファイル 
CACHE MANIFEST
hello.html
hello.js
HTML 
<!DOCTYPE html>
<html manifest="chache.manifest">

Reference, Demo

File API

var file = event.dataTransfer.files[0];
// var file = document.getElementById("file").files[0];

var fileInfoElement = document.getElementById("fileinfo");
fileInfoElement.innerHTML = "ファイル名:" + file.name 
                            + " サイズ:" + file.size + " タイプ:" + file.type;

var reader = new FileReader();
reader.onload = function() {
  document.getElementById("image").src = reader.result;
}

reader.readAsDataURL(file);

Reference, Demo

Drag and Drop API

Reference, Demo

クロスドキュメントメッセージング

送信側
var destFrame = document.getElementById("destFrame");
destFrame.contentWindow.postMessage("メッセージ本体", "http://dest.example.com");
受信側
window.addEventListener("message", function(e) {
  if (e.origin == "http://src.example.com") {
    var data = e.data; // メッセージはdataプロパティに入っている
  }
}, false);

Reference, Demo

Web Workers

UI側
var worker = new Worker("worker.js");
worker.onmessage = function(event) {
  alert("Workerからのメッセージ：" + event.data);
};

worker.postMessage("start");
Worker側(worker.js)
<script>
onmessage = function(event) {
  if (event.data == "start") {
    // 時間がかかる処理
  }
  postMessage("finish");
}
</script>

Reference, Demo

Server-Sent Events

var source = new EventSource(url);
source.onmessage = function(event) {
  alert(event.data);
}
サーバ側からのレスポンス(Content-Type:text/event-stream)
data: xxxx

data: xxxx
data: xxxx(複数行のデータを送りたい場合は2行で書く)

Reference, Demo

Web Sockets

var webSocket = new WebSocket("ws://example.com:10081/");
webSocket.onopen = function() {
  webSocket.send("Hello"); // 送信
};

// 受信
webSocket.onmessage = function(event) {
  alert(event.data);
};

webSocket.onclose = function() {
  alert("closed");
};

Reference, Demo

Web Storage

// 設定
localStorage.key1 = "サンプル";
localStorage.setItem("key2", "サンプル");

// 参照
localStorage.key1;
localStorage.getItem("key2");

// 削除
delete localStorage.key1;
localStorage.removeItem("key2");

// 全て削除
localStorage.clear();

Reference, Demo

Web SQL Database

// DBオープン
var db = openDatabase("db_name", "db_version", "DBの表示名", 1024*1024);

db.transaction(function(tx) {
  tx.executeSql("select * from test", [], function(tx, rs) {
    var rows = rs.rows;
    for (var i = 0, length = rows.length; i < length; i++) {
      // 1レコードの内容取得(カラム名がプロパティとなったオブジェクト)
      var row = rows[i];
    }
  }
});

Reference, Demo

Indexed Database API

Reference, Demo

Custom Data Attribute

<p data-length="2m11s">Beyond The Sea</p>
<div class="spaceship" data-ship-id="92432"
     data-weapons="laser 2" data-shields="50%"
     data-x="30" data-y="10" data-z="90">

Reference, Demo

contentEditable

<div id="editable" contenteditable="true">
  <h1>タイトル</h1>
  <p>内容</p>
</div>

Reference, Demo

Selectors API

var element = document.querySelector("#foo, #bar");
var elements = document.querySelectorAll("p.warning, p.error");

Reference, Demo

History API

history.pushState(null, "new page", "/new.html");
history.pushState(null, "replace page", "/replace.html");

Reference, Demo

XMLHttpRequest Level 2

Reference, Demo

Geolocation API

navigator.geolocation.getCurrentPosition(function(position) {
  alert("緯度:" + position.coords.latitude + " 経度:" + position.coords.longitude);
});

Reference, Demo

その他

おわりに