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