Web App Platform Firefox
Upcoming SlideShare
Loading in...5
×
 

Web App Platform Firefox

on

  • 1,883 views

dotFes 2013 Kyoto で使用したスライド

dotFes 2013 Kyoto で使用したスライド
http://www.dotfes.jp/2013kyoto/

Statistics

Views

Total Views
1,883
Views on SlideShare
1,657
Embed Views
226

Actions

Likes
6
Downloads
6
Comments
0

4 Embeds 226

https://twitter.com 136
http://blog.sucosuco.com 88
http://www.linkedin.com 1
http://webcache.googleusercontent.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

Web App Platform Firefox Web App Platform Firefox Presentation Transcript

  • Web App Platform "Firefox" @dotFes 2013 Kyoto 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:mozilla
  • Mozilla = Security & Privacy 1st. セキュリティ最優先 「インターネットにおける個人の セキュリティは必須のもの」と Mozilla 宣言で明記 プライバシーに関して最も信 頼できるインターネット企業 "2012 Most Trusted Copanies for Privacy" by Ponemon Institute http://mozilla.org/about/manifesto.ja.html & http://mozilla.jp/blog/entry/10261/
  • Background
  • 既存のプラットフォーム OS 毎にアプリ開発 言語や API は OS に依存 iOS/Windows は UI 規則も強い Web はサブセット扱い アプリ環境としては不完全 追加 API の標準化もされない
  • 分断されたエコシステム i a f c プラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある
  • Web Platform への期待 次世代プラットフォーム Web 技術ですべて可能に マルチデバイス対応 開発言語や API の共通化 ベンダー非依存の標準 自由で持続性のある API
  • Web が共通プラットフォーム プラットフォーム としての Web Web がプラットフォームなら標準技術でアプリ環境が統一される
  • 開発者の多いプラットフォーム 800 10 45 調査にも依るけど HTML5 開発者の方が圧倒的に多い
  • Web Platform の課題 機能的な制約 デバイスやシステム系の API 不足 パフォーマンス Java などに比べても数倍遅い アプリ配信と課金 Market や Payment の標準なし
  • デバイス操作ができなかった カメラ マイク スピーカー 振動モーター マルチタッチ USB 接続 加速度計 Bluetooth ボタン&キー 光センサー ジャイロ 近接センサー
  • 大規模アプリは遅かった 大規模アプリの処理速度では C 言語が圧倒的に速い (小規模アプリや一部ベンチだけは以前から高速) 2013/03 - http://kripken.github.io/mloc_emscripten_talk/#/19
  • Firefox OS
  • アプリのグリッド表示 ホーム画面
  • 写真の編集画面 写真ギャラリー
  • ビデオ再生アプリ 音楽再生アプリ
  • メールアプリ アドレス帳
  • Firefox Marketplace Firefox
  • ! Firefox OS - Web is the Platform Web = アプリ環境 アプリはすべて Web 技術で ドメイン = アプリの1:1対応 Web を進化させる 不足機能は API を定義・標準化 Web のセキュリティモデルなど も実装・標準化していく
  • Web 技術をネイティブに Web 技術が「ネイティブ」 HTML/CSS/JS ですべて可能に 新しい API は W3C 標準化 速度も C 言語に迫る asm.js により大幅高速化を実現 WebGL や DOMCrypt なども活用 Web 技術だけですべてが済むプラットフォームとなるよう発展中
  • Khronos WebC L other WebG L WHATWG HTML5 Parser Web Messaging Mouse, Key ev. W3C HTML5 XHTML5 Geolocation SVG Canva s Multi Media HTML5 Forms SMIL Offline Support MicroData OGP RSS RDF Math ML DOM4 Opus H.264 Web Sockets Web Audio Web RTC IETF SPDY XHR2 CSP ECMA Indexed DB Layou t CSS3~ Trans form XPath Anim ation WOFF Flex Box Region s Filters Net Info Tel Radio NFC ECMA 6th Web SQL Media Queries Notification TCP Socket DNT FileAP I ECMA Script Web Storage Web Workers HTML Schema .org Orientation Web Sockets MP3 Webm ServerSent ev. WAIARIA Semantic Elements Vibration Device Storage File Sys Proximity USB Battery Status
  • ステータスバー (通知、
 電波強度、電池残量...)も カメラやラジオも ビデオや音楽の再生も マーケットプレイスも システムの環境設定も ホーム画面や壁紙も 電話や SMS の送受信も もちろん ブラウザ も その他なんでも... すべて Web 技術で!
  • Firefox OS : Tizen : Android Web に最適化 シンプル&スマート Web アプリ Packaged Webアプリ Web Platform DeviceAPI SystemAPI Web アプリ Web アプリ Native アプリ Web Native Framework Framework DeviceAPI OS ブラウザ アプリ Java アプリ Native Library App Framework Dalvik WebRT etc.. Android Runtime WebKit X.org etc. WebKit Native Interface SGL etc. Gecko コアサービス ライブラリ カーネル & HAL カーネル & HAL カーネル & HAL 左上のアプリが Web 読み込み型、右上のアプリがダウンロード型
  • C 言語に迫る高速化 (asm.js) asm.js 導入時点で JavaScript は C の 2 倍遅い程度 (Java や C# の処理速度と同程度以上の水準に) 2013/03 - http://kripken.github.io/mloc_emscripten_talk/#/19
  • C 言語に迫る高速化 (asm.js) Firefox の JavaScript (asm.js 形式) コード実行速度は C 言語より数割遅い程度まで迫ってきている 2013/09 - http://kripken.github.io/mloc_emscripten_talk/sloop.html#/7
  • 実レベル: Box2D 物理演算エンジン Box2D では C 言語の 2 倍遅い程度の速度 ! Chrome や IE でも通常の JS より asm.js が高速 Java や CrossBridge (Flash C++ Compiler) と同等以上 2013/07 - http://kripken.github.io/mloc_emscripten_talk/sloop.html#/8
  • 実用例: Unreal Engine 3 100 万行以上の C & OpenGL コードを 5 日で移植 LLVM + Emscripten で JavaScript (asm.js) に変換 epic CITADEL http://www.unrealengine.com/html5/
  • グローバル市場に拡大 Firefox OS の取り組みに賛同する企業の一部 (MWC の記者発表会より)
  • チップ&デバイスメーカー
  • ! 多数企業との共同開発・製品化 主要 18 キャリアが賛同 KDDI, Telefónica, Deutsche Telekom、Telenor... チップ&端末メーカー Qualcomm, ARM ZTE, Alcatel, LG, Huawei, Sony Foxconn... もちろん発表している企業がすべてではない
  • 7月、8月に最初の販売開始 7月2日にスペインで発売 Telefónica が ZTE Open を発売 €69 (税込) プリペイド €30 含む 順次世界各国に展開 7月12日にポーランドで発売 8月1日にコロンビア、ベネズエラ まずは今後の成長が見込まれる新興国市場を中心に展開 (キャリアの戦略)
  • ZTE Open & Alcatel One Touch Fire
  • ! ZTE Open 主な仕様: Size: 114 x 62 x 12.5 mm
 Display: 3.5 inch 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-
  • ! Alcatel One Touch Fire 主な仕様: Size: 115 x 62.3 x 12.2 mm
 Display: 3.5 inch 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
  • Firefox OS 端末販売は順調? Telefónica の販売実績 2013/10 (発売後 3 ヶ月) 時点 ベネズエラ スマートフォン販売の 12% 以上 コロンビア スマートフォン販売の 9% 程度 http://news.cnet.com/8301-1035_3-57608120-94/telefonicas-yotam-ben-ami-fights-for-firefox-
  • 10月から更に多くの市場へ展開 Firefox OS 1.1 端末のリリース Telefónica 10/22: ブラジル
 10/31: メキシコ、ペルー、ウルグアイ Deutsche Telekom ドイツ、ギリシャ、ハンガリー Telenor ハンガリー、セルビア、モンテネグロ 日本や北米では 2013~2014 年中の見込み http://mozilla.jp/blog/entry/10310/
  • LG Fireweb (D300) 主な仕様: Size: 113.8 x 66.5 x 9 mm
 Display: 4 inch HVGA
 CPU: 1 GHz (型番未確認) ブラジルなどで発売 http://www.vivo.com.br/firefoxos/
  • 僕もスマホになって君と 一緒にお出かけしたいな!
  • Apps Dev
  • Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 ! ! 大事なこと3回
  • Firefox OS のアプリ開発 いつもの開発ツール いつものエディタ いつものライブラリ
  • アプリ開発の流れ 普通に Web 開発 アプリマネージャ or Firebug etc. manifest ファイルを用意 メタ情報を JSON 形式で記載 シミュレータや実機テスト Android Firefox でもテスト https://github.com/dynamis/firefoxos/wiki/simulator
  • 2つの方式のアプリ Hosted (Web 読み込み型) 従来の OS ではブラウザ上で動作 動作や権限は従来の Web と同じ オフライン対応アプリも開発可能 Hosted
 Web アプリ Server Internet Packaged (ダウンロード型) 従来のスマホアプリに相当する マーケット審査を経て追加権限取得 サイト全体を ZIP して配布する形式 端末 Packaged Web アプリ 詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
  • アプリ情報ファイル書くだけ サイト + manifest.webapp 1. manifest.webapp 作成 アプリ情報書くだけで終了
  • ! アプリ情報 (manifest.webapp) https://developer.mozilla.org/en-US/docs/Apps/Manifest
  • ZIP して Packaged App に ZIP + package.manifest 1. manifest.webapp 作成 Hosted Apps の時と同じ 2. サイト全体を ZIP する manifest.webapp も含める 3. package.manifest を作成 mini manifest が別途必要
  • ! mini manifest (package.manifest) https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps
  • App Manager
  • アプリマネージャ アプリ開発・管理環境 Firefox 標準搭載の開発環境 Firefox Nightly などに搭載済み シュミレータ・実機両対応 Firefox OS 1.2 以降の実機またはシュ ミレータと接続して開発 10 月時点で Firefox OS 1.2, 1.3 の シュミレータが公開中 リリース版やベータ版には未搭載ですので Nightly で開発してください
  • アプリマネージャ Web アプリ開発統合環境が Firefox 26 から標準搭載 アプリのインストールやリモートデバッグも
  • Firefox OS 1.2 Simulator デフォルトホームにアプリ検索フォームが移動
  • Firefox OS 1.3 Simulator カテゴリ別アプリフォルダ復活
  • 独自アプリのインストール Apps パネル左下の Add ∼ App から追加 新規アプリ開発はここからしましょう
  • 独自アプリのテストとデバッグ UPDATE ボタンで端末のアプリを更新 DEBUG ボタンでリモートデバッグ開始
  • Developer Phones
  • 開発者向け端末 開発者向けロック解除端末 Geeksphone Keon Peak/Peak+ ZTE (eBay US/UK/HK) ZTE Open
  • 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) 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
  • ! ZTE Open (eBay) ZTE Open の SIM フリー版 開発者や初期採用者向け eBay US / HK で 79.99 ドル eBay UK で 59.99 ポンド オレンジは eBay 限定カラー! 日本へは eBay HK が発送 http://www.ebay.com/itm/331031989534 https://blog.mozilla.org/blog/zte-will-soon-start-sales-of-firefox-os-phones-on-ebay/
  • インスタレーションルーム L202
 入ってすぐ左で展示してます
  • Appmaker
  • Building Blocks
  • Building Blocks (UI 部品) Gaia (Firefox OS 標準) Apps のデザインを簡単に作れる http://buildingfirefoxos.com/ 使っても使わなくても OK 好きな SDK/Library 使える 自由な Web ですから! http://buildingfirefoxos.com/
  • For More Info
  • Firefox OS コミュニティ! http://FxOS.org/ イベントやドキュメントをご案内 http://FxOS.org/ml (https://groups.google.com/group/ firefoxos にリダイレクト) !