• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5  Web Applications
 

Html5 Web Applications

on

  • 9,159 views

 

Statistics

Views

Total Views
9,159
Views on SlideShare
8,970
Embed Views
189

Actions

Likes
8
Downloads
54
Comments
0

3 Embeds 189

http://d.hatena.ne.jp 150
http://www.slideshare.net 37
http://webcache.googleusercontent.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5  Web Applications Html5 Web Applications Presentation Transcript

    • 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 KeyValue型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仕様から分離された 次世代で期待とのこと 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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