戻る



目次


参考

     参考:Wikipedia - HTML5
     参考:HTML5.jp - HTML5解説サイト
     参考:Yahoo Developers Network - HTML5とは何かを簡単にまとめてみた
     参考:CodeZine - HTML5が注目を浴びる理由とは? ここが違う!サンプルで見るHTML5
     参考:多摩美メディアリテラシー - HTML5+CSS3 入門
     参考:HTML5でサイトを作ろう - HTML5で製作されたサイト20で現状を知る!
     参考:4Gamer.net - HTML5とJavaScriptによるアクションゲーム制作入門
     参考:1日でマスターできるHTML5まとめ。
     参考:ゲームエンジンの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とHTML5の比較

    参考 - 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グラフィックアプリケーション

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

YouTube も HTML5 の Videoタグで可能

位置情報は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では混同を避けるために廃止されています。

ブラウザの対応状況

 主要ブラウザのHTML5対応バージョン   
 Internet Explorer  Internet Explorer 8 以降 
 Firefox  Firefox 3.1以降 
 Opera  Opera 9.6以降 
 Safari  Safari 3.0以降 

主要ブラウザの対応状況 タグごとに細かく○×チェック
その1 http://html5-css3.jp/useful/css3-html5.html
その2 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


戻る


Wiki TOP   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS