Embed Size (px)
Citation preview
初めてのHTML5
2012.07.07
・自己紹介
・HTML5とは
・策定の進捗
・XHTML/HTML4.01との違い
・レイアウト
・グラフィック
・最後に
岩倉 洋平
主に大阪・香川を拠点として活動しているWeb制作業者です。SE/PGと営業しています。
所属 ： zamuu
：日本Androidの会 四国支部
Twitter ：@dr_cova
Site ：http://zamuu.net/
i w a k u r a y o h e i
HTML5とは
WhatwgとW3Cが策定を進めている次世代の
HTMLです。
今までのHTML4に対し、新たなタグが追加され
たり、非推奨となったり。
HTML5とは
HTML5とは
HTML5
CSS3
JQuery
PC/Phone
Browser
HTMLを取り巻く要素
…とこれは『狭義のHTML5』
HTML5とは
今までのマークアップ言語は言語そのものの定
義という役割で収まっていました。
もう１つ『広義のHTML5』というものがありま
す。
HTML5とは
カメラ・マイク・各種センサーへのデバイスアクセス
データストレージ
通信制御（ソケット）
マルチメディア（ビデオ・オーディオ）
(まだまだありますが、代表的なAPI機能を記載)
広義のHTML5・・・
HTML5とは
夢が広がりませんか？
HTMLでデバイス制御ができるとか
HTML5とは
百聞は一見にしかず
HTMLでカメラ制御
(OperaMobile)
<!DOCTYPE html><h1>Simple web camera display demo</h1><video autoplay></video><script type="text/javascript">var video = document.getElementsByTagName('video')[0], heading = document.getElementsByTagName('h1')[0];if(navigator.getUserMedia) { navigator.getUserMedia('video', successCallback, errorCallback); function successCallback( stream ) { video.src = stream; } function errorCallback( error ) { heading.textContent = "An error occurred: [CODE " + error.code + "]"; }} else { heading.textContent = "Native web camera streaming is not supported in this browser!";}</script>
策定の進捗
2008年1月 HTML5 草案第1版
2011年5月 HTML5 最終草案
正式勧告は・・・最新技術がいいでしょ！
冷静に考えたらHTML5って
まだ早すぎなんじゃない？
2年後の2014年を目指しているそうです。
そりゃないぜ～
フライング失格のボ〇ト
XHTML1.1/HTML4.01との違い
Webサイト・Webアプリケーション・スマホアプリそれぞれ、環
境条件が違います。ここでは変更点を見ながら、HTML5をどのよ
うに対応したらよいか考えてみたいと思います。
HTML5との大きな違いとして、そのHTMLのDOC宣言部分が良
くとりあげられます。
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja"><head profile="http://gmpg.org/xfn/11"><title>タイトル</title></head>
<body>XHTML1.0です</body></html>
<!DOCTYPE html><html dir="ltr" lang="ja"><head><title>タイトル</title>
</head><body>HTML5です</body></html>
DOCTYPEが簡素化されます。
<!DOCTYPE html>
先頭がこのタグだったらHTML5と考えてよいと
思います。Web系やHTMLに弱くてもここは押
さえておきましょう。
XHTML1.1/HTML4.01との違い
- レイアウト -
HTML5の中でも狭義の定義(マークアップ言語)として代表的なタ
グの紹介をします。
<header> <hgroup> <nav><section><footer>
その他、代表的な追加タグを記載します。
表示上は同じでも、タグがより明確に役割を宣
言するようになりました。
HTML5では、サイトを見る側（人・検索ボッ
ト）などにとって読みやすいようになっていま
す。
SEO対策を気にするようなWeb制作時には、よ
り優位になると推測できます。
ブラウザの下位互換はどのようになるので
しょうか？
HTML5でサ
イト作って～♪
お任せください！
え、非対応ブラウザなの!? IE8
HTML5でマークアップしただけのサイト
メニューに<nav>が適用され<li>が崩れています。
下位互換表示用にhtml5.jsというライブラリを
紹介します。
「html5.js」を読込んだサイト
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
もう１つサイト制作でよく使うタグ類がありま
す。問合せフォーム等の<input>タグです。こち
らも種類が増えています。
date、datetime、datetime-local、month、week、time、number、range、
search、tel、url、email、color
入力Validatorをブラウザが勝手に行ってくれる
ので非常に楽です。
…が、これらinput typeは未実装のブラウザがあ
ります。
サイト制作において、レイアウトはHTML5の追
加タグを使用していった方がSEO対策としても
優位に働いてくれそうです。が、フォームにつ
いては現状のHTML4.01などと同様のままの方
がよいと考えます。
XHTML1.1/HTML4.01との違い
- グラフィック -
追加タグの中でもマルチメディア関連も目立つ
のですが、もう１つサイト制作において使用し
そうなのがグラフ描画などの<canvas>タグです。
今までグラフ専用ライブラリ使用して
ませんでしたか？
<canvas>タグで囲まれた中に
JavaScriptで線や円が描けます。
既にJSライブラリ化され、グラフ描画
も比較的楽に描けるようになっていま
す。
たのしい<canvas>
スマートフォン
HTML5が取り上げられるもう1つの要素
１．
ブラウザによってはレイアウト崩れや表示されないなど、未サ
ポートであるタグも多々見受けられます。ただ、Web業界におい
てはこれからの動向を考えると(SEOの観点からも)、互換性を考慮
しながらできるだけ導入した方が賢明だと考えます。
２．
デバイス連携やグラフィックなどのサポートにより、Web制作業
者、システム業者ともにJavaScriptの重要性がより高まり、要望も
増えて死ねる 夢が広がります。
ご清聴ありがとうございまし
た。
