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

今日の内容‣ オンラインポートフォリオ、再講評

‣ この授業でとりあげるHTML5に至る歴史的な経緯の整理‣ HTML5とは何なのか?‣ 実例の紹介

‣ HTML5最初の一歩‣ HTML5で導入されたの新しい要素でWebページを作成‣ HTML5のページをCSSでレイアウト‣ CSS3を使用して、様々なデザイン効果を加える

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

オンラインポートフォリオ再講評‣ 以下の項目を確認しながら、みなさんのオンラインポートフォリオを順番に見ていきます!

‣ 授業で制作した作品は、全てオンライン・ポートフォリオで閲覧できるように

‣ 大学の授業以外で作成した作品も積極的に掲載‣ 著作権的に問題のある素材(他人の写真、CDからリッピングした音楽)などは全て削除

‣ リンク切れのメニューなどはないように

「HTML5」とは何か?

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

HTML5とは何か?‣ HTMLのテクノロジの変遷

‣ 1991 - HTML‣ 1994 - HTML2‣ 1996 - CSS1 + JavaScript‣ 1997 - HTML4‣ 1998 - CSS2‣ 2000 - XHTML1 ‣ 2005 - Ajax (Asynchronous JavaScript + XML)‣ 2009 - HTML5

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

‣ 最大の変化をひとことで言うと…‣ Web「文書」から「アプリケーションへ」

HTML5とは何か?

文書メーラー、地図、ムービープレーヤー、スケジューラー など

HTML5とは何か?‣ 例：Google+

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

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

HTML5とは何か?‣ 厳密に定義は、いろいろな意見が…

‣ 参考：どこまでがHTML5なの？‣ http://www.publickey1.jp/blog/10/html5_9.html

広義のHTML5と狭義のHTML5

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

広義のHTML5

狭義のHTML5

HTML5の主な機能‣ (広義の) HTML5の主な機能‣ http://www.w3.org/html/logo/#the-technology

‣ セマンティクス‣ オフラン、ストレージ‣ デバイスアクセス‣ コネクティビティー‣ マルチメディア‣ グラフィクス、エフェクト‣ パフォーマンス、インテグレーション‣ CSS3

‣ セマンティクス(意味)によるマークアップ

‣ 様々な新要素の追加‣ <section>, <header>, <footer>, <nav>, <article>, <aside>, <figure>, <mark>, <time>, <video>, <audio> etc...

セマンティクス

セマンティクス‣ 意味構造の記述の変化

body

div id="header"

div id="footer"

divid="sidebar"

div id="content"

div class="article"

div class="article"

bodyheader

footer

nav sectionarticle

article

HTML4 HTML5

オフライン & ストレージ‣ PCだけでなくタブレットやモバイル端末が重要となった今、常にネットワークに接続されているとは限らない

‣ ネットワークがオフラインでもページを閲覧できる仕組み‣ ブラウザ側にデータを蓄積する‣ オフラインでも使用可能なWebアプリを構築可能

‣ デモ：WebStorageタイマー - 最初に開いた時間を記憶

オフライン & ストレージ

デバイスアクセス‣ 様々なデバイスが活用可能に

‣ Geolocation：希望すれば自身の場所を web アプリケーションに通知することができるように

‣ カメラ入力 / 音声入力‣ 映像や音声によるコントロール

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

デバイスアクセス

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

デバイスアクセス

コネクティビティー‣ サーバーとのより効率的な接続‣ リアルタイムに双方向通信を実現

‣ チャット‣ オンラインゲーム‣ ...etc.

リクエスト

プッシュ!

クライアント サーバー

プッシュ!プッシュ!

コネクティビティー‣ scrumblr. http://scrumblr.ca/

‣ ホワイトボードを共有しながら、みんなでブレスト

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

コネクティビティー

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

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

マルチメディア

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

3D、グラフィクス、エフェクト‣ 2D、3D、ベクターデータなど様々な形式の画像を表示

‣ Canvas：2Dグラフィクス、アニメーション‣ WebGL：ブラウザ上で、3Dグラフィクスを表示‣ SVG：ベクターデータ

‣ Canvas 2Dによるアニメーションのデモ‣ http://yoppa.org/blog/2683.html

3D、グラフィクス、エフェクト

‣ Magic dust http://mrdoob.com/144/magic_dust

3D、グラフィクス、エフェクト

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

‣ CSSの表現力が、より豊かに

‣ Webfonts、コラム、透明度、角丸、グラデーション、ドロップシャドウ、反射、トランジション(アニメーション)、回転・移動、

‣ HTML Rocks - CSS3

CSS3、スタイリング

‣ CSS3 Playgound - CSS3の実験場‣ http://css3.mikeplate.com/

CSS3、スタイリング

パフォーマンス、インテグレーション‣ Webアプリを高速化する様々な技術

‣ Web Workers：ブラウザ上で並列処理‣ CSSのセレクタの進化‣ ブラウザのヒストリ情報を操作 ...etc

‣ Webアプリをより高速に、快適にするための基礎技術の発展

Chrome Experiments #500‣ http://500.chromeexperiments.com/

‣ Chrome Experimentsにピックアップされた500のサイト

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

HTML5 はじめの一歩

HTML5 はじめの一歩‣ HTML5から導入された新しい要素を使用して、HTML5のページを作成してみる

‣ CSSで作成したHTML5のページを構造に即してレイアウト‣ CSS3に導入された様々な表現手法を試してみる

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

HTML5 はじめの一歩‣ HTML5以前 (HTML4、XHTML1) でのやりかた

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

HTML5 はじめの一歩‣ HTML5以降では、意味(セマンティクス)によるマークアップが可能となる

‣ HTML5のページの構造を指定する要素‣ section: 本の一部あるいは章、章のセクション、あるいは基本的に HTML 4 で独自の見出しを持つすべてのもの

‣ header: ページに表示されるページ・ヘッダー、head 要素とは全く意味合いが違うので注意

‣ footer: 細かい文字での説明が入るページ・フッター、Email・メッセージの署名などが入る

‣ nav: 他のページへのリンクの集まり‣ article: ブログや Web マガジン、一覧記事などに掲載されている個々のエントリー

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

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

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>

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>

HTML5 はじめの一歩‣ このページの構造

‣ ヘッダー‣ 大見出し h1‣ 中見出し h2‣ ヘッダーメニュー ul, li

‣ セクション‣ 記事

‣ 大見出し h1‣ 段落 p‣ 中見出し h2‣ 段落 p

‣ 記事‣ 大見出し h1‣ 段落 p

‣ ナビゲーション‣ 大見出し h1‣ ナビゲーションメニュー ul, li

‣ フッター‣ 段落

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

HTML5 はじめの一歩‣ このページをHTML5に書き換えていく‣ 意味の構造(セマンティクス)をHTML5でマークアップ

‣ ヘッダー → header要素‣ 見出しのまとまり → hgroup要素‣ 個別の記事 → article要素‣ ナビゲーション → nav要素‣ フッター → footer要素

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>

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>

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

HTML5 はじめの一歩‣ CSSを適用するためhead要素に追加‣ CSSへのリンクを記述：style.css

‣ Internet Explorer対策‣ IEのHTML5対応はあまり良くない…‣ IE対策のために、html5shimというIEをHTML 5に対応させるためのJavaScript (html5.js) を利用

‣ http://code.google.com/p/html5shim/

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>

! <!-- 以下省略 -->

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; }

HTML5 はじめの一歩‣ ページのレイアウトをCSSで記述 (つづき)

#main { float:right; width:620px;}

footer { clear:both !important; text-align: center;}

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

HTML5 はじめの一歩‣ CSS3の視覚効果を利用する

‣ CSS3では、以前のバージョンに比べて大幅に機能が強化‣ Webfonts、コラム、透明度、角丸、グラデーション、ドロップシャドウ、反射、トランジション(アニメーション)、回転・移動、

‣ HTML Rocks - CSS3

‣ CSS3 Playgound - CSS3の実験場‣ http://css3.mikeplate.com/

HTML5 はじめの一歩

Text

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;

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;}

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;}

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;}

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;}

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;}

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

HTML5 はじめの一歩‣ まとめ

‣ 今回の授業、HTML5とCSS3の導入‣ 構造化のための新要素を利用‣ HTMLに意味要素を与え、それを利用してCSS3でレイアウトやデザインを行う方法

‣ しかし、HTML5 で可能となったことはより広範囲に渡る‣ 次回はより動的な表現についてとりあげいきたい