1. メディア芸術基礎 II
HTML5とは何か?
HTML5、はじめの一歩
2013年9月9日、9月16日
多摩美術大学情報デザイン学科メディア芸術コース
担当：田所淳

2. 今日の内容
‣ オンラインポートフォリオ、再講評
‣ この授業でとりあげるHTML5に至る歴史的な経緯の整理
‣ HTML5とは何なのか?
‣ 実例の紹介
‣ HTML5最初の一歩
‣ HTML5で導入されたの新しい要素でWebページを作成
‣ HTML5のページをCSSでレイアウト
‣ CSS3を使用して、様々なデザイン効果を加える

3. オンラインポートフォリオ再講評

4. オンラインポートフォリオ再講評
‣ 以下の項目を確認しながら、みなさんのオンラインポートフォ
リオを順番に見ていきます!
‣ 授業で制作した作品は、全てオンライン・ポートフォリオで閲
覧できるように
‣ 大学の授業以外で作成した作品も積極的に掲載
‣ 著作権的に問題のある素材(他人の写真、CDからリッピングし
た音楽)などは全て削除
‣ リンク切れのメニューなどはないように

5. 「HTML5」とは何か?

6. HTML5とは何か?
‣ HTMLの新バージョン、HTML5とは何なのか?

7. HTML5とは何か?
‣ HTMLのテクノロジの変遷
‣ 1991 - HTML
‣ 1994 - HTML2
‣ 1996 - CSS1 + JavaScript
‣ 1997 - HTML4
‣ 1998 - CSS2
‣ 2000 - XHTML1
‣ 2005 - Ajax (Asynchronous JavaScript + XML)
‣ 2009 - HTML5

8. HTML5とは何か?
‣ 参考：HTML5までに至るバージョンの変遷

9. ‣ 最大の変化をひとことで言うと…
‣ Web「文書」から「アプリケーションへ」
HTML5とは何か?
文書
メーラー、地図、
ムービープレーヤー、
スケジューラー など

10. HTML5とは何か?
‣ 例：Google+

11. HTML5とは何か?
‣ 例：ブラウザやウェブについて知っておきたい20のこと
‣ http://www.20thingsilearned.com/ja-JP

12. HTML5とは何か?
‣ The Evolution of Web - Webの進化
‣ http://www.evolutionoftheweb.com/

13. HTML5とは何か?
‣ 厳密に定義は、いろいろな意見が…
‣ 参考：どこまでがHTML5なの？
‣ http://www.publickey1.jp/blog/10/html5_9.html

14. 広義のHTML5と狭義のHTML5
‣ この授業では「広義のHTML5」をHTML5として解説します
‣ Webアプリケーションを実現するための技術全般として
広義のHTML5
狭義のHTML5

15. HTML5の主な機能
‣ (広義の) HTML5の主な機能
‣ http://www.w3.org/html/logo/#the-technology
‣ セマンティクス
‣ オフラン、ストレージ
‣ デバイスアクセス
‣ コネクティビティー
‣ マルチメディア
‣ グラフィクス、エフェクト
‣ パフォーマンス、インテグレーション
‣ CSS3

16. ‣ セマンティクス(意味)によるマークアップ
‣ 様々な新要素の追加
‣ <section>, <header>, <footer>, <nav>, <article>, <aside>,
<figure>, <mark>, <time>, <video>, <audio> etc...
セマンティクス

17. セマンティクス
‣ 意味構造の記述の変化
body
div id="header"
div id="footer"
div
id="sidebar"
div id="content"
div class="article"
div class="article"
body
header
footer
nav section
article
article
HTML4 HTML5

18. オフライン & ストレージ
‣ PCだけでなくタブレットやモバイル端末が重要となった今、
常にネットワークに接続されているとは限らない
‣ ネットワークがオフラインでもページを閲覧できる仕組み
‣ ブラウザ側にデータを蓄積する
‣ オフラインでも使用可能なWebアプリを構築可能

19. ‣ デモ：WebStorageタイマー - 最初に開いた時間を記憶
オフライン & ストレージ

20. デバイスアクセス
‣ 様々なデバイスが活用可能に
‣ Geolocation：希望すれば自身の場所を web アプリケーション
に通知することができるように
‣ カメラ入力 / 音声入力
‣ 映像や音声によるコントロール

21. ‣ Geolocationデモ (iPadからアクセスした状態)
‣ http://html5demos.com/geo
デバイスアクセス

22. ‣ ファイルアクセス - Drag & Dropでファイルを追加するなど
‣ http://studio.html5rocks.com/#Photos
デバイスアクセス

23. コネクティビティー
‣ サーバーとのより効率的な接続
‣ リアルタイムに双方向通信を実現
‣ チャット
‣ オンラインゲーム
‣ ...etc.
リクエスト
プッシュ!
クライアント サーバー
プッシュ!
プッシュ!

24. コネクティビティー
‣ scrumblr. http://scrumblr.ca/
‣ ホワイトボードを共有しながら、みんなでブレスト

25. ‣ WebGL水族館
‣ WebSocketを利用して、複数台のマシンのブラウザを同期
‣ http://www.youtube.com/watch?v=64TcBiqmVko&feature=fvsr
コネクティビティー

26. マルチメディア
‣ オーディオやビデオの取り扱いが容易に!!
‣ Webアプリの中に映像や音楽を盛り込める
‣ 細かなカスタマイズも

27. ‣ ビデオ映像にリアルタイムにマスク処理
‣ http://www.apple.com/html5/showcase/video/
マルチメディア

28. マルチメディア
‣ The Conductor http://www.mta.me/
‣ ブラウザで音を奏でる作品

29. 3D、グラフィクス、エフェクト
‣ 2D、3D、ベクターデータなど様々な形式の画像を表示
‣ Canvas：2Dグラフィクス、アニメーション
‣ WebGL：ブラウザ上で、3Dグラフィクスを表示
‣ SVG：ベクターデータ

30. ‣ Canvas 2Dによるアニメーションのデモ
‣ http://yoppa.org/blog/2683.html
3D、グラフィクス、エフェクト

31. ‣ Magic dust http://mrdoob.com/144/magic_dust
3D、グラフィクス、エフェクト

32. 3D、グラフィクス、エフェクト
‣ Chrysaora http://chrysaora.com/

33. ‣ CSSの表現力が、より豊かに
‣ Webfonts、コラム、透明度、角丸、グラデーション、ドロッ
プシャドウ、反射、トランジション(アニメーション)、回転・
移動、
‣ HTML Rocks - CSS3
CSS3、スタイリング

34. ‣ CSS3 Playgound - CSS3の実験場
‣ http://css3.mikeplate.com/
CSS3、スタイリング

35. パフォーマンス、インテグレーション
‣ Webアプリを高速化する様々な技術
‣ Web Workers：ブラウザ上で並列処理
‣ CSSのセレクタの進化
‣ ブラウザのヒストリ情報を操作 ...etc
‣ Webアプリをより高速に、快適にするための基礎技術の発展

36. Chrome Experiments #500
‣ http://500.chromeexperiments.com/
‣ Chrome Experimentsにピックアップされた500のサイト

37. まとめ
‣ HTML5の普及によってWebのユーザ体験は大きく変化する
‣ Webブラウザ自体がアプリケーションのプラットフォームへ
‣ ブラウザがOSに - Chrome OS
‣ 「Web表現」に求められるスキルも時代とともに変化
‣ この授業では、新たな技術を積極的に活用して、表現する手法
について学んでいきたい

38. HTML5 はじめの一歩

39. HTML5 はじめの一歩
‣ HTML5から導入された新しい要素を使用して、HTML5のペー
ジを作成してみる
‣ CSSで作成したHTML5のページを構造に即してレイアウト
‣ CSS3に導入された様々な表現手法を試してみる

40. HTML5 はじめの一歩
‣ 作成するページのイメージ
‣ 上下にヘッダーとフッター、左にナビゲーション右に複数記事
からなるメインコンテンツ

41. HTML5 はじめの一歩
‣ HTML5以前 (HTML4、XHTML1) でのやりかた
‣ div要素を使用して、ページを構造の単位ごとに分割
‣ それぞれのdiv要素にid属性、またはclass属性を付与
‣ 属性の名前から、CSSからそれぞれの要素へアクセス
‣ CSSでレイアウトや個別のデザインを記述

42. HTML5 はじめの一歩
‣ HTML5以降では、意味(セマンティクス)によるマークアップが
可能となる
‣ HTML5のページの構造を指定する要素
‣ section: 本の一部あるいは章、章のセクション、あるいは
基本的に HTML 4 で独自の見出しを持つすべてのもの
‣ header: ページに表示されるページ・ヘッダー、head 要素
とは全く意味合いが違うので注意
‣ footer: 細かい文字での説明が入るページ・フッター、
Email・メッセージの署名などが入る
‣ nav: 他のページへのリンクの集まり
‣ article: ブログや Web マガジン、一覧記事などに掲載され
ている個々のエントリー

43. HTML5 はじめの一歩
‣ HTML4、XHTML1でのマークアップ

44. HTML5 はじめの一歩
‣ HTML5ではこうなる!

45. HTML5 はじめの一歩
‣ 実際にHTML5を記述するための雛形を用意する
<!DOCTYPE html>
<html lang="ja">
! <head>
! ! <meta charset="utf-8" />
! ! <title>HTML5とCSS3によるページサンプル</title>
! </head>
! <body>
! ! <h1>HTML5 + CSS3, Layout Sample</h1>
! ! <h2>Media Literacy 2011, Tama Art University</h2>
! ! <ul>
! ! ! <li><a href="#">Home</a></li>
! ! ! <li><a href="#">Menu 1</a></li>
! ! ! <li><a href="#">Menu 2</a></li>
! ! ! <li><a href="#">Menu 3</a></li>
! ! </ul>
! ! <h2>このサイトについて</h2>
! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら…</p>
! ! <h3>HTML5とCSS3による豊かな表現</h3>
! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら…</p>
! ! <h2>さらに別の記事</h2>
! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら…</p>

46. HTML5 はじめの一歩
‣ 実際にHTML5を記述するための雛形を用意する (つづき)
! ! <h2>Navigation</h2>
! ! <ul>
! ! ! <li><a href="#">example 1 </a></li>
! ! ! <li><a href="#">example 2 </a></li>
! ! ! <li><a href="#">example 3 </a></li>
! ! ! <li><a href="#">example 4 </a></li>
! ! ! <li><a href="#">example 5 </a></li>
! ! ! <li><a href="#">example 6 </a></li>
! ! ! <li><a href="#">example 7 </a></li>
! ! ! <li><a href="#">example 8 </a></li>
! ! </ul>
! ! <p>This site is licensed under a Creative Commons License.</p>
! </body>
</html>

47. HTML5 はじめの一歩
‣ このページの構造
‣ ヘッダー
‣ 大見出し h1
‣ 中見出し h2
‣ ヘッダーメニュー ul, li
‣ セクション
‣ 記事
‣ 大見出し h1
‣ 段落 p
‣ 中見出し h2
‣ 段落 p
‣ 記事
‣ 大見出し h1
‣ 段落 p
‣ ナビゲーション
‣ 大見出し h1
‣ ナビゲーションメニュー ul, li
‣ フッター
‣ 段落

48. HTML5 はじめの一歩
‣ ブラウザで表示

49. HTML5 はじめの一歩
‣ このページをHTML5に書き換えていく
‣ 意味の構造(セマンティクス)をHTML5でマークアップ
‣ ヘッダー → header要素
‣ 見出しのまとまり → hgroup要素
‣ 個別の記事 → article要素
‣ ナビゲーション → nav要素
‣ フッター → footer要素

50. HTML5 はじめの一歩
‣ HTML5で構造化したサンプル
<!DOCTYPE html>
<html lang="ja">
! <head>
! ! <meta charset="utf-8" />
! ! <title>HTML5とCSS3によるページサンプル</title>
! ! <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
! </head>
! <body>
! ! <header>
! ! ! <hgroup>
! ! ! ! <h1>HTML5 + CSS3, Layout Sample</h1>
! ! ! ! <h2>Media Literacy 2011, Tama Art University</h2>
! ! ! </hgroup>
! ! ! <ul>
! ! ! ! <li><a href="#">Home</a></li>
! ! ! ! <li><a href="#">Menu 1</a></li>
! ! ! ! <li><a href="#">Menu 2</a></li>
! ! ! ! <li><a href="#">Menu 3</a></li>
! ! ! </ul>
! ! </header>
! ! <div id="main">
! ! ! <article>
! ! ! ! <h1>このサイトについて</h1>
! ! ! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさを…</p>
! ! ! ! <h2>HTML5とCSS3による豊かな表現</h2>
! ! ! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさを…</p>

51. HTML5 はじめの一歩
‣ HTML5で構造化したサンプル (つづき)
! ! ! </article>
! ! ! <article>
! ! ! ! <h1>さらに別の記事</h1>
! ! ! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさを…</p>
! ! ! </article>
! ! </div>
! ! <nav>
! ! ! <h1>Navigation</h1>
! ! ! <ul>
! ! ! ! <li><a href="#">example 1 </a></li>
! ! ! ! <li><a href="#">example 2 </a></li>
! ! ! ! <li><a href="#">example 3 </a></li>
! ! ! ! <li><a href="#">example 4 </a></li>
! ! ! ! <li><a href="#">example 5 </a></li>
! ! ! ! <li><a href="#">example 6 </a></li>
! ! ! ! <li><a href="#">example 7 </a></li>
! ! ! ! <li><a href="#">example 8 </a></li>
! ! ! </ul>
! ! </nav>
! ! <footer>
! ! ! <p>This site is licensed under a Creative Commons License</p>
! ! </footer>
! </body>
</html>

52. HTML5 はじめの一歩
‣ HTML5で構造化したページをブラウザで開いてみる
‣ …見た目には変化なし → 何故か?
‣ HTML5の構造化要素は文章の区分をマークアップするだけ
‣ 意味構造を受けて、どのようにレイアウトするのかは、いまま
でのHTMLと同様にスタイルシートを使用

53. HTML5 はじめの一歩
‣ CSSを適用するためhead要素に追加
‣ CSSへのリンクを記述：style.css
‣ Internet Explorer対策
‣ IEのHTML5対応はあまり良くない…
‣ IE対策のために、html5shimというIEをHTML 5に対応させる
ためのJavaScript (html5.js) を利用
‣ http://code.google.com/p/html5shim/

54. HTML5 はじめの一歩
‣ head要素は以下のようになる
<!DOCTYPE html>
<html lang="ja">
! <head>
! ! <meta charset="utf-8" />
! ! <title>HTML5とCSS3によるページサンプル</title>
! ! <!--[if lt IE 9]>
! ! <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
! ! <![endif]-->
! ! <link rel="stylesheet" href="style.css" />
! ! <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
! ! ! </head>
! <!-- 以下省略 -->

55. HTML5 はじめの一歩
‣ ページのレイアウトをCSSで記述
body {
width:960px;
margin:20px auto;
}
header, nav, footer, #main {
display:block;
border:1px solid #ccc;
margin:5px;
padding:20px;
}
header {
text-align:center;
padding:30px;
}
header ul, header li {
list-style-type:none;
display:inline;
}
nav {
float:right;
width:236px;
}

56. HTML5 はじめの一歩
‣ ページのレイアウトをCSSで記述 (つづき)
#main {
float:right;
width:620px;
}
footer {
clear:both !important;
text-align: center;
}

57. HTML5 はじめの一歩
‣ ブラウザで確認してみる!

58. HTML5 はじめの一歩
‣ CSS3の視覚効果を利用する
‣ CSS3では、以前のバージョンに比べて大幅に機能が強化
‣ Webfonts、コラム、透明度、角丸、グラデーション、ドロッ
プシャドウ、反射、トランジション(アニメーション)、回転・
移動、
‣ HTML Rocks - CSS3

59. ‣ CSS3 Playgound - CSS3の実験場
‣ http://css3.mikeplate.com/
HTML5 はじめの一歩
Text

60. HTML5 はじめの一歩
‣ CSS3を活用してみる (1 / 6)
body {
background:#aaa;
font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif;
color:#000;
margin:20px auto;
text-align:center;
line-height:1.5em;
width:960px;
}
h1, h2, h3, h4, h5, h6 {
font-family:"Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
font-weight:lighter;
}
a:link, a:visited {
color:#c00;
text-decoration:none;
}
a:hover {
color:#0cc;
}
header, nav, #main, footer {
display:block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 0px 4px #666;

61. HTML5 はじめの一歩
‣ CSS3を活用してみる (2 / 6)
-moz-box-shadow: 0px 0px 4px #666;
box-shadow: 0px 0px 4px #666;
border: 1px solid #d3d3d3;
background-color: #fff;
margin:5px;
padding: 0 20px 10px 20px;
font-size: 12pt;
color: #000;
text-align: left;
}
header {
text-align:center;
padding:30px;
background-image: -moz-linear-gradient(top, #888, #333);
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.0, #888), color-stop(1.0, #333));
background-color: #444;
border:none;
color:#fff;
text-shadow: 0px 0px 4px #000000;
}
header h1, header h2, header h3, header h4, header h5, header h6, header
li, header p {
font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif;
}

62. HTML5 はじめの一歩
‣ CSS3を活用してみる (3 / 6)
header h1 {
font-size:2.3em;
text-transform:none;
letter-spacing:0em;
}
header h2 {
margin:-10px 0px 20px;
font-size:1.3em;
}
header ul {
padding:0px;
list-style-type:none;
display:inline;
}
header li {
margin:0px 10px;
padding:0px;
list-style-type:none;
display:inline;
}
header a:link, nav a:visited {
font-weight:normal;
}

63. HTML5 はじめの一歩
‣ CSS3を活用してみる (4 / 6)
nav {
float:right;
width:200px;
}
nav h1 {
font-size:1.4em;
}
#main {
float:right;
width:656px;
text-align:left;
margin-bottom:10px;
}
#main h1, nav h1 {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color:#444;
color:#fff;
padding:10px;
margin:10px -10px;
text-shadow:1px 1px 5px #000;
}

64. HTML5 はじめの一歩
‣ CSS3を活用してみる (5 / 6)
#main ul {
padding:0px;
list-style:none;
border-top:1px solid #e7e2d7;
margin:14px 0px;
}
#main li {
margin:0px;
padding:0px;
list-style:none;
}
#main li a:link, #main li a:visited {
float:left;
width:96%;
padding:3px 1%;
border-bottom:1px solid #e7e2d7;
}
#main li a:hover {
background:#f2f1ec;
}
#main p {
font-size:0.9em;
}
article {
margin:0 0 30px 0;
}

65. HTML5 はじめの一歩
‣ CSS3を活用してみる (5 / 6)
footer {
clear:both !important;
padding:10px;
background-color: #444;
border:none;
color:#fff;
font-size:0.8em;
text-align:center;
}
footer a {
margin:0px 5px;
}

66. HTML5 はじめの一歩
‣ CSS3を適用した結果!!

67. HTML5 はじめの一歩
‣ まとめ
‣ 今回の授業、HTML5とCSS3の導入
‣ 構造化のための新要素を利用
‣ HTMLに意味要素を与え、それを利用してCSS3でレイアウトや
デザインを行う方法
‣ しかし、HTML5 で可能となったことはより広範囲に渡る
‣ 次回はより動的な表現についてとりあげいきたい