[FirefoxOS]WebアプリをFirefoxMarketplaceにFirefoxOS用アプリとして登録した時のメモ

Bloggerへの移行前のWordpressにて2013-03-01に投稿した記事です。

昨年度、jQueryMobileで簡単なWebアプリを作ってHerokuにデプロイしており、それをFirefoxOS用のアプリとして登録してみた時のメモ。
なお、申請まではできましたが、承認はされてないので間違ってる所もあるかもしれませんが、ご了承ください。

目次

1. 2種類の申請方法について
2. とりあえずFirefoxOSのエミュレーター入れる
3. Firefox Marketplaceのログイン情報作成
4. App Manifestファイルの作成
5. App Manifestファイルの確認
6. 申請
7. 最後に

1.2種類の申請方法について

そもそもアプリの申請方法として大きく分けて2種類が有るようです。

1.Hosted
普通のWebアプリで、HTML,CSS,画像ファイルなどはサーバーに配置します。ただ、それ以外の準備としてアプリの情報を記載したApp Manifests(後述)の作成及びサーバーへの配置が必要です。また、128x128のアイコンも必須となります。なお、FirefoxOSのアプリとして配布する場合、上記Webアプリはモバイルに最適化されていないとアプリ審査時にrejectされてしまうような記述が有りました。
今回はこちらで申請をやってみました。

2.Packaged
こちらはWebアプリケーション(HTML,CSS,画像ファイルなど)をZIP化?してマーケットにアップするようです。詳細はやってないので、分かりませんがこちらもmanifestファイル、画像ファイルなどの作成は必要なようです。

2.とりあえずFirefoxOSのエミュレーター入れる

必須ではないですが、最終的にアプリ申請する際にモバイル用画面として開発されている事という記載も有り、一応FirefoxOSでの動きをみる為にエミュレーターをインストールする。
ただ、これはとても簡単でFirefoxのAdd-onとして追加すればOK。

こちらのサイトをFirefoxで表示し、各OSのボタンクリックでOK。

Add-Onでインストール後、「ツール」→「Web開発」→「Firefox OS Simulator」で以下の画面が表示される。（インストール後は自動でこの画面に遷移）

で左の「Simulator」を「Start」にすれば起動する。

これでブラウザを起動して自分のサイトがモバイル端末でも正しく動作するかを確認しておくと良いかと思います。

3.Firefox Marketplaceのログイン情報作成

こちらのサイトに遷移し、Mozila Personaのログイン情報を登録すればOK。メールアドレス、パスワードのみの入力でよかったはず。

4.App Manifestファイルの作成

詳細は以下に記載があります。

アプリマニフェスト

以下のようなファイルを作成し、拡張子は.webappとします。

{
  "name":"My App",
  "description": "My elevator pitch goes here",
  "launch_path": "/",
  "icons": {
    "128": "/img/icon-128.png"
  },
  "developer": {
    "name": "Your name or organization",
    "url": "http://your-homepage-here.org"
  },
  "default_locale": "en"
}

各要素の詳細は上記サイトをみて頂ければと思いますが、注意点としてはlaunch_pathです。

こちらに記載したパスがアプリ起動時に読み込まれるパスとなります。launch_pathに関する詳細はこちらにありますが、私の場合http://musi9festagram.herokuapp.com/というようにWebサーバーのルートにあるので、launch_pathは/としました。
http://hoge/mywebapp/等の場合、launch_pathは/webapp/とします。

また、iconsの128の箇所に指定したパスに128x128の画像もサーバーに配置する必要が有ります。

さらに追加で注意点があります。
本ファイルはContent-Typeをapplication/x-web-app-manifest+jsonとして返却する必要があります。Apacheなどの場合、.htaccessに追記してね、みたいな例が書いてありましたが、Herokuでのやり方がよく分からないし、面倒そうだったのでプログラム側で生成してContent-Typeを指定して返却させてみました。特にこれでも問題なさそうですが、静的ファイルの方が楽そうですね。

5.App Manifestファイルの確認

作成したManifestファイルをサーバーにアップロードしたら、ファイルの内容が正しいかをValidationツールを利用して確認します。

Validate an App

上記画面に遷移し、manifestファイルがあるURLを入力し、Validateボタンを押せば、チェック処理が実施されます。
問題なければエラーが無い旨が表示されますし、NGの場合にはその理由が表示されます。(アイコン画像がない、Content-Typeが正しくないなど詳細に表示されます)

ここが通らないと申請もできないようなので、ここで事前にチェックしましょう！

6.申請

最後に申請です。

Submit an App

上記を画面を表示し、Device TypeではFirefox OSを選択し、画面下部ではmanifestファイルのURLを指定します。

その後、画面キャプチャやらアプリ名やら入力します。
本当はそのサイトの画像も貼りたかったのですが、manifestファイルが重複してるよってエラーが出たので駄目でした。。。そりゃそうなのですが。
まあ、ここはそこまではまるような入力項目は無かったかと思います。

上記が終わって少し立つとレビュー中となりました。(This app is awaiting review)
どうやら申請が終わると予め登録したメールに何かしら連絡が来るようです。申請して丸一に経過したけどいつ終わるのかしら。

7.最後に

まだ申請完了してないので何とも言えませんが、既にモバイル用のサイトが有れば申請はそれほど大変ではないかと思います。manifestファイルを返却するときにContent-Typeが決まってるってのがちょっと面倒ですが、それ以外はわりとさくっとできます。
各ドキュメントが日本語でもあったり、validationツールなど揃っているのが素敵です。

とりあえず承認待ってみます！

5月27日追記
完全に更新するの忘れてましたが、申請して2、３週間程度で承認されました。（厳密には申請チェックから漏れていた？らしく連絡がないのでTwitterで連絡して催促しました）

musi9festagram

まあ、で？というアプリでは有りますが、一通りリリースまで出来たのは良い経験になったかなーと。