• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Firefox OS App Dev
 

Firefox OS App Dev

on

  • 1,681 views

HTML5 Caravan @ JAWS FESTA 2013 で使用したスライド

HTML5 Caravan @ JAWS FESTA 2013 で使用したスライド
http://jfk2013.doorkeeper.jp/events/5022

Statistics

Views

Total Views
1,681
Views on SlideShare
1,643
Embed Views
38

Actions

Likes
0
Downloads
13
Comments
0

2 Embeds 38

https://twitter.com 37
https://duckduckgo.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Firefox OS App Dev Firefox OS App Dev Presentation Transcript

    • Firefox OS App Dev @ HTML5 Caravan @ JAWS FESTA 2013 on 2013/09/28 by Tomoya Asai (dynamis)
    • about:me
    • Tomoya ASAI Mozilla Japan Technical Marketing (Evangelist) dynamis @ community dynamis.jp @dynamitter facebook.com/dynamis mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
    • about:topics
    • 本日のトピック Firefox OS Application Development Firefox OS Simulator Debug with Android Firefox Publishing Apps ぼくおやつ 担当ねっ!
    • Firefox OS
    • ホーム画面 アプリのグリッド表示
    • 写真ギャラリー 写真の編集画面
    • 音楽再生アプリ ビデオ再生アプリ
    • アドレス帳 メールアプリ
    • Firefox Firefox Marketplace
    • Firefox OS - Web is the Platform Web = アプリ環境 アプリはすべて Web 技術で ドメイン = アプリの1:1対応 Web を進化させる 不足機能は API を定義・標準化 Web のセキュリティモデルなど も実装・標準化していく
    • Web 技術 = Native へ Web 技術が「ネイティブ」 HTML/CSS/JS ですべて可能に 新しい API は W3C 標準化 速度も Java に追いつく asm.js により大幅高速化を実現 WebGL や DOMCrypt なども活用 Web 技術だけですべてが済むプラットフォームとなるよう発展中
    • Semantic Elements Multi Media HTML5 Forms Offline SupportHTML5HTML5 Parser Mouse, Key ev. XHTML5 WAI- ARIA W3C
    • Semantic Elements Multi Media Canvas HTML5 Forms Offline Support Micro- Data Server- Sent ev. Web Sockets Web Storage HTML5HTML5 Parser Mouse, Key ev. XHTML5 Web Workers Web Messag- ing WAI- ARIA W3C WHATWG HTML
    • Semantic Elements Multi Media Canvas HTML5 Forms Offline Support Micro- Data Server- Sent ev. Web Sockets Web Storage Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Filters HTML5 Parser Mouse, Key ev. XHTML5 Web Workers Web Messag- ing WAI- ARIA W3C WHATWG HTML
    • Semantic Elements Multi Media Canvas HTML5 Forms Offline Support Micro- Data WebGL Indexed DB SVG Server- Sent ev. Web Sockets Web Sockets Geo- location FileAPI Web Storage XHR2 Math ML Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Filters HTML5 Parser Mouse, Key ev. ECMA Script CSP SPDY XHTML5 Orien- tation Web Workers Web Messag- ing DOM4 SMIL Vibra- tion XPath RSS OGP WAI- ARIA W3C WHATWG other Khronos ECMA IETF WOFF HTML DNT
    • Semantic Elements Multi Media Canvas HTML5 Forms Offline Support Webm H.264 Micro- Data WebGL Web SQL Indexed DB SVG Server- Sent ev. Web Sockets Web Sockets Geo- location FileAPI Web Storage XHR2 Math ML Web Audio Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Filters HTML5 Parser Mouse, Key ev. Opus ECMA Script ECMA 6th USB CSP SPDY WebCL Web RTC Net Info MP3 Device Storage TCP Socket NFC File Sys Notifi- cation XHTML5 Orien- tation Web Workers Web Messag- ing DOM4 SMIL Vibra- tion Proxi- mity XPath RSS RDF OGP Schema .org WAI- ARIA W3C WHATWG other Khronos ECMA IETF WOFF Battery Status Radio Tel HTML DNT Flex Box
    • ステータスバー (通知、 電波強度、電池残量...)も カメラやラジオも ビデオや音楽の再生も マーケットプレイスも システムの環境設定も ホーム画面や壁紙も 電話や SMS の送受信も もちろん ブラウザ も その他なんでも...
    • ステータスバー (通知、 電波強度、電池残量...)も カメラやラジオも ビデオや音楽の再生も マーケットプレイスも システムの環境設定も ホーム画面や壁紙も 電話や SMS の送受信も もちろん ブラウザ も その他なんでも... すべて Web 技術で!
    • 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. 左上のアプリが Web 読み込み型、右上のアプリがダウンロード型
    • 大規模アプリは遅かった 大規模アプリの処理速度では C 言語と大きな差があった… 小規模コードは十分に高速化できても大規模コードの最適化はまだまだ…
    • ネイティブに近い処理速度へ asm.js で C の 1/2 程度まで Java や C# の処理速度と同程度 asm.js 対応は Firefox OS では 1.2 から導入される予定
    • 時にはネイティブより高速に Java より全ベンチ高速 C より速いこともある メモリ確保が重いケース? 小規模演算での比較例 Java コードを Dalvik で実行 C コードをネイティブ実行 C を JS に変換して実行 https://blog.mozilla.org/javascript/staring-at-the-sun-dalvik-vs-spidermonkey/
    • Unreal Engine on Browser 100 万行以上の C & OpenGL コードを 5 日で移植 LLVM + Emscripten で JavaScript (asm.js) に変換 epic CITADEL http://www.unrealengine.com/html5/
    • 多数企業と共同開発・製品化 主要 18 キャリアが賛同 KDDI, Telefónica, Deutsche Telekom、Telenor... チップ&端末メーカー Qualcomm, ARM ZTE, Alcatel, LG, Huawei, Sony Foxconn... もちろん発表している企業がすべてではない
    • グローバル市場に拡大 Firefox OS の取り組みに賛同する企業の一部 (MWC の記者発表会より)
    • グローバル市場に拡大 Firefox OS の取り組みに賛同する企業の一部 (MWC の記者発表会より)
    • チップ&デバイスメーカー
    • Developer Preview Phone 4/23 発売 (品切れ中) Keon: 91€+tax+shipping MSM7225AB 1GHz, 4GB ROM, 512MB RAM, 3.5" HVGA Peak: 149€+税+送料 MSM8225 1.2GHz x2, 4GB ROM, 512MB RAM, 4.3" qHD http://www.geeksphone.com/
    • Peak+ (Pre-order) 9∼10月発送 (完売) 11月発送 (予約受付中) Peak: 149€+税+送料 MSM8225 1.2GHz x2, 4GB ROM, 1GB RAM, 4.3" qHD メモリ容量増加と質感向上 149€ は予約時限定特価らしい http://shop.geeksphone.com/en/phones/8-peak.html
    • 7月から各国で順次発売 7月2日にスペインで発売 Telefónica が ZTE Open を発売 実質 5000円 の誰でもスマホ €69 (税込) プリペイド €30 含む 順次世界各国に展開 7月12日にポーランドで発売 8月1日にラテンアメリカで発売 日本や北米では 2013~2014 年中の見込み http://mozilla.jp/blog/entry/10310/
    • ワルシャワやマドリッドでは…
    • ワルシャワやマドリッドでは…
    • ワルシャワやマドリッドでは…
    • ワルシャワやマドリッドでは…
    • ZTE の誰でもスマホ ZTE Open: Size: 114 x 62 x 12.5 mm Display: 3.5" HVGA CPU: MSM7225A 1 GHz (Cortex-A5, Adreno 200) RAM 256 MB ROM: 512 MB スペインなどで発売 http://www.ztedevices.com/product/smart_phone/2bcf2d56-0c9a-4129-a25c-acce58c8e502.html
    • Alcatel (TCL) の誰でもスマホ One Touch Fire: Size: 115 x 62.3 x 12.2 mm Display: 3.5" HVGA CPU: MSM7227A 1 GHz (Cortex-A5, Adreno 200) RAM 256 MB ROM: 512 MB ポーランドなどで発売 http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html
    • SIM フリー版も eBay で発売 ZTE Open SIM フリー版 開発者や初期採用者向け eBay US で 79.99 ドル eBay UK で 59.99 ポンド 特定の国向け設定はされない オレンジは eBay 限定カラー!? 8月16日発売、数日で完売… https://blog.mozilla.org/blog/zte-will-soon-start-sales-of-firefox-os-phones-on-ebay/
    • Apps Dev
    • Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと3回
    • Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと3回
    • Firefox OS のアプリ開発 いつもの開発ツール いつものエディタ いつものライブラリ いつもと一緒だ から安心だね!
    • アプリ開発の流れ 普通に Web 開発 デバッグもいつも通り manifest ファイルを用意 メタ情報を JSON 形式で記載 シミュレータや実機テスト 一部の API は実機で確認 Android Firefox でも殆ど大丈夫 https://github.com/dynamis/firefoxos/wiki/simulator
    • 2つの方式のアプリ Hosted (Web 読み込み型) 従来の OS ではブラウザ上で動作 動作や権限は従来の Web と同じ オフライン対応アプリも開発可能 Packaged (ダウンロード型) 従来のスマホアプリに相当する マーケット審査を経て追加権限取得 サイト全体を ZIP して配布する形式 Packaged Web アプリ Hosted Web アプリ Internet Server 端末 詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
    • アプリ情報ファイル作るだけ Hosted App Web から読み込むアプリ Web サイト + manifest.webapp Packaged App 従来型のダウンロードアプリ相当 サイト全体 ZIP + package.manifest
    • アプリ情報 (manifest.webapp) {   "name": "フォクすけアプリ",   "description": "あのフォクすけが遂にアプリに!",   "launch_path": "/index.html",   "icons": {     "128": "/icons/foxkeh-128.png"   },   "developer": {     "name": "dynamis",     "url": "http://dynamis.jp/"   } } // 注意: ローカルで / -> /index.html 変換はない https://developer.mozilla.org/en-US/docs/Apps/Manifest
    • Package App にする 1. manifest.webapp 作成 Hosted Apps の時と同じ 2. サイト全体を ZIP する manifest.webapp も含める 3. package.manifest を作成 パッケージインストール用
    • package.manifest (mini manifest) {   "name": "フォクすけアプリ",   "package_path": "/package.zip", "version": "1.0",   "developer": {     "name": "dynamis",     "url": "http://dynamis.jp/"   } } // 注意: package.zip 内の manifest.webapp と name, version, developer, locales は同一に! https://developer.mozilla.org/en-US/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/
    • Firefox OS Simulator
    • Debug with Android Firefox
    • Android 版 Firefox で動作確認 1. Firefox をインストール 2. インストールページ用意 3. Firefox でページを開く 4. アプリをインストール 5. アプリを起動してテスト Hosted App なら Android Firefox で直接アプリを開いてテストするのもアリ
    • Firefox OS Apps on Heroku
    • Heroku でアプリ公開 無料で使える PaaS Ruby, Java, Node, Python... git などさえ使えれば大丈夫 静的コンテンツ公開にも Web Hosting にも使える Ruby Sinatra とかでサクッと サンプル見て試してね ¥
    • Heroku でアプリ公開 // Hello World リポジトリを Clone git clone git@github.com:dynamis/hello-hosted- app.git cd hello-hosted-app // heroku で公開 heroku login heroku apps:create <APPNAME> git push heroku master // http://<APPNAME>.herokuapp.com/ で公開!
    • 公開できた!