6. ユーザインタフェース
本章では、HTML の基本的な要素である input 要素の使い方を紹介します。
6.1 UI/UX
アプリケーション開発者は、ユーザにより満足度の高い・より効果的なシステムを提供するために、 UI/UX について考える必要があります。
UI (User Interface) は「ユーザとシステムを繋ぐもの」の意で、 マウスでクリックされることを想定した「ボタン」や、 キーボードで何かの入力を受け付けることを想定した「テキストフィールド」などが当てはまります。 これらシステムを構成する要素の「見た目」も、UI に含まれます。
UX (User Experience) は「ユーザの体験」の意で、 システムの利用を通して得られるユーザの体験全般を指します。 ユーザにどのような体験を提供したいのか、UX の向上を意識することで、 システムはより使い心地がよく満足度の高いものになっていきます。 UI は、UX を向上させるための一つの要素であると考えることができます。
UI と UX は関連性が高いので、以降はこれらをまとめて UI/UX もしくは単に「ユーザインタフェース」と呼ぶことにします。
6.2 input 要素
Web アプリケーションでインタラクティブなユーザインタフェースを追加する最も単純な方法は、input要素を使うことです。
以下のようにinput タグ（閉じタグは無し）を用いて、type 属性でインタフェースの種類を指定することができます。
type属性にはさまざまな種類のインタフェースが用意されていますが、
よく利用する（本実習で使う可能性の高い）ものをいくつかピックアップして紹介していきます。
6.2.1 一行テキスト入力フィールド
type属性に text を指定すると、一行のテキスト入力フィールドとなります。
value属性で初期値、placeholder属性で入力のヒントを指定することができます。
6.2.2 数値入力フィールド（HTML5 以降）
type属性に number を指定すると、数値入力フィールドとなります。
value属性で初期値、min属性で最小値、max属性で最大値、step属性で数値の刻み幅を指定することができます。
6.2.3 チェックボックス
type属性に checkbox を指定すると、クリック毎に選択/非選択を切り替えられるチェックボックスとなります。
checked属性を checked にすると、選択されている状態となります。
基本的には、以下のように label タグを用いてチェックボックスの説明を付与しておきましょう（他の UI 要素も同様）。
6.2.4 ラジオボタン
type属性に radio を指定すると、グループ間で一つだけ選択可能なラジオボタンとなります。
checked属性を checked にすると、選択されている状態となります。
グループが同一であることを示すには、name 属性を同一のものにします。
6.2.5 レンジ入力バー/スライダ（HTML5 以降）
type属性に range を指定すると、範囲を入力できるバー（スライダ）となります。
value属性で初期値、min属性で最小値、max属性で最大値、step属性で数値の刻み幅を指定することができます。
6.2.6 カラー入力フィールド（HTML5 以降）
type属性に color を指定すると、カラー入力フィールドとなります。
クリックするとカラーパレットが現れ、色を選択することができます。
value属性で初期値を指定することができます。属性値は、# からはじまる 6 桁のカラーコードとなります。
6.2.7 汎用ボタン
type属性に button を指定すると、汎用ボタンとなります（3 章で導入済み）。
value属性でボタンに表示するテキストを指定することができます。
onclick属性で、ボタン押下時に呼び出す JavaScript 関数を指定することができます。
次節では、これら UI 要素と JavaScript の連携方法について学びます。
6.3 UI 要素 と JavaScript の連携
前節では、input 要素によるユーザインタフェースの設置方法を学びました。 本節では、input 要素と JavaScript (Canvas) の連携方法を紹介します。
6.3.1 ID 属性
JavaScript から input要素の状態を参照する代表的な方法として、
input要素に id属性を設定しておき、document.getElementById() を使うというものがあります。
テキスト入力欄とボタンを表示し、ボタンが押されたときに JavaScript からテキスト入力欄の値を参照する例を以下に示します。
テキスト入力欄の id属性を yourName、ボタンが押されたときに呼び出す関数名を hello()とし、
JavaScript 側の hello() 関数内からは getElementById('yourName').value を使ってテキストを参照しています。
6.3.2 テキストから数値への変換
テキスト入力欄から受け取ったテキストを、数値として扱いたいケースも考えられます。
そのような場合には、parseInt() や parseFloat() を使うとよいでしょう。
parseInt() は第 1 引数に文字列をとり、これを解析して整数値または NaN を返します。
第 2 引数には基数（何進数か）をとることができ、省略した場合は基本的に 10 進法の扱いとなります。
※ 第 1 引数が 0 で始まる場合はその限りではないため、第 2 引数を与えることが推奨されています。
parseFloat() は第 1 引数に文字列をとり、これを解析して浮動小数点数値または NaN を返します。
これら関数で文字列を数値に変換できなかった場合は NaN が返されるわけですが、
戻り値が NaN が否かの判定は isNaN() 関数によって行うことができます。
ユーザビリティ向上のためには例外処理および適切なエラーメッセージが不可欠です。
parseFloat() で受け取ったテキストを数値に変換するコード例を以下に示します。
なお、input要素の type属性に number を指定した場合も、value はデフォルトで文字列として扱われるため、
JavaScript 上で数値として扱うためには parseInt() や parseFloat() を用いた変換が必要となります。
6.3.3 Canvas との連携
次に、canvas要素との連携方法を見ていきましょう。
数値入力フィールドから数値を受け取り、それを描画する円の半径とするコード例を以下に示します。
このコードでは、再描画ボタンを押すたびに draw() が呼び出されるようにしており、
draw() の中からは数値入力フィールド (radius) の値を参照し、それを描画する円の半径に指定しています。
6.3.4 リアルタイム反映
場合によっては、ユーザインタフェースの情報を変更したタイミングで描画に反映させたほうが、ユーザにとって使いやすいものとなります。
そのような処理を実現させたい場合は、フィールドの入力を検知して発火する oninput属性を利用します。
ボタンが押されたときの関数呼び出しを onclick="kansuu()" としていたのと同様に、oninput="kansuu()"とするだけです。
数値フィールドの値が変更されるたびに、描画の更新が行われるようになりました。
6.3.5 ボール情報の変更
4.2 節のボールの運動をシミュレートするシステムを拡張することを考えましょう。 初期位置・初速度・ボール経の入力を受け、シミュレーションのパラメータに反映されるプログラムは以下のようになります。
複数のインタフェースを並べる場合は、tableタグなどを使って揃えるとよいでしょう。
また、ここではアニメーション中に初期位置や速度が操作できないよう、disable属性を活用しています。
6.3.6 チェックボックス・ラジオボタンの利用
つぎは、チェックボックスとラジオボタンの使用例を紹介します。
それぞれ checked 属性 の状態を取得することで、要素が選択されているかどうかを判定できます。
if (要素.checked)、if (要素.checked == true/false) のように分岐をつくることもできます。
6.3.7 レンジ入力バー・カラー入力フィールドの利用
レンジ入力バーとカラー入力フィールドの使用例を以下に紹介します。
レンジ入力バーは軌跡の長さを、カラー入力フィールドはボールの色をそれぞれ設定できるようになっています。
軌跡は、globalAlpha属性を指定することで、半透明で描画しています。