2013年8月29日木曜日

Firefox OS(シミュレータ) で Hello World

Web OS ってやつですか。

流行ってるんですかね?いかんせん端末も普及していないので、なんとも言えませんが、今後の主流になるとか何とか。

今のところ情報が少ないのですが、Hello World は一瞬ということなので、試してみました。

Firefox OS が載っている端末は所持していないので、ブラウザ上のシミュレータでやってみたいと思います。

準備する物は、
  • Firefox
  • エディタ
のみ。

俗に言う IDE と言う物が今の所無いようです。
なくても Firefox にアドオンでデバッグ環境は整うので大した問題じゃないと言う事みたいです。

実際に環境を作るに当たっては、アドオンをインストールする必要があります。
Firefox OS Simulator と言うアドオンをインストールします。
あと、Firebug や、その他 Web 開発に便利な物が有ればいいのかな?

インストールすると、Simulator Dashbord というタブが開き、左のペインの Simulator のスイッチをクリックし Running とすることにより、シミュレータが起動します。

これで、環境が整ったので、実際に動かす Hello World の作成へ入ります。

まずは、デスクトップに適当なフォルダを用意します(今回は、FirefoxOS と言う名前で作成)
その中に、動かすプログラムのフォルダを作ります(今回は、HelloWorldと言う名前で作成)
このフォルダ内に実際のプログラムを入れていきます。

プログラムと言っても、iPhone や Android などの堅苦しい言語を使用する訳ではなく、HTML5 と JavaScript を使用して作っていきます。

フォルダ内に index.html を作成します。
<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF-8" />
  <title>Hello World!</title>
</head>
 <body>
  <h1>Hello World!</h1>
 </body>
</html>
以上です。

え?と思うでしょ。
自分もそうでした。単なる HTML のファイルじゃないかと。
だけど、これで良いらしいです。

あとは、OS で動かすに当たって、設定を行う manifest.webapp を記述します。
{
    "version": "0.1",
    "name": "Hello World!",
    "description": "first firefox app.",
    "launch_path": "/index.html",
    "icons": {
    },
    "developer": {
        "name": "Hello",
        "url": "http://yourawesomeapp.com"
    },
    "default_locale": "ja"
}
ここには、プログラム起動に際してのエントリポイントとなるファイルの指定等を行います。

以上で、準備か完了となります。
再度、 Simulator Dashbordに戻り、Add Directory のボタンを押してください。
ファイルの読み込み指定のダイアログが開くので、上記で作成した manifest.webapp を選択する事により、プログラムが起動します。
(icon のところで指定がないので、警告が出ます。)
以上で、Hello World の実行は完了です。
お疲れ様でした。。。って

拍子抜け名感じしますが、今の段階ではこれで良いとします。
実際には、HTML5 や jQuery などを駆使して高度な事や、マニュアル読めばもっと細かな事が可能だとは思うんですが、今のところは深追いしないと言う事で。


0 件のコメント:

コメントを投稿