Building Blocks を用いたスマホアプリらしい UI の実装 - Firefox OS アプリプログラミング
概要
Firefox OS のアプリケーション製作は、ウェブの技術を用いて行います。そのため、デザインは HTML + CSS で行うことになります。スクラッチでスマートフォンアプリケーションらしい UI を実装することは難しいため、なんらかのライブラリを用いて UI を構築することが多いでしょう。
Firefox OS 向けの UI ライブラリに、Building Blocksがあります。今回は、そのライブラリをざっと紹介をします。
Building Blocks は、ライブラリ自体がひとつのアプリケーションのソースコードとして提供されています。ソースコードをダウンロードして、Firefox OS シミュレータに読み込ませると、以下のようなリストが表示されます。
リストの項目をタップすると、各種の UI コンポーネントを見ることができます。いくつかスクリーンショットを掲載します。
画面遷移も、CSS の transition を用いて「らしい」動きになっています。
ソースコード
簡単にソースコードを見てみましょう。
まず、起動時に表示されるリスト画面は、 ディレクトリ直下の index.html
です。各コンポーネントのリストは、以下のように li
タグで書かれています。
<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 行目付近で、以下のように書かれています。
<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 のアニメーションを用いて画面を遷移させます。ボタンのタップに対するイベントリスナの設定は以下のようになっています。
//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
タグで書かれています。
[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
に記述されています。例えば、画面を表示するアニメーションのコードは以下のようになっています。
/* 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 を構築していくことができる、ということを把握しておけばオッケーかと思います。
Author And Source
この問題について(Building Blocks を用いたスマホアプリらしい UI の実装 - Firefox OS アプリプログラミング), 我々は、より多くの情報をここで見つけました https://qiita.com/iizukak/items/df4d31da3f1042a34ec5著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .