2013-06-29

Oracle、Javaの定例アップデートを公開 「極めて深刻」な脆弱性を多数修正 - ITmedia ニュース

Java 7 update 25 が 6 月 18 日にリリースされました。今回は、会社の Windows PC でアップデートの警告が出てようやく気づくというていたらくで、それでも自宅で動作確認をすることもなくズルズルと二週間ばかりが過ぎてしまいました。やや Java への関心が低くなっているこの頃です。

実は Fedora 19 のβ版に fedup でアップグレードして、週末はそれどころではなかったのが真相なのです。折角 Fedora 19 が使えるようになったのだから、java-1.8.0-openjdkjava-1.8.0-openjdk をインストールして、こちらの JavaFX (OpenJFX) も試してみようとあれこれやってみましたが、NetBeans IDE 上では使えるようにはできませんでした。使い方が悪いのかもしれません。

なお、次回の Critical Patch Update (CPU) は、10 月 15 日の予定だそうです。

参考サイト

2013-06-15

お手軽 Firefox OS Simulator - ユーザー・エクスペリエンス

UX とは、User Experience の略です。Firefox OS では、Firefox OS UX building blocks, UXBB と呼ばれ、共通に利用されるインターフェイスの要素を指しています。関連サイト 1. で解説されていたので、ソースを入手して日本語用に手を加えてみました。

Firefox OS のユーザー・エクスペリエンス

まず、下記の Gaia と Firefox OS の標準フォント MozTT をダウンロードします。 Firefox OS のユーザインタフェース層である Gaia については、今回はスタイルに関る部分を利用するだけです。

ダウンロードは、上記サイトの ZIP ボタンをクリックします。

次に、下記のマニフェスト manifest.webapp を用意します。

{
    "default_locale": "ja",
    "name": "Hello World 2",
    "version": "2",
    "description": "はじめてのアプリ",
    "developer": {
        "name": "すぐりふひと",
        "url": "http://bitwalk.blogspot.jp/"
    },
    "icons": {
        "128": "/img/icon-128.png"
    },
    "launch_path": "/index.html"
}

index.html は、関連サイト 1. を参考に下記にようにしました。

<!DOCTYPE html>
<html>   
    <head>
        <meta charset="UTF-8">
        <title>はじめてのアプリ 2</title>
        <style type="text/css">
            @import url(style/headers.css);
            @font-face
            {
                font-family: MozTT;
                src: url(fonts/MozTT);
            }
            html, body {
                margin: 0;
                padding: 0;
                font-family: "MozTT", Sans-serif;
                font-size: 10px;
                background-color: #fff;
            }
        </style>
    </head>

    <body>
        <section role="region">
            <header>
                <a href="#"><span class="icon icon-back">戻る</span></a>
                <menu type="toolbar">
                    <button>
                        <span class="icon icon-add">追加</span>
                    </button>
                </menu>
                <form action="#">
                    <input type="text" placeholder="search" required="required">
                    <button type="reset">文字列リセット</button>
                </form>
            </header>
            <header>
                <p>ユーザー・エクスペリエンス (UX)</p>
            </header>
        </section>
        <h1>ようこそ!</h1>
        <p>Firefox OS で動作するアプリケーション作成は、とっても簡単です。</p>
    </body>
</html>

フォルダーの構造を下記に示しました。

moztt-master/MozTT は、fonts/MozTT へコピー、gaia-master/shared/style のフォルダはそのまま、style へコピーしています。

このサンプルの実行結果を下記に示しました。

今回紹介した ボタンには機能を付加しておらず、単に見映えだけのものです。下記のようにいろいろな UXBB のボタンが用意されています(関連サイト 1. から画像をリンクしています)。

このサンプルでは、Firefox OS のアプリらしいルック&フィールのボタンを表示することができました。しかし、関連サイト 1. でも述べられているように、アプリごとに UXBB のリソースをコピーして利用するのは効率的ではありません。もっと良い方法はないものでしょうか?

関連サイト

  1. Getting Started with Firefox OS - The UX Building Blocks

2013-06-08

お手軽 Firefox OS Simulator - タブ画面

Firefox OS は、HTML5 ベースのアプリケーションを作成できるのですから、ホームページで使うタブも、当然同じように表現できるはずです。念のため、JavaScript でタブ画面を表示するサンプルを作って確認してみました。JavaScript は公開されているものを利用しています。

タブ画面の作成

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

{
    "default_locale": "ja",
    "name": "タブテスト",
    "description": "タブのテスト用ファイル",
    "version" : "1.0",
    "developer": {
        "name": "すぐりふひと",
        "url": "http://bitwalk.blogspot.jp/"
    },
    "icons": {
        "128": "/img/icon-128.png"
    },
    "launch_path": "/index.html"
}

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

タブを作成する JavaScript および CSS は下記のサイトのものを利用しました。

本体の index.html は次の様にしました。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>タブテスト</title>
        <script type="text/javascript" src="js/tabber.js"></script>
        <link rel="stylesheet" href="css/example.css" TYPE="text/css" MEDIA="screen">
        <link rel="stylesheet" href="css/example-print.css" TYPE="text/css" MEDIA="print">
    </head>
    <body>
        <h1>タブテスト</h1>
        <p>ホームページでタブを試すのと同じですが、念のため動作確認をしました。</p>

        <div class="tabber">

            <div class="tabbertab">
                <h2>タブ1</h2>
                <p>タブを画面を生成する Java Script は下記のサイトの tabber.js
                (配布はMITライセンスに従います)
                および example.css, example-print.css を利用しました。</p>

                <ul>
                    <li><a href="http://www.barelyfitz.com/projects/tabber/">
                    JavaScript Tabifier automatically create an html css tabs interface</a></li>
                </ul>
            </div>

            <div class="tabbertab">
                <h2>タブ2</h2>
                <p>タブ2の内容</p>
            </div>

            <div class="tabbertab">
                <h2>タブ3</h2>
                <p>タブ3の内容</p>
            </div>
        </div>
    </body>
</html>

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

実行結果を下記に示しました。なお、今まで通常状態で変化を確認できず、何に使うボタンかよく判らなかったのですが、シミュレータの下部のあるボタン ボタンを「アプリの実行中」にクリックすると(本来はアプリが許可すれば、らしいですが)画面の縦横が入れ替わります。

 

今回は Firefox OS 固有の内容ではなく、ホームページを作成する場合とほとんど変わらない内容でした。これは、ホームページを作成する知識があれば、あとは少しの知識の追加で Firefox OS のアプリを作れるということで、アプリ作成の手軽さは、Android などと比較して群を抜いているのではないでしょうか。といっても、いつまでも一般的な例を紹介するだけでは面白みに欠けますので、そろそろ Firefox OS 固有の API を利用する例をもっと調査して紹介していきたいと考えています。

関連サイト