クリエイター手抜きプロジェクト[419]スマートフォン編 Firefox携帯 アプリ作って公開してみる(1)/古籏一浩

投稿:  著者:  読了時間:8分(本文:約3,700文字)



前回に続いて、Firefox OSを搭載した携帯Fx0について書きます。とりあえず、現時点でのFirefoxアプリ開発に関するサンプルと解説は、以下のサイトに掲載してあります。

・Firefox OS(Fx0端末)Webアプリ開発辞典
< http://www.openspc2.org/reibun/Firefox_OS/fx0/ >

今回は、実際にアプリを開発してFirefox Marketpalce(マーケットプレイス)で公開するまでを書きます。マーケットプレイスに登録されれば、世界中のユーザーがダウンロードできるようになります。

・Firefox Marketplace(マーケットプレイス)
< https://marketplace.firefox.com/?lang=ja >




マーケットプレイスで公開する前に、何かアプリを作らなければいけません。そこで、APIなどよく知っているGoogle Mapを利用した、地図系のアプリを作成しました。

至ってシンプルなアプリで、高速にGoogle Mapを表示します。マーケットプレイスからダウンロードした地図アプリは、わりと遅いものが多かったので、高速な地図アプリを作ろうと思ったわけです。経路検索もなく、地図に現在地の緯度経度を表示するしか機能はありません。こんなアプリです。

・Simple Fast GoogleMap
< https://marketplace.firefox.com/app/simple-fast-googlemap >

アプリの作成は至って簡単です。すでに動作するWebページ(HTML、CSS、JavaScript)のファイルがあれば、それをそのまま流用できます。ただしFirefox上で動作するというのが大前提です。

というのも、JavaScript部分のコードはiPhone、Android、Firefox、パソコン用ブラウザで異なっており、特定の環境だけで動作するようなプログラムはFirefox OS/Fx0では動かないことがあります。

HTML、CSS、JavaScriptファイルの準備ができたらフォルダを作成し、そこに全部入れます。画像ファイルなど一式入れます。そして、Firefox OSのアプリとして機能させるために、manifest.webappファイルを作成します。

このファイルには、以下のように必要事項をJSON形式で記述します。10年前ならXMLで書くのが一般的でしたが、今はJSON形式で書いた方が手軽で簡単です。

{
"name": "Simple Fast GoogleMap",
"description": "Fx0専用(Firefox OS)でシンプルで高速なグーグルマップを表示するアプリです。余計な機能はなく地図を表示する、現在地を表示する機能だけになっています。ルート検索などの機能はありませんのでご注意ください。",
"launch_path": "/index.html",
"icons": {
"512": "/images/icon-512.png",
"128": "/images/icon-128.png"
},
"developer": {
"name": "KaZuhiro FuRuhata",
"url": "http://www.openspc2.org/"
},
"default_locale": "ja",
"type" : "web",
"orientation" : "portrait-primary",
"version": "1.0",
"permissions" : {
"geolocation" : {
"description" : "地図上で位置を表示するために必要です"
}
}
}

manifest.webappの内容について説明しておきます。まず上から。最初のnameはアプリケーション名になります。開発する場合はアプリごとに、このnameで指定する名前を書き換えます。マーケットプレイスに登録される際も、このnameで指定した文字が使用されます。

次のdescriptionは、アプリの説明です。これは、どのようなアプリなのかを書いておきます。

launch_pathは最初に読み込むHTMLファイルのパスを指定します。フォルダの最初の階層にあるindex.htmlファイルなら、/index.htmlのように指定します。

次にiconsですが、これはアイコンの画像ファイルを指定します。アイコンは512×512ピクセルサイズと、128×128ピクセルサイズを用意すればよいということでしたが、マーケットプレイスに登録する場合は他に64×64サイズも用意しておきましょう。

developerは開発者の名前とWebサイトがあれば、そのURLを書きます。default_localeはアプリのデフォルトの言語を指定します。日本向けなら(日本語なら)"ja"の文字を指定します。ここまでは必須パラメーターです。

typeは、このアプリの種類を示します。HTML、CSS、JavaScriptを使ったWebアプリの場合はwebを指定します。この指定がない場合は、自動的に種類がwebとして処理されます。

orientationは、手に持った時に基準となる端末の方向です。ゲームなどでは画面の方向を固定しておかないと、端末の向きを変えた場合に、表示内容が90度または180度回転してしまうことになります。

上記のようにportrait-primaryを指定すると、ホームボタンが下になった状態のまま固定されます。固定されると端末を90度回転させても画面まで回転してしまうことがなくなります。アプリが端末の回転に対応している場合は、特に何か書かなくてもいいようです。

versionはアプリのバージョンを示す文字列です。バージョンアップなんてしないという自信があれば、このversionは書かなくてもかまいません。しかし、プログラムを修正しなければことは多々あるので、versionは指定しておくのが妥当です。

permissions部分はFirefox OSを使った端末で、特定の機能を使用したい場合に指定します。地図系アプリでは現在地を取得する必要があるため、Geolocation APIを使います。

要するにGPS機能を使いますので、どうしてもpermissionsでgeolocationを記述しなければなりません。geolocationカテゴリ内にdescriptionを使って説明を記述します。この説明は適当に何か書いてあれば十分です。

Firefox OSのアプリとして公開する、端末にインストールする場合は、このmanifest.webappさえ書いてしまえば完成したようなものです。センサーなどを使用する場合は、manifest.webappのpermissionsを記述しないと動作しません。どのような機能があり、何を記述すればよいかは以下のページに記載されています。

< https://developer.mozilla.org/ja/Apps/App_permissions >

次回は、マーケットプレイスに登録しアプリがダウンロードできるまでについて書く予定です。


【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/ >

3/14に地元で勉強会があり、そこでFirefox OS/Fx0についてやりましたが、なかなか使いどころが難しいという意見が多数。IoTと連携する、組み込みOSならまた違うかもというところ。

マーケットプレイスに登録しても、まあ10人くらいダウンロードされれば十分かと思ってましたが、100人以上の人がダウンロードしてくれたみたいです。さすがに4桁までダウンロードされることはないでしょう。それにしても、国内では一体どのくらいFx0売れたんでしょうか...

・Adobe JavaScriptリファレンス
< http://www.amazon.co.jp/dp/B00FZEK6J6/ >

・Illustrator自動化基本編
< http://www.amazon.co.jp/dp/B00R5MZ1PA >

・ExtendScript Toolkit(ESTK)基本編
< http://www.amazon.co.jp/dp/B00JUBQKKY/ >

・データビジュアライゼーションのためのD3.js徹底入門
< http://www.amazon.co.jp/dp/4797368861 >

・4K/ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/ >

・JavaScript逆引きハンドブック
< http://www.amazon.co.jp/dp/4863541082 >

・クリエイター手抜きプロジェクト
< http://www.openspc2.org/projectX/ >