Slide 1

プログラミング実習（Java）
グラフィクス処理とGUIプログラミング
講師：坂口 利裕（横浜市立大学）


Slide 2

自己紹介


氏名




本務先




横浜市立大学

専門分野




坂口利裕

社会工学（都市・地域計画，都市解析）

その他は．．．


後ほどホームページで

2008.08.14～15

プログラミング実習(Java)

2


Slide 3

はじめに


成績評価


「実習」なので出席することが大前提



欠席は１時限まで
出欠のチェック





１日目：１回（この後）
２日目：レポートもどきの自己診断票の提出で代替

授業の進め方


テキストの記載順にスライド（PowerPoint）による解説＋実習





１時間に１度は休憩




テキストはあえて分冊にしているので相互補完的に利用
スライド資料はWeb上にも掲載
各自での作業の際は体調に合わせて随時

質問は積極的に


2008.08.14～15

面接授業の利点を有効活用

プログラミング実習(Java)

3


Slide 4

「プログラミング実習（Java）」で学ぶこと


プログラミング体験者を対象








Java言語の基礎・オブジェクト指向プログラミングの概
念の理解
GUIを備えたアプリケーション作成
グラフィクス処理を備えたアプリケーション作成
Java言語による実用アプリケーション作成のための基
礎知識の習得

例題と演習による実習





まず体験－「習うより慣れよ」
既存のプログラムの改良・拡張による理解
まず自身で考えよう
他の受講生とのディスカッションや質問で不足分を補う

2008.08.14～15

プログラミング実習(Java)

4


Slide 5

第1日の目標
Javaプログラムの実行手順を知る
 Javaの構文になじむ
 Javaのグラフィクス機能を知る
 JavaによるGUIの表現方法を知る
（テキストp.40～第３章の終わりまで）


2008.08.14～15

プログラミング実習(Java)

5


Slide 6

第１章


Javaによるオブジェクト指向プログラミング


構造化プログラミング




プログラムの部品化

オブジェクト指向
手続き重視型
 イベント駆動型




はじめに「クラス」ありき
属性→（インスタンス）変数
 機能→メソッド


2008.08.14～15

プログラミング実習(Java)

6


Slide 7

オブジェクト指向
第1章



手続き重視型から


第2章

手続きをパッケージ化



第3章



構造化プログラミング


第4章



部品をパッケージ化



2008.08.14～15

機能単位に部品化

イベント駆動型へ


第5章

手続きの抽象化
データとは独立

属性と機能を不可分なものとして抽象化
部品の振舞いは部品ごとに書き下す

プログラミング実習(Java)

7


Slide 8

Java言語の特徴
第1章

第2章



Sun Microsystems社が開発し普及に努め
ている言語
 文法の基本は，C，C++に類似


第3章




第4章


第5章

2008.08.14～15

変数宣言や計算表現などはほぼ同じ
制御構造（if,for,while）もほぼ同じ
「クラス」概念によるデータ中心（オブジェクト指
向）の言語
グラフィクス処理が標準で可能

ソース互換，バイナリ互換でもある
 個人ベースの開発環境は無償配布


プログラミング実習(Java)

8


Slide 9

Javaにおける
アプリケーションとアプレット
第1章



アプリケーション


第2章

第3章





アプレット


第4章


第5章

2008.08.14～15

CUIプログラミングは比較的容易
GUIプログラミングはやや難



他のアプリケーション内（Webブラウザなど）で
動作することを前提とした小さなプログラム
GUIを前提としたプログラミングが比較的容易
アプレットで学んだ技法はアプリケーション開発
にも適用可能

プログラミング実習(Java)

9


Slide 10

Javaアプレットの特徴
第1章

第2章

第3章



Webブラウザで動作することが前提
呼出し用のHTMLファイルが必要
 ひとつのHTMLファイル内でいくつでも呼
び出し可能
 ネットワーク経由で実行可能


第4章

第5章

2008.08.14～15

プログラミング実習(Java)

10


Slide 11

Javaアプレットの観察（１）
第1章

第2章

第3章

第4章

第5章

2008.08.14～15



授業用ホームページ
各自のID/パスワードでログオン
 Internet Explorerを起動
 アドレスバーに
http://sakkun.cc.yokohama-cu.ac.jp/
を入力
⇒「2005年度担当授業」
⇒「プログラミング実習（Java）」へ


プログラミング実習(Java)

11


Slide 12

Javaアプレットの観察（２）
第1章



Javaアプレット・サンプル
それぞれ実行してみる
 ソースを見ながら特徴・雰囲気をつかむ


第2章

テキストの第Ⅱ部を活用
 自分の知っている言語と比較

第3章

第4章

第5章

2008.08.14～15





Sunのデモンストレーション


Javaの適用範囲をつかむ

プログラミング実習(Java)

12


Slide 13

サンプル教材のセットアップ
第1章

第2章

第3章

第4章

第5章

2008.08.14～15



テキストp.20～21も参照
プログラム例のセットアップ をクリック
 ［上記の場所から実行］に切り替え［OK］
 セキュリティ警告には［実行する（はい）
（OK）］で応答
 保存先［z:\］であることを確認して［OK］
 Internet Explorerを閉じて終了


プログラミング実習(Java)

13


Slide 14

第２章


Javaによるグラフィクスプログラミング


Javaのプログラミングツール
Microsoft Studio .NET 2003のVisual J#
 Sun MicrosystemsのSDK（JDK）




グラフィクスの基礎
グラフィクスの基礎
 描画メソッド




Javaプログラムの制御構造


2008.08.14～15

C（C++）に酷似
プログラミング実習(Java)

14


Slide 15

ソース互換
第1章

ソース
プログラム

各OS・ハードウェア
の環境下で再コン
パイルが必要

第2章

第3章

第4章

第5章

2008.08.14～15

Windows用
コンパイラ

MacOS用
コンパイラ

Windows用
プログラム
OS
ハード
ウェア

Windows
DOS/V

Linux用
コンパイラ

MacOS用
プログラム
互
換
性
な
し

MacOS
Macintosh

プログラミング実習(Java)

Linux用
プログラム

互
換
性
な
し

Linux
DOS/V

15


Slide 16

バイナリ互換
第1章
ソース
プログラム
第2章

（Windows用）
Javaコンパイラ
VM=Virtual Machine
OSの一部として動作するよ
うに作られた擬似的ハード
ウェア（実態はソフトウェア）

第3章

第4章

OS

実行
プログラム

特定の環境でコン
パイルされたプロ
グラムであっても
他のマシン上で実
行可能

Windows+JavaVM

MacOS+JavaVM

Linux+JavaVM

DOS/V

Macintosh

DOS/V

第5章
ハード
ウェア

2008.08.14～15

プログラミング実習(Java)

16


Slide 17

グラフィックスの基礎
第1章



原理・基本事項


第2章


第3章

第4章





光の点（pixel）の集まりで画面が構成されてい
る
画面を表すメモリー（VRAM）に情報を書き込む
ビデオ制御用のチップがVRAMの内容に応じて
映像信号に変換
座標系（左上が原点，右向き，下向き），色情報
（RGB）

第5章

2008.08.14～15

プログラミング実習(Java)

17


Slide 18

画面の大きさのいろいろ
第1章





第2章

第3章

大きさの違い



色の違い


第4章

第5章

2008.08.14～15

VGA(640x480)，SVGA(800x600)，
XGA(1024x768)
3ビット(8)，4ビット(16)，8ビット(256)，16
ビット(約6万5千)，24ビット(1600万)，32
ビット(??)

プログラミング実習(Java)

18


Slide 19

プログラミング言語による制御
第1章



第2章

国際規格はあるにはある（ライブラリ
の規約）


第3章

第4章

第5章

2008.08.14～15



GKS，Phigsなど

プログラミング言語としての規格
BASICの描画命令など
 Java言語


（Javaスクリプトとは別物）
 文法ではなく標準のクラス・ライブラリ


プログラミング実習(Java)

19


Slide 20

Java言語によるグラフィクス処理
第1章

第2章

第3章



アプレットによる場合
ソースプログラムを作る（～.java）
 コンパイルする（javac ～.java）
 表示用のHTMLファイルを作る
（ ～.html）


第4章

第5章





HTMLファイルをWebブラウザで閲覧


2008.08.14～15

タグを使用
コンパイルされたclassファイルがブラウザ内
で実行される
プログラミング実習(Java)

20


Slide 21

図形描画のメソッド（１）
第1章

第2章

 g.drawLine( 始点のｘ座標，始点のｙ座標，
終点のｘ座標，終点のｙ座標） ;

第3章

第4章

第5章

2008.08.14～15

プログラミング実習(Java)

21


Slide 22

図形描画のメソッド（２）
第1章

 g.drawRect(
左上のｘ座標，左上のｙ座標，幅，高さ） ;

第2章

第3章

第4章

第5章

 g.fillRect(
左上のｘ座標，左上のｙ座標，幅，高さ） ;

2008.08.14～15

プログラミング実習(Java)

22


Slide 23

図形描画のメソッド（３）
第1章

 g.drawOval(
左上のｘ座標，左上のｙ座標，幅，高さ） ;

第2章

第3章

第4章

第5章



2008.08.14～15

g.fillOval (
左上のｘ座標，左上のｙ座標，幅，高さ） ;
プログラミング実習(Java)

23


Slide 24

図形描画のメソッド（４）
第1章



drawPolygonまたはfillPolygon


第2章

第3章

第4章

第5章

2008.08.14～15



各頂点の座標をint型の配列に納める
int[] xarray = new int[3], yarray=new int[3] ;
xarray[0]=0 ; yarray[0]=30 ; …など
（固定位置なら初期値に設定してもよい）
（位置や向きを変化させるならそのつど計算）
頂点の数を指示して呼び出す
//輪郭
backG.drawPolygon(xarray,yarray,3) ;
//塗り潰し
backG.fillPolygon(xarray,yarray,3) ;
プログラミング実習(Java)

24


Slide 25

図形描画のメソッド（５）
第1章

第2章

第3章



色の変更
Color c =
new Color( Rの値(0～255), G, B ) ;
 g.setColor( c ) ;
を呼び出してから描画関数を使用


第4章

第5章

2008.08.14～15

プログラミング実習(Java)

25


Slide 26

練習
第1章

第2章

第3章

第4章



sample01.javaに対して
図形の色を変えてみよ
 日本の国旗（日の丸）を描くプログラムを
作成せよ
 いわゆる「三色国旗」と呼ばれる国の国
旗を描くプログラムを作成せよ




第5章

2008.08.14～15

見本は
外務省ホームページ（日本語）-世界の国旗を参照

プログラミング実習(Java)

26


Slide 27

「日本の国旗」（大きさの目安）
50
50
300
200

2008.08.14～15

プログラミング実習(Java)

27


Slide 28

「日本の国旗」（座標の計算）
g.setColor(Color.white)
g.fillRect(x,y,w,h);

50
50
300

200
g.setColor(Color.red)
g.fillOval(x,y,w,h);
2008.08.14～15

プログラミング実習(Java)

28


Slide 29

Javaの変数
第1章

第2章



暗黙の変数はない


型（クラス）を明示的に指定して宣言


第3章



型（クラス）名 変数名 ;

配列は次元ごとに[ ]を添えて宣言
型名[ ] 変数名 ; // 1次元配列
 型名[ ][ ] 変数名 ; // 2次元配列
 初期値で与えられた場合はその数だけ割付
 new 型名[要素数]【 [要素数] …】で明示的
に割付


第4章

第5章

2008.08.14～15

プログラミング実習(Java)

29


Slide 30

Javaの演算機構
第1章



四則演算



第2章



代入演算


第3章



第4章

第5章





＝＝ ！＝ ＜ ＞ ＞＝ ＜＝

論理演算


2008.08.14～15

単純 =
四則演算 ＋＝ －＝ ＊＝ ／＝ ％＝
インクリメント ＋＋ デクリメント－－

関係演算




＋－＊／ ％（整数値の剰余）
べき乗はない（Mathのメソッドで対応）

論理積 ＆＆ 論理和 ｜｜ 論理否定！
プログラミング実習(Java)

30


Slide 31

Javaの制御機構
第1章



条件分岐


第2章

第3章


第4章

第5章

2008.08.14～15



if（論理式） {
文１
}
【else {
文２
}】
switch(式) {
case 値１: 文;
【break;】
case 値２: 文;
【break;】
…
【default: 文; 】
}
プログラミング実習(Java)

反復






for(初期化;
論理式;
再初期化) {
文
}
while(論理式) {
文
}
do {
文
} while(論理式) ;

31


Slide 32

練習
第1章

第2章

第3章

第4章



sample02.java に対して
線の形を変える
 線の数を変える
 平行移動の幅を変える
 2重の反復処理に拡張する


第5章

2008.08.14～15

プログラミング実習(Java)

32


Slide 33

第３章


JavaによるGUIプログラミングの基礎


GUI部品の制御
各部品の生成と配置
 イベントの監視（リスナー）




マウスの制御


2008.08.14～15

イベントの監視と位置の取り出し

プログラミング実習(Java)

33


Slide 34

Javaにおける代表的GUI部品
第1章

第2章

第3章

第4章

第5章

2008.08.14～15

テキストフィールド
 テキストエリア
 ボタン
 ラベル


プログラミング実習(Java)

34


Slide 35

TextField
第1章





第2章


第3章

第4章

変数として定義
実体を割り付ける




TextField sinchouRan ;

sinchouRan = new TextField(6) ;

画面に割り付ける


add(sinchouRan) ;

第5章

2008.08.14～15

プログラミング実習(Java)

35


Slide 36

TextFieldからのデータ取り出し
第1章



文字列の場合


第2章


第3章

第4章

第5章

2008.08.14～15

整数値の場合




String s ;
s = shinchouRan.getText() ;

int i ;
i = Integer.parseInt(shinchouRan.getText() ) ;

実数値の場合


float f ;
f=
Float.valueOf(shinchouRan.getText()).floatValue(
);
プログラミング実習(Java)

36


Slide 37

イベント処理
第1章



ボタンのクリック・ダブルクリック
 マウスの移動・マウスのクリック


第2章

第3章

第4章

ある部品に対するアクション



プログラムで受信して処理


リスナーを定義して処理内容を記述して
おく

第5章

2008.08.14～15

プログラミング実習(Java)

37


Slide 38

イベントとアプレット内のメソッド
第1章

プログラマが必要
に応じて規定

第2章

システムから

ユーザから

イベント

イベント

repaint()

リスナ

共通変数の初期化
第3章

init()
（復帰）

update()

第4章

start()

プログラマが規定
paint()

第5章

イベント待ち
（復帰）

プログラマが必要
に応じて書換え

アプレット全体の流れ
2008.08.14～15

プログラミング実習(Java)

38


Slide 39

練習 （GUI部品の扱い方）
第1章

第2章



sample04.javaに対して
判定結果による背景色の変更
 ローレル指数をBMIに変更


第3章



第4章

BMI=Body Mass Index
BMI = 体重[kg]/身長2[m]
= 体重[kg]*10000 / (身長[cm]*身長[cm]）

BMIに基づく標準体重の（計算と）表示
 グラフ風の表現


第5章

2008.08.14～15

プログラミング実習(Java)

39


Slide 40

練習（マウスの扱い方）
第1章

第2章



sample05.javaに対して


ドラッグへの対応


第3章



ドラッグに対応するリスナを追加

形・色の追加
配列に情報を追加
 描画用メソッドの拡張


第4章



大きさの制御

第5章

2008.08.14～15

プログラミング実習(Java)

40



Directory

×