Firefox OSアプリ開発ガイド

3.1
シンプルな電卓アプリを
作ってみよう
四則演算だけのシンプルな電卓アプリをデザインしてみましょう。 電卓
の HTML ソースコードを元に、基本的に CSS を書き換えるだけでデザイ
ン制作します。
CHAPTER
3
事例でわかる開発手順とデバッグ
31
1 「見るための HTML 」
「使うための HTML 」へ
から
今まで「見てもらう」ために書いていた HTML が、今後は「使ってもらう」ためにも書くという機会
が多くなると、期待を込めて予想されます。 つまり、「ホームページ」だけでなく「アプリケーション」
という領域でも、Web 制作の技術が活かせる状況になってきました。
「アプリで一番大切な、デザインとは何か？」を改めて考えてみると、ユーザが 操作する一連 の
行動さえもデザイナーが予想して設計することが大切で、
これが本来の「デザイン」というべき概念
のように思われます。 例えば HTML をコーディングする際に、ユーザが起こすであろう操作ミスまで
HTML や CSS に配慮した上で、全体の設計デザイン作業にとりかかるべきでしょう。
とは言っても、設計 デザインの 世界では 「習うより慣れろ」ということも重要です。 そこで本章
は、アプリ開発 の 最初 の 一歩、
とってもシンプルなアプリのデザイン制作を体験してみることにしま
しょう。
31
2
アプリケーションの概要
今回作る電卓アプリは、画像ファイルも使わず、HTML のソースは基本的にあまり触らず CSS だ
けで作成します。 見た目も図 3.1.1 のとおりで、色は黒 ベース、クリアの 「 C 」ボタンだけ赤で、文
字・記号は全て白抜きにします。
100
図3.1.1
黒ベースの
電卓アプリ
3.1
動する HTML を書くということにかわりはありません。「見た目」ばかりにとらわれたデザインにしよう
とすると、場合によっては開発が著しく困難になることもあります。こころしておきましょう。
31
3
制作環境を準備する
シンプルな電卓アプリを作ってみよう
ただし忘れてならないのは、たとえこのようにシンプルなアプリであっても、裏では JavaScriptと連
日頃 Web デザインをする上で使っているツール類があれば、電卓アプリを作る上でもさして支障
はきたしません。 今回は、以下のようなツールで電卓アプリを作っていきます。
Macbook Air（ Mac OS 10.7 ）
Dreamweaver CS6
Sublime Text 2
LESS
Firefox ブラウザ
DreamweaverとSublime Text 2 は、
どちらもコーディングツールとして使っています。 私は場
合によって使い分けています。 他に慣れているＷｅｂ制作ツールがあれば、何でも問題ありません。
LESS は CSS を効率良く書くフレームワークですが、他にもSass や Compassといったものも人気
です。こちらも慣れているツールでかまいません。
101
つまり、今までの Web 制作となんら変わりないツールで、アプリ制作を楽しめるということが 言え
ます。
なお、
ＬＥＳＳ、
Ｓａｓｓ、Ｃｏｍｐａｓｓの Web サイトは、下記 URL です。
LESS
http://lesscss.org/
Sass
http://sass-lang.com/
Compass
http://compass-style.org/
CHAPTER
今回の場合、端末のハードウェア機能、すなわち電池残量や照度センサ、バイブレーションなど
は、いっさい使いません。 ほとんどが PC の Web ブラウザだけで動作確認を行うことができます。ま
3
た当然ですが、ブラウザは Firefox を使います。
事例でわかる開発手順とデバッグ
31
4
インタフェースの骨組みを HTML で作る
ほとんどの電卓は、基本キー配置がまったく同じと言っていいほど似通っています。これは、電卓
を使うユーザが慣れ親しんできた指の動きに合わせているからで、新しい操作を学習しなくても済む
よう配慮したデザインと言えます。クリエイティブな感じを受けないかもしれませんが、インタフェース
を考える上での「キモ」かもしれません。
電卓アプリに関しても、新しい配置にして劇的に使いやすくならない限り、従来のレイアウトを「マ
ネ」て作るのが最善だと考えます。ですから、今回の電卓アプリもこのようなレイアウトで実現してい
くことにしましょう。
図 3.1.2 は、
このような発想でペーパープロトタイプをノートに描いてみたものです。
では 次に、HTML でコーディングしていくわけですが、Firefox OS のアプリ制 作で楽なところは
「他 のブラウザを気にする必要が 全くない」ということです。 つまり、私たちが日頃苦しんでいる、
古い Internet Exploler への対応などを含め、ある意味クロスプラットフォームすら気にせずに Web
標準技術だけを使っていけば済むわけです。 日頃、商業用の Web サイトを制作されている人から
すると、夢みたいな話でしょう。
102
図3.1.2
ペーパープロトタイプ
HTML のコーディングでは、現在 HTML5 用コーディングフォーマットとして、非常に人気があり便
利でもある HTML5 Boilerplate ですら使わなくて済む場合があります（全てにおいてというわけではなく、
HTML5 Boilerplate
http://html5boilerplate.com/
上記の理由から、
ここでは、HTML5 をベースとした、
とってもシンプルなコーディングをしてみまし
た。まず、図 3.1.3とリスト3.1.1 を、
とくと眺めてみてください。
図3.1.3
シンプルな電卓アプリを作ってみよう
なお、HTML5 Boilerplate の Web サイトは、下記 URL です。
3.1
という意味です）。
Internet Exploler への対応などが必要ない、
シンプルな
ソースコードで
電卓を作る
103