[[戻る>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日でマスターできるHTML5まとめ。>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] 1999年にHTML4.0というバージョンになった後は、しばらく動きが見られませんでした。しかし、その後もホームページを取り巻く環境は進歩を続け、HTMLの周辺部分が発展を続けるという状態が続きました。 しかし2010年、11年もの年月を経てHTMLがバージョンアップします。それがHTML5.0です。 **なぜHTML5 [#a58706fb] -話題のきっかけの1つとして、iPhoneとiPadが挙げられるでしょう。iPhoneとiPadでは、Apple社の方針によりFlashを利用することができません。RIAを実現するためには、HTML5に頼らざるを得ないのです -HTML5によってもたらされる本当のインパクトは、HTML、JavaScript、CSSといったウェブ標準のテクノロジーが、あらゆるコンピューター・アプリケーションのベースになる可能性を秘めている -ウェブ標準のスキルだけで、ネイティブ・アプリケーションと変わらないアプリケーションを製作できます。デバイスごとにネイティブ・アプリケーション向けのプログラミング言語を学ぶ必要がない -簡単に言うと、ブラウザの業界標準のHTMLにWebアプリケーションの仕様が加わったから。~ -HTMLは様々なOSで動作するクラスプラットフォームである~ // といっても、まだまだ策定される範囲は狭く、第一歩といったところ。 // JAVAも同様に言われてきたことから、 -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とHTML5の比較 [#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/~ ~ ~ ** 3Dグラフィックアプリケーション [#s468d41c] 3Dグラフィックアプリケーションを可能にするAPI、「O3D」~ 「O3D」を試すには、ChromeでPluginの導入が必要。 **YouTube も HTML5 の Videoタグで可能 [#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以降 | 主要ブラウザの対応状況 タグごとに細かく○×チェック~ その1 http://html5-css3.jp/useful/css3-html5.html~ その2 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 ~ [[戻る>Chinsan's Laboratory Colum]]