今回は電卓アプリを制作するための仕様作成編です。
実装を始める前に、どんなものを作るかを具体的に決めていきましょう!
作品づくりの第一歩!やることを整理しよう!
仕様とは?
仕様とは、「作成する対象がどう動くべきか、どんな機能を持つべきか」
を示したルールや基準のことです。
作り始める前に仕様を決めることで、開発の方向性を明確にすることができます。
また、チームで開発する上でもメンバー間で共通の認識を持つために、
非常に重要となるモノづくりの土台になります。
実装中に良いアイデアが生まれたら取り入れるのもOK!
最初に決めた仕様が絶対ではないよ!
電卓アプリのテーマ
これから作るモノを一言で表せるとイメージがつかみやすいので、
作成する電卓のテーマを決めていきます。
今回は、
「シンプルなデスクトップ電卓」
をテーマとします。
PC上で動作する電卓で、最低限の計算機能だけ有している電卓のイメージです。
機能の仕様
電卓の機能として、何が必要かを考えていきます。
スマホやPCの電卓を実際に使ってみるのも良いでしょう。
電卓には主に次のような機能が挙げられます。
- 数値の入力
- 演算子の入力
- 計算結果の出力
- 入力・出力のクリア
数値の入力
電卓は数値を入力することができます。
連続で数値を入力すれば2桁以上の数値を表現できます。
今回は次のような仕様で作成していきます。
【仕様】
- 数値の入力を保存
計算には1+2のように数値2個と演算子1個が必要なので、
数値は2個分保存できるようにします。
- 連続で入力された数値は入力済みの数値の右側に追加
例えば、9の次に1を入力したら91となります。
- 0を連続で入力した場合のみ、0のまま
00000とはならないようにします。
- 桁数は10桁まで入力可能
1億桁とかは表示できないので制限を加えます。
演算子の入力
演算子によって何の計算を行うかが決まります。
また、電卓で連続して計算を行っていくと、
演算子の入力時にそれまでの計算結果が表示されるのでマネしていきます。
【仕様】
- 演算子の入力を保存
次の数値が入力されて計算処理を行うまでは保管しておきます。
- 演算子の入力前後の数値入力を保存
演算子を入力する前には数値を入力しているはずです。
その数値は計算処理を行うときまで保管しておく必要があります。
また、演算子入力後の数値も別に保存しておく必要があります。
- 演算子を連続で入力すると上書き
+のあとに×を押すと×が適用されます。
- 途中の計算結果の出力・保存
数値入力と演算子の入力を繰り返すと、
2回目以降の演算子入力で、それまでの計算結果を算出します。
例えば3 4
続けて計算することもできるため、12を保存しておく必要もあります。
計算に関する仕様は次の「計算結果の出力」と同じです。
計算結果の出力
主に「=」ボタンを押したときの挙動になります。
【仕様】
- 入力された数値と演算子から計算結果を出力
2つの数値と演算子の入力を持っている時だけ、計算処理が可能。
- 計算処理をできない場合は現状維持
2つの数値と演算子の入力を持っていない時は計算処理をしません。
- 0での除算は0とする
数値 ÷ 0の式は計算できないので、とりあえず計算結果を0にします。
0で除算のようにエラーになることを見越して処理を組むことを
エラーハンドリングと言いますよ!
入力・出力のクリア
電卓には「AC」と書かれたボタンがあります。
ACは”All Clear”の略で、押すと今までの入力と出力がリセットされます。
【仕様】
- 入力した数値をリセット
- 入力した演算子をリセット
- 計算結果もリセット
UIの仕様
電卓の見た目(UI)を決めていきます。
上記に書いた機能の仕様を扱うためには、
次のような要素が必要になります。
【UIの要素】
- 数値入力と計算結果の表示
- 数値のボタン(0~9)
- 演算子のボタン(+, -, ×,÷)
- 入力・出力のクリアボタン(AC)
- 計算結果の出力ボタン(=)
画面のレイアウト
上記の要素で画面のレイアウトを組んでいきます。
ボタンの形は全て四角で統一。
配色は青ベースにし、見分けやすいように数値・演算子・AC・=で色を変えていきます。
細かく指定したいときは、
ピクセル単位でそれぞれのサイズも決めると良いよ!
「①数値入力と計算結果の表示」のように、状況によって表示する文字数が変わる部分は
最大で何文字まで表示できるかを想定してサイズを決めることをおススメします。
枠に収まりきらない場合、文字がつぶれたり、表示しきれない文字が出てきます。
仕様の段階で防いでいきましょう!今回はやってないけど
UIの挙動
最後にUIがどのような時に表示が変わるかの仕様を見ていきます。
電卓なので基本的にボタンを押したときの挙動です。
機能の仕様とUIの仕様を結び付けて、考えていきましょう。
- 数値入力と計算結果の表示
他のボタンによって、表示が更新される。 - 数値のボタン
数値の入力のルールで数値を入力。
「①数値入力と計算結果の表示」のUIに入力した数値を表示。
- 演算子のボタン
演算子の入力のルールで演算子を入力。
途中の計算結果を出せる場合は、「①数値入力と計算結果の表示」のUIに表示。
- 入力・出力のクリアボタン
入力・出力のクリアのルールで保管してる数値や出力をクリア。
「①数値入力と計算結果の表示」のUIに”0”を表示。
- 計算結果の出力ボタン(=)
計算結果の出力のルールで計算結果を求める。
「①数値入力と計算結果の表示」のUIに計算結果を表示。
仕様はここまで!作品のイメージは深まったかな?
まとめ
今回は電卓を作成するための仕様を作成していきました。
作成する前に何を目指すかを具体的に決めることは、
その後の作業で迷う部分をなくし進めやすくするためにも重要な手順です。
ですので、作りたいものがあるかたは、
まずは仕様を考えて方針を整理することをおススメします!
仕様づくりはプランナーという仕事があるほど重要なんですよ~