2002-07-04 ver 1.00 発行予定 ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃.&&&& **** %%%%.  JavaScript&Javaで目指そう!基本情報技術者試験  ┃ ┃&&&&&&******%%%%%%  執筆&編集 斎藤末広 suehiro@he.mirai.ne.jp  ┃ ┃'&┃&''*┃*''%┃%'  発行    江口昌宏 jmaga@yscon.co.jp    ┃ ┗━┻━━┻━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ★解除・登録 広告募集:http://www2.odn.ne.jp/~egu33/jmaga/java-maga.html ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓  第21号 2002/07/04  イベント駆動(くどう)型プログラム(キーボード) ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛  プログラムを作成する上での注意事項:  Windows98SE, SDK(JDK) 1.3.1,IE 5.5 を前提としています。  拡張子を表示するに設定してください。 ------------------------------------------------------------------------ ▼ キーボードによる低レベルイベント処理  マウスのクリックなどによる低レベルイベント処理を前号で勉強しました。  低レベルと高レベルとはいったい何を指していたでしょうか。  低レベルイベント処理の低レベルと言うのは,よりハードよりという意味です。 高レベルと言うのは,より人間に近いという意味です。具体的には,マウスのク リックが押されたかどうかとか,キーボードのキーが押されたどうかは,ハード よりで,低レベルイベントといいます。GUI のボタンが押されたとか,テキスト 枠の中身が変わったかとかが,高レベルイベントといいます。  この号では,低レベルイベント処理のうち,キーボードでのイベントを勉強 しましょう。 ------------------------------------------------------------------------ ▼ マウスの低レベルイベント処理  前号の J20-01 を見ましょう。 例 j20-01 xSmpEvent01.java ソース http://www.yscon.co.jp/j/java/jmaga/j20/xSmpEvent01.java 動作  http://www.yscon.co.jp/j/java/jmaga/j20/xSmpEvent01.htm 説明がしやすいように,行番号を付けました。 1: import java.applet.Applet; 2: import java.awt.Graphics; 3: import java.awt.Image; 4: import java.awt.event.MouseAdapter; 5: import java.awt.event.MouseEvent; 6: 7: public class xSmpEvent01 extends Applet { 8: 9: Image ximg; 10: int x, y; 11: 12: MouseAdapter xia = new MouseAdapter(){ 13: public void mouseClicked(MouseEvent xmouse){ 14: x = xmouse.getX(); 15: y = xmouse.getY(); 16: repaint(); 17: } 18: }; 19: 20: public void init(){ 21: ximg = getImage(getDocumentBase(),"img01.gif"); 22: addMouseListener(xia); 23: } 24: 25: public void paint(Graphics xg){ 26: xg.drawImage(ximg, x, y, this); 27: } 28: }  このプログラムは,マウスのクリックしたところに画像を移動します。これを キーボードでの移動に変更しましょう。  このxSmpEvent01.java の構造は,  import 部  本体 宣言部 init()定義 paint()定義 です。この構造もそのまま利用することにします。その他,できるだけ,そのま ま利用して,マウスのイベントとキーボードのイベントと対比できるようにしま しょう。 ------------------------------------------------------------------------ ▼ マウスのイベントとキーボードのイベント  import するクラスを見ましょう。マウス関連は,次の2つでした。 4: import java.awt.event.MouseAdapter; 5: import java.awt.event.MouseEvent;  MouseAdapter クラスは,マウスのイベントをプログラム本体に代わって受付け てくれるマウス取次係でした。キーボードの場合は,キーボード取次係である, KeyAdapter に登場してもらいます。  MouseEvent クラスは,プログラムの中では,ずばりマウスを指しました。今回 はキーボードを表す,KeyEvent クラスの登場してもらいます。  次のように変わります。変更したところは,new の n を行番号に付けること にします。 n 4: import java.awt.event.KeyAdapter; n 5: import java.awt.event.KeyEvent; ------------------------------------------------------------------------ ▼ プログラム本体は  次の部分はどうでしょうか。 7: public class xSmpEvent01 extends Applet { 8: 9: Image ximg; 10: int x, y;  当然,本体のプログラム名(クラス名)は変えましょう。xSmpKeyEvent01 と します。  画像の表示は同じようにしますので,9, 10 はそのままです。 n 7: public class xSmpKeyEvent01 extends Applet { n 8: n 9: Image ximg; n10: int x, y; ------------------------------------------------------------------------ ▼ イベント取次係は  イベント取次係の仕事内容はどうでしょうか。 12: MouseAdapter xia = new MouseAdapter(){ 13: public void mouseClicked(MouseEvent xmouse){ 14: x = xmouse.getX(); 15: y = xmouse.getY(); 16: repaint(); 17: } 18: }; 19:  MouseAdapter は,KeyAdapter に代わります。分身の名前は,そのままにしま しょう。仕事(メソッド)の名前は,mouseClicked ではなく,今回は,keyPressed です。これは,KeyAdapter の中ですでに決定しています。  (MouseEvent xmouse)は,(KeyEvent xkey)としましょう。 n12: KeyAdapter xia = new KeyAdapter(){ n13: public void KeyClicked(KeyEvent xmouse){  仕事の中身は, 14: x = xmouse.getX(); 15: y = xmouse.getY(); 16: repaint();  でした。これは,マウスでクリックした位置を,x, y に入れました。今回は, 矢印キーを押したら,それぞれ,10 ピクセルごと増減させます。  どのキーは押したかどうかは,キーコードをチェックします。xkey.getKeyCode() で値を得ることができます。矢印キーのコードは,KeyEventのクラス内ですでに 定義されていますので,以下のようにすることで,実現可能です。 n14: switch (xkey.getKeyCode()){ n15: case KeyEvent.VK_RIGHT : x = x + 10; break; n case KeyEvent.VK_LEFT : x = x - 10; break; n case KeyEvent.VK_UP : y = y - 10; break; n case KeyEvent.VK_DOWN : y = y + 10; break; n } n16: repaint(); ------------------------------------------------------------------------ ▼ init() 定義  アプレットが開始されるにあたっての初期化のところは 20: public void init(){ 21: ximg = getImage(getDocumentBase(),"img01.gif"); 22: addMouseListener(xia); 23: }  同じ画像をおなじように使用しますので,21 行目はそのままです。 addMouseListener は,addKeyListener に変わります。xia を キーのイベントを 取次係として自分の召使いにします。  x, y の位置は,矢印キーによって増減させますので,最初の位置を,(0,0)と して,初期化で設定しておきます。また,キーボードのイベントを処理するとき は,受付可能にするために,requestFocus() を実行しておきます。 n20: public void init(){ n21: ximg = getImage(getDocumentBase(),"img01.gif"); x = 0; y = 0; requestFocus(); n22: addKeyListener(xia); n23: } ------------------------------------------------------------------------ ▼ paint() 定義  表示されるものを見てみましょう。 25: public void paint(Graphics xg){ 26: xg.drawImage(ximg, x, y, this); 27: }  これはまったくこの通りでいいです。 ------------------------------------------------------------------------ ▼ 完成したプログラムは  以上をまとめて,番号を付け替えてます。 例 j21-01 xSmpKeyEvent01.java ソース http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent01.java 動作  http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent01.htm 説明がしやすいように,行番号を付けました。 実行するときは,アプレットを1度クリックして下さい。 1: import java.applet.Applet; 2: import java.awt.Graphics; 3: import java.awt.Image; 4: import java.awt.event.KeyAdapter; 5: import java.awt.event.KeyEvent; 6: 7: public class xSmpKeyEvent01 extends Applet{ 8: 9: Image ximg; 10: int x, y; 11: 12: KeyAdapter xia = new KeyAdapter(){ 13: public void keyPressed(KeyEvent xkey){ 14: switch (xkey.getKeyCode()){ 15: case KeyEvent.VK_RIGHT : x = x + 10; break; 16: case KeyEvent.VK_LEFT : x = x - 10; break; 17: case KeyEvent.VK_UP : y = y - 10; break; 18: case KeyEvent.VK_DOWN : y = y + 10; break; 19: } 20: repaint(); 21: } 22: }; 23: 24: public void init(){ 25: ximg = getImage(getDocumentBase(),"img01.gif"); 26: x = 0; y = 0; 27: requestFocus(); 28: addKeyListener(xia); 29: } 30: 31: public void paint(Graphics xg){ 32: xg.drawImage(ximg, x, y, this); 33: } 34: }  マウスクリックを利用した移動と,矢印キーを利用した移動を実行して 比較して下さい。  クリック  http://www.yscon.co.jp/j/java/jmaga/j20/xSmpEvent01.htm  キーボード http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent01.htm ------------------------------------------------------------------------ ▼ 無名インスタンスを利用して書き直し  xia を消して,無名インスタンスを利用しましょう。たいていの Javaの入門書 はこちらの書き方で書いてあります。 例 j21-02 xSmpKeyEvent01.java ソース http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent02.java 動作  http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent02.htm 1: import java.applet.Applet; 2: import java.awt.Graphics; 3: import java.awt.Image; 4: import java.awt.event.KeyAdapter; 5: import java.awt.event.KeyEvent; 6: 7: public class xSmpKeyEvent02 extends Applet{ 8: 9: Image ximg; 10: int x, y; 11: 12: public void init(){ 13: ximg = getImage(getDocumentBase(),"img01.gif"); 14: x = 0; y = 0; 15: requestFocus(); 16: addKeyListener(new KeyAdapter(){ 17: public void keyPressed(KeyEvent xkey){ 18: switch (xkey.getKeyCode()){ 19: case KeyEvent.VK_RIGHT : x = x + 10; break; 20: case KeyEvent.VK_LEFT : x = x - 10; break; 21: case KeyEvent.VK_UP : y = y - 10; break; 22: case KeyEvent.VK_DOWN : y = y + 10; break; 23: } 24: repaint(); 25: } 26: }); 27: } 28: 29: public void paint(Graphics xg){ 30: xg.drawImage(ximg, x, y, this); 31: } 32: } ------------------------------------------------------------------------ ▼ その他  KeyAdapter が処理する他のイベントを見てみましょう。 KeyAdapter クラスで取次可能なイベント keyTyped キーをタイプ(押してから離す) keyPressed  キーを押す keyReleased キーを離す 参考 KeyAdapter クラスの詳細 http://java.sun.com/j2se/1.3/ja/docs/ja/api/java/awt/event/KeyAdapter.html KeyEventクラスで可能な仕事  矢印キーを始め,F1,ホームキーなど特殊なキーコードをチェック可能  押した文字をコードでなくて,文字として取得可能  ALT,Ctrl,Shift キーと同時に押したかどうかのチェック可能  代表的なメソッド(仕事)  char getKeyChar() 文字を返す  int getKeyCode()  int型の文字コードを返す  int getModifiers() ALT,Ctrl,Shiftが同時に押されたかどうかをint型の値            として返す  補足 修飾キー  ALT,Ctrl,Shiftなど,他のキーと同時に押すキーのこと  対応している int 型のコードには以下の名前が付いています。  ALT_MASK  CTRL_MASK  SHIFT_MASK 参考 KeyEvent クラスの詳細 http://java.sun.com/j2se/1.3/ja/docs/ja/api/java/awt/event/KeyEvent.html  次のコーナでは,Ctrlキーを押しながらhを押すと,画像を最初の位置に戻す プログラムを作成します。 ------------------------------------------------------------------------ ▼ 修飾キーの取扱いサンプル  修飾キーのうち,Ctrlキーを押しながら他のキーを押した場合の取扱いの サンプルを考えます。 例 j21-02 xSmpKeyEvent02.java ソース http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent02.java 動作  http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent02.htm の部分をまず見ます。押したキーを判別して,それに対応した値を決める ところは,次のところでした。 17: public void keyPressed(KeyEvent xkey){ 18: switch (xkey.getKeyCode()){ 19: case KeyEvent.VK_RIGHT : x = x + 10; break; 20: case KeyEvent.VK_LEFT : x = x - 10; break; 21: case KeyEvent.VK_UP : y = y - 10; break; 22: case KeyEvent.VK_DOWN : y = y + 10; break; 23: } 24: repaint(); 25: }  Ctrl+'h' の判定は,19〜22 のキーコードの判定のところに入れると単純に やれそうです。Ctrlキーが同時に押されているかは,次のようにやれば判定でき ます。  if((xkey.getModifiers() & xkey.CTRL_MASK) !=0){ /* 押された時の処理 */ }  あと'H'とキーボードのキーを示すには大文字にする必要があります。'H'と すれば,自動的に文字コードとして判断されます。 18: switch (xkey.getKeyCode()){ 19: case KeyEvent.VK_RIGHT : x = x + 10; break; 20: case KeyEvent.VK_LEFT : x = x - 10; break; 21: case KeyEvent.VK_UP : y = y - 10; break; 22: case KeyEvent.VK_DOWN : y = y + 10; break; case 'H' : // H を大文字にすること if((xkey.getModifiers() & xkey.CTRL_MASK) !=0){ x = 0; y = 0; } break; 23: }  行番号をつけ直したプログラムは以下のようです。実行して,Ctlr + 'h' を 押して見て下さい。 例 j21-03 xSmpKeyEvent03.java ソース http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent03.java 動作  http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent03.htm 1: import java.applet.Applet; 2: import java.awt.Graphics; 3: import java.awt.Image; 4: import java.awt.event.KeyAdapter; 5: import java.awt.event.KeyEvent; 6: 7: public class xSmpKeyEvent03 extends Applet{ 8: 9: Image ximg; 10: int x, y; 11: 12: public void init(){ 13: ximg = getImage(getDocumentBase(),"img01.gif"); 14: x = 0; y = 0; 15: 16: requestFocus(); 17: addKeyListener(new KeyAdapter(){ 18: public void keyPressed(KeyEvent xkey){ 19: switch (xkey.getKeyCode()){ 20: case KeyEvent.VK_RIGHT : x = x + 10; break; 21: case KeyEvent.VK_LEFT : x = x - 10; break; 22: case KeyEvent.VK_UP : y = y - 10; break; 23: case KeyEvent.VK_DOWN : y = y + 10; break; 24: case 'H' : // H と大文字にすること 25: if((xkey.getModifiers() & xkey.CTRL_MASK) !=0){ 26: x = 0; y = 0; 27: } 28: break; 29: } 30: repaint(); 31: } 32: }); 33: } 34: 35: public void paint(Graphics xg){ 36: xg.drawImage(ximg, x, y, this); 37: } 38: } ------------------------------------------------------------------------ ▼ 低レベルイベント処理  前号でマウス,この号で,キーボードと低レベルのイベント処理の勉強をしま した。  イベント処理のやり方かたは,他にもありますが,Adapter を利用すると単純に できます。初心者のうちはこのやり方をお勧めします。  次号は,高レベルのイベント処理を勉強しましょう。 ------------------------------------------------------------------------ ▼ 今回のサンプルのソース キーイベントの単純な例 例 j21-01 xSmpKeyEvent01.java ソース http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent01.java 動作  http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent01.htm xSmpKeyEvent01.htm

xSmpKeyEvent01.java import java.applet.Applet; import java.awt.Graphics; import java.awt.Image; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; public class xSmpKeyEvent01 extends Applet{ Image ximg; int x, y; KeyAdapter xia = new KeyAdapter(){ public void keyPressed(KeyEvent xkey){ switch (xkey.getKeyCode()){ case KeyEvent.VK_RIGHT : x = x + 10; break; case KeyEvent.VK_LEFT : x = x - 10; break; case KeyEvent.VK_UP : y = y - 10; break; case KeyEvent.VK_DOWN : y = y + 10; break; } repaint(); } }; public void init(){ ximg = getImage(getDocumentBase(),"img01.gif"); x = 0; y = 0; requestFocus(); addKeyListener(xia); } public void paint(Graphics xg){ xg.drawImage(ximg, x, y, this); } } キーイベントの単純な例(無名インスタンス使用) 例 j21-02 xSmpKeyEvent02.java ソース http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent02.java 動作  http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent02.htm xSmpKeyEvent02.htm

xSmpKeyEvent02.java import java.applet.Applet; import java.awt.Graphics; import java.awt.Image; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; public class xSmpKeyEvent02 extends Applet{ Image ximg; int x, y; public void init(){ ximg = getImage(getDocumentBase(),"img01.gif"); x = 0; y = 0; requestFocus(); addKeyListener(new KeyAdapter(){ public void keyPressed(KeyEvent xkey){ switch (xkey.getKeyCode()){ case KeyEvent.VK_RIGHT : x = x + 10; break; case KeyEvent.VK_LEFT : x = x - 10; break; case KeyEvent.VK_UP : y = y - 10; break; case KeyEvent.VK_DOWN : y = y + 10; break; } repaint(); } }); } public void paint(Graphics xg){ xg.drawImage(ximg, x, y, this); } } Ctrlキーを押しながらのキー入力の処理 例 j21-03 xSmpKeyEvent03.java ソース http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent03.java 動作  http://www.yscon.co.jp/j/java/jmaga/j21/xSmpKeyEvent03.htm xSmpKeyEvent03.htm

xSmpKeyEvent03.java import java.applet.Applet; import java.awt.Graphics; import java.awt.Image; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; public class xSmpKeyEvent03 extends Applet{ Image ximg; int x, y; public void init(){ ximg = getImage(getDocumentBase(),"img01.gif"); x = 0; y = 0; requestFocus(); addKeyListener(new KeyAdapter(){ public void keyPressed(KeyEvent xkey){ switch (xkey.getKeyCode()){ case KeyEvent.VK_RIGHT : x = x + 10; break; case KeyEvent.VK_LEFT : x = x - 10; break; case KeyEvent.VK_UP : y = y - 10; break; case KeyEvent.VK_DOWN : y = y + 10; break; case 'H' : // H を大文字にすること if((xkey.getModifiers() & xkey.CTRL_MASK) !=0){ x = 0; y = 0; } break; } repaint(); } }); } public void paint(Graphics xg){ xg.drawImage(ximg, x, y, this); } } ------------------------------------------------------------------------ ▼ 次号の予定  GUI処理  感想は,斎藤まで,suehiro@he.mirai.ne.jp  広告等のお問い合わせ:jmaga@yscon.co.jp ------------------------------------------------------------------------ ▼ 誤字・脱字等の修正,プログラムの修正など,以下の場所で確認できます。 過去の修正版等  http://3721p.com/java/jmaga/ 登録・削除および広告の案内  http://www2.odn.ne.jp/~egu33/jmaga/java-maga.html ------------------------------------------------------------------------ ▼ 著作権について  このメールマガジンで公開しているプログラムソースは,著作権を当方スタッ フが所有しますが,商用を含めて,再利用,改変,発表を制限しません。  本文に関しては,斎藤末広が著作権を所有します。再利用に関しては,承諾を 必要とします。 広告募集 http://www2.odn.ne.jp/~egu33/jmaga/java-maga.html ------------------------------------------------------------------------ ▼アンケート(以下を返信してください)  この号のJマガに対するご意見をお待ちしてます。ぜひ,ご返信下さい。 内容のレベルは 1 難しいのでもっと簡単にしてほしい 2 ちょうどよい 3 もっと難しくてもよい その他ご要望