firefox os hackathon
Post on 15-Jan-2015
2.773 Views
Preview:
DESCRIPTION
TRANSCRIPT
Firefox OS Hackathon@Firefox OS & Windows 8 Hackathon
by Tomoya Asai (dynamis)
about:me
Tomoya ASAI
Mozilla JapanTechnical Marketing (Evangelist)
dynamis @ communitydynamis.jp
@dynamitter
facebook.com/dynamis
mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
今日の重要 URL
Firefox OS Simulatorhttps://addons.mozilla.org/firefox/addon/firefox-os-simulator/
Firefox OS Boilerplatehttps://hacks.mozilla.org/2013/01/introducing-the-firefox-os-boilerplate-app/http://robnyman.github.io/Firefox-OS-Boilerplate-App/
Firefox OS コミュニティサイトhttp://fxos.org/
Background
既存のプラットフォーム
OS 毎にアプリ開発言語や API は OS に依存iOS/Windows は UI 制限も強い
WebView はサブセットWebView << Native追加 API が標準化されない
Web Platform への期待
次世代プラットフォームWeb 技術で何でも可能に
マルチデバイス対応開発言語や API の共通化
ベンダー非依存の標準自由で持続性のある API
Web Platform の課題
機能的な制約デバイスやシステム系の API 不足
パフォーマンスJava などに比べても数倍遅い
アプリ配信と課金Market や Payment の標準なし
マイクロベンチなら JS ~= Java に追いついたが実アプリレベルでは JS 遅い
Multitouch
Accelerometer
CamerasSpeaker
Microphone
Gyro
Hardware Keys
Bluetooth
Light SensorProximity Sensor
USB Access
Vibration Motor
Native じゃないと使えない…
大きなアプリはかなり遅い
ベンチだけ速い JavaScript？ベンチマーク用に開発してるの？
�����!������
Firefox OS
Firefox OS - Web is the Platform
Web = アプリ環境アプリはすべて Web 技術でドメイン = アプリの１：１対応Web を進化させる不足機能は API を定義・標準化Web のセキュリティモデルなども実装・標準化していく
Web 技術 = Native へ
Web 技術が「ネイティブ」HTML/CSS/JS ですべて可能に新しい API は W3C 標準化
速度も Java に追いつく単純な演算程度なら既に同程度asm.js によって大幅な高速化WebGL や DOMCrypt なども活用
Web 技術だけですべてが済むプラットフォームとなるよう発展中
ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も
その他なんでも...
すべて Web 技術で！
Firefox OS : Tizen : Android
Native Framework
カーネル & HAL
Web Platform
Web Framework
App Framework
Android Runtime
Dalvik
WebKit
Javaアプリ
ブラウザアプリ
NativeLibrary
Webアプリ
WebKit
Webアプリ
Nativeアプリ
OSPetc...
DeviceAPIWebRT
Webアプリ
PackagedWebアプリ
コアサービスGeckoDeviceAPI SystemAPI
Web に最適化シンプル＆スマート
ライブラリSGL etc.
NativeInterface
カーネル & HAL カーネル & HAL
X.org etc.
日経コミュニケーション 201305 への寄稿原稿から引用
進化を続ける Web 技術
問題はすべて解決してきた速度遅い → 高速化マルチコア → WorkersGPU 使えない → WebGL, WebCLJS 嫌い → ECMA6th, Emscripten×××できない → API を追加Native なら… → Web が Native
写真は JavaScript の父であり Mozilla の CTO である Brendan Eich
ネイティブに近い処理速度へ
asm.js で C の 1/2 程度までJava や C# の処理速度と同程度
Unreal Engine on Browser
100 万行以上の C & OpenGL コードを 5 日で移植LLVM + Emscripten で JS (asm.js) に変換
日経コミュニケーション 201306 への寄稿原稿から引用
開発パートナーと製品化
世界中に広がるパートナーKDDI, Telefónica, Deutsche Telekom...世界の主要 18 キャリアZTE, Alcatel, LG, Huawei, Sony, Foxconn...夏には 9 ヶ国以上で発売ヨーロッパと南米からスタート
日本や北米では 2013~2014 のタイムフレームで発売予定
MWC で発表したパートナー
主要なキャリア、端末メーカー、チップメーカーなど
チップ＆デバイスメーカー
Apps Dev
Firefox OS のアプリ開発
Web アプリです。Web アプリです。Web アプリです。
大事なこと３回
Firefox OS のアプリ開発
いつもの開発ツールいつものエディタいつものライブラリ
������ ��� ��
アプリ開発の流れ
普通に Web 開発デバッグもいつも通り
manifest ファイルを用意メタ情報を JSON 形式で記載
シミュレータや実機テスト一部の API は実機で確認Android Firefox で殆ど大丈夫
https://github.com/dynamis/firefoxos/wiki/simulator
２つの方式のアプリ
Hosted (Web 読み込み型)従来の OS ではブラウザ上で動作動作や権限は従来の Web と同じオフライン対応アプリも開発可能
Packaged (ダウンロード型)従来のスマホアプリに相当するマーケット審査を経て追加権限取得サイト全体を ZIP して配布する形式
PackagedWeb アプリ
HostedWeb アプリ
Internet
Server
端末
詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
manifest.webapp ファイルADD�4'3+��§�oceNLapr��DD�*+9)8/6:/54��§�GUoceNLJ�TaprTE��DD�2';4).&6':.��§�/4*+>�.:32��DD�/)549��§ADDDD������§�/)549,5>1+.�����64-�DDC�DD�*+<+256+8��§ADDDD�4'3+��§�*?4'3/9��DDDD�;82��§�.::6�*?4'3/9�06�DDC�DD�*+,';2:&25)'2+��§�0'�C§�w�§tFdso`bsR§§��§/4*+>�.:32§�|VSH
https://developer.mozilla.org/en-US/docs/Apps/Manifest
manifest のその他重要項目
cspContent Security Policy の設定変更
fullscreen, orientationフルスクリーン起動するか？縦横回転どうするか？
installs_allowed_fromインストール元として許可するサイト (Market)
type, permissionsデフォルト許可以外の API 使用許可を求める
詳細はこちら: https://developer.mozilla.org/en-US/docs/Apps/Manifest
アプリ間連携 (Activities) の登録A§§§§���§zv§���§§�'):/</:/+9��§A§§§§�6/)1��§A§§§§§§�.8+,��§��6/)1�.:32��§§§§§§�*/9659/:/54��§�/42/4+��§§§§§§�,/2:+89��§A§§§§§§§§�:?6+��§$�/3'-+����/3'-+06+-���/3'-+64-�%§§§§§§C�§§§§§§�8+:;84"'2;+��§:8;+§§§§C§§CC
https://developer.mozilla.org/en-US/docs/Apps/Manifest
追加権限の要求A§§§§���§zv§���§§�:?6+��§�68/</2+-+*��§§�6+83/99/549��§A§§§§�)54:'):9��§A§§§§§§�*+9)8/6:/54��§�~¢y R¡�U���¥_���{N]}�UOZT�£TS\XN��§§§§§§�'))+99��§�8+'*)8+':+�§§§§C§§CC
https://developer.mozilla.org/en-US/docs/Apps/Manifest
方式 種類 概要
Hosted(Web から読み込む)
Web Content Web サイトそのもの。ブラウザ内でアクセスして使う。Hosted
(Web から読み込む) Installed Web Web サイトをインストールしたもの。ブラウザの UI なしで単独起動する。
Packaged(従来の OS 同様端末にインストールする)
Plain Packaged
Web サイト全体を ZIP パッケージにしているが追加権限を要求しないものPackaged
(従来の OS 同様端末にインストールする)
Privileged マーケット審査を受けて追加の権限を許可されたアプリ
Packaged(従来の OS 同様端末にインストールする)
Certified 通信事業者や端末メーカーが特別に高い権限を許可している組み込みアプリ
Firefox OS でのアプリの分類
種類 利用可能な API 例Web Content
PC や Android 等のブラウザでできることそのまま位置情報、画面方向、加速度・近接・環境光センサー、電池情報、振動、データベース (IndexedDB) など
Installed Web
OS に登録されることでアラーム、Push 通知、Web Activities などの API が使えるようになる
Plain Packaged 追加 API なし (Installed Web と同じ権限)
Privileged アドレス帳、SD カードの読み書き、CORS に関わらず任意ドメインへの XHR、TCP Socket
Certified 電話、SMS、ボイスメールなど料金の発生するサービスその他 Bluetooth、Background Service など
アプリの分類と権限
Content Security Policy
Same Origin Policy (同一生成源ポリシー)● 従来からの Web のセキュリティポリシー● スクリプトからは他のドメインにアクセス不可(CORS で明示的に許可しているドメインは除く)
● ドメイン＝セキュリティ境界＝アプリの境界
Content Security Policy● 安全性を高める新しいセキュリティポリシー● JavaScript、CSS、画像、オブジェクト、フォントなどファイルの種類毎にドメイン制限が可能
● インラインスクリプト禁止により XSS も防止可能
詳細: https://developer.mozilla.org/en-US/docs/Security/CSP
アプリの種類と CSP 設定
Privileged, Certified アプリは CSP 必須● Web から JavaScript を直接読み込んで実行できない● Privileged アプリのデフォルト: default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'
● Certified アプリのデフォルト: default-src *; script-src 'self'; object-src 'none'; style-src 'self'
● JavaScript、CSS、オブジェクトファイルはパッケージ外から読み込み不可能 (画像埋め込みは可能) という設定
CSP 設定変更は Manifest に記載● マーケットで審査する側が確認可能
詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
Simulator
Firefox OS Simulator
再起動不要の拡張機能https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/ポチッと押すだけWeb 開発メニューに追加されるFirefox デスクトップビルド＋プロファイル＋Alpha
4.0 リリース: https://dev.mozilla.jp/firefox-os-simulator-4-0-released/
全言語版シュミレータ
非公式ですがありますhttp://r2d2b2g.flod.org/
起動したら言語設定を変更Settings → LanguagesGaia アプリの UI だけでなく Accept-Languages HTTP ヘッダなども切り変わります
正式版よりリリース遅れることもあるので適当に使い分けてね
Firefox OS Simulator
プロファイル付きデスクトップビルドにホームボタンを追加コンソールやディレクトリからアプリケーションを読み込む機能も
シミュレータにインストール
Add Directory ボタンmanifest ファイルを選択するとzip して Packaged App としてインストールされる
Update ボタンで更新元のディレクトリのファイルを zip し直して、起動するショートカット: Ctrl-R (Cmd-R)
https://github.com/dynamis/firefoxos/wiki/simulator
シミュレータでデバッグ
Connectシュミレータでアプリを起動してリモートデバッグを行うコンソール、スタイルエディタ、デバッガ、ネットワークモニタ、 プロファイラ…
コンソール
エラーメッセージの確認はできるが任意スクリプト実行させるのはまだ…
スタイルエディタ
普通にライブエディットできます何かちゃんと読み込めないことも…
JavaScript デバッガ
普通にブレークポイント設定してデバッグスコープ変数とかまだバグってるかも…
ネットワークモニタ
時間、ヘッダ、レスポンス、Cookie etc 確認Connect してから Refresh すれば起動時から確認
ブラウザ機能はない戻るボタンはありません別ドメインには別ウィンドウで
Content Security PolicyPrivileged 以上では CSP が必須になることに注意が必要です制限緩和は manifest に記載を
アプリ開発の注意事項
Simulator で使えない API 例
TelephonyWebSMSWebBluetoothAmbient LightProximityNetwork InformationVibrationオフラインイベント
もっと知りたい貴方へ…
使い方https://developer.mozilla.org/ja/docs/Tools/Firefox_OS_Simulator
簡単なチュートリアルhttps://developer.mozilla.org/ja/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough
開発される方は取りあえず目を通しておくのも良いかもしれません
Debug with Android Firefox
Android に Web アプリ環境を
Web App = Native App にホームスクリーンへの追加独立してフル画面起動ネイティブ同様の利用体験
Firefox = WebRT for Android
ホームにインストール、アプリを起動した画面、マーケットをブラウズ
Android 版 Firefox で動作確認
1. Firefox をインストール2. インストールページ用意3. Firefox でページを開く4. アプリをインストール5. アプリを起動してテスト
アプリの公開
a. Marketplace に登録Firefox Marketplace (後述)
b. 自分のサイトで配布自分のサイトで install() 使う
自分のサイトで配布
install() 関数を使うvar Apps = navigator.mozApps;Apps.install(url)manifest ファイル URL を渡す
その他の Apps API:Apps.getSelf(), Apps.getInstalled()Apps.installPackage(url)
https://developer.mozilla.org/en-US/docs/Apps/Apps_JavaScript_API
navigator.mozApps.install(url)<'8§�669§�§4'</-':58�35@�669�<'8§3'4/,+9:;82§§§§�§�.::6�,>59�58-3'4/,+9:�=+('66��
<'8§8+7;+9:§�§�669�/49:'22�3'4/,+9:;82��8+7;+9:�549;))+99§�§,;4):/54��§ADD§���U�¤C�8+7;+9:�54+8858§�§,;4):/54��§ADD§���U�¤C�
Firefox OS Phones
サポート対象端末 (少し古い？)
Tier 1 (強く推奨)Keon, Inari, Unagi, Otoro, Pandaboard, Emulator, Desktop (PC)Tier 2 (ある程度動く)Nexus S, Nexus S 4GTier 3 (起動はする)Galaxy S2, Glaxy Nexus, TaraICS (Android 4.0)～ の端末 (非推奨)その他の端末は自分でビルド設定を用意
https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites
Developer Preview Phone
4/23 発売 (品切れ中)Keon: 91€+tax+shippingSnapdragon 1GHz, 4GB ROM, 512MB RAM, 3.5" HVGA
Peak: 149€+税+送料Snapdragon 1.2GHz x2, 4GB ROM, 512MB RAM, 4.3" qHD
http://www.geeksphone.com/
Developer Preview Phone
Telefónica と Geeksphone が作る開発者向けテスト端末
ビルド環境
Mac OS XXCode 4.3.1~
64bit GNU/Linux GCC~4.6.3Ubuntu 12.04 が標準Linux Mint 13, Debian 6,Ubuntu 12.10, Fedora 16/17/18
標準ビルドは Ubuntu で作られてますが Mac でビルドするのが楽です
Firefox OS ビルド環境 (Mac)§��§#�5*+�§�533'4*§�/4+§!5529§buhkFs§��§#�5*+§�� �>§I[§�')� #����9*1§_fnF§§§§�662/)':/549#)5*+�'66�54:+4:9�+<+256+8�2':,5839�')� #�62':,583�+<+256+8 ��9�')� #����9*1§ �§�53+�8+=§J�PQSL^W�^]8;(?§�+§���);82§�,9 1�§8'=�-/:.;(�)533>)2.53+(8+=-5��
§��§ijkajpherpk��E);82§�,9 �§.::69�8'=�-/:.;(�)5335@/22'�(�-���3'9:+89)8/6:9(55:9:8'6�3')�9.§B§('9.
https://github.com/dynamis/firefoxos/wiki/article#wiki-build
Firefox OS のビルド＆書き込み§��§rqgkrU§�254+-/:§)254+§-/:�-/:.;(�)5335@/22'�(�-����-/:)*§���
§��§����_��§�x��MRrhk����)54,/-�9.§4+>;9�9
§��§msl��§��0�§V�¦msl�U����(;/2*�9.§�0�
§ �§��T�K�Y§�'*(§�£RN��,2'9.�9.
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building
Marketplace
Firefox Marketplace
Device, OS 横断マーケットWeb Platform のためのストアFirefox 限定にならない設計
現在開発者向けに公開中Firefox OS と Android 版 Firefox の開発版ユーザが対象PC で使うには UA 書き換え...
https://marketplace.firefox.com/
オープンなアプリストア
全てを Web 技術で実装安定・平等な環境を提供Marketplace のソースも公開
ベンダー非依存Firefox Marketplace 以外にもストア、認証、課金も自由に
https://marketplace.firefox.com/
Marketplace のパートナー
多数のパートナーのうち一例です
Firefox ＝ WebRT (WebRunTime)
Gecko = アプリ環境Firefox = Gecko で XUL/JSWebApps = Gecko で HTML/JS
マルチデバイス対応PC, Android, Firefox OS...同じコードでどこでも動くマーケットもマルチデバイス
�������"#��
Android に Web アプリ環境を
Web App = Native App にホームスクリーンへの追加独立してフル画面起動ネイティブ同様の利用体験
Firefox = WebRT for Android
ホームにインストール、アプリを起動した画面、マーケットをブラウズ
PC にも Web アプリ環境を
Web App = Native App にプログラムフォルダ (アプリケーションディレクトリ) への追加ウィンドウはもちろんプロセスもデータも全て独立
Firefox = WebRT for PC
Web = Marketplace へ
Marketplace に縛られないWeb はアクセスすれば使えるMarketplace のアプリでなくともアプリ内課金 API が利用可能
Web/Marketplace 横断検索Firefox Marketplace に登録されていないアプリも見つけられる
アプリも「ぐぐる」時代へ
"まずインストール" は古いディレクトリ(分類)だけのマーケットでは Google 以前の Web
動的な Web アプリ環境インストール不要で使える検索も Market / Web 横断検索
*1 everything.me ってサービスだから正確には「えぶる」かも？
*1
Marketplace
Web
アプリ内に直接ジャンプ
Marketplace に登録
1. アカウント作成 (無料)2. manifest.webapp を登録3. アプリ情報を記載4. レビュー完了を待つ
オープンなレビューシステム
コミュニティレビューへFirefox のアドオンと同じにレビュー基準もレビュアーもすべてオープンで公平なマーケット
動作まではレビューしないあくまで最低限のフィルタ
https://developer.mozilla.org/en-US/docs/Apps/Marketplace_review_criteria
For More Info
Firefox OS コミュニティ！
http://FxOS.org/イベントやドキュメントをご案内
http://FxOS.org/ml(https://groups.google.com/group/firefoxos にリダイレクト)
���������������
See Also...
Firefox OS
Web is the PlatformFirefox OS の概要Web 技術がネイティブWeb 全体が Marketplace
http://r.dynamis.jp/fxos
Web 技術 2012 年の変化
最新 Web 技術動向2012 年に進化した点やブラウザベンダーの動向を紹介
HTML5 から HTML5.1 へHTML の仕様は進化と安定化が同時平行で続けられる
開発者ツール紹介
一通りの機能と使い方Firefox 標準の開発者ツール隠し設定やビルトイン関数のリファレンスなども含めています
Firebug とその拡張機能アイコンや背景画像を変更するカスタマイズにも言及してます
http://r.dynamis.jp/devtools
CSS 最新機能紹介
CSS の新機能紹介新機能や 2011 年から変わった点
http://r.dynamis.jp/css2012
JavaScript.Next
JavaScript の最新仕様ECMAScript 5th のポイント
JavaScript 次世代仕様ECMAScript 6th や Harmony
http://r.dynamis.jp/jsnext
セキュリティ関連機能紹介
セキュリティ大事！知っておくべき機能です
Content Security Policy次世代セキュリティポリシーSame Origin Policy はもう古い
http://r.dynamis.jp/sec
top related