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

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

この記事を読むのに必要な時間:およそ 4 分

今回は,拙作のメモアプリを例にして,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」を指定します。

著者プロフィール

傍島康雄(そばじまやすお)

5月30日生まれ。

モバイルデバイスが大好物。それで動くアプリの開発に喜びを感じている。スマートフォン前夜のWindows Mobile,PalmOSのアプリに情熱を傾けていたが,最近は停滞気味でコードを書くよりも文章を書く機会が多くなっており,文章を書くのも,プログラミングと同じくらい奥深い作業だと感じている。

ブログ:http://yasuos.com/blog/

コメント

コメントの記入