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