Movatterモバイル変換

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?• モバイルデバイス用のWebブラウザには2種類が存在する • サーバーで描画して、クライアントに描画結果を転送 • クライアントですべてを行う(=デスクトップ用ブラウザと同じ)

サーバー側で描画 Web ServerHTMLの解析、描画をサーバー側で行う Internetクライアント側はその結果(画像)をサーバーから受け取 Rendering Serverり、描画 Mobile

サーバー側で描画• Opera Mini• Skyfire• jigi

クライアント側で描画 Web Serverデスクトップ用のWebブ Internetラウザと同じテクノロジ Mobile

クライアント側で描画•WebKitをベースとしたブラウザ(OSに組み込まれている標準ブラウザ) • Android • iOS • Symbian (Nokia) • Blackberry (6 or later)• Opera Mobile• Firefox Mobile• Internet Explorer Mobile (Windows Phone)

各タイプの違いサーバーで描画するタイプクライアントで描画するタイプ • モバイルデバイス側にCPU • クライアントですべて完結するパワーを余り必要としないため、JavaScriptを利用したコンテンツなどの場合にいちいち利点 • サーバー側でデータを圧縮サーバーに接続する必要がないできるので、トラフィックを縮小できる • オフラインサポート • CPUパワーを必要とする • インタラクティブなコンテ • トラフィックが増大しやすいンツの場合には、逆にトラ欠点フィックが増える • Opera Turboのようなプロキシを介すことで軽減可能 • クライアントだけで処理が完結しないため

世界におけるモバイルブラウザシェア

モバイル上での Webブラウザ• OSに”まともな”ブラウザが組み込まれていない環境下ではサードパーティ製ブラウザが使われる • JavaME • Symbian (old version) • Windows Moble (not Windows Phone)• OSに組み込まれたブラウザが”まとも”であれば、そのまま使われることが多い

Network on Mobile• 常にネットワークがつながっている訳ではない • オンライン・オフラインが切り替わる• ネットワークの速度は改善されているが、デスクトップに比べれば。。。 • 効率のいいサーバーとの接続方法?

Network on Mobile• モバイルではネットワークが常につながっているわけではない • 地下鉄・駅• ネットワークが接続されているときに、サーバーへアクセスして、つながってない時にローカルキャッシュ (データベース) を利用

Network API• 仕様が固まり、実装がすすんでいるもの • Online / offline state • XMLHttpRequest (XHR) • Sever Sent Event • WebSocket• 使用策定中 • Network Information API

On-line state• Check current network state if (navigator.onLine) { // network is online }• event window.addEventListener(“online”, function() { // network status changes to online }, true);

Server Sent Event• 定期的にサーバーと通信を行う• Cross Domain Acessは現在規格制定中 • おそらく、XHRと同様になる

Server Sent Event (Server)• MIME Type • text/event-stream • クライアント側はAcceptヘッダで送信 • サーバー側はContent-Typeで送信• データ形式 • id: <識別ID> • data: <送信内容> • retry: <ミリ秒> 次の秒後にリクエストを投げるかを指定

Server Sent Event (client)// http://<server>/events にリクエストvar source = new EventSource("/events");source.addEventLitener( "message", function(e) { document.body.innerHTML += e.data; }, false);

Network Information API• 現在利用しているネットワークの種類を取得 var conType = navigator.connection.type; if (conType == "wifi") { // 現在の接続先がWIFI } else if (conType == “3G”) { // 現在の接続先が3G }

Data Storage• File API• Storage • Web Storage • Indexed Database • Web SQL Database (仕様としてほぼ消滅)

Web Storage• 二種類のストレージタイプ • localStorage • sessionStorage• 簡単なkey-valueスタイル localStorage.setItem(‘key’, ‘value’); localStorage.getItem(‘key’);• 大きなデータや複雑なデータには向かない

Indexed Database• No SQL Database• 2 APIs • 同期API • 非同期API• Firefoxでは非同期のみ現在サポート • 非同期APIの方が負荷をかけない • 同期APIはWorkersなどUIを伴わない処理にしか向かない

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) { }}

User Interaction• 実装が進んでいる物 • Touch Event • Web Notification• 現在仕様議論中 • Vibration • Intent-base events • Speech etc

Touch Event• タッチデバイスのためのイベントモデル • シングルタッチもマルチタッチもサポート• iOSで最初に実装されたもの• 現在W3C – Web Events Groupで仕様を策定中l

Touch Event• タッチイベントにはいろいろな定義が存在 • touchstart … タッチポイントが開始 • touchmove … タッチポイントが移動中 • touchcancel… システムなどによって、タッチイベントがキャンセル • touchleave … 要素間の移動などタッチポイントが離れる • touchend … タッチが終了

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);}

Web Notification• モバイルOSでは、通知機能はOS標準で搭載される傾向にある • メール通知など

Web Notification// Firefox では、mozNotification// Chromeでは、webkitNotificationvar notification = navigator.notification(“title”, “message”);notification.onclose = function() { // close時};

Hardware Integration• 実装が進んでいる物 • Geo Location • Device Orientation (Accelerometer) • Media Capture• 仕様策定中 • Battey Status Event • Streaming API

Device Orientation• ほとんどのデバイスに使われる傾きセンサーの値を検出する window.addEventListner(“deviceorientation”, function(event) { alpha = event.alpha; beta = event.beta; gamma = event.gamma; }, true);

Media Capture• <input type=“file”>でキャプチャデバイスを操作• カメラや音声などを取り込む <input type=“file” accept=“image/*” capture=“camera”> • Android 3.0 Web Browser <input type=“file” accept=“image/*;capture=camera”>

その他• 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 • Messaging API – email / SMS • P2P• Graphics • Media Query

API for media query• Media Query • 画面の解像度などでCSSを切り替える <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 480px)" href="480px.css“>

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() { });

APIs• セキュリティを考慮すべき場所においては、仕様策定には非常に慎重 • Contact API • Messaging API• ユーザーに許可を求める方式は正しいのか? • Web Appsに関しては?

Movatterモバイル変換

Change Language

Mobile Web

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to Mobile Web

More from Makoto Kato

Mobile Web