ＨＴＭＬ５

戻る

目次 †

参考 †

　　　　　参考：Wikipedia - HTML5
　　　　　参考：HTML5.jp - HTML5解説サイト
　　　　　参考：Yahoo Developers Network - HTML5とは何かを簡単にまとめてみた
　　　　　参考：CodeZine - HTML5が注目を浴びる理由とは？　ここが違う！サンプルで見るHTML5
　　　　　参考：多摩美メディアリテラシー - HTML5+CSS3 入門
　　　　　参考：HTML5でサイトを作ろう - HTML5で製作されたサイト20で現状を知る!
　　　　　参考：4Gamer.net - HTML5とJavaScriptによるアクションゲーム制作入門
　　　　　参考：1日でマスターできるHTML５まとめ。
　　　　　参考：ゲームエンジンのGameSalad、HTML5に対応
　　　　　参考：DeNAが明かすHTML5でのソーシャルゲームの作り方
　　　　　参考：わずか数秒で自分用のHTML5のテンプレート一式を作成するサービス
　　　　　参考：AdobeがHTML5のアニメーションツール『Adobe Edge』を無料で出してきた！
　　　　　参考：HTML5アニメ作成ソフト｢Hype｣登場
　　　　　参考：HTML5の勉強に役立つチートシートやリファレンスのまとめ
　　　　　参考：HTML5をはじめる人、勉強したい人用のテンプレートファイル -Easy HTML5 Template
　　　　　参考：HTML5＋CSS3時代のプログレッシブ・エンハンスメント
　　　　　参考：HTML5サイトを作ろう - WEBデザインの参考にしているまとめサイトをまとめました
　　　　　参考：SlideShareで見つけたHTML5資料まとめ
　　　　　参考：グリーに学ぶ、スマートフォン開発向けWebアプリ要素の最新技術　～HTML5、CSS3を採用したポイント
　　　　　参考：実用的なデザインがたくさん揃ってる、HTML5+CSS3ベースのフレームワーク -Perkins

HTML5 †

経緯 †

　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 †

• 話題のきっかけの1つとして、iPhoneとiPadが挙げられるでしょう。iPhoneとiPadでは、Apple社の方針によりFlashを利用することができません。RIAを実現するためには、HTML5に頼らざるを得ないのです
• HTML5によってもたらされる本当のインパクトは、HTML、JavaScript、CSSといったウェブ標準のテクノロジーが、あらゆるコンピューター・アプリケーションのベースになる可能性を秘めている
• ウェブ標準のスキルだけで、ネイティブ・アプリケーションと変わらないアプリケーションを製作できます。デバイスごとにネイティブ・アプリケーション向けのプログラミング言語を学ぶ必要がない

• 簡単に言うと、ブラウザの業界標準のHTMLにWebアプリケーションの仕様が加わったから。
  
• HTMLは様々なOSで動作するクラスプラットフォームである
  
• HTML5 が普及すれば Adobe Flash などのプラグインは不要になるという意見もある
  

2012年のWebはこう変わる †

• Webサイト同士がお互いに接続できる
• ブラウザはプッシュノティフィケーションや位置情報、アプリのオフライン化をサポート
• HTML5で何でもできるのでダウンロードして使うアプリケーションの死
• Internet ExplorerとMicrosoftは信じられないほどクールになる
• ブラウザのメーカーがアプリストアをビジネスとして開店
• 大ヒットゲームはWebGL化
• オフラインのアプリケーションキャッシュがHTML5アプリケーションの可用性とスピードを劇的に上げる
• Flashの広告にできたことは、すべてHTML5にもできるから、HTML5が広告を完全に支配するのは時間の問題
• Facebookはデスクトップとの統合がよりシームレスになる
  
• ドラッグ&ドロップ、ファイルシステムへのアクセス、写真のシンク、デスクトップ上のウィジェット。これら（＋α）の機能により、デスクトップとブラウザの境界が薄れて、ソーシャルグラフへのアクセスや利用が、デスクトップにも自然に浸透
• AppleはHTML5のサウンドをモバイルSafariでサポートしない

FlashとHTML５の比較 †

　　　　参考 - Flashだとここまでできる! HTML5とFlashの機能比較
　　　　http://clockmaker.jp/blog/2010/02/flash-vs-html5/

HTML5で可能なこと †

　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タグ一覧 †

　　http://phpjavascriptroom.com/?t=html5&p=html5_tags
　　http://www.htmq.com/html5/

グローバル属性 †

　　HTML5.jp - HTML要素 - グローバル属性 　　

HTML 要素 †

　　HTML5.jp - HTML要素 - タグ一覧

３Ｄグラフィックアプリケーション †

　　　3Dグラフィックアプリケーションを可能にするAPI、「O3D」
　　　「O3D」を試すには、ChromeでPluginの導入が必要。 　

ＹｏｕＴｕｂｅ も ＨＴＭＬ５ の Ｖｉｄｅｏタグで可能 †

位置情報はJava Scriptで取得可能 †

オンライン/オフラインの区別がなくなる †

注目のウェビーなモバイルプラットフォーム「webOS」も登場 †

　　　LinuxとWeb Kitをベースとした、スマートフォン用のソフトウエアプラットホーム

Webアプリケーションにもバックグラウンド処理 †

動画や音声、グラフィックの描画 †

• 動画を用いたい場合・・・video要素
  
• 音声を用いたい場合・・・audio要素
  
• グラフィックの描画場合・・・canvas要素
  

リスク †

• HTML5はまだ草案（まだ正式に仕様が固まっていない状態）であること
  
• HTML5はブラウザごとに実装状況が異なる
  
  • IE6・IE7ではHTML5がほぼ対応していない
  • 同じブラウザでも、バージョンごとに対応の有無がある
  • HTML5は新しいブラウザを搭載しているスマートフォンで使うのが現実的

audio要素のマークアップ例 †

<audio src="audio.mp3" controls></audio>

canvas要素のマークアップ例 †

赤く塗りつぶされた円を書く場合

<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への変更点 †

HTML5 における HTML4 からの変更点
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/

HTML5でなくなった要素 †

center、font、uなど †

centerは中央に寄せるため、fontは文字の大きさや色、uは下線を引くためのタグです。これらのタグは多くのホームページで実際に使用されていますが、どれも外見上の体裁を整えるためのものです。XHTMLでもすでにこれらの情報はCSSとして外部から設定するべきものとされており、HTML5.0ではそれがさらに厳格化されてタグそのものが消滅しました。

frame、frameset、noframes †

ホームページの領域を区切り、それぞれ独立したフレームとして処理することが出来ます。メニューを常に表示させたい場合などに便利なのですが、検索エンジンとの親和性が低く、ホームページ制作のタブーとまで言われる機能です。HTML5.0ではこのタブーが本当に消えることとなりました。

よく使用される属性 †

タグの中に使用される属性にも、よく使われているものが一部廃止されます。最も象徴的なのが、a要素などで使用されるaccesskey属性です。これは携帯電話のボタンと連動している属性で、1を指定すると携帯電話の1が押された時にリンク先へアクセスするものです。互換性や混同の問題から、HTML5.0では無くなりました。また、imgとaで使用されるnameという属性は、CSSからのスタイル定義と関連付けるためのものですが、これはidという属性を使うことが推奨されており、HTML5.0では混同を避けるために廃止されています。

ブラウザの対応状況 †

主要ブラウザの対応状況　タグごとに細かく○×チェック
その１　http://html5-css3.jp/useful/css3-html5.html
その２　http://www.htmq.com/html5/browser.shtml

caniuse.com - HTML5のブラウザの対応状況をチェックするためのサイト
http://caniuse.com/

HTML5のためのツール †

マークアップに間違いがないかどうかを確かめるため、「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

サンプル †

サンプル

http://b.hatena.ne.jp/search/tag?q=html5+%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB

戻る