2013-05-26

お手軽 Firefox OS Simulator - 画面情報

Firefox OS の「はじめてのアプリ」で示したものは、単純に文字列を index.html で表示するだけの例でしたが、今回はスタイルシートと JavaScript を加えたサンプルです。と言っても、単純なサンプルで、Firefox OS Simulator の画面サイズに関する情報を JavaScript のプログラムで取得して表示するだけのものです。ただ表示するだけでは面白くないので、スタイルシートで修飾を加えました。

画面情報の取得

まず、マニフェスト manifest.webapp を下記に示しました。

{
    "default_locale": "ja",
    "name": "Screen Info",
    "description": "表示に関する情報",
    "version" : "1.0",
    "developer": {
        "name": "すぐりふひと",
        "url": "http://bitwalk.blogspot.jp/"
    },
    "icons": {
        "128": "/img/icon-128.png"
    },
    "launch_path": "/index.html"
}

次に、スタイルシート style.css です。段組みのレイアウトについては、関連サイトの 3. で説明されている情報を参考にしました。

.wrap {
    display: -moz-box;
    display: box;
}
.box {
    margin: 3px 5px;
    padding: 5px 10px;
    border-radius: 3px;
    box-shadow: 0px 0px 4px 0px black;
    color: #002000;
    font-size: 16px;
    font-family: mono;
    text-shadow: 2px 2px 2px #001000;
}
.title {
    width: 300px;
    background-color: #F0F0C0;
}
.lab {
    width:195px;
    background-color: #C0F0F0;
}
.val {
    width: 95px;
    text-align: right;
    background-color: #F0C0F0;
}

次に、JavaScript init.js です。内容を変更したい対象の要素を id で指定しておきます。document.getElementById で該当する id の要素を探し、innerHTML プロパティの値(タグ要素の中身)を書き換えます。

function screenInfo() {
    document.getElementById("win_width").innerHTML = window.screen.width;
    document.getElementById("win_height").innerHTML = window.screen.height;
    document.getElementById("inner_width").innerHTML = window.innerWidth;
    document.getElementById("inner_height").innerHTML = window.innerHeight;
}

そして、画面情報を表示する index.html です。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表示に関する情報</title>
        <link rel="stylesheet" href="css/style.css"></link>
        <script type="text/javascript" src="js/init.js"></script>
    </head>
    <body onload="screenInfo()">
        <div class="wrap">
            <div class="box title">画面情報</div>
        </div>
        <div class="wrap">
            <div class="box lab">ウィンドウの幅</div>
            <div class="box val" id="win_width">幅の値</div>
        </div>
        <div class="wrap">
            <div class="box lab">ウィンドウの高さ</div>
            <div class="box val" id="win_height">高さの値</div>
        </div>
        <div class="wrap">
            <div class="box lab">表示領域の幅</div>
            <div class="box val" id="inner_width">表示領域の幅の値</div>
        </div>
        <div class="wrap">
            <div class="box lab">表示領域の高さ</div>
            <div class="box val" id="inner_height">表示領域の高さの値</div>
        </div>
    </body>
</html>

今回は、アイコンに下記のイメージを使いました。

フォルダー内に上記ファイルを格納します。

実行結果を下記に示しました。

関連サイト

  1. お手軽 Firefox OS Simulator - はじめてのアプリ
  2. Web API reference | MDN
  3. CSS3 の display:box; を使ったフレキシブルな段組みレイアウト | TM Life

2013-05-20

お手軽 Firefox OS Simulator - はじめてのアプリ

Firefox OS 用のアプリには、ホスト型アプリ (Hosted Apps) とパッケージ型アプリ (Packaged Apps) の二種類があります。ホスト型とは HTML / CSS / 画像などのリソースが、全てWebサーバ上にホスティングされているタイプのアプリケーションです。一方のパッケージ型とは、リソースが OS のファイルシステム内に格納されるタイプのものです(zip ファイルにアーカイブされて配布されます)。ここでは、後者のパッケージ型アプリを作ってシミュレータ上で動かしてみましょう。

なお、ブラウザの Firefox を動作させている環境は、Windows ではなく Fedora 18 (x86_64) です。シミュレータの操作などは、ホストの Windows や Linux にはほとんど関係ないと思います。

はじめてのアプリ

それでは、最初のプログラム(アプリ)として、昔ながらの Hello World のような文字を表示するだけのプログラムを作ります。

まず、マニフェストファイル manifest.webapp を以下の様に作成します。マニュフェストとは、アプリの内容を記した目録のようなもので、JSON (JavaScript Object Notation) の表記方法に従います。エンコードは UTF-8 です。

{
    "default_locale": "ja",
    "name": "Hello World",
    "description": "Firefox OS でのはじめてのアプリケーション例",
    "developer": {
        "name": "すぐりふひと",
        "url": "http://bitwalk.blogspot.jp/"
    },
    "icons": {
        "128": "/img/icon-128.png"
    },
    "launch_path": "/index.html"
}

最初のアプリは、index.html で文字列を表示するだけのものです。このファイルのエンコードも UTF-8 です。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>はじめてのアプリ</title>
    </head>
    <body>
        <h1>ようこそ!</h1>
        <p>Firefox OS で動作するアプリケーション作成は、とっても簡単です。</p>
    </body>
</html>

アイコンは最低 128px × 128px の画像が必要になります。今回は、下記のイメージを使いました。

フォルダー内に上記ファイルを格納します。アイコンファイル icon-128.pngimg ディレクトリ内です。

Firefox を起動し、メニューから ツール(T)Web 開発(W)Firefox OS Simulator と選んで、シミュレータを起動します。ダッシュボードの Add Directory をクリックします。

マニフェスト manifest.webapp が格納されているディレクトリへ移動して、このマニフェストを読み込みます。

すると、シミュレータが開始 (Running) され…、

ほどなくして Firefox OS のウィンドウが表示されると同時に、マニフェストの "launch_path" キーで指定した値である "/index.html" ファイルが表示されます。

このように単に文字を表示するだけのアプリであれば、とても簡単にできてしまいます。その他のハードコピーをいくつか示しました。

Firefox OS はマルチタスクの OS ですので、ホームボタンをタップ(クリック)して画面を切り替えただけでは、アプリは動作したままの状態です。ホームボタンを長押しすると起動中のアプリが表示されます。

このアプリの登録は以下の様になっています。

備考

Linux 版の Firefox OS Simulator 3.0 では上述のアプリが全く動かなかった(正しくロードされていない様子だった)ので、仕方なく Windows 上で試していたのですが、諦めきれずにいろいろ探して、結局下記のサイトから、最新のパッケージ (4.0pre2) を入手してこれで試しています。

関連サイト

  1. お手軽 Firefox OS Simulator
  2. アプリマニフェスト - Apps | MDN

2013-05-18

お手軽 Firefox OS Simulator

Firefox OS は、Mozillaが開発している、モバイル端末向けのオープンソースな OS(オペレーティングシステム)です。プロジェクト名は、Boot to Gecko, B2G です。

モバイル端末向けの OS といえば、Apple iOS や Google Android が普及しており、後発の OS として Tizen や Firefox OS が話題になっています。これらの後発の OS は、Android のカーネルを出発点としてはいるものの、HTML5 + JavaScript のアプリケーションが動作するようになっており、Apple や Google のような特定の企業の独自性のあるサービスに縛られずに、標準化された規格 (HTML5) の元でアプリケーションを開発できます。

Firefox の Add-on で動作する Firefox OS Simulator

日本ではありませんが、Firefox OS を OS に搭載した端末が 6 月にもデビューするということで、関連情報を調べていたのですが、その時に Web Browser の Firefox の Add-on 用の Firefox OS Simulator を見つけました。

このアドオン・アプリケーションは、Preview にも関わらず、Version 3.0 になっているので、遅ればせながら、ということかもしれませんが、試してみましたので簡単に紹介します。Firefox を起動して、上記サイトから Firefox OS Simulator の Add-on をインストールすればすぐに使えますが、Firefox を起動するのがあまりにも久しぶりで、Add-on のアプリケーションを通常の状態から起動する方法が判らず、結構探すことになりましたので、参考までに起動するメニューの場所を以下に示しました。

Add-on の Firefox OS Simulator を起動すると下記の画面が表示されます。"Stopped" と表示されているボタンをクリックすると、"Runnning" に表示が代わり、Firefox OS のシミュレータウィンドウが開きます。Console のチェックを入れておくと、エラーを表示するコンソールウィンドウも開きます。

シミュレータのハードコピーをいくつか紹介します。

Linux は Dual Core の 64bit とは言えど、もう古い PC なので、こういうシミュレータを起動すると結構な負荷がかかって、冷却ファンの回転数が最大になりうんうん唸りだします。こういう時に新しい PC がとても欲しくなります。

ちなみに OS のバージョンは Boot2Gecko 1.1.0.0-prerelease となっています。

HTML5 に本格的に取り組むのはもう少し先でもいいかなと思って、個人としては JavaFX にプログラミングの重点を置いていますが、実務レベルでは JavaScript の方がはるかに需要が高く、HTML5 を前面に出したこういうモバイル端末向け OS を見てしまうと、たいへんな焦燥感にかられます。う~ん、悩ましいです。時代の流れがこっちの方だと直感的には感じているからです。

この週末にもう少し使ってみて、詳しい紹介ができれば、と考えています。

参考サイト

  1. Firefox OSは2013年6月に5カ国でデビューさせるとMozillaのCEOが表明
  2. Firefox OS搭載の開発者向け端末、発売数時間で売り切れ
  3. まだチャンスはあるのか?Firefox OSレビュー
  4. Firefox OSの展開拡大、KDDIも取り組み

2013-05-04

【備忘録】JavaFX で複数のウィンドウを扱う

5 月の連休は、4/26 - 5/5 とまとまって取ることができました。この休みこそは普段の仕事を忘れ、ゆっくり JavaFX で自分が作りたいアプリケーション作りに没頭したいものだと思っていたのですが、なかなかそうはいきませんでした。

連休までに終わらせる予定だった仕事が終わらず、休みに入っても最初の三日間は自宅にこもって徹夜で対応していました。そのためすっかり昼夜が逆転してしまって調子を崩し、やっと自分のやりたいことが出きるようになった頃には、もう連休は後半にさしかかっています。

とにかく、GUI アプリケーションを作るための土台を作ろうと意気込んだのは良いのですが、どうも勝手がわかりません。メニューバーの ヘルプ からこのプログラムについて みたいなアイテムを選んで、別のウィンドウを表示する、と言った、ほんの基本的なことを実現するだけでも、なかなか納得したものができません。いろいろサイトを調べたりしてたどり着いた結果を備忘録としてもとめておきました。出来てしまえばなんてことはなかったのですが…。

やりたかったことは以下の通りです。

先述したように、メニューバーのメニュー Help から、項目 About を選んで、別ウィンドウを表示させるというものです。

メニューバーの Help メニューまわりは以下の様にします(メインプログラムの Ammonite.java の一部)。

public class Ammonite extends Application {
    ...
    (省略)
    ...
    @Override
    public void start(final Stage stage) {
       ...
       (省略)
       ...
        BorderPane root = new BorderPane();
        root.setPrefSize(300, 100);

        MenuBar bar = new MenuBar();
        root.setTop(bar);
       ...
       (省略)
       ...
        Menu helpMenu = new Menu("_Help");
        MenuItem aboutItem = new MenuItem("_About");
        aboutItem.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent t) {
                Stage aboutStage = new DlgAbout(stage);
                aboutStage.show();
            }
        });
       ...
       (省略)
       ...
    }

    public static void main(String[] args) {
        launch(args);
    }
}

DlgAbout クラス (DlgAbout.java) は以下の様になります。プログラム固有の変数などが含まれていますので、あくまで参考まで。

public class DlgAbout extends Stage {

    Image logo = new Image(getClass().getResourceAsStream(Ammonite.imgLogo));
    Image info = new Image(getClass().getResourceAsStream(Ammonite.imgInfo));

    public DlgAbout(Stage owner) {
        initOwner(owner);
        initModality(Modality.APPLICATION_MODAL);
        initStyle(StageStyle.UTILITY);
        setTitle("About this");
        setResizable(false);
        getIcons().add(info);

        VBox vbox = new VBox();
        vbox.setId("dlg");

        Label lab1 = new Label(Ammonite.appName);
        lab1.setStyle("-fx-font-size: 20pt;");
        vbox.getChildren().add(lab1);

        Label lab2 = new Label("version " + Ammonite.appVer);
        vbox.getChildren().add(lab2);

        Label lab3 = new Label("COPYRIGHT(C) "
                + Ammonite.appYear + ", " + Ammonite.appAuthor);
        vbox.getChildren().add(lab3);

        Label lab4 = new Label("running on Java "
                + System.getProperty("java.version"));
        vbox.getChildren().add(lab4);

        Label lab5 = new Label();
        lab5.setGraphic(new ImageView(logo));
        lab5.setId("logo");
        vbox.getChildren().add(lab5);

        Button but1 = new Button("Close");
        vbox.getChildren().add(but1);
        but1.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                hide();
            }
        });

        Scene scene = new Scene(vbox);
        scene.getStylesheets().add(Ammonite.class.getResource("DlgAbout.css").toExternalForm());

        setScene(scene);
    }
}

一つできれば、他に別ウィンドウを作る場合にも応用が容易です。ある程度の汎用目的に使える基本的なダイアログを作ることもできます。

ちなみに DlgAbout クラスでは setResizable(false); として、ウィンドウサイズの変更をユーザー側ではできないように設定していますが、Fedora で使っているデスクトップ環境 LXDE では、この設定が効きません。Windows XP 上では下記の様に確かに設定が有効になっています。ウィンドウの右上隅の違いです(ウィンドウを最大/最小にするボタン(?)がありません)。一方で、info アイコンが左上隅に表示されません。

さて、この Ammonite というアプリケーションですが、エンジニアリングで必要な統計解析ができるツールになる予定ですが、まだ中身がありません。TableView を使いこなせなくてモタモタしています。むかしむかし、Tcl/Tk で作りかけていたアプリケーションを、JavaFX で作り直そうとしています。ベースの機能ができてくれば、SourceForge.net あたりにレポジトリを公開します。ご興味がある方は、何卒、気長に待っていてください。

参考サイト

  1. Set dialog Modality.APPLICATION_MODAL : Dialog « JavaFX « Java