HTML5

次世代のWeb標準技術

第1部 HTML5とは

狭義のHTML5

W3Cの以下の仕様で定義されているものを指す。

HTML5 A vocabulary and associated APIs for HTML and XHTML http://www.w3.org/TR/html5/

　
    この仕様には主に以下が規定されている。
  • HTML5のすべての要素
  • HTML5におけるHTML
  • HTML5におけるXHTML
  • Drag and Drop APやApplication cacheなどAPI
    • など。

広義のHTML5

HTML5と関連APIの複数の仕様の総称。

HTML5にいたるまで（その1）

HTML5にいたるまで（その2）

HTML5の仕様とWHATWGの仕様

WHATWGの仕様と重なる部分が多い

参考: WHATWG と W3C の仕様の関連 « HTML5.JP ブログ

HTML4→XHTML→HTML5

HTML5 要点

HTMLとXHTML in HTML5

HTML5 in HTML5

XHTML5 in HTML5

ではいつ使えるのかという話。

HTML5のすべての仕様を実装したブラウザはまだ存在しません。

Why?

参考 W3C勧告までのプロセス

from W3C勧告プロセスの概要

前述の仕様（2011/12/10時点）

つまり・・・・

フルスペックHTML5を実装したブラウザはしばらく登場しない。

　

とはいえ・・・

もう使えます。というか、すでに使ってます。

W3Cの仕様

It already works!

ブラウザの実装状況

第2部 マークアップ よりセマンティックに-

セクション要素

セクション要素

こんな構造のサイトがあった場合・・

ヘッダー
ナビゲーション
メニューコンテンツメニュー
広告
フッター

セクション要素

従来はこんな感じで

div id ="header"
div id ="navgation"
div id ="menu_left"div id ="contents"div id ="menu_right"
div id ="ad"
div id ="footer"

セクション要素

HTML5ではこんな感じになります。

header
nav id ="top"
nav id="left"articlenav id="right"
aside id="ad"
footer

はてなブログ

11月に公開されたはてなブログがHTML５対応

セクション要素解説(1)

ブロックに意味をもたせることができるようになった。

header/footer
それぞれページ単位、セクション単位のヘッダーとフッターを意味する。
nav
ナビゲーションを意味する。位置は問題ではないので、サイドにナビゲーションをもつものがあってもasideではなく、navを使用する。
aside
メインコンテンツと関連の薄いブロックを意味する。広告やリンクなど。位置は問題ではないのでサイドにあるから使うというものではない。

セクション要素解説(2)

article
独立したコンテンツを表す。
section
章節単位をあらわす。見出しと本文をくくる要素。つまり、h要素の見出しが必要。
div
表す意味を持たない。スタイルのためだけに使うならこの要素を使う。

テキストの意味付け

テキストに対する意味付けをする要素が整理された。

em要素（変更なし）
強調を表す。重要性は表さない。
strong要素（変更）
強調を表す要素から重要性を表す要素に変更された。
i要素（変更）
印刷物で慣例的にイタリック体で表現されるものに使用する。
b要素（変更）
他のテキストと区別させたいときに使用する。強調や重要性を表さない。
small要素（変更）
side comments()を表す。フォントを小さくするために使用しない。
mark要素(新要素)
特定の範囲をハイライト。他の箇所で明示的もしくは暗黙的に言及されることを期待される箇所。

メタデータ

メタデータの埋め込み

Microdata

HTML5で導入されたHTML内にメタデータを記述するメタデータフォーマット。以下のような感じでhtmlタグの中にitemscope、itemtype、itempropという属性を埋め込んでメタデータを記述する。　

       
<section itemscope itemtype="http://data-vocabulary.org/Person">
        Hello, my name is
        <span itemprop="name">John Doe</span>,
        I am a
        <span itemprop="title">graduate research assistant</span>
        at the
        <span itemprop="affiliation">University of Dreams</span>.
        My friends call me
        <span itemprop="nickname">Johnny</span>.
        You can visit my homepage at
        <a href="http://www.JohnnyD.com" itemprop="url">www.JohnnyD.com</a>.
        <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
                I live at
                <span itemprop="street-address">1234 Peach Drive</span>
                <span itemprop="locality">Warner Robins</span>
                ,
                <span itemprop="region">Georgia</span>.
        </section>
</section>

RDFa

RDFをHTML内に記述するメタデータフォーマット。RDFaでは記述が複雑すぎる？という意見からRDFa1.1 liteなるものも出た。　

<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:biblio="http://example.org/"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  >
  <head>
    <title>Books by Marco Pierre White</title>
  </head>
  <body>
    I think White's book
    '<span about="urn:ISBN:0091808189" typeof="biblio:book"
           property="dc:title">
      Canteen Cuisine
    </span>'
    is well worth getting since although it's quite advanced stuff, he
    makes it pretty easy to follow. You might also like
    <span about="urn:ISBN:1596913614" typeof="biblio:book"
          property="dc:description">
      White's autobiography
    </span>.
  </body>
</html>

Schema.org

Schema.org
http://schema.org/ （非公式日本語訳）

その他

form機能の強化

ルビ表示が可能に

マルチメディア要素

video要素、audio要素、canvas要素の追加。

詳細は第3部で。

その他

HTML5タグリファレンス

あとは・・・

　

これを読んでください。HTML5で使用できる全要素・全属性の解説が掲載されています。

徹底解説HTML5マークアップガイドブック
徹底解説HTML5マークアップガイドブック

と書いている時に・・・

　

新しいのが出ました。

徹底解説HTML5マークアップガイドブック 最終草案対応版―全要素・全属性完全収録
徹底解説HTML5マークアップガイドブック 最終草案対応版

第3部 強化されるマルチメディア機能

video/audioタグ

video要素

audio要素

ブラウザのvideoファイル形式の対応

ただし、ブラウザによって対応する動画ファイルがばらばら。主要ブラウザ全てが対応している共通の形式がまだ存在せず。


ブラウザのaudioファイル形式の対応

ただし、ブラウザによって対応する音声ファイルがばらばら。主要ブラウザ全てが対応している共通の形式がまだ存在せず。

対策

複数の形式のデータを用意する。そして、source要素を使用する。

        
<video controls="controls" width="300px">
   <source src="http://cdn-smooth.ms-studiosmedia.com/events/W3C/Day1/Web_Payments.mp4" type="video" />
   <source src="http://cdn-smooth.ms-studiosmedia.com/events/W3C/Day1/Web_Payments_1200k.webm" type="video" />
</video>

source要素は複数のメディアファイルを指定できる。上から順番にチェックされ、最初に再生可能な形式が再生される。

Canvas

Canvas(2D)

Canvas(2D)

 <canvas id="myCanvas" width="600" height="400"></canvas>
 <script>
        
   var canvasObj = document.getElementById("myCanvas");
   var my_canvas=canvasObj.getContext("2d");
   my_canvas.fillStyle="red";
   my_canvas.beginPath();
   my_canvas.moveTo(10,10);
   my_canvas.lineTo(300,10);
   my_canvas.lineTo(150,400);
   my_canvas.closePath();
   my_canvas.fill();
   my_canvas.fillStyle="green";
   my_canvas.beginPath();
   my_canvas.moveTo(10,10);
   my_canvas.lineTo(10,300);
   my_canvas.lineTo(100,50);
   my_canvas.closePath();
   my_canvas.fill();
   my_canvas.moveTo(100,100);
   my_canvas.fillStyle="blue";
   my_canvas.arc(200,100,100,0,Math.PI*2,false);
   my_canvas.fill();
   my_canvas.stroke();
</script>

Canvas

Canvas(2D) -Use Cases

WebGL - Canvas 3D

WebGL -Use Cases

SVG(Scalable Vector Graphics)

SVG(Scalable Vector Graphics)

SVG -ブラウザの対応状況

SVG -img要素による表示

SVG Use Cases - SVG少女

SVG少女
http://jsdo.it/event/svggirl
参考: SVG女子を90%軽くしたSVG軽量化テク+α | KAYAC DESIGNER'S BLOG

SVG Use Cases-電子コミック

第4部 JavaScriptでマルチスレッド処理-Web Workers

Web Workers

Web Workersとは

Web Workersの特徴 (1)

WebWorkersの特徴

ワーカーのワーカー

共有ワーカー(Shared worker)

ちなみに・・

専用ワーカｰと共有ワーカーでコントラクタが異なる。

Use Cases

現在、以下のAPIをWorkerスレッド内で使用することができる。

第5部 リアルタイム双方向通信 - WebSocket

WebSocket

WebSocketとは

Web上での双方向リアルタイム通信い？

Web上のやり取りはサーバーを介して行います。チャットの場合はこんな感じ。

WebSocketはこのハイライトされた部分を実現するしくみ。

Webサーバー（HTTPサーバー）

Webサーバー（HTTPサーバー）

双方向通信を行うために

定期的なリクエストの送信

クライアント側から定期的にリクエストを送信するとこんな感じです。

定期的なリクエストの送信の問題点

Comet（Long-polling）

クライアントからリクエストがあってもサーバー側はすぐにレスポンスを返さず、コネクションを維持する。なんらかのイベントが発生したタイミングでサーバーはレスポンスを返す。

Comet（Long Polling）の問題点

そこで、WebSocket

WebSocket

PUSH型通信が可能です。

　

双方向通信なので

チャットならばこういうほうがあり得る。

ライブ配信

もちろんAからBへサーバーを経由して一方的に送信し続けることも可能。

複数同時送信

HTTPのようにRequestとResponseを1対1でやり取りする必要はない。同時に複数送信、複数受信することによって効率よくデータをサーバーから受け取ることができる。

余談

今回はリアルタイム双方向通信に主眼をおいたため、主にWebSocketを紹介しましたが、HTML5関連のAPIではそれ以外にも次のようなAPIが検討されています

その他のコミュニケーション系API

第6部 Web as Application -オフライン系API

Web Storage

Web Storageとは

Cookieとの違い

Web SQL Database

Web SQL Databaseとは

しかし・・・・

Web SQL Databaseの仕様の検討は中止

現時点ではまだ対応しているブラウザがいくつかあるので使えることは使えます。

Indexed Database

Indexed Database

Appllication Cahce

Appllication Cahceとは

File API

File APIとは

Use cases

Kindle Cloud Reader

Kindle Cloud Reader

一覧画面

Kindle Cloud Reader

コンテンツの本文表示画面

Kindle Cloud Reader

ブックマークしたり・・・

Kindle Cloud Reader

ブックマークやノートつけたところを確認したりできる。

大事なことなので繰り返しますが・・・・

Kindle Cloud Reader利用するには？

Kindle Cloud Reader対応ブラウザ

第7部 さらなるWeb as Application-Web app.とNative app.

Native app. vs Web app.

Native app.

長所

Native app.

短所

Web app.

長所

Web app.

短所

Web app.のNaitive app.化

PhoneGap

PhoneGap
PhoneGap http://phonegap.com/

PhoneGapの特徴

少しHTML5の文脈から外れるかも知れませんが・・・

ObjC/Javaを使わなくてクロスプラットフォームはアプリを作れるものが結構あります。

クロスプラットフォームなアプリを作れる開発環境

Titanium Mobile

Titanium Mobileの特徴

Use Cases

閑話休題

Webアプリはハードウェア特有の機能にアクセスできないと申しましたが・・・

Device系API

Geolocation API

さらに・・・・・

検討中のハードウェアの機能を操作するAPI

Geolocation API以外にもハードウェアの機能を操作するAPIの仕様が検討されている。

※括弧は2011/12/5時点

前述の・・・・・

オフライン系のAPI

あわせてオフライン系のAPIを併用すれば、ローカルだけで簡潔するアプリケーションを作ることも遠からず可能になる。

第8部 CSS3

CSS3とは

CSS3とは

CSS3の特徴

Use Cases

Use Cases -縦書き表示とか


from EPUB漢詩選

第9部 HTML5の今後

WebサイトとWebアプリ/パッケージ型コンテンツの境界線の曖昧化

さらなるPlatform志向？

用途の拡大

ありがとうございました。

参考文献

主な参考サイト

主な参考書籍