FirefoxOSはとにかく簡単にアプリが作れてスゴイかも

やっぱ鮮度が命だとおもってFirefoxOSのアプリをいじってた。その過程。

シミュレータのインストール

Firefoxで入れる。

Firefox OS Simulator :: Add-ons for Firefox https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/

ダッシュボードからStoppedのところを押して起動(わかりにくい)

サンプルアプリの起動

nodeのインストールは前提。それからvoloを入れます。

$ npm install -g volo
# nodeアプリなので本来ならここで npm install したほうがいい
>||

mozilla系のビルドツールらしいということしか知らない。

>||
$ git clone git@github.com:darkwing/firefoxos-quick-start.git
$ cd firefoxos-quick-start/app/
$ volo serve

firefox os simulatorでlocalhost:8008を開く

コードを読む

tools
├── almond.js
├── build.js
├── manifest.appcache
├── oneless.js
├── r.js
└── volo

voloでのビルド用？
全体的にrequire.jsと、その拡張almondを使うことを要求される模様

実装はwww以下

www
 ├── css
 │   ├── app.css
 │   └── install-button.css
 ├── favicon.ico
 ├── img
 │   ├── glyphicons-halflings-white.png
 │   ├── glyphicons-halflings.png
 │   ├── icons
 │   │   ├── mortar-128.png
 │   │   ├── mortar-16.png
 │   │   └── mortar-48.png
 │   ├── offline.png
 │   └── online.png
 ├── index.html
 ├── js
 │   ├── app.js
 │   ├── init.js
 │   ├── install-button.js
 │   └── lib
 │       ├── install.js
 │       ├── receiptverifier.js
 │       ├── require.js
 │       └── zepto.js
 └── manifest.webapp

おそらくindex.htmlとmanifest.webapppだけで動きそう

manifest.webapp

{
    "version": "0.1",
    "name": "Your App",
    "description": "Your new awesome Open Web App",
    "launch_path": "/index.html",
    "icons": {
        "16": "/img/icons/mortar-16.png",
        "48": "/img/icons/mortar-48.png",
        "128": "/img/icons/mortar-128.png"
    },
    "developer": {
        "name": "Your Name",
        "url": "http://yourawesomeapp.com"
    },
    "installs_allowed_from": ["*"],
    "locales": {
        "es": {
            "description": "Su nueva aplicación impresionante Open Web",
            "developer": {
                "url": "http://yourawesomeapp.com"
            }
        },
        "it": {
            "description": "Il vostro nuovo fantastico Open Web App",
            "developer": {
                "url": "http://yourawesomeapp.com"
            }
        }
    },
    "default_locale": "en",
    "permissions": {
        "systemXHR": {}
    }
}

icons

おそらく解像度ごとのicon

installed_allowed_from

おそらくインストールIP制限

locales

多言語用設定。おそらくマーケット用

permissions

おそらくAndroidなどとAPI制限
詳しくはドキュメント読む必要ありそう

OS機能へのアクセスを調べた

FirefoxOSアプリではOSネイティブのコードをJSから触れると噂に聞いていたので、indicator-percentageにバッテリ残量が表示されているのがそれかと思い、調べてみた。

www/js/app.js

var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery

シミュレータ上ではホストOSのバッテリをみてるっぽい
ぐぐってみたらFirefoxOS API ではなく普通のAPIらしい
window.navigator.battery - DOM | MDN https://developer.mozilla.org/ja/docs/DOM/window.navigator.battery

ネイティブAPIについては、今回わからなかった。あとで調べる。

receiptverifier.js

どこでも使われてないけど気になったのがこれ
課金APIの認証周りだと思われる

インストール機能

www/js/install-button.js 参照

define(function(require) {
    var install = require('install');

    function update() {
        var btn = document.getElementById('install-btn');
        if(install.state == 'uninstalled') {
            btn.style.display = 'block';
        }
        else if(install.state == 'installed' || install.state == 'unsupported') {
            btn.style.display = 'none';
        }
    }

    function init() {
        var btn = document.getElementById('install-btn');
        btn.addEventListener('click', function() {
            install();
        });

        install.on('change', update);

        install.on('error', function(e, err) {
            // Feel free to customize this
            alert('There was an error during installation.');
        });

        install.on('showiOSInstall', function() {
            // Feel free to customize this
            alert('To install, press the forward arrow in Safari ' +
                  'and touch "Add to Home Screen"');
        });
    }

    if(!document.getElementById('install-btn')) {
        document.addEventListener('DOMContentLoaded', init);
    }
    else {
        init();
    }
});

window.installというメソッドがあるらしい
インストール済みかどうかは、 install.state でわかる
install.on('change', function(){...})でステートが切り替わったことを受信できる。

というメソッドがある。

シミュレータだからなのかよくわからないが、どこにインストールされたかわからなかった。アイコンが出現したりはしない。

削ろうとしてみたけど…

やっぱこういうのを見るとスケルトンとして削りたくなる…　んだけど
最悪manifestとindex.htmlがあればなんでもできるのでどうとでもなるので、どうでもよくなった

期待すること

複雑化しすぎたモバイルアプリ開発に対して、既存のウェブ技術だけでなんでもしようとするのは潔い。

ただインストールアプリをローカルで動かすことができるのかちょっとよくわからなかった。サーバー前提？

WebView的なものがおそらくOSとしてのファーストオブジェクトなので、おそらくAndroidやiOSのように、OSが低速で使いものにならないといったことはないだろう。それだけで期待がもてる。

ネイティブに迫るリッチアプリケーションが作れるかどうかというのは、これからのAPIの充実度次第。
最悪nodeのモジュールのように計算量が重い部分だけC++で書くのも、自分は別に構わない気がしてるけど、そうなるとAndroidの悲劇を繰り返しそうな気もする。トレードオフ。

とにかく開発者にやさしい構成になっていると感じた。その他の地獄と比べれば。