Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile Web

1,904 views

Published on

Mozilla Workshop @ Nagano

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Mobile Web

  1. 1. Mobile Web技術 Makoto Kato Mozilla Japan
  2. 2. 自己紹介• 名前: 加藤 誠 / @makoto_kato• Firefox / Mobile / Thunderbird committer • x64 / arm • etc
  3. 3. Agenda• Mobile Web Browser?• APIs for Mobile / Devices
  4. 4. MOBILE WEB BROWSER?
  5. 5. Mobile Web Browser?• モバイルデバイス用のWebブラウザには2種類が 存在する • サーバーで描画して、クライアントに描画結果 を転送 • クライアントですべてを行う(=デスクトップ用 ブラウザと同じ)
  6. 6. サーバー側で描画 Web ServerHTMLの解析、描画をサーバー側で行う Internetクライアント側はその結果(画像)をサーバーから受け取 Rendering Serverり、描画 Mobile
  7. 7. サーバー側で描画• Opera Mini• Skyfire• jigi
  8. 8. クライアント側で描画 Web Serverデスクトップ用のWebブ Internetラウザと同じテクノロジ Mobile
  9. 9. クライアント側で描画•WebKitをベースとしたブラウザ(OSに組み込まれている標準ブラウザ) • Android • iOS • Symbian (Nokia) • Blackberry (6 or later)• Opera Mobile• Firefox Mobile• Internet Explorer Mobile (Windows Phone)
  10. 10. 各タイプの違い サーバーで描画するタイプ クライアントで描画するタイプ • モバイルデバイス側にCPU • クライアントですべて完結する パワーを余り必要としない ため、JavaScriptを利用したコ ンテンツなどの場合にいちいち利点 • サーバー側でデータを圧縮 サーバーに接続する必要がない できるので、トラフィック を縮小できる • オフラインサポート • CPUパワーを必要とする • インタラクティブなコンテ • トラフィックが増大しやすい ンツの場合には、逆にトラ欠点 フィックが増える • Opera Turboのようなプロ キシを介すことで軽減可能 • クライアントだけで処 理が完結しないため
  11. 11. 世界におけるモバイルブラウザシェア
  12. 12. モバイルWebブラウザ
  13. 13. モバイルOS
  14. 14. モバイル上での Webブラウザ• OSに”まともな”ブラウザが組み込まれていない 環境下ではサードパーティ製ブラウザが使われる • JavaME • Symbian (old version) • Windows Moble (not Windows Phone)• OSに組み込まれたブラウザが”まとも”であれば、 そのまま使われることが多い
  15. 15. APIS FOR MOBILE / DEVICES
  16. 16. Network on Mobile• 常にネットワークがつながっている訳ではない • オンライン・オフラインが切り替わる• ネットワークの速度は改善されているが、デスク トップに比べれば。。。 • 効率のいいサーバーとの接続方法?
  17. 17. Network on Mobile• モバイルではネットワークが常につながっている わけではない • 地下鉄・駅• ネットワークが接続されているときに、サーバー へアクセスして、つながってない時にローカル キャッシュ (データベース) を利用
  18. 18. Network API• 仕様が固まり、実装がすすんでいるもの • Online / offline state • XMLHttpRequest (XHR) • Sever Sent Event • WebSocket• 使用策定中 • Network Information API
  19. 19. On-line state• Check current network state if (navigator.onLine) { // network is online }• event window.addEventListener(“online”, function() { // network status changes to online }, true);
  20. 20. Server Sent Event• 定期的にサーバーと通信を行う• Cross Domain Acessは現在規格制定中 • おそらく、XHRと同様になる
  21. 21. Server Sent Event (Server)• MIME Type • text/event-stream • クライアント側はAcceptヘッダで送信 • サーバー側はContent-Typeで送信• データ形式 • id: <識別ID> • data: <送信内容> • retry: <ミリ秒> 次の秒後にリクエストを投げるかを指 定
  22. 22. Server Sent Event (client)// http://<server>/events にリクエストvar source = new EventSource("/events");source.addEventLitener( "message", function(e) { document.body.innerHTML += e.data; }, false);
  23. 23. その他
  24. 24. Network Information API• 現在利用しているネットワークの種類を取得 var conType = navigator.connection.type; if (conType == "wifi") { // 現在の接続先がWIFI } else if (conType == “3G”) { // 現在の接続先が3G }
  25. 25. Data Storage• File API• Storage • Web Storage • Indexed Database • Web SQL Database (仕様としてほぼ消滅)
  26. 26. Web Storage• 二種類のストレージタイプ • localStorage • sessionStorage• 簡単なkey-valueスタイル localStorage.setItem(‘key’, ‘value’); localStorage.getItem(‘key’);• 大きなデータや複雑なデータには向かない
  27. 27. Indexed Database• No SQL Database• 2 APIs • 同期API • 非同期API• Firefoxでは非同期のみ現在サポート • 非同期APIの方が負荷をかけない • 同期APIはWorkersなどUIを伴わない処理にし か向かない
  28. 28. Indexed Database// Firefox -> mozIndexedDB// WebKit -> webkitIndexedDBvar request = window.indexedDB.open(“maildb", “Mail");request.onsuccess = function(event) { var db = request.result; var transaction = aDB.transaction([“maildb"], IDBTransaction.READ_ONLY); var cursor = transaction.objectStore(“maildb").openCursor(); cursor.onsuccess = function(event) { }}
  29. 29. User Interaction• 実装が進んでいる物 • Touch Event • Web Notification• 現在仕様議論中 • Vibration • Intent-base events • Speech etc
  30. 30. Touch Event• タッチデバイスのためのイベントモデル • シングルタッチもマルチタッチもサポート• iOSで最初に実装されたもの• 現在W3C – Web Events Groupで仕様を策定中l
  31. 31. Touch Event• タッチイベントにはいろいろな定義が存在 • touchstart … タッチポイントが開始 • touchmove … タッチポイントが移動中 • touchcancel… システムなどによって、タッチイベン トがキャンセル • touchleave … 要素間の移動などタッチポイントが離 れる • touchend … タッチが終了
  32. 32. Touch Eventfunction handleStart(event) { var touches = event.changedTouches; var x = touches[0].pageX; var y = touches[0].pageY;}function handleEnd(event) { …}function startup() { var el = document.getElementById("canvas"); el.addEventListener("touchstart", handleStart, false); el.addEventListener("touchend", handleEnd, false); el.addEventListener("touchmove", handleMove, false);}
  33. 33. Web Notification• モバイルOSでは、通知機能はOS標準で搭載され る傾向にある • メール通知など
  34. 34. Web Notification// Firefox では、mozNotification// Chromeでは、webkitNotificationvar notification = navigator.notification(“title”, “message”);notification.onclose = function() { // close時};
  35. 35. Hardware Integration• 実装が進んでいる物 • Geo Location • Device Orientation (Accelerometer) • Media Capture• 仕様策定中 • Battey Status Event • Streaming API
  36. 36. Device Orientation• ほとんどのデバイスに使われる傾きセンサーの値 を検出する window.addEventListner(“deviceorientation”, function(event) { alpha = event.alpha; beta = event.beta; gamma = event.gamma; }, true);
  37. 37. Media Capture• <input type=“file”>でキャプチャデバイスを操 作• カメラや音声などを取り込む <input type=“file” accept=“image/*” capture=“camera”> • Android 3.0 Web Browser <input type=“file” accept=“image/*;capture=camera”>
  38. 38. その他• Battery Status API• Steaming API (Web Real-Time Communication APIs)
  39. 39. Bettery Status API• 電源の状態を取得 • ACで接続中とかバッテリ駆動中とか• バッテリの残量を取得
  40. 40. その他APIs• Personal Information • Contact API – address book • Calendar API – calendar• Communication • Messaging API – email / SMS • P2P• Graphics • Media Query
  41. 41. API for media query• Media Query • 画面の解像度などでCSSを切り替える <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 480px)" href="480px.css“>
  42. 42. API for media query• MatchMedia • DOMでmedia queryを利用する if (window.matchMedia( "(min-device-width: 400px)").matches) { // min-device-width < 400px } else { } // イベントリスナ形式 window.matchMedia( "(min-width: 400px)").addListener( function() { });
  43. 43. APIs• セキュリティを考慮すべき場所においては、仕様 策定には非常に慎重 • Contact API • Messaging API• ユーザーに許可を求める方式は正しいのか? • Web Appsに関しては?
  44. 44. Any Question?

×