- 追加された行はこの色です。
- 削除された行はこの色です。
#freeze
[[戻る>Chinsan's Laboratory Colum]]
~
~
**目次 [#d7bf5b68]
#contents
~
**参考 [#c0e8ee6c]
[[参考：Wikipedia - HTML5>http://ja.wikipedia.org/wiki/HTML5]]~
[[参考：HTML5.jp - HTML5解説サイト>http://www.html5.jp/]]~
[[参考：Yahoo Developers Network - HTML5とは何かを簡単にまとめてみた>http://techblog.yahoo.co.jp/cat207/web_1/html5/]]~
[[参考：CodeZine - HTML5が注目を浴びる理由とは？ ここが違う！サンプルで見るHTML5>http://codezine.jp/article/detail/5597]]~
[[参考：多摩美メディアリテラシー - HTML5+CSS3 入門>http://yoppa.org/taumedia10/1695.html]]~
[[参考：HTML5でサイトを作ろう - HTML5で製作されたサイト20で現状を知る!>http://www.html5-memo.com/html5-site/links/]]~
[[参考：4Gamer.net - HTML5とJavaScriptによるアクションゲーム制作入門>http://www.4gamer.net/games/032/G003263/20110428001/]]~
[[参考：1日でマスターできるHTML５まとめ。>http://matome.naver.jp/odai/2130703450443574201]]~
[[参考：ゲームエンジンのGameSalad、HTML5に対応>http://www.gamebusiness.jp/article.php?id=3906]]~
[[参考：DeNAが明かすHTML5でのソーシャルゲームの作り方>http://www.gamebusiness.jp/article.php?id=2919]]~
[[参考：わずか数秒で自分用のHTML5のテンプレート一式を作成するサービス>http://coliss.com/articles/web-services/online-generator-html5-temple-initializr.html]]~
[[参考：AdobeがHTML5のアニメーションツール『Adobe Edge』を無料で出してきた！>http://www.ideaxidea.com/archives/2011/08/adobeedge.html]]~
[[参考：HTML5アニメ作成ソフト｢Hype｣登場>http://techwave.jp/archives/51665607.html]]~
[[参考：HTML5の勉強に役立つチートシートやリファレンスのまとめ>http://coliss.com/articles/build-websites/operation/work/cheat-sheets-for-html5.html]]~
[[参考：HTML5をはじめる人、勉強したい人用のテンプレートファイル -Easy HTML5 Template>http://coliss.com/articles/build-websites/operation/work/html5-template-by-impressivewebs.html]]~
[[参考：HTML5＋CSS3時代のプログレッシブ・エンハンスメント>http://www.atmarkit.co.jp/fwcr/design/tool/ichigeki15/01.html]]~
[[参考：HTML5サイトを作ろう - WEBデザインの参考にしているまとめサイトをまとめました>http://www.html5-memo.com/design/design-matome/]]~
[[参考：SlideShareで見つけたHTML5資料まとめ>http://20kaido.com/archives/2266374.html]]~
[[参考：グリーに学ぶ、スマートフォン開発向けWebアプリ要素の最新技術 ～HTML5、CSS3を採用したポイント>http://codezine.jp/article/detail/5747]]~
[[参考：実用的なデザインがたくさん揃ってる、HTML5+CSS3ベースのフレームワーク -Perkins>http://coliss.com/articles/build-websites/operation/work/html5-and-css3-framework-perkins.html]]
~
~
*HTML5 [#g7d49b4d]
**経緯 [#g8169c63]
1999年にHTML4.0というバージョンになった後は、しばらく動きが見られませんでした。しかし、その後もホームページを取り巻く環境は進歩を続け、HTMLの周辺部分が発展を続けるという状態が続きました。しかし2010年、11年もの年月を経てHTMLがバージョンアップします。それがHTML5.0です。~
HTML5 は WHATWG によって2004年に定められた Web Applications 1.0 に Web Forms 2.0 を取り入れたものが W3C の専門委員会に採用され、W3C より2008年1月22日にドラフト（草案）が発表された。現在、2014年までの正式勧告を目指して策定が行われている
**なぜHTML5 [#a58706fb]
-簡単に言うと、ブラウザの業界標準のHTMLにWebアプリケーションの仕様が加わったから。~
-HTMLは様々なOSで動作するクラスプラットフォームである~
-話題のきっかけの1つとして、iPhoneとiPadが挙げられるでしょう。iPhoneとiPadでは、Apple社の方針によりFlashを利用することができません。RIAを実現するためには、HTML5に頼らざるを得ないのです
-HTML5によってもたらされる本当のインパクトは、HTML、JavaScript、CSSといったウェブ標準のテクノロジーが、あらゆるコンピューター・アプリケーションのベースになる可能性を秘めている
-ウェブ標準のスキルだけで、ネイティブ・アプリケーションと変わらないアプリケーションを製作できます。デバイスごとにネイティブ・アプリケーション向けのプログラミング言語を学ぶ必要がない
-簡単に言うと、ブラウザの業界標準のHTMLにWebアプリケーションの仕様が加わったから。~
-HTMLは様々なOSで動作するクラスプラットフォームである~
// といっても、まだまだ策定される範囲は狭く、第一歩といったところ。
// JAVAも同様に言われてきたことから、
-HTML5 が普及すれば Adobe Flash などのプラグインは不要になるという意見もある~
-HTML5 が普及すれば Adobe Flash などのプラグインは不要になるという意見もある~
~
**[[2012年のWebはこう変わる>http://jp.techcrunch.com/archives/20111221guide-to-html5-14-predictions-2012/]] [#uf1abb78]
-Webサイト同士がお互いに接続できる
-ブラウザはプッシュノティフィケーションや位置情報、アプリのオフライン化をサポート
-HTML5で何でもできるのでダウンロードして使うアプリケーションの死
-Internet ExplorerとMicrosoftは信じられないほどクールになる
-ブラウザのメーカーがアプリストアをビジネスとして開店
-大ヒットゲームはWebGL化
-オフラインのアプリケーションキャッシュがHTML5アプリケーションの可用性とスピードを劇的に上げる
-Flashの広告にできたことは、すべてHTML5にもできるから、HTML5が広告を完全に支配するのは時間の問題
-Facebookはデスクトップとの統合がよりシームレスになる~
-ドラッグ&ドロップ、ファイルシステムへのアクセス、写真のシンク、デスクトップ上のウィジェット。これら（＋α）の機能により、デスクトップとブラウザの境界が薄れて、ソーシャルグラフへのアクセスや利用が、デスクトップにも自然に浸透
-AppleはHTML5のサウンドをモバイルSafariでサポートしない
~
** FlashとHTML５の比較 [#h21daa9c]
参考 - Flashだとここまでできる! HTML5とFlashの機能比較~
http://clockmaker.jp/blog/2010/02/flash-vs-html5/
~
~
*HTML5で可能なこと [#l01d5f4b]
W3C の HTML5 Logo では以下のカテゴリを HTML5 に含めている。
-セマンティックス - HTML5の新タグ、RDFa、マイクロデータ、マイクロフォーマット
-オフラインとストレージ - App Cache、Web Storage、Indexed Database、File API
-デバイスアクセス - Geolocation API、マイク・カメラ、アドレス帳・カレンダー、端末の向き
-接続性 - WebSocket、Server-Sent Event
-マルチメディア - audio, video要素
-3D、グラフィックス、エフェクト - SVG、canvas要素、WebGL、CSS3 3D
-パフォーマンスと統合 - Web Workers、XMLHttpRequest Level 2
-CSS3 - WOFFも含む
~
~
*HTML5タグ一覧 [#x8b4a6ce]
http://phpjavascriptroom.com/?t=html5&p=html5_tags~
http://www.htmq.com/html5/~
**グローバル属性 [#h55579a4]
[[HTML5.jp - HTML要素 - グローバル属性>http://www.html5.jp/tag/attributes/index.html]]
**HTML 要素 [#qa2683e5]
[[HTML5.jp - HTML要素 - タグ一覧>http://www.html5.jp/tag/elements/index.html]]
~
~
** ３Ｄグラフィックアプリケーション [#s468d41c]
3Dグラフィックアプリケーションを可能にするAPI、「O3D」~
「O3D」を試すには、ChromeでPluginの導入が必要。
**ＹｏｕＴｕｂｅ も ＨＴＭＬ５ の Ｖｉｄｅｏタグで可能 [#u671d376]
**位置情報はJava Scriptで取得可能 [#qb83636e]
**オンライン/オフラインの区別がなくなる [#j940378d]
**注目のウェビーなモバイルプラットフォーム「webOS」も登場 [#j1a9c69d]
LinuxとWeb Kitをベースとした、スマートフォン用のソフトウエアプラットホーム
**Webアプリケーションにもバックグラウンド処理 [#w050f6a7]
~
~
~
~
~
~
~
**動画や音声、グラフィックの描画 [#wa1e33b3]
-動画を用いたい場合・・・video要素~
-音声を用いたい場合・・・audio要素~
-グラフィックの描画場合・・・canvas要素~
**リスク [#q048431b]
-HTML5はまだ草案（まだ正式に仕様が固まっていない状態）であること~
-HTML5はブラウザごとに実装状況が異なる~
--IE6・IE7ではHTML5がほぼ対応していない
--同じブラウザでも、バージョンごとに対応の有無がある
--HTML5は新しいブラウザを搭載しているスマートフォンで使うのが現実的
**audio要素のマークアップ例 [#l0b7bc49]
<audio src="audio.mp3" controls></audio>
**canvas要素のマークアップ例 [#p09e8629]
赤く塗りつぶされた円を書く場合
<canvas width="300" height="150"></canvas>
<script>
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.beginPath();
context.arc(150, 75, 50, 0, Math.PI*2, true);
context.fill();
</script>
*HTML4からHTML5への変更点 [#c5f3440e]
HTML5 における HTML4 からの変更点~
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/
**HTML5でなくなった要素 [#h49dfd60]
***center、font、uなど [#xbbcaffc]
centerは中央に寄せるため、fontは文字の大きさや色、uは下線を引くためのタグです。これらのタグは多くのホームページで実際に使用されていますが、どれも外見上の体裁を整えるためのものです。XHTMLでもすでにこれらの情報はCSSとして外部から設定するべきものとされており、HTML5.0ではそれがさらに厳格化されてタグそのものが消滅しました。
***frame、frameset、noframes [#vfec815f]
ホームページの領域を区切り、それぞれ独立したフレームとして処理することが出来ます。メニューを常に表示させたい場合などに便利なのですが、検索エンジンとの親和性が低く、ホームページ制作のタブーとまで言われる機能です。HTML5.0ではこのタブーが本当に消えることとなりました。
***よく使用される属性 [#ne2ff338]
タグの中に使用される属性にも、よく使われているものが一部廃止されます。最も象徴的なのが、a要素などで使用されるaccesskey属性です。これは携帯電話のボタンと連動している属性で、1を指定すると携帯電話の1が押された時にリンク先へアクセスするものです。互換性や混同の問題から、HTML5.0では無くなりました。また、imgとaで使用されるnameという属性は、CSSからのスタイル定義と関連付けるためのものですが、これはidという属性を使うことが推奨されており、HTML5.0では混同を避けるために廃止されています。
*ブラウザの対応状況 [#y4317661]
|~ 主要ブラウザのHTML5対応バージョン |~ |
| Internet Explorer | Internet Explorer 8 以降 |
| Firefox | Firefox 3.1以降 |
| Opera | Opera 9.6以降 |
| Safari | Safari 3.0以降 |
主要ブラウザの対応状況 タグごとに細かく○×チェック~
その１ http://html5-css3.jp/useful/css3-html5.html~
その２ http://www.htmq.com/html5/browser.shtml~
caniuse.com - HTML5のブラウザの対応状況をチェックするためのサイト~
http://caniuse.com/
*HTML5のためのツール [#v99d6f55]
マークアップに間違いがないかどうかを確かめるため、「W3C Markup Validation Service」を用いて検証~
http://validator.w3.org/
~
HTML5 API チェッカー~
http://www.html5.jp/tutorial/apicheck/index.html
~
HTML5 Please - HTML5の対応状況をチェックするためのサイト~
http://html5please.com/
The HTML5 Test - HTML5の対応状況をチェックするためのサイト~
http://www.html5test.com/
The CSS3 Test - CSS3の対応状況をチェックするためのサイト~
http://css3test.com/
Another HTML Lint 5 - HTML構文が正しいかチェックするサイト~
http://www.htmllint.net/ （終了した？）~
http://htmllint.info/htmllint/htmllint.html~
http://potato.2nd-half.jp/tips/html5/html5validatornu_xhtml5_validator.php
*サンプル [#he951538]
[[サンプル>http://www.google.co.jp/search?q=html5&ie=utf-8&oe=utf-8&aq=t&hl=ja#hl=ja&q=html5%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB&revid=229564600&sa=X&ei=EGQaUMfLLMLKmQXn8IDQDA&ved=0CFwQ4QIoAQ&bav=on.2,or.r_gc.r_pw.r_qf.&fp=bb4d84bb49ea3323&biw=1024&bih=681]]
http://b.hatena.ne.jp/search/tag?q=html5+%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB
~
[[戻る>Chinsan's Laboratory Colum]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
