More Related Content
Similar to Html5 Web Applications
Similar to Html5 Web Applications (20)
Html5 Web Applications
- 1. HTML5勉強会＠福岡
HTML5, WebApplications
とくなが たかひさ （ id : totty_jp ）
<html>5
- 2. i. 自己紹介.
I am
名前 : とくなが たかひさ
所属 : EC-One 九州事業部
業務 : SE or PG (Java, Ruby, Flex)
性別 : ♂
年齢 : そのくらいです。
blog : http://d.hatena.ne.jp/totty_jp/
twitter : totty_jp
<html>5
- 3. 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
- 4. iii. Offline Web Application
html5でのオフラインキャッシュ機能は、重要な役割
Storageなどに貯めたデータをOnline時に同期化させるとか
Google もGearsの開発を中止
Offline Gmailには、今後、html5の機能へ移行するはず
クラウドなど、ネットワーク中心の技術が発展すること
により、オフラインでも稼動する技術は必然に
ということで、今日は、その辺で使えそうな機能の話
<html>5
- 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
- 6. 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> </div>
<div id="dropper"></div>
</body>
</html>
<html>5
- 7. 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
- 8. 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
- 9. 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
- 10. 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
- 11. 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
- 12. 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
- 13. vii.Web SQL Database
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
- 14. vii.Web SQL Database
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
- 15. vii.Web SQL Database
Sample
databaseSample.html（続き）
<script>
function showList() {
db.transaction(function(ts) {
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
- 16. vii.Web SQL Database
Sample
databaseSample.html（続き）
--// (省略) // --
function sndMsg() {
var user = document.getElementById("user").value;
var msg = document.getElementById("msg").value;
db.transaction(function(ts) {
ts.executeSql("insert into msgTable (user, msg) values (?, ?)",
[user, msg], function() { showList(); });
});
}
}
function clrMsg() {
db.transaction(function(ts) {
ts.executeSql("delete from msgTable", [], function() {
showList();
});
});
}
</script>
<html>5
- 17. 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
- 18. 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
- 19. 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
- 20. 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
- 21. 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
- 22. 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
- 23. 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
- 24. xii.まとめ
繰り返します
HTML5のオフラインキャッシュ機能はネットワーク中心
の世界が広がることにより、重要な技術になる
だけど、見てもらって分かった通り、わりと簡単
みんなで、楽しいオフラインライフを！？
<html>5
- 25. 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
