basis of firefox apps

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 で発表したパートナー

国内からもエコシステム革新へ

次に続くのは貴方ですよね！http://www.mozilla.jp/mwc/

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 世界中のコミュニティリーダー プロジェクトや使命を伝える イベントやグッズ作成予算申請可