Upload
atsushi-tadokoro
View
1.344
Download
3
Embed Size (px)
Citation preview
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表現」に求められるスキルも時代とともに変化‣ この授業では、新たな技術を積極的に活用して、表現する手法について学んでいきたい