Firefox OS
Mozilla の開発しているオープンソースな OS が話題になっていますね。
Firefox OS は Web の標準技術を中心とした仕組みでアプリケーションを動かすことができる OS のようです。HTML5 や CSS3、JavaScript のノウハウがそのまま、Firefox OS プラットフォームで活かせるという強みがあるそうです。
2月をめどに開発者に向けたプレビュー端末が出る予定が発表されたり、 Firefox App Day というイベントが開かれるなど、盛り上がりを見せています。
Firefox OS Simulator
開発端末などの実機がない状態でも、Firefox OS Simulator という Firefox アドオンをインストールすれば、 Firefox OS を試すことができます。
Firefox 16 以上のブラウザで https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/ にアクセスします。
Firefoxに追加をクリックしてインストールします。インストールに成功すると、「ツール」→「Web 開発」に「Firefox OS Simulator」が追加されています。
選択すると、Firefox OS Simulator のダッシュボードが開きます。
左サイドバーの「Stopped」の部分をクリックするとシミュレータが起動します。
ボタンを押すとすぐに起動しました！早い！ （すでに壁紙とか変えて遊んでます）
とりあえず Hello World
とりあえず、Hello World としてアプリを作ってみます。Firefox OS のアプリには 2 種類あって、Packaged App と Hosted App があるようです。Packaged App はローカルにリソース (html, css, javascript, images …) をインストールするタイプ、 Hosted App は Web サーバにリソースをホスティングするタイプのようです。
今回は、Packaged App の Hello World にしたいと思います。
アプリ用のディレクトリを適当に作って、マニフェストファイルを書きます。
{
"name": "Hello World",
"description": "Hello World Firefox OS",
"launch_path": "/app.html",
"icons": {
"128": "/img/icon-128.png"
},
"developer": {
"name": "kironono <kilo.sw@gmail.com>",
"url": "http://blog.kironono.com/"
},
"default_locale": "en"
}
中身は JSON です。”name” にはアプリ名、”description” にはアプリの説明、”launch_path” には、エントリポイントとなる html へのパスを記述します。これを manifest.webapp という名前で保存します。
“launch_path” で指定した app.html を用意します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> <p>Hello Firefox OS</p> </body> </html>
単純なHTMLです。あとはアイコン用の画像を用意します。ディレクトリ構造はこんな感じになりました。
HelloWorld └ img │ └ icon-128.png ├ manifest.webapp └ app.html
ここまでできたら、Firefox OS Simulator で確認してみます。Firefox OS Simulator の Dashboard の “Add Directory” ボタンを押すと、ファイル選択ダイアログが開くので、マニフェストファイルを選択します。
さきほどの manifest.webapp を選択して、開くを押すと、シミュレータが自動で起動してアプリが実行されます。
Hello World が表示されました！
ホーム画面のランチャーにも追加されています。
簡単に触ってみて
普通の Web アプリを作る感覚でアプリが作れるのは良いですね。Web の資産 (それぞれが持ってる JavaScript のライブラリとかスニペットとか、jQuery とか jQuery Mobile とか) を活かせるのも良いところだと思います。逆に、Web 臭を消すのには（そんなデザイン要件もあるかも！）きっと慣れと経験が必要なんだろうなぁ。
Web 技術をデスクトップやモバイル端末へ持って行こうという試みは、今や珍しくはありません。個人的に気になる点としては、モバイル端末という限られたリソースの環境で、どのくらいのパフォーマンスを発揮できるのか？やっぱりネイティブじゃなきゃ期待したパフォーマンスや UX が得られない！という流れにならないのか？という部分。これからも細かく追いかけて行きたいと思います。
