87
Firefox OS Hackathon @Firefox OS & Windows 8 Hackathon by Tomoya Asai (dynamis)

Firefox os hackathon

Embed Size (px)

DESCRIPTION

Firefox OS & Windows 8 Hackathon で使用したスライド

Citation preview

Page 1: Firefox os hackathon

Firefox OS Hackathon@Firefox OS & Windows 8 Hackathon

by Tomoya Asai (dynamis)

Page 2: Firefox os hackathon

about:me

Page 3: Firefox os hackathon

Tomoya ASAI

Mozilla JapanTechnical Marketing (Evangelist)

dynamis @ communitydynamis.jp

@dynamitter

facebook.com/dynamis

mailto: Tomoya ASAI <dynamis mozilla-japan.org>@

Page 5: Firefox os hackathon

Background

Page 6: Firefox os hackathon

既存のプラットフォーム

OS 毎にアプリ開発言語や API は OS に依存iOS/Windows は UI 制限も強い

WebView はサブセットWebView << Native追加 API が標準化されない

Page 7: Firefox os hackathon

Web Platform への期待

次世代プラットフォームWeb 技術で何でも可能に

マルチデバイス対応開発言語や API の共通化

ベンダー非依存の標準自由で持続性のある API

Page 8: Firefox os hackathon

Web Platform の課題

機能的な制約デバイスやシステム系の API 不足

パフォーマンスJava などに比べても数倍遅い

アプリ配信と課金Market や Payment の標準なし

マイクロベンチなら JS ~= Java に追いついたが実アプリレベルでは JS 遅い

Page 9: Firefox os hackathon

Multitouch

Accelerometer

CamerasSpeaker

Microphone

Gyro

Hardware Keys

Bluetooth

Light SensorProximity Sensor

USB Access

Vibration Motor

Native じゃないと使えない…

Page 10: Firefox os hackathon

大きなアプリはかなり遅い

ベンチだけ速い JavaScript?ベンチマーク用に開発してるの?

Page 11: Firefox os hackathon

�����!������

Page 12: Firefox os hackathon

Firefox OS

Page 13: Firefox os hackathon
Page 14: Firefox os hackathon
Page 15: Firefox os hackathon

Firefox OS - Web is the Platform

Web = アプリ環境アプリはすべて Web 技術でドメイン = アプリの1:1対応Web を進化させる不足機能は API を定義・標準化Web のセキュリティモデルなども実装・標準化していく

Page 16: Firefox os hackathon

Web 技術 = Native へ

Web 技術が「ネイティブ」HTML/CSS/JS ですべて可能に新しい API は W3C 標準化

速度も Java に追いつく単純な演算程度なら既に同程度asm.js によって大幅な高速化WebGL や DOMCrypt なども活用

Web 技術だけですべてが済むプラットフォームとなるよう発展中

Page 17: Firefox os hackathon

ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も

その他なんでも...

すべて Web 技術で!

Page 18: Firefox os hackathon

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.

Page 19: Firefox os hackathon

日経コミュニケーション 201305 への寄稿原稿から引用

Page 20: Firefox os hackathon

進化を続ける Web 技術

問題はすべて解決してきた速度遅い → 高速化マルチコア → WorkersGPU 使えない → WebGL, WebCLJS 嫌い → ECMA6th, Emscripten×××できない → API を追加Native なら… → Web が Native

写真は JavaScript の父であり Mozilla の CTO である Brendan Eich

Page 21: Firefox os hackathon

ネイティブに近い処理速度へ

asm.js で C の 1/2 程度までJava や C# の処理速度と同程度

Page 22: Firefox os hackathon

Unreal Engine on Browser

100 万行以上の C & OpenGL コードを 5 日で移植LLVM + Emscripten で JS (asm.js) に変換

Page 23: Firefox os hackathon

日経コミュニケーション 201306 への寄稿原稿から引用

Page 24: Firefox os hackathon

開発パートナーと製品化

世界中に広がるパートナーKDDI, Telefónica, Deutsche Telekom...世界の主要 18 キャリアZTE, Alcatel, LG, Huawei, Sony, Foxconn...夏には 9 ヶ国以上で発売ヨーロッパと南米からスタート

日本や北米では 2013~2014 のタイムフレームで発売予定

Page 25: Firefox os hackathon

MWC で発表したパートナー

主要なキャリア、端末メーカー、チップメーカーなど

Page 26: Firefox os hackathon

チップ&デバイスメーカー

Page 27: Firefox os hackathon

Apps Dev

Page 28: Firefox os hackathon

Firefox OS のアプリ開発

Web アプリです。Web アプリです。Web アプリです。

大事なこと3回

Page 29: Firefox os hackathon

Firefox OS のアプリ開発

いつもの開発ツールいつものエディタいつものライブラリ

������ ��� ��

Page 30: Firefox os hackathon

アプリ開発の流れ

普通に Web 開発デバッグもいつも通り

manifest ファイルを用意メタ情報を JSON 形式で記載

シミュレータや実機テスト一部の API は実機で確認Android Firefox で殆ど大丈夫

https://github.com/dynamis/firefoxos/wiki/simulator

Page 31: Firefox os hackathon

2つの方式のアプリ

Hosted (Web 読み込み型)従来の OS ではブラウザ上で動作動作や権限は従来の Web と同じオフライン対応アプリも開発可能

Packaged (ダウンロード型)従来のスマホアプリに相当するマーケット審査を経て追加権限取得サイト全体を ZIP して配布する形式

PackagedWeb アプリ

HostedWeb アプリ

Internet

Server

端末

詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps

Page 32: Firefox os hackathon

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

Page 33: Firefox os hackathon

manifest のその他重要項目

cspContent Security Policy の設定変更

fullscreen, orientationフルスクリーン起動するか?縦横回転どうするか?

installs_allowed_fromインストール元として許可するサイト (Market)

type, permissionsデフォルト許可以外の API 使用許可を求める

詳細はこちら: https://developer.mozilla.org/en-US/docs/Apps/Manifest

Page 34: Firefox os hackathon

アプリ間連携 (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

Page 35: Firefox os hackathon

追加権限の要求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

Page 36: Firefox os hackathon

方式 種類 概要

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 でのアプリの分類

Page 37: Firefox os hackathon

種類 利用可能な 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 など

アプリの分類と権限

Page 38: Firefox os hackathon

Content Security Policy

Same Origin Policy (同一生成源ポリシー)● 従来からの Web のセキュリティポリシー● スクリプトからは他のドメインにアクセス不可(CORS で明示的に許可しているドメインは除く)

● ドメイン=セキュリティ境界=アプリの境界

Content Security Policy● 安全性を高める新しいセキュリティポリシー● JavaScript、CSS、画像、オブジェクト、フォントなどファイルの種類毎にドメイン制限が可能

● インラインスクリプト禁止により XSS も防止可能

詳細: https://developer.mozilla.org/en-US/docs/Security/CSP

Page 39: Firefox os hackathon

アプリの種類と 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

Page 40: Firefox os hackathon

Simulator

Page 41: Firefox os hackathon

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/

Page 42: Firefox os hackathon

全言語版シュミレータ

非公式ですがありますhttp://r2d2b2g.flod.org/

起動したら言語設定を変更Settings → LanguagesGaia アプリの UI だけでなく Accept-Languages HTTP ヘッダなども切り変わります

正式版よりリリース遅れることもあるので適当に使い分けてね

Page 43: Firefox os hackathon

Firefox OS Simulator

プロファイル付きデスクトップビルドにホームボタンを追加コンソールやディレクトリからアプリケーションを読み込む機能も

Page 44: Firefox os hackathon

シミュレータにインストール

Add Directory ボタンmanifest ファイルを選択するとzip して Packaged App としてインストールされる

Update ボタンで更新元のディレクトリのファイルを zip し直して、起動するショートカット: Ctrl-R (Cmd-R)

https://github.com/dynamis/firefoxos/wiki/simulator

Page 45: Firefox os hackathon

シミュレータでデバッグ

Connectシュミレータでアプリを起動してリモートデバッグを行うコンソール、スタイルエディタ、デバッガ、ネットワークモニタ、 プロファイラ…

Page 46: Firefox os hackathon

コンソール

エラーメッセージの確認はできるが任意スクリプト実行させるのはまだ…

Page 47: Firefox os hackathon

スタイルエディタ

普通にライブエディットできます何かちゃんと読み込めないことも…

Page 48: Firefox os hackathon

JavaScript デバッガ

普通にブレークポイント設定してデバッグスコープ変数とかまだバグってるかも…

Page 49: Firefox os hackathon

ネットワークモニタ

時間、ヘッダ、レスポンス、Cookie etc 確認Connect してから Refresh すれば起動時から確認

Page 50: Firefox os hackathon

ブラウザ機能はない戻るボタンはありません別ドメインには別ウィンドウで

Content Security PolicyPrivileged 以上では CSP が必須になることに注意が必要です制限緩和は manifest に記載を

アプリ開発の注意事項

Page 53: Firefox os hackathon

Debug with Android Firefox

Page 54: Firefox os hackathon

Android に Web アプリ環境を

Web App = Native App にホームスクリーンへの追加独立してフル画面起動ネイティブ同様の利用体験

Firefox = WebRT for Android

ホームにインストール、アプリを起動した画面、マーケットをブラウズ

Page 55: Firefox os hackathon

Android 版 Firefox で動作確認

1. Firefox をインストール2. インストールページ用意3. Firefox でページを開く4. アプリをインストール5. アプリを起動してテスト

Page 56: Firefox os hackathon

アプリの公開

a. Marketplace に登録Firefox Marketplace (後述)

b. 自分のサイトで配布自分のサイトで install() 使う

Page 58: Firefox os hackathon

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�

Page 59: Firefox os hackathon

Firefox OS Phones

Page 60: Firefox os hackathon

サポート対象端末 (少し古い?)

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

Page 61: Firefox os hackathon

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/

Page 62: Firefox os hackathon

Developer Preview Phone

Telefónica と Geeksphone が作る開発者向けテスト端末

Page 63: Firefox os hackathon

ビルド環境

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 でビルドするのが楽です

Page 64: Firefox os hackathon

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

Page 65: Firefox os hackathon

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

Page 66: Firefox os hackathon

Marketplace

Page 67: Firefox os hackathon

Firefox Marketplace

Device, OS 横断マーケットWeb Platform のためのストアFirefox 限定にならない設計

現在開発者向けに公開中Firefox OS と Android 版 Firefox の開発版ユーザが対象PC で使うには UA 書き換え...

https://marketplace.firefox.com/

Page 68: Firefox os hackathon

オープンなアプリストア

全てを Web 技術で実装安定・平等な環境を提供Marketplace のソースも公開

ベンダー非依存Firefox Marketplace 以外にもストア、認証、課金も自由に

https://marketplace.firefox.com/

Page 69: Firefox os hackathon

Marketplace のパートナー

多数のパートナーのうち一例です

Page 70: Firefox os hackathon

Firefox = WebRT (WebRunTime)

Gecko = アプリ環境Firefox = Gecko で XUL/JSWebApps = Gecko で HTML/JS

マルチデバイス対応PC, Android, Firefox OS...同じコードでどこでも動くマーケットもマルチデバイス

�������"#��

Page 71: Firefox os hackathon

Android に Web アプリ環境を

Web App = Native App にホームスクリーンへの追加独立してフル画面起動ネイティブ同様の利用体験

Firefox = WebRT for Android

ホームにインストール、アプリを起動した画面、マーケットをブラウズ

Page 72: Firefox os hackathon

PC にも Web アプリ環境を

Web App = Native App にプログラムフォルダ (アプリケーションディレクトリ) への追加ウィンドウはもちろんプロセスもデータも全て独立

Firefox = WebRT for PC

Page 73: Firefox os hackathon

Web = Marketplace へ

Marketplace に縛られないWeb はアクセスすれば使えるMarketplace のアプリでなくともアプリ内課金 API が利用可能

Web/Marketplace 横断検索Firefox Marketplace に登録されていないアプリも見つけられる

Page 74: Firefox os hackathon

アプリも「ぐぐる」時代へ

"まずインストール" は古いディレクトリ(分類)だけのマーケットでは Google 以前の Web

動的な Web アプリ環境インストール不要で使える検索も Market / Web 横断検索

*1 everything.me ってサービスだから正確には「えぶる」かも?

*1

Marketplace

Web

Page 75: Firefox os hackathon

アプリ内に直接ジャンプ

Page 76: Firefox os hackathon

Marketplace に登録

1. アカウント作成 (無料)2. manifest.webapp を登録3. アプリ情報を記載4. レビュー完了を待つ

Page 77: Firefox os hackathon

オープンなレビューシステム

コミュニティレビューへFirefox のアドオンと同じにレビュー基準もレビュアーもすべてオープンで公平なマーケット

動作まではレビューしないあくまで最低限のフィルタ

https://developer.mozilla.org/en-US/docs/Apps/Marketplace_review_criteria

Page 78: Firefox os hackathon

For More Info

Page 79: Firefox os hackathon

Firefox OS コミュニティ!

http://FxOS.org/イベントやドキュメントをご案内

http://FxOS.org/ml(https://groups.google.com/group/firefoxos にリダイレクト)

���������������

Page 80: Firefox os hackathon
Page 81: Firefox os hackathon

See Also...

Page 82: Firefox os hackathon

Firefox OS

Web is the PlatformFirefox OS の概要Web 技術がネイティブWeb 全体が Marketplace

http://r.dynamis.jp/fxos

Page 83: Firefox os hackathon

Web 技術 2012 年の変化

最新 Web 技術動向2012 年に進化した点やブラウザベンダーの動向を紹介

HTML5 から HTML5.1 へHTML の仕様は進化と安定化が同時平行で続けられる

Page 84: Firefox os hackathon

開発者ツール紹介

一通りの機能と使い方Firefox 標準の開発者ツール隠し設定やビルトイン関数のリファレンスなども含めています

Firebug とその拡張機能アイコンや背景画像を変更するカスタマイズにも言及してます

http://r.dynamis.jp/devtools

Page 85: Firefox os hackathon

CSS 最新機能紹介

CSS の新機能紹介新機能や 2011 年から変わった点

http://r.dynamis.jp/css2012

Page 86: Firefox os hackathon

JavaScript.Next

JavaScript の最新仕様ECMAScript 5th のポイント

JavaScript 次世代仕様ECMAScript 6th や Harmony

http://r.dynamis.jp/jsnext

Page 87: Firefox os hackathon

セキュリティ関連機能紹介

セキュリティ大事!知っておくべき機能です

Content Security Policy次世代セキュリティポリシーSame Origin Policy はもう古い

http://r.dynamis.jp/sec