Html5 Web Applications

<html>5<html>5

HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5

HTML5, WebApplications

とくながたかひさ（ id : totty_jp ）

<html>5<html>5

i. .

� I am� 名前 : とくながたかひさ

� 所属 : EC-One 九州事業部

� 業務 : SE or PG (Java, Ruby, Flex)

� 性別 : ♂

� 年齢 : そのくらいです。

� blog : http://d.hatena.ne.jp/totty_jp/

� twitter : totty_jp

<html>5<html>5

ii.

� html5での新機能は、要素だけじゃない！

� Drag＆Drop（＋ File API）� ファイルや要素をDragして、ブラウザへのDropができる

� Web SQL Database� クライアント型RDB

� Indexed Database API � KeyValue型DB

� Web Storage� クライアント側でのデータ永続化

� Web Workers� スレッドによるバックグラウンド処理

� Web Sockets� 独自プロトコルでの双方向サーバー通信

� Geolocation� 位置情報取得

� Data Cache API� オフラインでのキャッシュ

<html>5<html>5

iii.Offline Web Application

� html5でのオフラインキャッシュ機能は、重要な役割� Storageなどに貯めたデータをOnline時に同期化させるとか

� Google もGearsの開発を中止

� Offline Gmailには、今後、html5の機能へ移行するはず

� クラウドなど、ネットワーク中心の技術が発展することにより、オフラインでも稼動する技術は必然に� ということで、今日は、その辺で使えそうな機能の話

<html>5<html>5

v. Drag&Drop

� ブラウザでのファイルや要素からのD&DをサポートしたAPI� File APIとの組合せで、OSからのバイナリデータも読み込める

� API� Use

� addEventListener(eventHandler, callbackFunction(event){～}, boolean)

� EventHandler� dragstart� drag� dragenter� dragover� dragleave� drop� dragend

� Methods� event.dataTransfer

� getData(mimeType)/setData(mimeType, “”) ⇒ mymeType：text/plain, text/html

� event.preventDefault()� ドロップを拒否しない

� event.stopProgration()� イベントの停止

<html>5<html>5

v. Drag&Drop

� Sample� dragDropSample.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Drag & Drop Sample</title>

<script defer>

--// （次のページへ） //--

</script>

</head>

<body>

<div id="dragger" draggable="true">totty</div>

<div>&nbsp</div>

<div id="dropper"></div>

</body>

</html>

� 非同期読み込み<script src=“test.js” async></script>

� ページ読み込み完了後、読み込み<script src=“test.js" defer></script>

<html>5<html>5

v. Drag&Drop

� Sample� dragDropSample.html

<script defer>

var dragman = document.getElementById("dragger");

var dropman = document.getElementById("dropper");

dragman.addEventListener("dragstart", function(event){

event.dataTransfer.setData("text/plain", dragman.textContent);

return true;

}, false);

dropman.addEventListener("dragover", function(event){

event.preventDefault();

return false;

}, false);

dropman.addEventListener("drop", function(event){

dropman.innerHTML += event.dataTransfer.getData("text/plain");

event.stopPropagation();

return false;

}, false);

</script>

<html>5<html>5

vi. Web Storage

� クライアント側での、データの保存を実現� W3CのHTML5仕様から分離された

� 次世代で期待とのこと

� ２種類の保存方法（sessionStorage < localStorage）� sessionStorage ⇒ Windowベース� localStorage ⇒ Domainベース[ protocol, domain, port ]

� API（key/value形式で、値を保持することができる）� Use

� localStorage、sessionStorage� そのまま、利用可能（Windowオブジェクト）

� Methods� localStorage.setItem(key, value) ／ localStorage.key = value

� storageへのKey＆Valueの設定

� localStorage.getItem(key) ／ value = localStorage.key� storageからのKeyでのValueの抽出

� localStorage.removeItem(key)� storageからのItem削除

� localStorage.clear()� storageのクリア

� localStorage.length()� storageのサイズ

� localStorage.key(index)� storageからのKeyの取得

<html>5<html>5

vi. Web Storage

� Sample� localStorageSample.html

<body onload="showList()">

<select id="msgList" size="15"></select>

<table>

<tr>

<th>Subject</th><th>Message</th>

</tr>

<tr>

<td><input type="text" id="subject" /></td>

<td><input type="text" id="msg" /></td>

<td><button onClick=“addMsg()">Send</button></td>

<td><button onClick="delMsg()">Delete</button></td>

</tr>

</table>

<table id="msgTable">



</table>

</body>

<html>5<html>5

vi. Web Storage

� Sample� localStorageSample.html（続き）

<script>

// メッセージの表示function showList() {

var msgTable = document.getElementById("msgTable");

msgTable.innerHTML =

"<tr><th>subject</th><th>message</th></tr>";

for (var i = 0; i < localStorage.length; i++) {

var key = localStorage.key(i);

msgTable.innerHTML += "<tr>" +

"<td id='ls" + i + "'>" + key + "</td>" +

"<td id='lm" + i + "'>" + localStorage[key] + "</td>" +

</tr>";

}

}

-- // (省略) // --

</script>

<html>5<html>5

vi. Web Storage

� Sample� localStorageSample.html（続き）

<script>

-- // (省略) // --

// メッセージの登録function addMsg() {

var subject = document.getElementById("subject").value;

var msg = document.getElementById("msg").value;

localStorage[subject] = msg;

showList();

}

// メッセージの削除function delMsg() {

var subject = document.getElementById("subject").value;

localStorage.removeItem(subject);

showList();

}

</script>

<html>5<html>5

vii.Web SQL Database

� クライアント側での、RDBの構築を実現

� つまり、SQLが使える

� SQLite3互換・・・（反対意見多い模様）

� API

� Use� db = openDatabase(dbName, version, displayName, dbSize[byte])

� db = openDatabaseSync(dbName, version, displayName, dbSize[byte])� DBとのコネクション開始（なければ生成）（Windowオブジェクト）

� Methods� ts = db.transaction(callbackFunc, errorFunc, successFunc)

� トランザクション開始（複数ブラウザで操作されるため）

� ts.executeSql(sql, [params], successFunc(ts, SQLResultSet), errorFunc)� SQLの実行

� SQLResultSetのプロパティ� insertId ・・ insertを実行した結果の生成ID

� rowsAffected ・・ SQLの実行結果の対象件数

� rows ・・検索結果＜rows.length， rows.item(index).columnName＞

<html>5<html>5


� Sample� databaseSample.html

<body onload="showList()">

<select id="msgList" size="15"></select>

<table>

<tr>

<th>Subject</th><th>Message</th>

</tr>

<tr>

<td><input type="text" id="subject" /></td>

<td><input type="text" id="msg" /></td>

<td><button onClick=“addMsg()">Send</button></td>

<td><button onClick="delMsg()">Delete</button></td>

</tr>

</table>

<table id="msgTable">



</table>

</body>

<html>5<html>5


� Sample� databaseSample.html（続き）

� DBが生成される

<script>

var db = openDatabase("fiveDB", "", "html5 Sample", 1048576);

db.transaction(function(ts) {

ts.executeSql("create table if not exists msgTable(user, msg)");

});

-- // (省略) // --

</script>

<html>5<html>5



<script>

function showList() {


ts.executeSql("select * from msgTable", [], function(ts, rs) {

var msgTabel = document.getElementById("msgTable");

msgTable.innerHTML =

"<tr><th>subject</th><th>message</th></tr>";

var rows = rs.rows;

for (var i = 0, i < rows.length; i++) {

var row = rows.item(i);

msgTable.innerHTML += "<tr>" +

"<td id='ls" + i + "'>" + row.subject + "</td>" +

"<td id='lm" + i + "'>" + row.msg + "</td>" +

</tr>";

}

});

});

}

<html>5<html>5



--// (省略) // --

function sndMsg() {

var user = document.getElementById("user").value;

var msg = document.getElementById("msg").value;


ts.executeSql("insert into msgTable (user, msg) values (?, ?)",

[user, msg], function() { showList(); });

});

}

}

function clrMsg() {


ts.executeSql("delete from msgTable", [], function() {

showList();

});

});

}

</script>

<html>5<html>5

viii.Web Workers

� BackGroundでのThread処理を実現� DOMへのアクセスは、できません

� 双方でのやりとりは、メッセージをPOSTしてPOSTしかえしてもらう

� API� Use

� new Worker(url)� workerの生成

� EventHandler� onmessage = callbackFunction(event)

� コールバック（成功時）

� onerror = callbackFunction(event)� コールバック（失敗時）

� Methods� importScripts(url, url, ・・)

� 外部スクリプトのインポート

� postMessage(message)� メッセージの送信（html, workerの双方とも利用可能）

<html>5<html>5

viii.Web Workers

� Sample� workersSample.html

<script defer>

function start() {

var t1 = new Worker('thread.js');

var t2 = new Worker('thread.js');

t1.onmessage = function (event) {

document.getElementById('r1').textContext = event.data;

};

t2.onmessage = function (event) {

document.getElementById('r2').textContext = event.data;

};

}

</script>

</head>

<body>

<p>Result1=<span id="r1"></span></p>

<p>Result2=<span id="r2"></span></p>

<button onClick="start()">Start</button>

</body>

<html>5<html>5

viii.Web Workers

� Sample� workersSample.html（続き）

� thread.js

onmessage = function (event) {

var flg = true;

var data = 0

while (flg) {

data = Math.random()*100;

if (/*dataの値で、たまに true の条件なにか*/) {

flg = false;

}

}

postMessage(data);

};

onerror = function (error) {

postMessage(error);

};

<html>5<html>5

ix. Web Sockets

� 独自プロトコルでサーバと双方向通信を実現� HTTPと違うのは、コネクションが張りっぱなしにできる点

� 双方向から、postMessageでやりとりできる

� API� Use

� new WebSocket(“ws://domain/hello”) ⇒ 平文通信81ポート� wss://・・・ ⇒ 暗号化通信816ポート

� EventHandler� ws.onopen

� 通信開始イベント

� ws.onclose� 通信終了イベント

� ws.onmessage� メッセージの受信イベンﾄ

� Methods� ws.send(“Hello WebSocket”)

� メッセージの送信（文字列のみ）

� ws.onclose（）� 通信終了

� ws. readyState� 状態の確認

<html>5<html>5

x. Application Cache

� html, css, js をキャッシュし、オフラインでもWebAppを利用できる� サーバのMIMEタイプには「text/cache-manifest 」が必要

� API� Use

� <html manifest=“～.manifest”></html>� キャッシュ対象のファイルを指定したmanifestファイルを読み込む

� cache = (window).applicationCache� ApplicationCacheオブジェクト

� EventHandler� onchecking

� onerror

� onnoupdate

� ondownloading

� onprogress

� onupdateready

� oncache

� onobsolete

� Methods� cache.status ・・ UNCACHE, IDLE, CHECKING, DOWNLOADING, UPDATEREADY, OBSOLETE

� cache.update()

� cache.swapCache()

<html>5<html>5

x. Application Cache

� Sample� cacheSample.html

� hoge.manifest

<!DOCTYPE HTML>

<html manifest="hoge.manifest">

<head>

<meta charset="UTF-8">

</head>

<body>

--// （（（（省略）））） //

</body>

</html>

CACHE MANIFEST

# VERSION 1000

CACHE:

image/logo.jpg

image/back.jpg

NETWORK:

response.cgi

<html>5<html>5

xi. Browser

� API別ブラウザ対応状況

○○△×Key/Value型のストレージWeb Storage

△○○×位置情報取得APIGeolocation

○○○×オフライン・データキャッシュAPIData Cache API

○×××コネクション張りっぱなProtocolWeb Sockets

○○○×バックグラウンド処理Web Workers

×○××クライアントサイドのDBWeb SQL Database

？×××Non-SQLのローカルストレージIndexes Database API

××3.6β×ファイルを扱うAPIFile API

××○×ドラッグ＆ドロップを扱うAPIDrag＆Drop API

Chrome

4

Safari

4

Firefox

3.5

IE

8

ひとこと説明

<html>5<html>5

xii.まとめまとめまとめまとめ

� 繰り返します

� HTML5のオフラインキャッシュ機能はネットワーク中心の世界が広がることにより、重要な技術になる

� だけど、見てもらって分かった通り、わりと簡単

� みんなで、楽しいオフラインライフを！？

<html>5<html>5

xiii.

� HTML5変更点� http://dev.w3.org/html5/html4-differences/� http://www.html5.jp/trans/w3c_differences.html

� Offline Web Applications� http://www.w3.org/TR/offline-webapps/� http://www.html5.jp/trans/w3c_offline_webapps.html

� Web SQL Database� http://dev.w3.org/html5/webdatabase/

� Indexed Database API (Web Simple DB)� http://dev.w3.org/2006/webapi/WebSimpleDB/� http://www.w3.org/TR/WebSimpleDB/

� Web Storage� http://dev.w3.org/html5/webstorage/� http://www.html5.jp/trans/w3c_webstorage.html

� Web Sockets� http://dev.w3.org/html5/websockets/� http://www.html5.jp/trans/w3c_websockets.html

� Data Cache� http://dev.w3.org/2006/webapi/DataCache/

� 株式会社あゆた� http://ayuta.co.jp/html5-samples/

Technology

Html5 Web Applications