次世代プラットフォームでのHTML5アプリ開発 Firefox OS/Ubuntu Touch

次世代プラットフォームでのHTML5アプリ開発 Firefox OS/Ubuntu Touch

• 1.
  Webプラットフォーム勉強会 2013/05 次世代プラットフォームでのHTML5アプリ開発 Firefox OS/UbuntuTouch
• 2.
  自己紹介  Twitter: @masap  職業: 組み込みプログラマ（主にWi-Fi）  ハッシュタグ: #FirefoxOS
• 3.
  3 概要  対象  Firefox OS/Ubuntu Touch向けHTML5アプリ開発者  目次  アプリの開発環境  UbuntuTouchでの開発手順  Web APIの動作比較
• 4.
  4 アプリの開発環境
• 5.
  5 開発環境比較 iOS Android TizenUbuntu 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
• 6.
  6 Firefox OSでのHTML5アプリ開発  過去のスライドを見てね！  http://www.slideshare.net/honmamasashi1/firefox -os-customize14
• 7.
  Ubuntu Touchでの HTML5アプリ開発  Qt Creatorを使用  エミュレータ無し  UbuntuDesktopで開発したものを そのままUbuntu Touchにインストールできる  基本的にQtの独自言語QMLでの開発だが HTML5を使うこともできる  QMLのwebview上にアプリを構築  Androidのwebviewと同様
• 8.
  8 Ubuntu Touchでの開発手順
• 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 -> UbuntuTouch -> Device Control -> Enable -> Developer Tools (初回は20分ぐらい かかる)  実機にSSH接続。Tools -> Ubuntu Touch -> Device Control -> SSH to device  実行。Build -> Ubuntu Touch -> Run Application on Device
• 12.
  環境構築  ハードル高い？  まずUbuntuをインストールする時点でWebアプリ屋さ んにはきついかも  周りの人に聞こう  この勉強会には詳しい人がいっぱい来てます  要望があれば環境構築だけのハンズオンとかやります
• 13.
  13 Web APIの動作比較
• 14.
  14 互換性は本当にあるの？  HTML5で書けばどのプラットフォームでも動きます！  ホントに？  ハードウェアを制御するAPIでも？  例) Androidでカメラを制御しようとすると 機種依存コードをたくさん書くハメになる  実験してみよう！
• 15.
  15 調査対象  スマートフォンに標準搭載されている機能を比較  エンジン  Firefox OS (Geckoベース)とUbuntuTouch (Webkit ベース) を比較 API 説明 Ambient light sensor 周囲の明るさを検出 Battery Status 電池残量、電源が接続されているかを検出 Proximity sensor 近くの物体との距離を検出 Vibration デバイスを振動させる
• 16.
  16 調査対象  スマートフォンに標準搭載されている機能を比較  エンジン  Firefox OS (Geckoベース)とUbuntuTouch (Webkit ベース) を比較 API 説明 Ambient light sensor 周囲の明るさを検出 Battery Status 電池残量、電源が接続されているかを検出 Proximity sensor 近くの物体との距離を検出 Vibration デバイスを振動させる
• 17.
  17 結果  Firefox OSは全て動作、Ubuntu Touchは全滅  UbuntuTouch側には何も表示されない API 確認項目 Firefox OS Ubuntu Touch Ambient light sensor 周囲の明るさを表示する ○ ✕ Battery Status 電池残量、電源接続状態 を表示する ○ ✕ Proximity sensor 物体との距離を表示する ○ ✕ Vibration 振動する ○ ✕
• 18.
  18 詳細  Ubuntu Touchで何が起きているのか  Ubuntu TouchのJavaScriptデバッガが見当たらなかっ たのでUbuntuDesktop + 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の違い  どっちが優れているとかではなくスタンスの違い  FirefoxOS  「全てをWebで！」を公言しているので 部分的にネイティブを使って逃げたり できない。前述のAPIは必要に迫られて 実装している。  Ubuntu Touch  必要に迫られていない。Webkitを使っている Android/Ubuntu Touch/Tizen/Chrome OSはネイティブを 使える。
• 21.
  21 まとめ  ハードウェアを制御するWeb APIに互換性など無 かった  まだ早い。標準化されるまで待ちか？  Firefox OS専用と割り切るならアリ
• 22.
  22 以上