Web プラットフォーム勉強会 2013/05
次世代プラットフォームでのHTML5アプリ開発Firefox OS/Ubuntu Touch
自己紹介
Twitter: @masap 職業: 組み込みプログラマ(主に Wi-Fi) ハッシュタグ: #FirefoxOS
3
概要
対象 Firefox OS/Ubuntu Touch向けHTML5アプリ開発者
目次 アプリの開発環境 Ubuntu Touchでの開発手順 Web APIの動作比較
4
アプリの開発環境
5
開発環境比較
iOS Android Tizen UbuntuTouch
Firefox OS
SDK Xcode Eclipse withADT Plugin
Tizen SDK Ubuntu SDK なし
ブラウザエンジン
WebKit WebKit WebKit WebKit Gecko
開発言語 Objective-C Java JavaScript QML/JavaScript
JavaScript
画面設計 Objective-C XML HTML5/CSS
QML/HTML5/CSS
HTML5/CSS
ネイティブ Objective-C C++ EFL C++ なし
OS iOS Linux Linux Linux Linux
6
Firefox OSでのHTML5アプリ開発
過去のスライドを見てね! http://www.slideshare.net/honmamasashi1/firefox
-os-customize14
Ubuntu TouchでのHTML5アプリ開発
Qt Creatorを使用 エミュレータ無し
Ubuntu Desktopで開発したものを
そのままUbuntu Touchにインストールできる
基本的にQtの独自言語QMLでの開発だがHTML5を使うこともできる
QMLのwebview上にアプリを構築 Androidのwebviewと同様
8
Ubuntu Touchでの開発手順
9
HTML5アプリ開発手順(1/3)
環境構築 Ubuntu 13.04をインストール Ubuntu SDKをインストール
$ sudo apt-get install ubuntu-sdk libqt5webkit5-qmlwebkitplugin
新規プロジェクトを作成 Qt Creatorを起動 Ctrl-Nを押し
Ubuntu Touch →
HTML5 UIを選択 プロジェクト名を入力
10
HTML5アプリ開発手順(2/3)
プロジェクトの作成を終了 Finishを押す
ソースコードを編集する Ctrl-Oを押す html/index.html を開いて編集する
実行する Build -> Run で Ubuntu で実行できる
HTML5アプリ開発手順(3/3)
実機で実行 実機操作を有効にする。Tools -> Ubuntu Touch -> Device
Control -> Enable -> Developer Tools (初回は20分ぐらいかかる)
実機にSSH接続。Tools -> Ubuntu Touch -> Device Control -> SSH to device
実行。Build -> Ubuntu Touch -> Run Application on Device
環境構築
ハードル高い? まずUbuntuをインストールする時点でWebアプリ屋さ
んにはきついかも 周りの人に聞こう
この勉強会には詳しい人がいっぱい来てます
要望があれば環境構築だけのハンズオンとかやります
13
Web APIの動作比較
14
互換性は本当にあるの?
HTML5で書けばどのプラットフォームでも動きます! ホントに? ハードウェアを制御するAPIでも?
例) Androidでカメラを制御しようとすると
機種依存コードをたくさん書くハメになる
実験してみよう!
15
調査対象
スマートフォンに標準搭載されている機能を比較
エンジン Firefox OS (Geckoベース)とUbuntu Touch (Webkit
ベース) を比較
API 説明
Ambient light sensor 周囲の明るさを検出
Battery Status 電池残量、電源が接続されているかを検出
Proximity sensor 近くの物体との距離を検出
Vibration デバイスを振動させる
16
調査対象
スマートフォンに標準搭載されている機能を比較
エンジン Firefox OS (Geckoベース)とUbuntu Touch (Webkit
ベース) を比較
API 説明
Ambient light sensor 周囲の明るさを検出
Battery Status 電池残量、電源が接続されているかを検出
Proximity sensor 近くの物体との距離を検出
Vibration デバイスを振動させる
17
結果
Firefox OSは全て動作、Ubuntu Touchは全滅
Ubuntu Touch側には何も表示されない
API 確認項目 Firefox OS UbuntuTouch
Ambient light sensor 周囲の明るさを表示する ○ ✕
Battery Status 電池残量、電源接続状態を表示する
○ ✕
Proximity sensor 物体との距離を表示する ○ ✕
Vibration 振動する ○ ✕
18
詳細
Ubuntu Touchで何が起きているのか Ubuntu TouchのJavaScriptデバッガが見当たらなかっ
たのでUbuntu Desktop + ChromiumでデバッグAPI JavaScriptコンソール
Ambient light sensor エラー無し
Battery Status addEventListener()にて'levelchange', 'chargingchange'を登録するとundefined
navigator.battery.level, navigator.battery.chargingプロパティがundefined
Proximity sensor エラー無し
Vibration navigator.vibrate()メソッドが定義されていないObject #<Navigator> has no method 'vibrate'
19
標準化のステップ
W3Cで標準化作業進行中 まだどれも標準化が済んでいない
ステップ 雑な説明 APIの進捗
Recommendation 正式に公開
ProposedRecommendation
実装出揃ってきたね
CandidateRecommendation
みんな実装してみて Battery Status API,Vibration API
Last CallWorking Draft
議論まとまってきたね
Working Draft こんなAPIどうですかね Ambient Light Event,Proximity Events
20
Firefox OSとUbuntu Touchの違い
どっちが優れているとかではなくスタンスの違い Firefox OS
「全てをWebで!」を公言しているので
部分的にネイティブを使って逃げたり
できない。前述のAPIは必要に迫られて
実装している。
Ubuntu Touch 必要に迫られていない。Webkitを使っている
Android/Ubuntu Touch/Tizen/Chrome OSはネイティブを使える。
21
まとめ
ハードウェアを制御するWeb APIに互換性など無かった
まだ早い。標準化されるまで待ちか? Firefox OS専用と割り切るならアリ
22
以上