Firefox OS - naoyaのはてなダイアリー

Firefox OS が面白そう、というので少し触ってみました。

Firefox OS はWeb 標準ベースの開発を基礎としたモバイル端末用プラットフォーム、要は HTML と JavaScript と CSS でアプリケーション開発できるモバイル端末用の OS。間もなく Developer Preview Phone な実機が発売されるというのでにわかに盛り上がりを見せているみたいです。

Firefox OS が目指すところは Web 標準による、開発者がロックインされないオープンなプラットフォーム。iOS や Android の昨今の状況を見れば、そのアンチテーゼになるプラットフォーム構想があってもおかしくないわけで、まさにそれを目指しているようですね。

いったいどんなものかという概観は dynamis さんによるスライドが分かりやすい。

Firefox OS from dynamis .

技術的に特に面白いのは「Web技術がネイティブ」というところで、カーネルのすぐ上のレイヤで Web エンジン、つまりは Gecko がいきなり動いていてそれにより HTML や JavaScript が最適化されるというところ。その他の OS での Web アプリケーションは間に様々な層が絡んでくるので結果的に遅いというイメージがあるけれども、期待通りにいけば、HTML で書かれているとは思えない速度のアプリケーションが、Webアプリケーションとして開発できる。マジですか。

Hello, Firefox OS

Web アプリケーションとして開発できるってどういうこと? というので、書き味を確認するべくちょっとお試し。

結論から先に言うと、iOS や Android でよくある WebView を使ったアプリケーションを作る類のミドルウェア or フレームワークといったようなものではなく、本当に素でWebアプリケーションを作るだけでした。

Firefox OS のアプリケーションは、基本的に Open Web Apps という作法にのっとって開発する。Open Web Apps は既に、Android なんかで利用できる Firefox MaerketPlace 向けのアプリケーションを書く場合に利用されていて、Firefox OS もそれと同じやり方を用いるということです。参考までに Open Web Apps と Web標準あたりも読むといいかも。

そんな作法があるとは言え、実際にやるのは繰り返しになりますが HTML と CSS と JavaScript をゴリゴリ書いていくだけです。

いまのところ実機はもちろん手元にないので、開発にはシミュレータを使う。Firefox 用のアドオンとしてシミュレータ ─ Firefox OS Simulatorが提供されている。iOS や Android のように Developer Toolkit 的なものをインストールする必要はない。これは楽でいい。

アドオンのダッシュボードはこんな感じで、ここに自分で作ったアプリケーションの manifest.webapps を放り込んでやると、シミュレータが立ち上がってアプリが起動する。

manifest.webapps というのは json で書かれたアプリケーションのメタデータ。プロパティリスト。適当にどっかのディレクトリにこれを作る。

{
    "name":"Hello, World",
    "description": "Hello, Firefox OS",
    "launch_path": "/index.html",
    "developer": {
        "name": "Naoya Ito",
        "url": "http://d.hatena.ne.jp/naoya/"
    },
    "default_locale": "ja"
}

こんな感じです。launch_path に指定したファイルがアプリケーション起動時に開きます。

ここからはもう、本当にただのウェブアプリ。

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, Firefox OS</title>
    <script src="/lib/jquery.min.js"></script>
    <script src="/app.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <h1>Hello, Firefox OS!</h1>

    <h2>Canvas</h2>
    <canvas id="canvas"></canvas>

    <h2>Battery Status</h2>
    <p>level: <span id="battery-level"></span></p>

    <h2>Geolocation</h2>
    <ul>
      <li>latitude: <span id="geo-latitude"></span></li>
      <li>longitude: <span id="geo-longitude"></span></li>
    </ul>
  </body>
</html>

こんな感じの HTML を index.html として用意して

body {
    background-color: #eee;
}

h1 {
    color: #000;
    text-shadow: 0 2px 0 #fff;
}

p {
    text-shadow: 0 1px 0 #fff;
}

という CSS を styles.css を用意して

$(function(){
  // App API
  var request = navigator.mozApps.getSelf();
  request.onsuccess = function () {
    if (request.result) {
      // alert(request.result);
    } else {
    }
  };

  // Canvas
  var ctx = $('#canvas').get(0).getContext('2d');
  ctx.fillStyle = "rgb(200, 0, 0)";
  ctx.fillRect(10, 10, 55, 50);
  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.fillRect(30, 30, 55, 50);

  // Battery API
  // https://developer.mozilla.org/en/docs/DOM/window.navigator.battery
  $('#battery-level').text(navigator.battery.level);

  // Geolocation
  // https://developer.mozilla.org/en-US/docs/Using_geolocation
  navigator.geolocation.getCurrentPosition(function (pos) {
    $('#geo-latitude').text(pos.coords.latitude);
    $('#geo-longitude').text(pos.coords.longitude);
  });

  // WebSocket
  var ws = new WebSocket("ws://localhost:3000/");
  ws.onopen = function() {
    ws.send('hello');
    ws.onmessage = function(msg) {
      alert(msg.data);
    };
  };
});

こんな感じで JavaScript の中にやりたいことを書く。とりあえず、Open Web Apps の仕様であるアプリがインストールされてるかどうかを確認する App API、canvas と Battery API と Geolocation、それから WebSocket が動くかどうかというのを試してみました。見ての通り jQuery を使ってますが問題なく動きます、だって Web だもの。

WebSocket もちゃんと動くよ!

モバイル端末用OSといえばその関心どころの中心の一つがデバイスアクセス系の API ですが、これは Mozilla が策定を進めている WebAPI という体系に準拠しているもよう。この辺、自分は疎いので詳細は割愛。

参考までに、WebSocket で繋いだ先のサーバ、これは node.js + coffee です。

ws = require 'websocket.io'
server = ws.listen 3000, () ->
  console.log 'server start'

server.on 'connection', (socket) ->
  socket.on 'message', (data) ->
    console.log data
    
  socket.send('Hello, WebSocket!')

今回は使いませんでしたが、UIKit 的な、アプリケーションのユーザーインタフェースの標準 (?) は GAIA Building Blocks というのを使って書くのが推奨されていくらしい。確かに、シミュレータの中にはこれを適用したメーラーなど、これが Firefox OS の標準的な UI なのね、というのがわかるものがいくつも入ってます。

感想など

軽く Hello, World! をやってみた感じ、本当に Web アプリを作っているというかローカルのブラウザで動くものを作ってる感覚に近い。これでモバイルのネイティブアプリ相当が作れるというのはなかなか面白い。Open Web Apps、といっているだけあって使う道具も選ばず、Web っぽい感じ。開発は非常にスピーディにできる。毎回アプリを変更する度 update ボタンを押して･･･というのがちょっとめんどくさいけど、ネイティブアプリをビルドするのに比べたらずっと簡単。

もちろん、まだ実機も登場していないような段階なので Web 上の情報はどれも断片的だし何が動いて何が動かないとか、こういうときどうすればいいかとかそういった話は混沌としている。Firefox OS とは関係ない文脈で HTML5 の API としていろいろなものが策定されているけど、それと Firefox OS がどういう関係にあるのかとか、各 API やツールキットの開発状況がどういった感じなのかその辺の相関をつかむのにちょっと苦労する。

まだ OS やアプリの完成度は実用段階ではなさそうな雰囲気、ひどいバグで全然動かないとかそういう感じではない。UI 的にも速度・品質的にもこれから色んな詰めのチューニングが施されていくんだろうなあという印象です。ま、プラットフォーム立ち上がり初期ってこういう感じですよね。

開発プロセスも面白いけど、アプリケーションの配布形態にも面白いところがある。iOS や Android アプリのように実機にインストールする従来型のアプリも作れるけれど、そうではなく、ネットワーク上で実行される Hosted Apps という形態がある。Google で検索して訪れた先が、アプリで、使ってみてよかったらローカルに追加する･･･という体験を提供する。すべてが Web アプリであるという特性を巧く活かしたユーザー体験で、Web っぽくていいい。

実際このプラットフォームがどの程度のものになるかは未知数だし、個人的にもさっぱりわからない。知った風なことを言えば、プラットフォームが普及するかどうかは、その上でビジネスが成立するかどうか、ようは儲かるかどうかが一番の関心どころであるユーザーや企業を巻き込めるか次第。技術的に面白いかどうかは二の次。果たして Mozilla とハードウェアベンダそのほかが組んでそういうエコシステムが今から作れるのか･･･というところでしょうね。

ウェブ開発者的にはこれ流行ったらいいよねえ、楽だし。

えー、そんなわけで、Firefox OS でした。そうそう、実機を触ってみたいですね (チラッチラッ