Web技術の これまでとこれから

-HTML5の技術10連発-

2013.01.17 nobi Webpage : http://log25.jp/

Mail : nobi000000@gmail.com Twitter : @nobi000 @log_25

自己紹介

• @nobi000(twitter)、@log_25(ニコニコ関係)

• nobi000000@gmail.com

• ホームページ: http://log25.jp/

• ニコニコ動画の投稿:3本

–ニコニコ動画の5年間の歩みを分析してみた(sm17165490)

• 第2回ニコニコ学会βポスター発表

–ニコニコ動画のタグを分析してみた

自己紹介

• この勉強会の発表：3回目

–第6回:WebSocketを使ってみた

–第7回:ライブラリ制作を通じてのHTML5 Canvasの確認

またお前か！

そうです。 また nobi000 です。

せっかくなので、新年の抱負

• Webアプリケーションのリリース

• ライブラリの公開

–第6回、第7回の内容

• 「Web」「プログラミング」「数学」をキーワードとした分野で、新たなフィールドに挑戦したい

–ブログを書く

–薄い本を作る … 厚い本は作る環境があれば…

–勉強会を立ち上げる

今日の話は新年一発目なので、 HTML5の全体像ってどうなってる

んだろう？という話です。

ところで、みなさん「Webの進化」に興味ありますよね？

http://evolutionofweb.appspot.com/

でも、全部とりあげていたら、 時間がない！

過去の話をサラッと スライド3枚で

HTML HyperText Markup Language

• ハイパーテキスト=複数の文書を相互に関連付け、結び付ける仕組み

– 1945年 Memex(概念の提案)

– 1965年 ハイパーテキストの

– 1980年 ENQUIRE

– 1987年 HyperCard

• 1990年11月12日 WorldWideWeb: Proposal for a HyperText Project http://www.w3.org/Proposal

Web は22歳!

これまで登場した技術

• Cookie

• Javaアプレット

• JavaScript

• Flash

• CSS

• ダイナミックHTML ⇒ DOM

• XMLHttpRequest(1999年) ⇒ Ajax (2005年)

• XHTML – 文法規則が厳密に

で、ここからHTML5の話題

HTML5って どこからどこまでがHTML5なの？

HTML5

• XHTML の失敗

• 一方でWebアプリケーションのリッチ化 – プラグイン（Flash等）なしには何もできない

• 2004年:WHATWGにより「WebApplication1.0」と「WebForms2.0」が提案

• 2008年1月22日:W3C 草案（WorkingDraft）

• 2012年12月17日:勧告候補（Candidate Recommendation）

HTML5

広義の HTML 5

WebSocket

WebStorage

WebWorker

Indexed Database

WHATWG のHTML5

Canvas 2D

Macrodata

W3C の HTML5

Elements Froms

Offline Events Drag & Drop API

etc.

WebGL

ここから、 HTML5の技術を10個紹介

1: Video & Audio

• Webページで動画や音声をプラグインなしで再生する HTML5 の要素

• JavaScript の MediaElement によって操作

• コーデックの対応がブラウザで異なる。

– MP4対応

– WebM対応

2: Canvas

• Webページに JavaScript で絵を描くことができる HTML5 の要素

–第7回で取り上げました！

• 設置

• 配置の調整

<canvas width="300" height="300"></canvas>

canvas { position: fixed; top: 0px; left: 0px; }

3: オフラインWebアプリケーション

• オンライン状態をイベントとして取得

– online イベント、offlineイベント

– navigator.onLine … IE8以前とIE9で挙動が異なる

• キャッシュマニフェスト

– applicationCache

– .htaccess にマニフェストファイルの設定が必要

4: ドラッグ & ドロップ

• 以前: mousedown,mousemove, mouseup

• ドラッグ側：draggable属性を設定

• ドロップ側：dropzone属性を設定

• JavaScriptではDataTransferオブジェクト

– dataTransfer.setData("text", target.id);

• イベントとして取得

– dragstart

5: WebWorker

• JavaScript のマルチスレッド化・並列処理

– var worker = new Worker(“ファイル名”);

– worker.postMessage(変数名);

• 計算開始時:ファイル側のmessageイベントが発生

• 終了時:workerのmessageイベントが発生

• 問題点：DOMやUIへの操作ができない。

6: WebStorage

• ブラウザへのデータの保存

– sessionStorage

– localStorage

• 保存:setItem(key,value)

• 取得:getItem(key)

• 利用方法

–画像データを事前にダウンロードしてStorageにキャッシュ

• 問題点：データを他PCに移せない

7: WebSocket

• ブラウザ上で双方向のソケット通信を行うための技術。

–第6回の私の発表を参照

• 最新仕様ではバイナリ通信も可能に

• var ws = new WebSocket("ws://localhost:8000/");

8:File API

• ローカルのファイルのデータを使用する機能

–おもにオフラインWebアプリケーションでの利用

• FileReaderオブジェクト

• readAsText: テキスト形式で読み込み

• readAsBinaryString:バイナリ形式で読み込み

9: WebRTC

• JavaScript でカメラやマイクなどからリアルタイムでデータ（画像、音声）を取得

– GetUserMediaオブジェクト

• Chromeの場合flagsの設定でMediaStreamを有効にする必要あり

• 問題点：2つ以上のWebカメラが接続されていた場合の挙動

10: FullScreenAPI

• HTMLの要素をなんでもフルスクリーンで表示する機能 – document.getElementById("contents").requestFullScr

een();

– document.cancelFullScreen();

– 現状はベンダープレフィックスが必要

• Fullscreen疑似クラスでフルスクリーン時にのみ別のCSSを適用可能

• 問題点：中の要素を自動的には拡大しない。width:640; などは調整要

その他のHTML5 関連技術

• CSSアニメーション

• GPSの位置情報

• ジャイロセンサーの情報

• IndexedDB

• WebGL … 川田様の発表を期待

まとめると…

グラフィックス マルチメディア

• Video & Audio • Canvas • WebRTC

• CSSアニメーション • WebGL

オフライン ローカルアクセス

• オフライン • File API

• センサー関係

データストレージ • WebStroage • IndexedDB

• Web SQL Database

その他 • ドラッグ&ドロップ • WebWorker • WebSocket

HTML5の全貌はわかりません

デモの時間

まとめ 技術のはやりすたりはある

• JavaScript

• Ajax（XMLHttpRequest）

–登場当初は「遊び」でしかなかった

• Flash

– iPhoneの登場により、モバイル環境では使えなくなった

ひとつの技術にとらわれることなく、幅広く技術を身につけること

が大事

ありがとうございました。 今日のスライドは以下のHPから

http://log25.jp/