Html5 Web Applications

HTML5勉強会＠福岡

HTML5, WebApplications

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

<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

ii. テイジン
 html5での新機能は、要素だけじゃない！
 Drag＆Drop（＋ File API）
 ファイルや要素をDragして、ブラウザへのDropができる
 Web SQL Database
 RDB
 Indexed Database API (Web Strage)
 オブジェクトDB
 Web Storage
 クライアント側でのデータ永続化
 Web Workers
 スレッドによるバックグラウンド処理
 Web Sockets
 独自プロトコルでの双方向サーバー通信
 Geolocation
 位置情報取得
 Data Cache API
 オフラインでのキャッシュ

<html>5

iii. Offline Web Application
 html5でのオフラインキャッシュ機能は、重要な役割
 Storageなどに貯めたデータをOnline時に同期化させるとか
 Google もGearsの開発を中止
 Offline Gmailには、今後、html5の機能へ移行するはず

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

<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

v. Drag&Drop
 Sample
 dragDropSample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Drag & Drop Sample</title>
<script defer>
 非同期読み込み
--// （次のページへ） //-- <script src=“test.js” async></script>

</script>  ページ読み込み完了後、読み込み
</head> <script src=“test.js" defer></script>
<body>
<div id="dragger" draggable="true">totty</div>
<div>&nbsp</div>
<div id="dropper"></div>
</body>
</html>

<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

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

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

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

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

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

 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

 Sample
 databaseSample.html（続き）
<script>
var db = openDatabase("fiveDB", "", "html5 Sample", 1048576);
db.transaction(function(ts) {
ts.executeSql("create table if not exists msgTable(user, msg)");
});
-- // (省略) // --
</script>

 DBが生成される

<html>5

 Sample
<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

 Sample
--// (省略) // --
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

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

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

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

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

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

x. Application Cache
 Sample
 cacheSample.html
<!DOCTYPE HTML>
<html manifest="hoge.manifest">
<head>
<meta charset="UTF-8">
</head>
<body>
--// （省略） //
</body>
</html>

 hoge.manifest
CACHE MANIFEST
# VERSION 1000
CACHE:
image/logo.jpg
image/back.jpg
NETWORK:
response.cgi

<html>5

xi. Browser
 API別ブラウザ対応状況
ひとこと説明 IE Firefox Safari Chrome
8 3.5 4 4
Drag＆Drop API ドラッグ＆ドロップを扱うAPI × ○ × ×

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

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

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

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

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

Web Sockets コネクション張りっぱなProtocol × × × ×

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

Geolocation 位置情報取得API × ○ ○ △

<html>5

xii.まとめ
 繰り返します

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

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

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

<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/

<html>5

Html5 Web Applications

More Related Content

What's hot

Viewers also liked

Similar to Html5 Web Applications

Html5 Web Applications