Web デザイン演習 B第1回： HTML5とは何か?2011年10月3日東京藝術大学 芸術情報センター担当：田所淳

Webデザイン演習Bについて‣ この講義の目標‣ 「表現のメディアとしてのWWW」

‣ 文書(ハイパーテキスト)を掲載するメディアという従来のWWWの枠を越える

‣ Webブラウザー自体を表現のメディアとして活用する‣ Webに関連する様々な技術を、積極的に紹介したい

Webデザイン演習Bについて‣ ここ数年、Webの技術トレンドは急激に変化している‣ キーワード (バスワード?) は「HTML5」‣ 参考：「ウェブの進化 - The evolution of Web」‣ http://evolutionofweb.appspot.com

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とは何か?‣ 厳密に定義は、いろいろな意見が…

‣ 参考：どこまでが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...

セマンティクス

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

HTML4, XHTML1 HTML5

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

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

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

オフライン & ストレージ

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

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

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

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

デバイスアクセス

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

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

リクエスト

プッシュ!

クライアント サーバー

プッシュ!プッシュ!

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

コネクティビティー

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

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

マルチメディア

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

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

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

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

‣ Fractal Lab. : 3次元フラクタル図形をリアルタイム描画‣ http://fractal.io/

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

‣ Chrome Experiments : HTML5の実験場‣ http://www.chromeexperiments.com/

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

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

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

‣ HTML Rocks - CSS3

CSS3、スタイリング

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

CSS3、スタイリング

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

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

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

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