続・Firefox OSアプリ開発マニュアル

第3回Firefox OSらしいアプリ外観を持つアプリの作り方

今回は、拙作のメモアプリを例にして、Firefox OSのアプリらしい外観を持つアプリが、どのようにつくられるのかを紹介します。

前回取り上げたGaiaとBackbone.jsを使います。Backbone.jsを使うには、jQueryの知識も必要です。完璧にこしたことはありませんが、自信がない方は、おおよそでも学習してください。

Firefox OSらしいユーザインターフェースの構築

一覧画面と編集画面の関係

メモアプリでは、メモの一覧を表示する画面とメモを編集画面の2つの画面を持っています。この画面を往き来させるために、あらかじめ、HTMLに2つ画面を記述しておきます。メモが起動したときに、編集画面は非表示にしておき、一覧画面から編集画面に切り替わる時に、一覧画面を非表示して編集画面を表示する使い方をしています。

具体的には、一覧画面、編集画面ごとに

タグでくくります。

HTMLコード
<section id="view-list">
一覧画面の画面要素を記述する
</section>

<section id="view-edit">
編集画面の画面要素を記述する
</section>
JavaScriptコード
// メモ画面を隠す
$("#view-edit").hide();

Firefox Marketplaceにリリースしているメモは、表示・非表示で画面切り替えているワケでなく、CSSアニメーションを使って、画面をスライドさせて切り替えを実現しています。今回は、詳しく触れませんが、簡単なコードで実現できるので、気になる方は、githubに公開しているソースコードを参考してください。

ヘッダのつくり方

Firefox OSらしいアプリを外観を作る要素のひとつとして、画面上部に配置されているオレンジ色のヘッダがあります。多くのアプリで使われているので、アプリを自作する場合も使うことが多いはずです。

ヘッダは、<header>タグを使うことで実現できます。この中に、<menu>タグを記述することで、メモ追加のボタンを配置して、<h1>タグを記述することで、キャプションを表示します。

CSSリンク
<link rel="stylesheet" type="text/css" href="shared/style/headers.css">
HTMLコード
<header id="view-list-header">
	<menu type="toolbar">
	<a href="#"><span id="view-list-header-add" class="icon icon-add">add</span></a>
	</menu>
	<h1>メモ帳</h1>
</header>
表示させたところ
表示させたところ

ヘッダにキャプションの表示する

ヘッダのキャプションは、HTML書くのと同じ要領で<h1>タグを使って記述します。

<h1>メモ帳</h1>

ヘッダにボタンを配置する

ヘッダにボタンを追加する場合は、以下のようなコードになります。

<menu type="toolbar">
<a href="#"><span id="view-list-header-add" class="icon icon-add">add</span></a>
</menu>

<menu>タグのtype属性に、⁠toolbar」と指定することで、アイコンボタンが右側から順に並ぶようになります。

そのボタンは、<a>タグを使ってボタンを実現します。このタグ内に<span>タグを記述して、class属性に「icon icon-add」を指定します。すると、プラスのアイコンが表示されるボタンになります。

サブヘッダのつくり方

メモの編集画面では、ヘッダに下にさらに高さの低いヘッダを表示して、編集日を表示するようにしています。これは、メインヘッダの下にさらに、<head>タグを記述することで実現しています。

<header id="view-edit-header">
    <button id="view-edit-header-back"><span class="icon icon-back">back</span></button>
    <menu type="toolbar">
        <button id="view-edit-header-delete">削除</button>
    </menu>
    <h1 id="view-edit-header-title">メモの編集</h1>
</header>
<header>
    <h2 style="text-align:center; color:#999999" id="view-edit-update">06/21/2014 :04:42:24</h2>
</header>
編集日を表示
編集日を表示

リストのつくり方

次に、作成したメモを一覧表示するリストのつくり方をご紹介します。

これは、あらかじめ記述するHTMLコードは、ほとんどなく、JavaScriptを使って動的に項目を追加していきます。

CSSリンク
<link rel="stylesheet" type="text/css" href="shared/style/lists.css">
HTMLコード
<ul id="view-list-memo">
</ul>

リストに項目を追加する

リストに項目をひとつ追加した場合のHTMLコードは、以下のようになります。

HTMLコード
<ul id="view-list-memo">
    <li id="view-list-memo-item" data-id="0">
        <a href="#">
            <p>これはテストです。</p>
            <p style="font-size:1.2rem; color:#999999">06/21/2014 04:42:24</p>
        </a>
    </li>
</ul>
サンプルHTMLの表示
サンプルHTMLの表示

ここでポイントになるのが、<li>タグにあるdata-id属性です。

この属性には、表示内容と実データを紐付けるためにインデックスを保持させています。今回は、0が指定されており、最初のデータであることを示しています。

削除確認ダイアログのつくり方

メモでは、メモの削除ボタンがタップされたら、削除確認のダイアログを表示したあと、削除するつくりになっています。このときに表示されるダイアログのつくり方をご紹介します。

CSSリンク
<link rel="stylesheet" type="text/css" href="shared/style/confirm.css">
HTMLコード
<form role="dialog" data-type="confirm" id="view-edit-delete-dialog">
    <section>
    <h1>確認</h1>
    <p>メモを削除してもよろしいですか?</p>
    </section>
    <menu>
        <button id="view-edit-delete-dialog-cancel">キャンセル</button>
        <button id="view-edit-delete-dialog-yes" class="danger">メモの削除</button>
    </menu>
</form>
ダイアログ
ダイアログ

このダイアログもあらかじめ、HTMLに記述しておき、必要なときに表示する使い方になります。

<from>タグ内に、<h1>タグで記述しているのが、ダイアログのタイトルになり、その後の<p>タグで記述しているのが、ダイアログに表示されるメッセージになります。ダイアログ内に表示されるボタンは、<menu>タグ内に<button>タグを使って記述します。

このボタンは、⁠キャンセル」「メモの削除」ボタンがあり、メモの削除の方は、背景を赤色で表示しているので、class属性に「danger」を指定します。

GaiaをBackbone.jsで制御する

これまでの説明で、Gaiaを使ってFirefox OSらしいユーザーインタフェースを構築するイメージはつかんで頂けたと思います。次は、Backbone.jsを使って、それらをコントロールする方法をご説明します。

ユーザインターフェースの制御なので、Backbone.jsのView関連の機能を使います。Backbone.jsが持つ機能は、これだけではありません。興味のある方は、解説書などでより詳しい知識を得てください。

画面の切り替え

まずは、画面制御から入ります。

メモは、メモ一覧画面とメモ編集画面を持っています。これをBackbone.jsで制御するには、Backbone.Viewを使います。たとえば、メモ編集画面をBackbone.Viewを使って実装すると以下のようになります。

JavaScriptコード
// 編集画面
var ViewEdit = Backbone.View.extend({

    el : "#view-edit",
    
    attributes : {
        "data-edit-index" : -1
    },
    initialize : function() {
        this.$( "#view-edit-delete-dialog" ).hide();
    },
    events : {
        "click #view-edit-header-delete" : "clicked_delete",
        
        "click #view-edit-delete-dialog-cancel" : "clicked_dialog_cancel",
        "click #view-edit-delete-dialog-yes" : "clicked_dialog_yes"
    },

    clicked_delete : function() {
        this.$( "#view-edit-delete-dialog" ).show();
    },
        
    clicked_dialog_cancel : function() {
        this.$( "#view-edit-delete-dialog" ).hide();
    },
    
    clicked_dialog_yes : function() {
        this.$( "#view-edit-delete-dialog" ).hide();
    },
)};

画面ごとにBackbone.Viewを継承している理由は、HTMLが画面ごとに<section>タグを使って分かられているためで、JavaScriptも画面と大きく食い違わないようなつくりにして、全体像が把握し易くなるような工夫をしています。この辺りは、好みや開発するアプリのつくりでも変わります。必ずしも例が正解というワケではないので、試行錯誤してください。

もう少し詳しく見ていきます。

冒頭でelプロパティに対して、DOM要素を設定しています。今回の場合、編集画面用<section>で指定したidの「view-edit」を設定します。attributesには、data-edit-indexプロパティを設けています。このプロパティは、編集対象となっているメモのインデックスを保持するために使っています。

イニシャライズ処理を実行する

編集画面では、メモを削除する時に確認ダイアログを表示します。

このダイアログは、ヘッダにある削除ボタンをタップされた時に表示するので、initializeで以下のように、非表示するコードを記述して、使う時意外は表示しないようにしています。

this.$( "#view-edit-delete-dialog" ).hide();

Viewに関わる初期処理がある場合は、ここに記述すると管理しやくなります。

コントロールのイベントを処理する

eventでは、イベントに関連づけするDOMツリー内の要素を記述して、このイベントを処理するメソッドを記述します。

処理しているイベントは、いくつかあるので順に見ていきます。

"click #view-edit-header-delete" : "clicked_delete",

は、ヘッダにある削除ボタン「view-edit-header-delete」がタップされた時に実行するメソッド「clicked_delete」を対応付けています。

以下は、削除確認ダイアログにあるキャンセルボタン「view-edit-delete-dialog-cancel」とメモ削除ボタン「view-edit-delete-dialog-yes」がタップされた時に実行するメソッドを対応付けています。

"click #view-edit-delete-dialog-cancel" : "clicked_dialog_cancel",
"click #view-edit-delete-dialog-yes" : "clicked_dialog_yes"

各イベントには、対応するコントローラメソッドを記述していきます。

今回のまとめ

メモ程度の規模のアプリであれば、画面ごとにBackbone.Viewを継承して管理していくことで、ソースの見通しが良くなります。今回触れた内容が、Backbone.jsのすべてではありませんが、紹介している内容だけでも、十分価値はあります。Backbone.jsに限らず、これからアプリを開発しようと考えている方は、何らかのMVCフレームを使うことをオススメです。

Gaiaの方もすべてご紹介できたワケではありませんが、アプリで表示されるそれぞれの要素が、どのようにして構築されているかをご理解いただけたはずです。

次回は、localforage.jsとI10n.jsの使い方をご紹介します。

おすすめ記事

記事・ニュース一覧