Firefox os hackathon
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Firefox os hackathon

  • 3,564 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,564
On Slideshare
2,220
From Embeds
1,344
Number of Embeds
16

Actions

Shares
Downloads
17
Comments
0
Likes
6

Embeds 1,344

http://bitwalk.blogspot.jp 711
http://yakan0912.wordpress.com 248
https://twitter.com 140
http://www.lifewood.net 74
http://bitwalk.blogspot.com 69
http://tum.no32.tk 54
http://takano32.tumblr.com 17
http://mako-28.tumblr.com 9
http://atm09td.tumblr.com 7
http://webcache.googleusercontent.com 4
http://www.tumblr.com 3
http://cloud.feedly.com 2
http://www.geek.sc 2
http://www.google.co.jp 2
http://bitwalk.blogspot.fr 1
http://bitwalk.blogspot.com.au 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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