ユーザーインターフェースの設計

October 13, 2022

ユーザーインターフェースの設計

前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。

目次
HTML でデザイン
体裁を整える
もう一つのメリット
ボタンの機能
まとめ

HTML でデザイン

これまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。今回は、一般的な電卓のようなユーザーインターフェースを実現します。この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。

Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。

HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。

<!DOCTYPE html>
<html>
  <head>
    <title>Calculator</title>
  </head>
  <body>
    <div class="calc">
      <div>
        <input class="display" type="text" />
      </div>
      <div class="keypad">
        <div>
          <button class="clear_key">AC</button>
          <button class="clear_key">C</button>
          <button class="key">/</button>
        </div>
        <div>
          <button class="key">7</button>
          <button class="key">8</button>
          <button class="key">9</button>
          <button class="key">*</button>
        </div>
        <div>
          <button class="key">4</button>
          <button class="key">5</button>
          <button class="key">6</button>
          <button class="key">-</button>
        </div>
        <div>
          <div>
            <button class="key">1</button>
            <button class="key">2</button>
            <button class="key">3</button>
            <button class="key">+</button>
          </div>
        </div>
        <div>
          <button class="double_key">0</button>
          <button class="double_key">=</button>
        </div>
      </div>
    </div>
  </body>
</html>

これで、電卓の基本的な記述は出来ました。

（＊）この例では、機能をシンプルにするために整数の計算に限定しています。従って、小数点の入力は想定していないのでボタンも作成していません。

体裁を整える

電卓のようなユーザーインターフェースが出来ましたが、このままだとボタンの位置がズレてしまっていて見栄えが良くありません。 HTML では、こうした細かい表示の設定を、CSS を書くことで見栄えが良くなるようにする事ができます。

今回は、通常の数字や演算子のボタン、クリアするためのボタン、通常のボタン二つ分の幅のボタンの三つに分けてボタンの並びを修正してみました。数字を表示するフィールドの部分もボタンの幅に合わせています。

背景は、グレーにして実際の電卓に近い形にしてみました。

CSS の例です。

.calc {
  padding: 10px;
  width: 142px;
  margin: 100px auto;
  background-color: darkgray;
}
.clear_key {
  width: 48px;
  margin: 1px;
}
.display {
  width: 132px;
  margin: 10px 1px;
}
.key {
  width: 30px;
  margin: 1px;
}
.double_key {
  width: 66px;
  margin: 1px;
}

これで、ボタンの配列が揃うので、本物の電卓に近い形のユーザーインターフェースになります。

もう一つのメリット

実は、この実際の電卓に近いユーザーインターフェースにすると、別のメリットもあります。これまでの、穴埋め式の入力フォームでは、データをキーボードから入力していた関係上、文字などの意図しないデータが入力される可能性がありました。こうした意図しない入力を、入力のイベントなどを使って修正していました。

この電卓型のユーザーインターフェースでは、キーボードからの入力を禁止にすれば、設定したボタン以外からの入力のみ受け付けることになるので、意図しない文字の入力を避けることが可能になります。

数字の表示フィールドにキーボードからの入力ができないようにするため「readonly」を追加します。

<input class="display" type="text" readonly />

こうする事で、ユーザーインターフェースのボタンのみからデータの入力に限定できるので想定外のデータが入力されるのを防ぐ事が可能になります。

ボタンの機能

今回は、実際に入力されたデータを処理する部分は実装しませんが、ボタンの機能は以下のようになります。

数字のボタンは、数値の入力に利用します
「=」は、実際の計算を行なって結果を表示します
演算子（「+」「-」「*」「/」）は、どの演算子の計算を行うかを指定します。
続けて計算を行う場合は、「＝」と同じ処理を行った後に、演算子の指定を更新します。
「=」は、実際の計算を行なって結果を表示します
「AC」は全てのデータをクリアします
「C」は現在表示されているデータをクリアします

実際の処理は、プログラムで各ボタンがクリックされた場合に処理を行います。プログラムの実装は次回紹介します。

まとめ

この記事では、計算を行う際のデータ入力に利用するユーザーインターフェースの設計について紹介しました。これまでは、数式の穴埋め形式の入力フォームから計算に使う数値を入力するユーザーインターフェースでしたが、より利用しやすいユーザーインターフェースとして、一般的な電卓と同じインターフェースを利用する場合を考えてみました。

電卓のインターフェースは多くの人が使い慣れたインターフェースで、続けて計算する際にも便利です。同じような機能でも、ユーザーインターフェースが違うと使い勝手も大きく変わってきます。

いかに利用者が使いやすいユーザーインターフェースが設計できるかで、アプリの使い勝手や価値が大きく変わってきます。

次回は、ボタンのクリックに対応した処理を実装していきます。

Firebaseの技術情報サイト

Firebase活用の為の技術情報サイトです

ユーザーインターフェースの設計