Html5 Web Applications

9,363 views

Published on

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,363
On SlideShare
0
From Embeds
0
Number of Embeds
232
Actions
Shares
0
Downloads
57
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Html5 Web Applications

  1. 1. HTML5 HTML5, WebApplications とくなが たかひさ ( id : totty_jp ) <html>5
  2. 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. 3. 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
  4. 4. iii. Offline Web Application html5でのオフラインキャッシュ機能は、重要な役割 Storageなどに貯めたデータをOnline時に同期化させるとか Google もGearsの開発を中止 Offline Gmailには、今後、html5の機能へ移行するはず クラウドなど、ネットワーク中心の技術が発展すること により、オフラインでも稼動する技術は必然に ということで、今日は、その辺で使えそうな機能の話 <html>5
  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. 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>&nbsp</div> <div id="dropper"></div> </body> </html> <html>5
  7. 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. 8. vi. Web Storage クライアント側での、データの保存を実現 W3CのHTML5仕様から分離された 次世代で期待とのこと 2種類の保存方法(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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. xii.まとめ 繰り返します HTML5のオフラインキャッシュ機能はネットワーク中心 の世界が広がることにより、重要な技術になる だけど、見てもらって分かった通り、わりと簡単 みんなで、楽しいオフラインライフを!? <html>5
  25. 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

×