Mobile Web技術   Makoto Kato   Mozilla Japan
自己紹介•   名前: 加藤 誠 / @makoto_kato•   Firefox / Mobile / Thunderbird committer    •   x64 / arm    •   etc
Agenda•   Mobile Web Browser?•   APIs for Mobile / Devices
MOBILE WEB BROWSER?
Mobile Web Browser?•   モバイルデバイス用のWebブラウザには2種類が    存在する    •   サーバーで描画して、クライアントに描画結果        を転送    •   クライアントですべてを行う(=デスクトッ...
サーバー側で描画                  Web ServerHTMLの解析、描画をサーバー側で行う              Internetクライアント側はその結果(画像)をサーバーから受け取   Rendering Server...
サーバー側で描画• Opera Mini• Skyfire• jigi
クライアント側で描画               Web Serverデスクトップ用のWebブ    Internetラウザと同じテクノロジ                 Mobile
クライアント側で描画•WebKitをベースとしたブラウザ(OSに組み込まれている標準ブラウザ)    •   Android    •   iOS    •   Symbian (Nokia)    •   Blackberry (6 or l...
各タイプの違い         サーバーで描画するタイプ            クライアントで描画するタイプ     •       モバイルデバイス側にCPU   •       クライアントですべて完結する             パワーを...
世界におけるモバイルブラウザシェア
モバイルWebブラウザ
モバイルOS
モバイル上での            Webブラウザ•   OSに”まともな”ブラウザが組み込まれていない    環境下ではサードパーティ製ブラウザが使われる    •   JavaME    •   Symbian (old version)...
APIS FOR MOBILE / DEVICES
Network on Mobile•   常にネットワークがつながっている訳ではない    •   オンライン・オフラインが切り替わる•   ネットワークの速度は改善されているが、デスク    トップに比べれば。。。    •   効率のいいサ...
Network on Mobile•   モバイルではネットワークが常につながっている    わけではない    •   地下鉄・駅•   ネットワークが接続されているときに、サーバー    へアクセスして、つながってない時にローカル    キ...
Network API•   仕様が固まり、実装がすすんでいるもの    •   Online / offline state    •   XMLHttpRequest (XHR)    •   Sever Sent Event    •  ...
On-line state•   Check current network state      if (navigator.onLine) {        // network is online      }•   event     ...
Server Sent Event•   定期的にサーバーと通信を行う•   Cross Domain Acessは現在規格制定中    •   おそらく、XHRと同様になる
Server Sent Event            (Server)•   MIME Type    •   text/event-stream    •   クライアント側はAcceptヘッダで送信    •   サーバー側はConte...
Server Sent Event          (client)// http://<server>/events にリクエストvar source = new EventSource("/events");source.addEvent...
その他
Network Information           API•   現在利用しているネットワークの種類を取得    var conType = navigator.connection.type;    if (conType == "w...
Data Storage•   File API•   Storage    •   Web Storage    •   Indexed Database    •   Web SQL Database (仕様としてほぼ消滅)
Web Storage•   二種類のストレージタイプ    •   localStorage    •   sessionStorage•   簡単なkey-valueスタイル        localStorage.setItem(‘key...
Indexed Database•   No SQL Database•   2 APIs    •   同期API    •   非同期API•   Firefoxでは非同期のみ現在サポート    •   非同期APIの方が負荷をかけない  ...
Indexed Database// Firefox -> mozIndexedDB// WebKit -> webkitIndexedDBvar request = window.indexedDB.open(“maildb", “Mail"...
User Interaction•   実装が進んでいる物    •   Touch Event    •   Web Notification•   現在仕様議論中    •   Vibration    •   Intent-base ev...
Touch Event•   タッチデバイスのためのイベントモデル    •   シングルタッチもマルチタッチもサポート•   iOSで最初に実装されたもの•   現在W3C – Web Events Groupで仕様を策定中l
Touch Event•   タッチイベントにはいろいろな定義が存在    •   touchstart … タッチポイントが開始    •   touchmove … タッチポイントが移動中    •   touchcancel… システムな...
Touch Eventfunction handleStart(event) {  var touches = event.changedTouches;  var x = touches[0].pageX;  var y = touches[...
Web Notification•   モバイルOSでは、通知機能はOS標準で搭載され    る傾向にある    •   メール通知など
Web Notification// Firefox では、mozNotification// Chromeでは、webkitNotificationvar notification =   navigator.notification(“ti...
Hardware Integration•   実装が進んでいる物    •   Geo Location    •   Device Orientation (Accelerometer)    •   Media Capture•   仕様...
Device Orientation•   ほとんどのデバイスに使われる傾きセンサーの値    を検出する    window.addEventListner(“deviceorientation”,      function(event) ...
Media Capture•   <input type=“file”>でキャプチャデバイスを操    作•   カメラや音声などを取り込む        <input type=“file” accept=“image/*”        c...
その他•   Battery Status API•   Steaming API (Web Real-Time    Communication APIs)
Bettery Status API•   電源の状態を取得    •   ACで接続中とかバッテリ駆動中とか•   バッテリの残量を取得
その他APIs•   Personal Information    •   Contact API – address book    •   Calendar API – calendar•   Communication    •   M...
API for media query•   Media Query    •   画面の解像度などでCSSを切り替える        <link rel="stylesheet" type="text/css"        media="s...
API for media query•   MatchMedia    •   DOMでmedia queryを利用する        if (window.matchMedia(          "(min-device-width: 4...
APIs•   セキュリティを考慮すべき場所においては、仕様    策定には非常に慎重    •   Contact API    •   Messaging API•   ユーザーに許可を求める方式は正しいのか?    •   Web App...
Any Question?
Mobile Web
Mobile Web
Upcoming SlideShare
Loading in...5
×

Mobile Web

1,503

Published on

Mozilla Workshop @ Nagano

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

  • Be the first to like this

No Downloads
Views
Total Views
1,503
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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?

×