おはこんばんにちわ
アブナイお兄ちゃんです。
ウェブの歴史は初代ウェブブラウザのモザイクから始まり
その上で動くマークアップ言語HTMLにより進化してきました
HTML5になってから数年が経ちましたが
HTML5って何できるの?っていうのを
ざっくりサンプル作りながらこの講座でまとめたいと思います
そもそもHTML5とは・・・(以下ウィキより抜粋)
HTML5(エイチティーエムエル・ファイブ)とは HTML の 5 回目に当たる大幅な改定版である。
XML の文法で記述する場合、XHTML5 と呼ばれる
HTML5 は WHATWG によって2004年に定められた Web Applications 1.0 に Web Forms 2.0 を取り入れたものが
W3C の専門委員会に採用され、W3C より2008年1月22日にドラフト(草案)が発表された。
といっても全部網羅するのは膨大なので
以下のワードをHTML5で特にメジャーな仕様として抑えておけば大体大丈夫でしょう
audioタグ、videoタグ、canvasタグ、CSS3、要素のドラッグ&ドロップ
File API、WebGL、WebRTC
HTML5は以下のタグから始まります
<!DOCTYPE html>
全体的にマルチメディア操作、ブラウザ間通信、モバイル対応に力をいれています
・audioタグ
HTML5では標準で音声ファイル再生をするためのタグが用意されています
・videoタグ
HTML5では標準で動画再生をするためのタグが用意されています
これにより動画フォーマット別にembbedタグを使う必要がなくなりました
ただし、まだブラウザによって再生できない動画フォーマットもあるので注意が必要です
また、ウェブカメラから取得した映像をブラウザ上で表示させることも可能です
・canvasタグ
画面上の一部にjavascriptのAPIで自由に描画できる領域を作成します
お絵かきソフトなどがブラウザ上で作成できます。
・CSS3
CSS2からの拡張です
大きなところではCSSで要素のアニメーションや3D表現ができるようになりました
・要素のドラッグ&ドロップ
標準のイベントで要素のドラッグ&ドロップがサポートされるようになりました
従来どおりjQueryを使う方法もあります
・File API
ブラウザ上からファイルを参照できるようになりました
これにより、ファイルを読み書きするという処理をブラウザ側で行うことが出来ます
・WebGL
OpenGLの3D描画処理をjavascript経由で呼び出すことができるようになりました
canvasタグ上に3D描画します
・WebRTC
W3Cが提唱するリアルタイムコミュニケーション用のAPIの定義で、
プラグイン無しでウェブブラウザ間のボイスチャット、ビデオチャット、ファイル共有ができます。
もう少し詳しく知りたい人は以下のリンクみてください
http://www.htmq.com/api/
また、まだ完全に全てのブラウザがHTML5に対応しきれているわけではなく
PCのChrome,Firefox,Safariは大体動きますが
一部IEやスマホのブラウザなどは対応していなかったりします。