More Related Content
What's hot (20)
Similar to 次世代プラットフォームでのHTML5アプリ開発 Firefox OS/Ubuntu Touch (20)
![[Japan Tech summit 2017] APP 001](https://cdn.slidesharecdn.com/ss_thumbnails/techsummit2017pdfapp001-171115031546-thumbnail.jpg?width=560&fit=bounds)
More from Honma Masashi (12)
Recently uploaded (8)
![ElasticsearchでSPLADEする [Search Engineering Tech Talk 2025 Winter]](https://cdn.slidesharecdn.com/ss_thumbnails/searchtech-250228102455-ddc5ce09-thumbnail.jpg?width=560&fit=bounds)
次世代プラットフォームでのHTML5アプリ開発 Firefox OS/Ubuntu Touch
- 2. 自己紹介 Twitter: @masap 職業: 組み込みプログラマ（主に Wi-Fi） ハッシュタグ: #FirefoxOS
- 3. 3 概要 対象 Firefox OS/Ubuntu Touch向けHTML5アプリ開発者 目次 アプリの開発環境 Ubuntu Touchでの開発手順 Web APIの動作比較
- 4. 4 アプリの開発環境
- 5. 5 開発環境比較 iOS Android Tizen Ubuntu Touch Firefox OS SDK Xcode Eclipse with ADT 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
- 7. Ubuntu Touchでの HTML5アプリ開発 Qt Creatorを使用 エミュレータ無し Ubuntu Desktopで開発したものを そのままUbuntu Touchにインストールできる 基本的にQtの独自言語QMLでの開発だが HTML5を使うこともできる QMLのwebview上にアプリを構築 Androidのwebviewと同様
- 9. 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. 10 HTML5アプリ開発手順(2/3) プロジェクトの作成を終了 Finishを押す ソースコードを編集する Ctrl-Oを押す html/index.html を開いて編集する 実行する Build -> Run で Ubuntu で実行できる
- 11. 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
- 13. 13 Web APIの動作比較
- 15. 15 調査対象 スマートフォンに標準搭載されている機能を比較 エンジン Firefox OS (Geckoベース)とUbuntu Touch (Webkit ベース) を比較 API 説明 Ambient light sensor 周囲の明るさを検出 Battery Status 電池残量、電源が接続されているかを検出 Proximity sensor 近くの物体との距離を検出 Vibration デバイスを振動させる
- 16. 16 調査対象 スマートフォンに標準搭載されている機能を比較 エンジン Firefox OS (Geckoベース)とUbuntu Touch (Webkit ベース) を比較 API 説明 Ambient light sensor 周囲の明るさを検出 Battery Status 電池残量、電源が接続されているかを検出 Proximity sensor 近くの物体との距離を検出 Vibration デバイスを振動させる
- 17. 17 結果 Firefox OSは全て動作、Ubuntu Touchは全滅 Ubuntu Touch側には何も表示されない API 確認項目 Firefox OS Ubuntu Touch Ambient light sensor 周囲の明るさを表示する ○ ✕ Battery Status 電池残量、電源接続状態 を表示する ○ ✕ Proximity sensor 物体との距離を表示する ○ ✕ Vibration 振動する ○ ✕
- 18. 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. 19 標準化のステップ W3Cで標準化作業進行中 まだどれも標準化が済んでいない ステップ 雑な説明 APIの進捗 Recommendation 正式に公開 Proposed Recommendation 実装出揃ってきたね Candidate Recommendation みんな実装してみて Battery Status API, Vibration API Last Call Working Draft 議論まとまってきたね Working Draft こんなAPIどうですかね Ambient Light Event, Proximity Events
- 20. 20 Firefox OSとUbuntu Touchの違い どっちが優れているとかではなくスタンスの違い Firefox OS 「全てをWebで！」を公言しているので 部分的にネイティブを使って逃げたり できない。前述のAPIは必要に迫られて 実装している。 Ubuntu Touch 必要に迫られていない。Webkitを使っている Android/Ubuntu Touch/Tizen/Chrome OSはネイティブを 使える。
- 22. 22 以上