GUI部品図鑑

その8 チェックボックスとラジオボタン

OSチェックボックスラジオボタン
MacOS X [スクリーンショット] [スクリーンショット]
SX-WINDOW [スクリーンショット] [スクリーンショット]

チェックボックス、ラジオボタン。この古典的なふたつのコントロールは共通する機能を持っている。それは用意された選択肢の中から、項目を選ばせるという機能だ。これらのコントロールは、選択されている状態とされていない状態の2つの状態を持ち、ふたつの状態を視覚的に区別できるようになっている。

状態の切り替えは、ボタン状になっている部分をクリックすることで行う。クリックすると選択された状態になり、もう一度クリックすると元の状態、つまり選択されていない状態に戻る。このようにクリックするごとに2つの状態が切り替わることをトグル動作という。ちなみに、コントロールに付随している文字の部分をクリックしても、同様の動作をするようになっている。これは、あの小さな部分だけをクリックさせるのは難しいからということからなのだろう。

割と気づかないことだが、ボタン状になっている部分は、見た目通りボタンと同じ動作をするようになっている。つまり、マウスのボタンを押下するとハイライト表示になり、マウスカーソルを枠の外に移動させるとハイライトが解除される。このときにボタンを離せば、クリックしなかったことにできる。これはどんなコントロールにも共通する基本的な動作だと言っていいだろう。ただ、ドラッグできるコントロールは例外である。ボタンを押下中にマウスカーソルを動かすとドラッグになってしまうからだ。たとえばスクロールバーのサムなどがその代表だろう。

チェックボックス

アンケート用紙などでおなじみの、チェックマークを付ける欄を模したものである。おおむね四角形の中にチェックマークを入れるという図形で表現される。 選択状態はチェックマークの有無によって示す。

アンケート用紙にあるチェックボックスは、「ひとつだけ選べ」や「該当するものを全て選べ」など、その選ばせ方は様々だが、GUI部品のチェックボックスでは「該当するものを全て選べ」という使い方に統一されている。「ひとつだけ選べ」という方には後述のラジオボタンが用意されているので、チェックボックスはその用土だけに使われる。見た目で用途の違いが判断できるようになっているという訳だ。

通常、個々のチェックボックスが、それぞれに対して関連性を持つことはない。これは、こっちをチェックすると、あっちのチェックが外れるなどということは起こらないということを示す。しかし、大量の設定項目があるものなどは、分類ごとにグループ化し、グループごとにもオンオフできる様になっていることもある。この場合はグループのチェックボックスを操作すると、そのグループに含まれる項目のチェックボックスが連動してオンオフする。逆に個々の項目のチェックボックスを操作しても、グループのチェックボックスの状態が変わる。

[図]
チェックボックスの第三の状態

全ての項目のチェックがオンの場合はグループのチェックもオン、全ての項目がオフであればグループもオフになるというのはいいだろう。では、オンとオフの項目が入り交じった場合、グループのチェックボックスはチェックされた方が良いのだろうか、されない方が良いのだろうか。このような時のために、チェックボックスにはチェックされているのでも、されていないのでもない、第三の状態が用意されている。これはチェックマークの代わりに横棒が入るという表現で表される。この第三の状態をクリックすると、通常の2つの状態のどちらかに戻る様になっている。

ラジオボタン

ラジオボタンという名称は、カーラジオのチャンネル選択ボタンから来ているとされている。ラジオのボタンは、あるチャンネルのボタンを押し込むと、今まで押されていたボタンが元に戻るという動作をする。ラジオボタンはそれと同じような動作をする。伝統的なラジオボタンの形状は円の中に点が入るというもので、これはおそらく四角いチェックボックスと見た目の差を付けるためにそうなったのだと思われる。ちなみにオプションボタンと呼ばれることもある。

ラジオボタンは必ず複数個を一組にして使用し、その中のひとつだけが選択状態に、つまり円の中に点が入っている状態になっている。選択されていないラジオボタンをクリックすると、そこに点が移動する。プログラマー的な視点から説明すると、今まで選択されていたラジオボタンの選択を解除し、クリックされたラジオボタンを選択状態にする。これによって複数の選択肢の中からひとつを選ばせるということを行うわけだ。

ラジオボタンによる設定項目がたくさんあると、どれとどれが組になっているのか分かりづらくなってしまう場合がある。これを解決するために、組になっているラジオボタンを枠で囲むなどが行われる。これを逆手に取って、プログラム的に組になっているラジオボタンを表現するのに「枠」というコントロールが用意されていることもある。つまり、この「枠」の中にラジオボタンを配置すれば、選択状態の管理を「枠」がやってくれるので、プログラマは何もしなくてもラジオボタンの操作が行えるようになるというわけだ。そう、ラジオボタンはラジオボタンとして機能するようにプログラムしないとラジオボタンにはならないのだ。

戻る

りゅう/rryu@t3.rim.or.jp