Web動画表現ガイダンス

千葉商科大学政策情報学部2011年9月28日担当：田所 淳

ガイダンス‣ この授業では何を目標にするのか?‣ 昨年度の内容との差異‣ 成績評価の基準について

昨年度までの「Web動画表現」の内容‣ 昨年度までの、この授業の内容‣ 「Webを用いてインタラクティブで動きのある表現をする」‣ そのための手段としてAdobe Flashを使用

今年度からは…‣ 内容を一新したい‣ HTML5とJavaScriptを駆使した、先端的なWeb表現

内容変更の理由‣ もちろん、Flashの重要性は今後も続くと思われる

‣ しかし、Flashとその開発言語ActionScriptの情報は、多くの書籍やオンラインの情報で入手が可能になった

‣ それに対して、HTML5関連の情報は、話題は先行しているものの、まだまだ不足している印象

‣ どうせなら、世の中から半歩進んだ技術を身につけたい!

‣ Flashと違い、開発環境を無料で入手可能なのも利点

今日の内容‣ この授業でとりあげるHTML5に至る歴史的な経緯の整理‣ 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とは何か?‣ 厳密に定義は、いろいろな意見が…

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

デバイスアクセス

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

‣ チャット‣ オンラインゲーム‣ ...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表現」に求められるスキルも時代とともに変化‣ この授業では、新たな技術を積極的に活用して、表現する手法について学んでいきたい