Basis of Firefox Apps

2,496 views

Published on

html5j - Webプラットフォーム部 勉強会 第1回 で使用したスライド
http://atnd.org/events/49152

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,496
On SlideShare
0
From Embeds
0
Number of Embeds
878
Actions
Shares
0
Downloads
18
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Basis of Firefox Apps

  1. 1. Basis of Firefox Apps Web Apps Summary @ html5j - WebPlatform by Tomoya Asai (dynamis)
  2. 2. Firefox Developer Conference in Kyoto on 2014.04.19
  3. 3. about:me (Tomoya ASAI) Mozilla Japan Technical Marketing (Evangelist) dynamis @ community dynamis.jp @dynamitter facebook.com/dynamis mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
  4. 4. topics: Firefox OS Web Apps App Dev 何処に重点を置こうかな…(^^; きょうの おはなし
  5. 5. Firefox OS
  6. 6. Firefox OS in 2013 Web is the Platform 3 種のデバイスを 4 つキャリアが 15 ヶ国に商用展開
  7. 7. 2013 年は 3 機種を商用展開 OPEN FIRE FIREWEB
  8. 8. 新機種 ZTE OPEN II ZTE OPEN C
  9. 9. 新機種 FIRE C FIRE E FIRE S
  10. 10. 新機種 FIRE 7
  11. 11. 新機種 Y300
  12. 12. スマホ以外にも順次展開 パートナーが求めるデバイスに順次展開 (Mozilla 自身は製品展開しない)
  13. 13. 拡大を続けるパートナー キャリア、デバイスメーカー、SoC メーカー etc... MWC 2014 で発表したパートナー
  14. 14. 国内からもエコシステム革新へ 次に続くのは貴方ですよね! http://www.mozilla.jp/mwc/
  15. 15. Firefox OS 2.0?
  16. 16. すっきりデザイン 完成イメージです
  17. 17. すべての情報に1カ所から 完成イメージです
  18. 18. 左右スワイプでアプリを切替 完成イメージです
  19. 19. くわしくは…
  20. 20. 京都で!
  21. 21. Web Apps
  22. 22. マルチプラットフォーム Firefox OS Web アプリがネイティブ Android APK を生成してインストール Desktop exe や app ファイルを生成 その他は PhoneGap などで どこでも うごく!
  23. 23. Web Apps on Desktop Firefox では Web アプリを独立して起動する アプリ (exe や app) としてインストール可能
  24. 24. ステータスバー (通知、
 電波強度、電池残量...)も カメラやラジオも ビデオや音楽の再生も マーケットプレイスも システムの環境設定も ホーム画面や壁紙も 電話や SMS の送受信も もちろん ブラウザ も その他なんでも... すべて Web 技術で!
  25. 25. Unreal Engine 4 (Epic Soul) 最新ゲームエンジンも速やかに Firefox に対応 ネイティブゲームも最初のタイトルが出たばかり http://www.mozilla.jp/blog/entry/10388/
  26. 26. Unity 5 で WebGL+asm.js 対応 Unity 250 万人の開発者も Web アプリを提供可能に http://www.mozilla.jp/blog/entry/10387/
  27. 27. Apps Dev
  28. 28. Firefox OS のアプリ開発 いつもの開発ツール いつものエディタ いつものライブラリ いつもと一緒
 なら安心!!
  29. 29. 2つの方式のアプリ Hosted (Web 読み込み型) 従来の OS ではブラウザ上で動作 動作や権限は従来の Web と同じ オフライン対応アプリも開発可能 Packaged (ダウンロード型) 従来のスマホアプリに相当する マーケット審査を経て追加権限取得 サイト全体を ZIP して配布する形式 Packaged Web アプリ Hosted
 Web アプリ Internet Server 端末 詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
  30. 30. アプリ開発の流れ 普通に Web 開発 アプリマネージャ or Firebug etc. manifest ファイルを用意 メタ情報を JSON 形式で記載 シミュレータや実機テスト Android Firefox でもテスト可能 https://github.com/dynamis/firefoxos/wiki/simulator ぼくでも 作れそう!
  31. 31. アプリマネージャ Web アプリ開発統合環境が Firefox 標準搭載 シミュレータ&実機で開発&デバッグ
  32. 32. アプリ情報ファイル書くだけ サイト + manifest.webapp 1. manifest.webapp 作成 アプリ情報書くだけで終了
  33. 33. ! アプリ情報 (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
  34. 34. アプリ間連携 (Activities) の登録 { // ... 割愛 ... "activities": { "pick": { "href": "./pick.html", "disposition": "inline", "filters": { "type": ["image/*","image/jpeg","image/png"] }, "returnValue": true } } } https://developer.mozilla.org/en-US/docs/Apps/Manifest
  35. 35. 追加権限の要求 { // ... 割愛 ... "type": "privileged", "permissions": { "contacts": { "description": "共有画面で友達の名前入力 を自動補完する機能のために必要になります", "access": "readcreate" } } } https://developer.mozilla.org/en-US/docs/Apps/Manifest
  36. 36. ZIP して Packaged App に ZIP + package.manifest 1. manifest.webapp 作成 Hosted Apps の時と同じ 2. サイト全体を ZIP する manifest.webapp も含める 3. package.manifest を作成 mini manifest が別途必要
  37. 37. ! mini manifest (package.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
  38. 38. アプリの種類と権限 ブラウザと一緒が基本 追加権限を求めない限りブラウ ザ内でできることと一緒 権限に応じた制限 SD カード読み書きなどの権限を 得るには Package アプリとして Marketplace での審査が必要 いろいろ できるよ!
  39. 39. 方式 種類 概要 Hosted ! (Web から 読み込む) Web Content Web サイトそのもの。
 ブラウザ内でアクセスして使う。 Installed Web Web サイトをインストールしたもの。 ブラウザの UI なしで単独起動する。 Packaged ! (従来の OS 同 様端末にイン ストールする) Plain Packaged Web サイト全体を ZIP パッケージにし ているが追加権限を要求しないもの Privileged マーケット審査を受けて追加の権限を 許可されたアプリ Certified 通信事業者や端末メーカーが特別に高 い権限を許可している組み込みアプリ Firefox OS でのアプリの分類
  40. 40. 種類 利用可能な 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 など アプリの分類と権限
  41. 41. Firefox OS のアプリ課金 いつもの課金 API Paypal, クレジットカード,
 Google In-App Payment などなど + Firefox Marketplace navigator.mozPay() 好きなの 使って!
  42. 42. Mozilla の課金 API (mozPay) navigator.mozPay Web 標準化の議論は W3C の Web Payment Community Group にて Google の In-App Payments API とほぼ同じシステム 無駄な再発明はせずに実装 詳しくは html5j 42th で解説 http://www.slideshare.net/dynamis/firefox-marketplace-and-payment 今日は 割愛。
  43. 43. Live? Demo WWiinn アプリを 移植してみる!
  44. 44. Firefox Developer Conference in Kyoto on 2014.04.19
  45. 45. Firefox OS コミュニティ! http://FxOS.org イベントやドキュメントをご案内 http://FxOS.org/ml (Google Group のリンク: https:// groups.google.com/group/firefoxos) みんなよろしく!
  46. 46. 主な Firefox OS イベント Firefox OS 勉強会 東京、大阪、名古屋で開催 Gecko 勉強会 FxOS コードリーディング Firefox OS ハッカソン その他 ABC, DevSumi などの 各種イベントに参加 毎月 2~3 くらいのペースで開催されています
  47. 47. mozillians & mozilla reps mozillians.org コミュニティディレクトリ Mozilla の仲間を見つけやすく mozilla reps 世界中のコミュニティリーダー プロジェクトや使命を伝える イベントやグッズ作成予算申請可

×