Building Blocks を用いたスマホアプリらしい UI の実装 - Firefox OS アプリプログラミング #JavaScript

概要

Firefox OS のアプリケーション製作は、ウェブの技術を用いて行います。そのため、デザインは HTML + CSS で行うことになります。スクラッチでスマートフォンアプリケーションらしい UI を実装することは難しいため、なんらかのライブラリを用いて UI を構築することが多いでしょう。

Firefox OS 向けの UI ライブラリに、Building Blocksがあります。今回は、そのライブラリをざっと紹介をします。

Building Blocks は、ライブラリ自体がひとつのアプリケーションのソースコードとして提供されています。ソースコードをダウンロードして、Firefox OS シミュレータに読み込ませると、以下のようなリストが表示されます。

リストの項目をタップすると、各種の UI コンポーネントを見ることができます。いくつかスクリーンショットを掲載します。

リスト表示

各種ボタン

アクションメニュー

画面遷移も、CSS の transition を用いて「らしい」動きになっています。

ソースコード

簡単にソースコードを見てみましょう。

まず、起動時に表示されるリスト画面は、ディレクトリ直下の index.html です。各コンポーネントのリストは、以下のように li タグで書かれています。

index.html

        <li>
          <a id="btn-lists" href="#">
            <p>Lists</p>
          </a>
        </li>
        <li>
          <a id="btn-progress" href="#">
            <p>Progress and activity</p>
          </a>
        </li>

リストをタップしたときに表示される各コンポーネントの画面は、さらに下の方に section タグで書かれています。例えば、リストと進行度は 300 行目付近で、以下のように書かれています。

index.html

 <section id="lists" data-position="right">
     <section role="region">
      <header class="fixed">
        <a id="btn-lists-back" href="#"><span class="icon icon-back">back</span></a>
        <h1>Lists</h1>
      </header>
    </section>
    <iframe src="style_unstable/lists/index.html" class="scrollable header"></iframe>
  </section>

  <section id="progress" data-position="right">
     <section role="region">
      <header class="fixed">
        <a id="btn-progress-back" href="#"><span class="icon icon-back">back</span></a>
        <h1>Progress and activity</h1>
      </header>
    </section>
    <iframe src="style_unstable/progress_activity/index.html" class="scrollable header"></iframe>
  </section>

各画面のヘッダは直接書かれていますが、ヘッダ以下の画面の要素は、iframe を用いて、他の html ファイルを読み込んで表示します。もちろん、全てを index.html に書くこともできますが、各画面をひとつの HTML ファイルとして取り扱うという設計のようです。例えば、リストの画面の場合は、style_unstable/lists/index.html という HTML ファイルに相当します。

ヘッダのボタンなどが押されると、CSS のアニメーションを用いて画面を遷移させます。ボタンのタップに対するイベントリスナの設定は以下のようになっています。

index.html

    //lists
    document.querySelector('#btn-lists').addEventListener ('click', function () {
      document.querySelector('#lists').className = 'current';
    });
    document.querySelector('#btn-lists-back').addEventListener ('click', function () {
      document.querySelector('#lists').className = 'right';
    });

ここで、 #btn-lists というのは、画面一覧の lists という項目を、#btn-lists-back は、リストコンポーネント画面のヘッダの戻るボタンです。それらが押されると、クラス名が current, right でスイッチされ、画面が表示/非表示される仕組みになっているようです。ボタンが押されたときに呼ばれるアニメーションについては、 inde.html の上部に style タグで書かれています。

index.html

    [data-position="right"].current {
      animation: rightToCurrent 0.4s forwards;
      -webkit-animation: rightToCurrent 0.4s forwards;
    }
    [data-position="right"].right {
      animation: currentToRight 0.4s forwards;
      -webkit-animation: currentToRight 0.4s forwards;
    }

画面間の遷移は 0.4 秒で行われるようになっています。ここを 4s などとすると、とろとろと遅く画面遷移が行われるようになったりします。

アニメーション自体のコードは、transition.css に記述されています。例えば、画面を表示するアニメーションのコードは以下のようになっています。

transition.css

/* Go deeper */
@keyframes rightToCurrent {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
@-webkit-keyframes rightToCurrent {
  0%   { -webkit-transform: translateX(100%); }
  100% { -webkit-transform: translateX(0); }
}

非常に駆け足でライブラリを紹介しましたが、Building Blocks を使うことで、Firefox OS の UI を構築していくことができる、ということを把握しておけばオッケーかと思います。