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

以上