GUI部品図鑑

その14 テキストフィールド

MacOS X [スクリーンショット]
Windows [スクリーンショット]

テキストフィールドは、その名の通り、テキストを入力する為のコントロールである。それはまず間違いなく四角い枠で表現され、入力した文字は、その枠の中に表示される。多色環境ならば、枠というよりは、内部がへこんでいる感じの「縁」といった表示になっていることが多いだろう。また、ウインドウの地が何色であれ、枠の内側の色は通常は白色である。

テキストフィールドは基本的な部品である割に、かなりの機能を必要とするコントロールである。任意の位置への文字の挿入や削除、選択操作やコピー&ペーストなど、何気なく行われていることだが、これを一から実装するのは大変なことである。そのため、ボタン類が独自に実装されている例に比べ、テキストフィールドを独自に実装している例ははるかに少ない。

ちなみにテキストフィールドの呼び方は意外にも一定しておらず、他にもエディットフィールドやテキストボックスなどと言った呼び方がある。おおむねGUIツールキットごとに呼び方が決まるが、MacOSではバージョンによってText Entry Field、Edit Text Field、Text Input Fieldと呼び方が変わっていたりもする。逆に言えばテキストフィールドの呼び方によってどの系統かが分かるとも言える。

文字入力

コンピュータでの文字入力は、基本的にはタイプライターと同様である。キーボードに並ぶキーのうち、文字の刻印のあるキーを押すとその文字が追加され、リターンキーを押すと改行が行われる。タイプライターでの訂正は文字を塗りつぶして消すしか無いが、コンピューター上であれば文字を完全に消去することができる。

挿入ポイント

[図]
挿入ポイント (MacOS X)

文字を追加するにせよ削除するにせよ、どの位置に文字を追加するか、どの文字を削除するかといった「位置」の情報が必要となる。この位置を示す為のものが「挿入ポイント」である。挿入ポイントは文字と文字の間に表示される縦の線として表示される。また、ただの縦線では文字との区別が付きづらいため点滅している。

文字を入力すると、挿入ポイントの位置に文字が挿入され、後続の文字が挿入ポイントと共に後ろに押しやられる。挿入ポイントは挿入した文字の後に位置するようになっているため、入力した順に文字が追加されるようになっている。文字を削除すると、挿入ポイントよりも前の文字が削除される。これは見た目には挿入ポイントが前に戻って行くように見える。キーによっては挿入ポイントの後の文字を削除することができ、この場合は挿入ポイントより後のテキストが短くなって行くように見える。

キャレット

[図]
キャレット (Newton)

挿入ポイントは「キャレット」と呼ばれることもある。キャレット(caret)とは脱字を示す為の小さな山形をした校正記号である。文字を挿入すべき位置の下側にキャレットを書き、その下に挿入する文字を書く。GUIではそれを転じてテキストの挿入位置を示すものとして使用している訳だが、実際のところちゃんとキャレットの形をしたキャレットは少なく、大抵は挿入ポイント同じ様に縦の線として表示される。

ちなみにブロックカーソルと呼ばれる文字が四角く反転表示されるタイプのものも存在するが、GUI上ではあまり使用されない。このタイプのものは文字を入力するとカーソル位置の文字と置き変わる「上書きモード」での入力を想定しているからだ。一般的なGUIシステムでは入力した文字がキャレット位置に挿入される「挿入モード」での入力となるため、挿入される位置を直接示している挿入ポイントやキャレットの方が都合が良いのである。

挿入ポイントの移動

任意の位置に文字を追加したり削除したりするには、挿入ポイントを移動できる必要がある。これは上下左右のカーソルキーを使用して1文字ずつ移動するか、移動先の位置をマウスでクリックすることで行う。

カーソルキーでの移動は、文字の前後の方向と、行の前後の方向の移動に分かれるが、そのいずれの方向にも移動可能な限界がある。文字の前後方向の移動の場合、行頭から前の文字に移動した場合は前の行の行末に、行末から後ろの文字に移動した場合は次の行の行頭に移動する。移動可能な行が無かった場合は移動は行われない。行方向の移動の場合はどうなるだろうか。これは2種類の挙動があり、ひとつは移動可能な位置まで移動するもので、もうひとつは移動しないものである。前者の場合、先頭行より前の行に移動しようとしたなら行頭に、最終行より後の行に移動しようとしたなら行末に移動する。

Iビームカーソル

[図]
Iビームカーソル

移動したい位置をマウスカーソルで直接指し示し、クリックすることで任意の位置に移動することができる。この時、それが可能な場所ではマウスカーソルの形状が「Iビームカーソル」という独特の形状に変化する。Iビーム(I-beam)とは断面がアルファベットのIの形状をした梁材のことで、カーソルの形状がそれに似ていることからそのように呼ばれる。そもそもの形状の由来は校正記号からという話もあるが定かではない。

挿入ポイントは文字と文字との間の幅のない部分に存在するため、その部分を直接クリックすることは難しい。大抵は文字の中のどこかをクリックすることになるだろう。この時、文字の右側と左側、どちらに挿入ポイントを移動すべきかという問題が発生するが、文字の左半分をクリックしたら左側に、文字の右半分をクリックしたら右側に移動するのが理想的と言える。このような処理が行われていない場合は、意図した位置より1文字だけずれるということが頻繁に起ることが予想される。

任意の位置に移動できるとはいえ、例によって移動不能な場所というのは存在する。たとえばテキスト末尾より後ろの部分や、行末より後ろの部分である。このような部分をクリックした場合は、移動可能な位置、つまりテキスト末尾や行末まで挿入ポイントを移動する。

挿入ポイントを移動するという役割を持っているため、Iビームカーソルは今まさに編集している部分の上にある可能性が高い。端的に言えばIビームカーソルが邪魔になるのである。そのため文字入力を行うと一時的にIビームカーソルが消えるようになっているのが普通である。消えたIビームカーソルはマウスを操作することで即座に表示される。

編集機能

テキストフィールドでは、文字の追加・削除だけでなく、テキストの一部分をコピーしたりあるいは移動したり、そもそも別の文書にあるテキストをコピーしたりといった、もう少し高度な編集も行えるようになっている。それらはいわゆるコピーアンドペーストと呼ばれている機能であるが、それを行うためにはテキストのどの部分をコピーや移動の対象にするかを指定できる必要がある。この指定した部分を「選択範囲」と言う。

選択範囲

選択範囲を指定するには、選択範囲の先頭にIビームカーソルを合わせマウスのボタンを押し、そのまま選択範囲の末尾まで移動し、マウスのボタンを離す。早い話が選択したい範囲をドラッグで指定する訳である。修飾キー(大抵はシフトキー)を押しながらクリックすることで範囲を拡張することができるが、クリックした位置が選択範囲の開始位置になるか終了位置になるかは場合による。

選択範囲の指定はキーボードによる操作でも行うことができる。修飾キーを押しながらカーソルキーを操作することで、挿入ポイントを範囲の開始位置として選択範囲を拡大して行くことができる。選択範囲が既に存在する場合に同様の操作を行うと選択範囲の追加操作となるが、例によって開始位置と終了位置のどちら側が変化するかは場合による。

選択範囲を解除するには、挿入ポイントの移動操作を行えばよい。これはつまり選択範囲と挿入ポイントは排他的な存在であることを示している(仕組み的には挿入ポイントは幅のない選択範囲のような扱いになっている)。

編集メニュー

コピーやペーストなど具体的な操作の指示はメニューから行う。このためのメニューが「編集」メニューである。ちなみに編集メニューはクリップボードを経由するデータ全般に使用するもので、テキスト編集のためだけのものではない。このメニューが無いと基本的にはテキストの編集は行えないが、テキストフィールドにコンテキストメニューが用意されていればメニューに無くても可能である。

バリエーション

[図]
バリエーション

テキストフィールドは主に単一行のテキストを入力するための物だが、複数行のテキストを入力することができるようになっている場合もある。単一行の場合、枠内に表示し切れない量のテキストを入力すると左右にスクロールするようになっているが、複数行の場合は折り返されるようになっている。単一行の場合はリターンキーを押すと形式チェックなどのアクションが行われるようになっている事があるが、複数行の場合はリターンキーは単なる改行の入力となるなるため、特殊な機能は持たない。

テキストフィールドを操作禁止状態にすると、テキストの入力やコピーなど全ての操作が行えなくなる。だが、内容を変更されたくないだけで、内容の参照やコピーは行えるようにしたいという場合もあるが、操作禁止状態にすると表示がグレーアウトされ読みづらい状態になることがあるため、コピーアンドペーストを諦めたとしても不適切な状態となってしまう。このような場合にリードオンリー(編集禁止)のテキストフィールドを使用する。

戻る

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