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?
すっきりデザイン
完成イメージです
すべての情報に1カ所から
完成イメージです
左右スワイプでアプリを切替
完成イメージです
くわしくは…
京都で!
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 のアプリ開発
いつもの開発ツール
いつものエディタ
いつものライブラリ
いつもと一緒

なら安心!!
2つの方式のアプリ
Hosted (Web 読み込み型)
従来の OS ではブラウザ上で動作
動作や権限は従来の Web と同じ
オフライン対応アプリも開発可能
Packaged (ダウンロード型)
従来のスマホアプリに相当する
マーケット審査を経て追加権限取得
サイト全体を ZIP して配布する形式
Packaged
Web アプリ
Hosted

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

Basis of Firefox Apps