もろもろ調べつつ、アプリを作成して動作を試したメモです。
動作中の様子です。アイコンも設定されています。
アプリはWebアプリがそのまま動作しました。しかしFirefox OSには物理キーとして戻るボタンはないので、アプリからブラウザに飛ばした後の戻る方法はありません。今回試したアプリの場合は、アプリ内ブラウザを実装する必要がありそうです。Browser APIとはつまりiframeの事ですが、使うにはpermissionが必要です。なおiframeでの動作イメージはこうなります。
まず「ホスト型アプリ(Open Web Apps)」とは、リソースが全てWeb上にある、Webアプリのような形態です。しかし特別なAPIは使えません。
一方「パッケージ型アプリ」とは、リソースをzipに固めたアプリで、以下の種類があります。
なお今回はBrowser APIのページにサンプルコードがあるので、それの通りにやってパッケージ型アプリとしてシミュレータにインストールしようとしたのですがダメでした。どうにもダウンロードさせることができなかったので、この点はまた今度に。
補足として気を付ける点としては、マニフェストに書くパスは、launch_pathもiconsも絶対パス (例えば /images/myicon.png) である必要があることがあげられます。検証の方法も用意されているので、確認しつつテストを行います。検証結果はこのように表示されます。
このようになりました。Firefox OSシミュレータからアクセスすればアプリとしてインストール可能です。またデスクトップのFirefoxでもインストールできます。
http://tattyamm.github.io/checktrend/install.html
・Building BlocksというFirefox OS向けのUIデザイン
・実機の機能を使ったアプリ
・ブラウザAPIを使ったアプリの配布
・navigator.mozApps.installPackageを使ったインストール方法
・Firefox Marketplace へのアプリの登録
など。
Open Web Apps を始めよう - なぜ、そしてどのように | Mozilla Developer Street (modest)
アプリ開発を始めよう - Apps | MDN
Firefox os hackathon
大津谷亮祐ブログ - Firefox OS の Packaged Apps を作ってみた
パッケージ型アプリについて
パッケージ型アプリ - Apps | MDN
マニフェストの書き方や権限について
アプリマニフェスト - Apps | MDN
アプリの許可設定 - Apps | MDN
HTTP リクエストやsame-origin policyについて
HTTP access control (CORS) | MDN
ブラウザAPIの詳細とサンプルコード
Using the browser API - WebAPI | MDN
gaia/apps/browser at master ・ mozilla-b2g/gaia
ハードウェアボタンについて
Firefox OS 概論 - Mozilla | MDN
アプリの公開方法
アプリの公開 - Apps | MDN
Firefox Marketplace へのアプリの登録 - Apps | MDN
bitWalk's workshop - はじめてのアプリ
テスト手順
手順は権限を必要としないアプリならばすぐにテストできます。- Firefox OSのシミュレータをインストール
- アプリを作る
- アイコンの準備、manifest.webappを記述
- Firefox OS SimulatorのDashboardからアプリを登録
- Firefox OS Simulatorで確認
動作中の様子です。アイコンも設定されています。
アプリはWebアプリがそのまま動作しました。しかしFirefox OSには物理キーとして戻るボタンはないので、アプリからブラウザに飛ばした後の戻る方法はありません。今回試したアプリの場合は、アプリ内ブラウザを実装する必要がありそうです。Browser APIとはつまりiframeの事ですが、使うにはpermissionが必要です。なおiframeでの動作イメージはこうなります。
アプリの権限と種類
アプリには、様々な種類があり、その内容はここやここにまとまっています。まず「ホスト型アプリ(Open Web Apps)」とは、リソースが全てWeb上にある、Webアプリのような形態です。しかし特別なAPIは使えません。
一方「パッケージ型アプリ」とは、リソースをzipに固めたアプリで、以下の種類があります。
- 特権アプリ
- Firefox Marketplaceでのレビューを受けたアプリ。特定のAPIを使用することができる。
- 認定アプリ
- 重要な機能を使えるアプリ。サードパーティー製アプリ向けではないので、普通のアプリ開発者は、基本的にこの権限について考える必要はない。
- 単純なパッケージ型アプリ
- 単にzipにまとめられたファイルで、特別なAPIは使えないが認証も必要ない。
なお今回はBrowser APIのページにサンプルコードがあるので、それの通りにやってパッケージ型アプリとしてシミュレータにインストールしようとしたのですがダメでした。どうにもダウンロードさせることができなかったので、この点はまた今度に。
アプリの配布
作成したアプリの配布方法は、アプリの種類によって3通りあります。- ホスト型アプリを自分のサイトで公開
- リソースがすべてWeb上にあれば良いので、適当なサーバーで公開できます。ブラウザでアクセスするだけで動作するタイプです。しかしマニフェストファイルには適切なMINEタイプが必要です。たとえばGithub Pagesなら適切に処理してくれるそうです。マニフェストファイルについてはドキュメントを見ましょう。
- パッケージ型アプリをFirefox Marketplaceで公開
- パッケージ型アプリを自分のサイトで公開
補足として気を付ける点としては、マニフェストに書くパスは、launch_pathもiconsも絶対パス (例えば /images/myicon.png) である必要があることがあげられます。検証の方法も用意されているので、確認しつつテストを行います。検証結果はこのように表示されます。
配布例
今回はgithub pagesを使う方法を採用しました。なおこの方法の場合、gh-pagesブランチにサイトとして公開したいファイルをcommitするだけで公開できますが、pushした後に反映までしばらく時間がかかるので注意が必要です。このようになりました。Firefox OSシミュレータからアクセスすればアプリとしてインストール可能です。またデスクトップのFirefoxでもインストールできます。
http://tattyamm.github.io/checktrend/install.html
今後
今回やってない事リスト。・Building BlocksというFirefox OS向けのUIデザイン
・実機の機能を使ったアプリ
・ブラウザAPIを使ったアプリの配布
・navigator.mozApps.installPackageを使ったインストール方法
・Firefox Marketplace へのアプリの登録
など。
リンク
最初に読むと良さそうな資料Open Web Apps を始めよう - なぜ、そしてどのように | Mozilla Developer Street (modest)
アプリ開発を始めよう - Apps | MDN
Firefox os hackathon
大津谷亮祐ブログ - Firefox OS の Packaged Apps を作ってみた
パッケージ型アプリについて
パッケージ型アプリ - Apps | MDN
マニフェストの書き方や権限について
アプリマニフェスト - Apps | MDN
アプリの許可設定 - Apps | MDN
HTTP リクエストやsame-origin policyについて
HTTP access control (CORS) | MDN
ブラウザAPIの詳細とサンプルコード
Using the browser API - WebAPI | MDN
gaia/apps/browser at master ・ mozilla-b2g/gaia
ハードウェアボタンについて
Firefox OS 概論 - Mozilla | MDN
アプリの公開方法
アプリの公開 - Apps | MDN
Firefox Marketplace へのアプリの登録 - Apps | MDN
bitWalk's workshop - はじめてのアプリ