0
Firefox OS Hackathon
@Firefox OS & Windows 8 Hackathon
by Tomoya Asai (dynamis)
about:me
Tomoya ASAI
Mozilla Japan
Technical Marketing (Evangelist)
dynamis @ community
dynamis.jp
@dynamitter
facebook.com/dynamis...
今日の重要 URL
Firefox OS Simulator
https://addons.mozilla.org/firefox/addon/firefox-os-
simulator/
Firefox OS Boilerplate
https:...
Background
既存のプラットフォーム
OS 毎にアプリ開発
言語や API は OS に依存
iOS/Windows は UI 制限も強い
WebView はサブセット
WebView << Native
追加 API が標準化されない
Web Platform への期待
次世代プラットフォーム
Web 技術で何でも可能に
マルチデバイス対応
開発言語や API の共通化
ベンダー非依存の標準
自由で持続性のある API
Web Platform の課題
機能的な制約
デバイスやシステム系の API 不足
パフォーマンス
Java などに比べても数倍遅い
アプリ配信と課金
Market や Payment の標準なし
マイクロベンチなら JS ~= Java に...
Multitouch
Accelerometer
Cameras
Speaker
Microphone
Gyro
Hardware Keys
Bluetooth
Light Sensor
Proximity Sensor
USB Access
...
大きなアプリはかなり遅い
ベンチだけ速い JavaScript?
ベンチマーク用に開発してるの?
Firefox OS
Firefox OS - Web is the Platform
Web = アプリ環境
アプリはすべて Web 技術で
ドメイン = アプリの1:1対応
Web を進化させる
不足機能は API を定義・標準化
Web のセキュリティモデルな...
Web 技術 = Native へ
Web 技術が「ネイティブ」
HTML/CSS/JS ですべて可能に
新しい API は W3C 標準化
速度も Java に追いつく
単純な演算程度なら既に同程度
asm.js によって大幅な高速化
Web...
ステータスバー (通知、
電波強度、電池残量...)も
カメラやラジオも
ビデオや音楽の再生も
マーケットプレイスも
システムの環境設定も
ホーム画面や壁紙も
電話や SMS の送受信も
もちろん ブラウザ も
その他なんでも...
すべて W...
Firefox OS : Tizen : Android
Native
Framework
カーネル & HAL
Web Platform
Web
Framework
App Framework
Android
Runtime
Dalvik
W...
日経コミュニケーション 201305 への寄稿原稿から引用
進化を続ける Web 技術
問題はすべて解決してきた
速度遅い → 高速化
マルチコア → Workers
GPU 使えない → WebGL, WebCL
JS 嫌い → ECMA6th, Emscripten
×××できない → API を追...
ネイティブに近い処理速度へ
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...
夏に...
MWC で発表したパートナー
主要なキャリア、端末メーカー、チップメーカーなど
チップ&デバイスメーカー
Apps Dev
Firefox OS のアプリ開発
Web アプリです。
Web アプリです。
Web アプリです。
大事なこと3回
Firefox OS のアプリ開発
いつもの開発ツール
いつものエディタ
いつものライブラリ
アプリ開発の流れ
普通に Web 開発
デバッグもいつも通り
manifest ファイルを用意
メタ情報を JSON 形式で記載
シミュレータや実機テスト
一部の API は実機で確認
Android Firefox で殆ど大丈夫
https:...
2つの方式のアプリ
Hosted (Web 読み込み型)
従来の OS ではブラウザ上で動作
動作や権限は従来の Web と同じ
オフライン対応アプリも開発可能
Packaged (ダウンロード型)
従来のスマホアプリに相当する
マーケット審査...
manifest.webapp ファイル
https://developer.mozilla.org/en-US/docs/Apps/Manifest
manifest のその他重要項目
csp
Content Security Policy の設定変更
fullscreen, orientation
フルスクリーン起動するか?縦横回転どうするか?
installs_allowed_from
...
アプリ間連携 (Activities) の登録
https://developer.mozilla.org/en-US/docs/Apps/Manifest
追加権限の要求
https://developer.mozilla.org/en-US/docs/Apps/Manifest
方式 種類 概要
Hosted
(Web から
読み込む)
Web Content
Web サイトそのもの。
ブラウザ内でアクセスして使う。Hosted
(Web から
読み込む) Installed Web
Web サイトをインストールしたも...
種類 利用可能な API 例
Web
Content
PC や Android 等のブラウザでできることそのまま
位置情報、画面方向、加速度・近接・環境光センサー、
電池情報、振動、データベース (IndexedDB) など
Installed...
Content Security Policy
Same Origin Policy (同一生成源ポリシー)
● 従来からの Web のセキュリティポリシー
● スクリプトからは他のドメインにアクセス不可
(CORS で明示的に許可しているドメ...
アプリの種類と CSP 設定
Privileged, Certified アプリは CSP 必須
● Web から JavaScript を直接読み込んで実行できない
● Privileged アプリのデフォルト: default-src *; ...
Simulator
Firefox OS Simulator
再起動不要の拡張機能
https://addons.mozilla.org/ja/
firefox/addon/firefox-os-simulator/
ポチッと押すだけ
Web 開発メニューに追加される...
全言語版シュミレータ
非公式ですがあります
http://r2d2b2g.flod.org/
起動したら言語設定を変更
Settings → Languages
Gaia アプリの UI だけでなく
Accept-Languages HTTP ヘ...
Firefox OS Simulator
プロファイル付きデスクトップビルドにホームボタンを追加
コンソールやディレクトリからアプリケーションを読み込む機能も
シミュレータにインストール
Add Directory ボタン
manifest ファイルを選択すると
zip して Packaged App として
インストールされる
Update ボタンで更新
元のディレクトリのファイルを
zip し直し...
シミュレータでデバッグ
Connect
シュミレータでアプリを起動して
リモートデバッグを行う
コンソール、スタイルエディタ、
デバッガ、ネットワークモニタ、
プロファイラ…
コンソール
エラーメッセージの確認はできるが
任意スクリプト実行させるのはまだ…
スタイルエディタ
普通にライブエディットできます
何かちゃんと読み込めないことも…
JavaScript デバッガ
普通にブレークポイント設定してデバッグ
スコープ変数とかまだバグってるかも…
ネットワークモニタ
時間、ヘッダ、レスポンス、Cookie etc 確認
Connect してから Refresh すれば起動時から確認
ブラウザ機能はない
戻るボタンはありません
別ドメインには別ウィンドウで
Content Security Policy
Privileged 以上では CSP が必須
になることに注意が必要です
制限緩和は manifest に記載を
アプリ...
Simulator で使えない API 例
Telephony
WebSMS
WebBluetooth
Ambient Light
Proximity
Network Information
Vibration
オフラインイベント
もっと知りたい貴方へ…
使い方
https://developer.mozilla.org/ja/
docs/Tools/Firefox_OS_Simulator
簡単なチュートリアル
https://developer.mozilla.org...
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.getSel...
navigator.mozApps.install(url)
Firefox OS
Phones
サポート対象端末 (少し古い?)
Tier 1 (強く推奨)
Keon, Inari, Unagi, Otoro, Pandaboard,
Emulator, Desktop (PC)
Tier 2 (ある程度動く)
Nexus S, Nexu...
Developer Preview Phone
4/23 発売 (品切れ中)
Keon: 91€+tax+shipping
Snapdragon 1GHz, 4GB ROM,
512MB RAM, 3.5" HVGA
Peak: 149€+税+...
Developer Preview Phone
Telefónica と Geeksphone が作る開発者向けテスト端末
ビルド環境
Mac OS X
XCode 4.3.1
64bit GNU/Linux
GCC 4.6.3
Ubuntu 12.04 が標準
Linux Mint 13, Debian 6,
Ubuntu 12.10, Fedora 16/17/...
Firefox OS ビルド環境 (Mac)
https://github.com/dynamis/firefoxos/wiki/article#wiki-build
Firefox OS のビルド&書き込み
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building
Marketplace
Firefox Marketplace
Device, OS 横断マーケット
Web Platform のためのストア
Firefox 限定にならない設計
現在開発者向けに公開中
Firefox OS と Android 版 Firefox
の...
オープンなアプリストア
全てを Web 技術で実装
安定・平等な環境を提供
Marketplace のソースも公開
ベンダー非依存
Firefox Marketplace 以外にも
ストア、認証、課金も自由に
https://marketpla...
Marketplace のパートナー
多数のパートナーのうち一例です
Firefox = WebRT (WebRunTime)
Gecko = アプリ環境
Firefox = Gecko で XUL/JS
WebApps = Gecko で HTML/JS
マルチデバイス対応
PC, Android, Firef...
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...
アプリも「ぐぐる」時代へ
"まずインストール" は古い
ディレクトリ(分類)だけのマーケ
ットでは Google 以前の Web
動的な Web アプリ環境
インストール不要で使える
検索も Market / Web 横断検索
*1 every...
アプリ内に直接ジャンプ
Marketplace に登録
1. アカウント作成 (無料)
2. manifest.webapp を登録
3. アプリ情報を記載
4. レビュー完了を待つ
オープンなレビューシステム
コミュニティレビューへ
Firefox のアドオンと同じに
レビュー基準もレビュアーもすべ
てオープンで公平なマーケット
動作まではレビューしない
あくまで最低限のフィルタ
https://developer.moz...
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 Platform
Firefox OS の概要
Web 技術がネイティブ
Web 全体が Marketplace
http://r.dynamis.jp/fxos
Web 技術 2012 年の変化
最新 Web 技術動向
2012 年に進化した点やブラウザ
ベンダーの動向を紹介
HTML5 から HTML5.1 へ
HTML の仕様は進化と安定化が
同時平行で続けられる
開発者ツール紹介
一通りの機能と使い方
Firefox 標準の開発者ツール
隠し設定やビルトイン関数のリ
ファレンスなども含めています
Firebug とその拡張機能
アイコンや背景画像を変更する
カスタマイズにも言及してます
http://r...
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
Firefox os hackathon
Firefox os hackathon
Firefox os hackathon
Firefox os hackathon
Upcoming SlideShare
Loading in...5
×

Firefox os hackathon

2,966

Published on

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

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,966
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
18
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Firefox os hackathon"

  1. 1. Firefox OS Hackathon @Firefox OS & Windows 8 Hackathon by Tomoya Asai (dynamis)
  2. 2. about:me
  3. 3. Tomoya ASAI Mozilla Japan Technical Marketing (Evangelist) dynamis @ community dynamis.jp @dynamitter facebook.com/dynamis mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
  4. 4. 今日の重要 URL Firefox OS Simulator https://addons.mozilla.org/firefox/addon/firefox-os- simulator/ Firefox OS Boilerplate https://hacks.mozilla.org/2013/01/introducing-the- firefox-os-boilerplate-app/ http://robnyman.github.io/Firefox-OS-Boilerplate-App/ Firefox OS コミュニティサイト http://fxos.org/
  5. 5. Background
  6. 6. 既存のプラットフォーム OS 毎にアプリ開発 言語や API は OS に依存 iOS/Windows は UI 制限も強い WebView はサブセット WebView << Native 追加 API が標準化されない
  7. 7. Web Platform への期待 次世代プラットフォーム Web 技術で何でも可能に マルチデバイス対応 開発言語や API の共通化 ベンダー非依存の標準 自由で持続性のある API
  8. 8. Web Platform の課題 機能的な制約 デバイスやシステム系の API 不足 パフォーマンス Java などに比べても数倍遅い アプリ配信と課金 Market や Payment の標準なし マイクロベンチなら JS ~= Java に追いついたが実アプリレベルでは JS 遅い
  9. 9. Multitouch Accelerometer Cameras Speaker Microphone Gyro Hardware Keys Bluetooth Light Sensor Proximity Sensor USB Access Vibration Motor Native じゃないと使えない…
  10. 10. 大きなアプリはかなり遅い ベンチだけ速い JavaScript? ベンチマーク用に開発してるの?
  11. 11. Firefox OS
  12. 12. Firefox OS - Web is the Platform Web = アプリ環境 アプリはすべて Web 技術で ドメイン = アプリの1:1対応 Web を進化させる 不足機能は API を定義・標準化 Web のセキュリティモデルなど も実装・標準化していく
  13. 13. Web 技術 = Native へ Web 技術が「ネイティブ」 HTML/CSS/JS ですべて可能に 新しい API は W3C 標準化 速度も Java に追いつく 単純な演算程度なら既に同程度 asm.js によって大幅な高速化 WebGL や DOMCrypt なども活用 Web 技術だけですべてが済むプラットフォームとなるよう発展中
  14. 14. ステータスバー (通知、 電波強度、電池残量...)も カメラやラジオも ビデオや音楽の再生も マーケットプレイスも システムの環境設定も ホーム画面や壁紙も 電話や SMS の送受信も もちろん ブラウザ も その他なんでも... すべて Web 技術で!
  15. 15. Firefox OS : Tizen : Android Native Framework カーネル & HAL Web Platform Web Framework App Framework Android Runtime Dalvik WebKit Java アプリ ブラウザ アプリ Native Library Web アプリ WebKit Web アプリ Native アプリ OSP etc... DeviceAPI WebRT Web アプリ Packaged Webアプリ コアサービスGecko DeviceAPI SystemAPI Web に最適化 シンプル&スマート ライブラリ SGL etc. Native Interface カーネル & HAL カーネル & HAL X.org etc.
  16. 16. 日経コミュニケーション 201305 への寄稿原稿から引用
  17. 17. 進化を続ける Web 技術 問題はすべて解決してきた 速度遅い → 高速化 マルチコア → Workers GPU 使えない → WebGL, WebCL JS 嫌い → ECMA6th, Emscripten ×××できない → API を追加 Native なら… → Web が Native 写真は JavaScript の父であり Mozilla の CTO である Brendan Eich
  18. 18. ネイティブに近い処理速度へ asm.js で C の 1/2 程度まで Java や C# の処理速度と同程度
  19. 19. Unreal Engine on Browser 100 万行以上の C & OpenGL コードを 5 日で移植 LLVM + Emscripten で JS (asm.js) に変換
  20. 20. 日経コミュニケーション 201306 への寄稿原稿から引用
  21. 21. 開発パートナーと製品化 世界中に広がるパートナー KDDI, Telefónica, Deutsche Telekom... 世界の主要 18 キャリア ZTE, Alcatel, LG, Huawei, Sony, Foxconn... 夏には 9 ヶ国以上で発売 ヨーロッパと南米からスタート 日本や北米では 2013~2014 のタイムフレームで発売予定
  22. 22. MWC で発表したパートナー 主要なキャリア、端末メーカー、チップメーカーなど
  23. 23. チップ&デバイスメーカー
  24. 24. Apps Dev
  25. 25. Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと3回
  26. 26. Firefox OS のアプリ開発 いつもの開発ツール いつものエディタ いつものライブラリ
  27. 27. アプリ開発の流れ 普通に Web 開発 デバッグもいつも通り manifest ファイルを用意 メタ情報を JSON 形式で記載 シミュレータや実機テスト 一部の API は実機で確認 Android Firefox で殆ど大丈夫 https://github.com/dynamis/firefoxos/wiki/simulator
  28. 28. 2つの方式のアプリ Hosted (Web 読み込み型) 従来の OS ではブラウザ上で動作 動作や権限は従来の Web と同じ オフライン対応アプリも開発可能 Packaged (ダウンロード型) 従来のスマホアプリに相当する マーケット審査を経て追加権限取得 サイト全体を ZIP して配布する形式 Packaged Web アプリ Hosted Web アプリ Internet Server 端末 詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
  29. 29. manifest.webapp ファイル https://developer.mozilla.org/en-US/docs/Apps/Manifest
  30. 30. manifest のその他重要項目 csp Content Security Policy の設定変更 fullscreen, orientation フルスクリーン起動するか?縦横回転どうするか? installs_allowed_from インストール元として許可するサイト (Market) type, permissions デフォルト許可以外の API 使用許可を求める 詳細はこちら: https://developer.mozilla.org/en-US/docs/Apps/Manifest
  31. 31. アプリ間連携 (Activities) の登録 https://developer.mozilla.org/en-US/docs/Apps/Manifest
  32. 32. 追加権限の要求 https://developer.mozilla.org/en-US/docs/Apps/Manifest
  33. 33. 方式 種類 概要 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 でのアプリの分類
  34. 34. 種類 利用可能な 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 など アプリの分類と権限
  35. 35. Content Security Policy Same Origin Policy (同一生成源ポリシー) ● 従来からの Web のセキュリティポリシー ● スクリプトからは他のドメインにアクセス不可 (CORS で明示的に許可しているドメインは除く) ● ドメイン=セキュリティ境界=アプリの境界 Content Security Policy ● 安全性を高める新しいセキュリティポリシー ● JavaScript、CSS、画像、オブジェクト、フォントなど ファイルの種類毎にドメイン制限が可能 ● インラインスクリプト禁止により XSS も防止可能 詳細: https://developer.mozilla.org/en-US/docs/Security/CSP
  36. 36. アプリの種類と 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
  37. 37. Simulator
  38. 38. 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/
  39. 39. 全言語版シュミレータ 非公式ですがあります http://r2d2b2g.flod.org/ 起動したら言語設定を変更 Settings → Languages Gaia アプリの UI だけでなく Accept-Languages HTTP ヘッダ なども切り変わります 正式版よりリリース遅れることもあるので適当に使い分けてね
  40. 40. Firefox OS Simulator プロファイル付きデスクトップビルドにホームボタンを追加 コンソールやディレクトリからアプリケーションを読み込む機能も
  41. 41. シミュレータにインストール Add Directory ボタン manifest ファイルを選択すると zip して Packaged App として インストールされる Update ボタンで更新 元のディレクトリのファイルを zip し直して、起動する ショートカット: Ctrl-R (Cmd-R) https://github.com/dynamis/firefoxos/wiki/simulator
  42. 42. シミュレータでデバッグ Connect シュミレータでアプリを起動して リモートデバッグを行う コンソール、スタイルエディタ、 デバッガ、ネットワークモニタ、 プロファイラ…
  43. 43. コンソール エラーメッセージの確認はできるが 任意スクリプト実行させるのはまだ…
  44. 44. スタイルエディタ 普通にライブエディットできます 何かちゃんと読み込めないことも…
  45. 45. JavaScript デバッガ 普通にブレークポイント設定してデバッグ スコープ変数とかまだバグってるかも…
  46. 46. ネットワークモニタ 時間、ヘッダ、レスポンス、Cookie etc 確認 Connect してから Refresh すれば起動時から確認
  47. 47. ブラウザ機能はない 戻るボタンはありません 別ドメインには別ウィンドウで Content Security Policy Privileged 以上では CSP が必須 になることに注意が必要です 制限緩和は manifest に記載を アプリ開発の注意事項
  48. 48. Simulator で使えない API 例 Telephony WebSMS WebBluetooth Ambient Light Proximity Network Information Vibration オフラインイベント
  49. 49. もっと知りたい貴方へ… 使い方 https://developer.mozilla.org/ja/ docs/Tools/Firefox_OS_Simulator 簡単なチュートリアル https://developer.mozilla.org/ja/ docs/Tools/ Firefox_OS_Simulator/ Simulator_Walkthrough 開発される方は取りあえず目を通しておくのも良いかもしれません
  50. 50. Debug with Android Firefox
  51. 51. Android に Web アプリ環境を Web App = Native App に ホームスクリーンへの追加 独立してフル画面起動 ネイティブ同様の利用体験 Firefox = WebRT for Android ホームにインストール、アプリを起動した画面、マーケットをブラウズ
  52. 52. Android 版 Firefox で動作確認 1. Firefox をインストール 2. インストールページ用意 3. Firefox でページを開く 4. アプリをインストール 5. アプリを起動してテスト
  53. 53. アプリの公開 a. Marketplace に登録 Firefox Marketplace (後述) b. 自分のサイトで配布 自分のサイトで install() 使う
  54. 54. 自分のサイトで配布 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
  55. 55. navigator.mozApps.install(url)
  56. 56. Firefox OS Phones
  57. 57. サポート対象端末 (少し古い?) Tier 1 (強く推奨) Keon, Inari, Unagi, Otoro, Pandaboard, Emulator, Desktop (PC) Tier 2 (ある程度動く) Nexus S, Nexus S 4G Tier 3 (起動はする) Galaxy S2, Glaxy Nexus, Tara ICS (Android 4.0)∼ の端末 (非推奨) その他の端末は自分でビルド設定を用意 https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites
  58. 58. Developer Preview Phone 4/23 発売 (品切れ中) Keon: 91€+tax+shipping Snapdragon 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/
  59. 59. Developer Preview Phone Telefónica と Geeksphone が作る開発者向けテスト端末
  60. 60. ビルド環境 Mac OS X XCode 4.3.1 64bit GNU/Linux GCC 4.6.3 Ubuntu 12.04 が標準 Linux Mint 13, Debian 6, Ubuntu 12.10, Fedora 16/17/18 標準ビルドは Ubuntu で作られてますが Mac でビルドするのが楽です
  61. 61. Firefox OS ビルド環境 (Mac) https://github.com/dynamis/firefoxos/wiki/article#wiki-build
  62. 62. Firefox OS のビルド&書き込み https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building
  63. 63. Marketplace
  64. 64. Firefox Marketplace Device, OS 横断マーケット Web Platform のためのストア Firefox 限定にならない設計 現在開発者向けに公開中 Firefox OS と Android 版 Firefox の開発版ユーザが対象 PC で使うには UA 書き換え... https://marketplace.firefox.com/
  65. 65. オープンなアプリストア 全てを Web 技術で実装 安定・平等な環境を提供 Marketplace のソースも公開 ベンダー非依存 Firefox Marketplace 以外にも ストア、認証、課金も自由に https://marketplace.firefox.com/
  66. 66. Marketplace のパートナー 多数のパートナーのうち一例です
  67. 67. Firefox = WebRT (WebRunTime) Gecko = アプリ環境 Firefox = Gecko で XUL/JS WebApps = Gecko で HTML/JS マルチデバイス対応 PC, Android, Firefox OS... 同じコードでどこでも動く マーケットもマルチデバイス
  68. 68. Android に Web アプリ環境を Web App = Native App に ホームスクリーンへの追加 独立してフル画面起動 ネイティブ同様の利用体験 Firefox = WebRT for Android ホームにインストール、アプリを起動した画面、マーケットをブラウズ
  69. 69. PC にも Web アプリ環境を Web App = Native App に プログラムフォルダ (アプリケー ションディレクトリ) への追加 ウィンドウはもちろんプロセスも データも全て独立 Firefox = WebRT for PC
  70. 70. Web = Marketplace へ Marketplace に縛られない Web はアクセスすれば使える Marketplace のアプリでなくとも アプリ内課金 API が利用可能 Web/Marketplace 横断検索 Firefox Marketplace に登録されて いないアプリも見つけられる
  71. 71. アプリも「ぐぐる」時代へ "まずインストール" は古い ディレクトリ(分類)だけのマーケ ットでは Google 以前の Web 動的な Web アプリ環境 インストール不要で使える 検索も Market / Web 横断検索 *1 everything.me ってサービスだから正確には「えぶる」かも? *1 Marketplace Web
  72. 72. アプリ内に直接ジャンプ
  73. 73. Marketplace に登録 1. アカウント作成 (無料) 2. manifest.webapp を登録 3. アプリ情報を記載 4. レビュー完了を待つ
  74. 74. オープンなレビューシステム コミュニティレビューへ Firefox のアドオンと同じに レビュー基準もレビュアーもすべ てオープンで公平なマーケット 動作まではレビューしない あくまで最低限のフィルタ https://developer.mozilla.org/en-US/docs/Apps/Marketplace_review_criteria
  75. 75. For More Info
  76. 76. Firefox OS コミュニティ! http://FxOS.org/ イベントやドキュメントをご案内 http://FxOS.org/ml (https://groups.google.com/group/ firefoxos にリダイレクト)
  77. 77. See Also...
  78. 78. Firefox OS Web is the Platform Firefox OS の概要 Web 技術がネイティブ Web 全体が Marketplace http://r.dynamis.jp/fxos
  79. 79. Web 技術 2012 年の変化 最新 Web 技術動向 2012 年に進化した点やブラウザ ベンダーの動向を紹介 HTML5 から HTML5.1 へ HTML の仕様は進化と安定化が 同時平行で続けられる
  80. 80. 開発者ツール紹介 一通りの機能と使い方 Firefox 標準の開発者ツール 隠し設定やビルトイン関数のリ ファレンスなども含めています Firebug とその拡張機能 アイコンや背景画像を変更する カスタマイズにも言及してます http://r.dynamis.jp/devtools
  81. 81. CSS 最新機能紹介 CSS の新機能紹介 新機能や 2011 年から変わった点 http://r.dynamis.jp/css2012
  82. 82. JavaScript.Next JavaScript の最新仕様 ECMAScript 5th のポイント JavaScript 次世代仕様 ECMAScript 6th や Harmony http://r.dynamis.jp/jsnext
  83. 83. セキュリティ関連機能紹介 セキュリティ大事! 知っておくべき機能です Content Security Policy 次世代セキュリティポリシー Same Origin Policy はもう古い http://r.dynamis.jp/sec
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×