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

Presentation on theme: "プログラミング実習(Java) グラフィクス処理とGUIプログラミング 講師：坂口 利裕（横浜市立大学）"— Presentation transcript:

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

2 自己紹介 氏名 本務先 専門分野 その他は．．． 坂口利裕 横浜市立大学 社会工学（都市・地域計画，都市解析） 後ほどホームページで
プログラミング実習(Java) ～15 自己紹介 氏名 坂口利裕 本務先 横浜市立大学 専門分野 社会工学（都市・地域計画，都市解析） その他は．．． 後ほどホームページで ～15 プログラミング実習(Java) 坂口 利裕

3 はじめに 成績評価 授業の進め方 「実習」なので出席することが大前提 テキストの記載順にスライド（PowerPoint）による解説＋実習
プログラミング実習(Java) ～15 はじめに 成績評価 「実習」なので出席することが大前提 欠席は１時限まで 出欠のチェック １日目：１回（この後） ２日目：レポートもどきの自己診断票の提出で代替 授業の進め方 テキストの記載順にスライド（PowerPoint）による解説＋実習 テキストはあえて分冊にしているので相互補完的に利用 スライド資料はWeb上にも掲載 １時間に１度は休憩 各自での作業の際は体調に合わせて随時 質問は積極的に 面接授業の利点を有効活用 ～15 プログラミング実習(Java) 坂口 利裕

4 「プログラミング実習（Java）」で学ぶこと
プログラミング体験者を対象 Java言語の基礎・オブジェクト指向プログラミングの概念の理解 GUIを備えたアプリケーション作成 グラフィクス処理を備えたアプリケーション作成 Java言語による実用アプリケーション作成のための基礎知識の習得 例題と演習による実習 まず体験－「習うより慣れよ」 既存のプログラムの改良・拡張による理解 まず自身で考えよう 他の受講生とのディスカッションや質問で不足分を補う ～15 プログラミング実習(Java)

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

6 第１章 Javaによるオブジェクト指向プログラミング 構造化プログラミング オブジェクト指向 はじめに「クラス」ありき プログラムの部品化
手続き重視型 イベント駆動型 はじめに「クラス」ありき 属性→（インスタンス）変数 機能→メソッド ～15 プログラミング実習(Java)

7 オブジェクト指向 手続き重視型から イベント駆動型へ 手続きをパッケージ化 構造化プログラミング 部品をパッケージ化 手続きの抽象化
データとは独立 構造化プログラミング 機能単位に部品化 イベント駆動型へ 部品をパッケージ化 属性と機能を不可分なものとして抽象化 部品の振舞いは部品ごとに書き下す ～15 プログラミング実習(Java)

8 Java言語の特徴 Sun Microsystems社が開発し普及に努めている言語 文法の基本は，C，C++に類似
～15 Java言語の特徴 Sun Microsystems社が開発し普及に努めている言語 文法の基本は，C，C++に類似 変数宣言や計算表現などはほぼ同じ 制御構造（if,for,while）もほぼ同じ 「クラス」概念によるデータ中心（オブジェクト指向）の言語 グラフィクス処理が標準で可能 ソース互換，バイナリ互換でもある 個人ベースの開発環境は無償配布 ～15 プログラミング実習(Java) 坂口 利裕

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

10 Javaアプレットの特徴 Webブラウザで動作することが前提 呼出し用のHTMLファイルが必要
ネットワーク経由で実行可能 ～15 プログラミング実習(Java)

11 Javaアプレットの観察（１） 授業用ホームページ 各自のID/パスワードでログオン Internet Explorerを起動
～15 プログラミング実習(Java)

12 Javaアプレットの観察（２） Javaアプレット・サンプル Sunのデモンストレーション それぞれ実行してみる
ソースを見ながら特徴・雰囲気をつかむ テキストの第Ⅱ部を活用 自分の知っている言語と比較 Sunのデモンストレーション Javaの適用範囲をつかむ ～15 プログラミング実習(Java)

13 サンプル教材のセットアップ テキストp.20～21も参照 プログラム例のセットアップ をクリック ［上記の場所から実行］に切り替え［OK］
保存先［z:\］であることを確認して［OK］ Internet Explorerを閉じて終了 ～15 プログラミング実習(Java)

14 第２章 Javaによるグラフィクスプログラミング Javaのプログラミングツール グラフィクスの基礎 Javaプログラムの制御構造
～15 第２章 Javaによるグラフィクスプログラミング Javaのプログラミングツール Microsoft Studio .NET 2003のVisual J# Sun MicrosystemsのSDK（JDK） グラフィクスの基礎 描画メソッド Javaプログラムの制御構造 C（C++）に酷似 ～15 プログラミング実習(Java) 坂口 利裕

15 各OS・ハードウェアの環境下で再コンパイルが必要
ソース互換 各OS・ハードウェアの環境下で再コンパイルが必要 ソース プログラム Windows用 コンパイラ MacOS用 コンパイラ Linux用 コンパイラ Windows用 プログラム MacOS用 プログラム Linux用 プログラム 互換性なし 互換性なし Windows MacOS Linux OS DOS/V Macintosh DOS/V ハードウェア ～15 プログラミング実習(Java)

16 特定の環境でコンパイルされたプログラムであっても他のマシン上で実行可能
バイナリ互換 特定の環境でコンパイルされたプログラムであっても他のマシン上で実行可能 ソース プログラム （Windows用） Javaコンパイラ VM=Virtual Machine OSの一部として動作するように作られた擬似的ハードウェア（実態はソフトウェア） 実行 プログラム Windows+JavaVM MacOS+JavaVM Linux+JavaVM OS DOS/V Macintosh DOS/V ハードウェア ～15 プログラミング実習(Java)

17 グラフィックスの基礎 原理・基本事項 光の点（pixel）の集まりで画面が構成されている 画面を表すメモリー（VRAM）に情報を書き込む
プログラミング実習(Java) ～15 グラフィックスの基礎 原理・基本事項 光の点（pixel）の集まりで画面が構成されている 画面を表すメモリー（VRAM）に情報を書き込む ビデオ制御用のチップがVRAMの内容に応じて映像信号に変換 座標系（左上が原点，右向き，下向き），色情報（RGB） ～15 プログラミング実習(Java) 坂口 利裕

18 画面の大きさのいろいろ 大きさの違い 色の違い VGA(640x480)，SVGA(800x600)，XGA(1024x768)
3ビット(8)，4ビット(16)，8ビット(256)，16ビット(約6万5千)，24ビット(1600万)，32ビット(??) ～15 プログラミング実習(Java)

19 プログラミング言語による制御 国際規格はあるにはある（ライブラリの規約） プログラミング言語としての規格 GKS，Phigsなど
BASICの描画命令など Java言語 （Javaスクリプトとは別物） 文法ではなく標準のクラス・ライブラリ ～15 プログラミング実習(Java)

20 Java言語によるグラフィクス処理 アプレットによる場合 ソースプログラムを作る（～.java） コンパイルする（javac ～.java）
表示用のHTMLファイルを作る（ ～.html） <applet>タグを使用 HTMLファイルをWebブラウザで閲覧 コンパイルされたclassファイルがブラウザ内で実行される ～15 プログラミング実習(Java)

21 図形描画のメソッド（１） g.drawLine( 始点のｘ座標，始点のｙ座標， 終点のｘ座標，終点のｙ座標） ; 2008.08.14～15
プログラミング実習(Java)

22 図形描画のメソッド（２） g.drawRect( 左上のｘ座標，左上のｙ座標，幅，高さ） ;
g.fillRect( 左上のｘ座標，左上のｙ座標，幅，高さ） ; ～15 プログラミング実習(Java)

23 図形描画のメソッド（３） g.drawOval( 左上のｘ座標，左上のｙ座標，幅，高さ） ;
　g.fillOval ( 左上のｘ座標，左上のｙ座標，幅，高さ） ; ～15 プログラミング実習(Java)

24 図形描画のメソッド（４） drawPolygonまたはfillPolygon
各頂点の座標を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) ; ～15 プログラミング実習(Java)

25 図形描画のメソッド（５） 色の変更 Color c = new Color( Rの値(0～255), G, B ) ;
g.setColor( c ) ; を呼び出してから描画関数を使用 ～15 プログラミング実習(Java)

26 練習 sample01.javaに対して 図形の色を変えてみよ 日本の国旗（日の丸）を描くプログラムを作成せよ
いわゆる「三色国旗」と呼ばれる国の国旗を描くプログラムを作成せよ 見本は 外務省ホームページ（日本語）-世界の国旗- を参照 ～15 プログラミング実習(Java)

27 「日本の国旗」（大きさの目安） 50 50 300 200 ～15 プログラミング実習(Java)

28 「日本の国旗」（座標の計算） g.setColor(Color.white) 50 g.fillRect(x,y,w,h); 50 300
200 g.setColor(Color.red) g.fillOval(x,y,w,h); ～15 プログラミング実習(Java)

29 Javaの変数 暗黙の変数はない 型（クラス）を明示的に指定して宣言 配列は次元ごとに[ ]を添えて宣言 型（クラス）名 変数名 ;
型名[ ] 変数名 ; // 1次元配列 型名[ ][ ] 変数名 ; // 2次元配列 初期値で与えられた場合はその数だけ割付 new 型名[要素数]【 [要素数] …】で明示的に割付 ～15 プログラミング実習(Java)

30 Javaの演算機構 四則演算 代入演算 関係演算 論理演算 ＋－＊／ ％（整数値の剰余） べき乗はない（Mathのメソッドで対応） 単純 =
四則演算 ＋＝ －＝ ＊＝ ／＝ ％＝ インクリメント ＋＋ デクリメント－－ 関係演算 ＝＝ ！＝ ＜ ＞　＞＝　＜＝ 論理演算 論理積 ＆＆ 論理和 ｜｜　論理否定！ ～15 プログラミング実習(Java)

31 Javaの制御機構 条件分岐 反復 if（論理式） { 文１ } 【else { 文２ }】
switch(式) { case 値１: 文; 【break;】 case 値２: 文; 【break;】 … 【default: 文; 】 } 反復 for(初期化; 論理式; 再初期化) { 文 } while(論理式) { 文 } do { 文 } while(論理式) ; ～15 プログラミング実習(Java)

32 練習 sample02.java に対して 線の形を変える 線の数を変える 平行移動の幅を変える 2重の反復処理に拡張する
～15 プログラミング実習(Java)

33 第３章 JavaによるGUIプログラミングの基礎 GUI部品の制御 マウスの制御 各部品の生成と配置 イベントの監視（リスナー）
イベントの監視と位置の取り出し ～15 プログラミング実習(Java)

34 Javaにおける代表的GUI部品 テキストフィールド テキストエリア ボタン ラベル 2008.08.14～15

35 TextField 変数として定義 実体を割り付ける 画面に割り付ける TextField sinchouRan ;
sinchouRan = new TextField(6) ; 画面に割り付ける add(sinchouRan) ; ～15 プログラミング実習(Java)

36 TextFieldからのデータ取り出し 文字列の場合 整数値の場合 実数値の場合
String s ; s = shinchouRan.getText() ; 整数値の場合 int i ; i = Integer.parseInt(shinchouRan.getText() ) ; 実数値の場合 float f ; f = Float.valueOf(shinchouRan.getText()).floatValue() ; ～15 プログラミング実習(Java)

37 イベント処理 ある部品に対するアクション プログラムで受信して処理 ボタンのクリック・ダブルクリック マウスの移動・マウスのクリック
リスナーを定義して処理内容を記述しておく ～15 プログラミング実習(Java)

38 イベントとアプレット内のメソッド システムから ユーザから プログラマが必要に応じて規定 イベント イベント 共通変数の初期化
repaint() リスナ プログラマが規定 init() （復帰） update() start() プログラマが必要に応じて書換え paint() イベント待ち （復帰） アプレット全体の流れ ～15 プログラミング実習(Java)

39 練習 （GUI部品の扱い方） sample04.javaに対して 判定結果による背景色の変更 ローレル指数をBMIに変更
BMI=Body Mass Index BMI = 体重[kg]/身長2[m] = 体重[kg]*10000 / (身長[cm]*身長[cm]） BMIに基づく標準体重の（計算と）表示 グラフ風の表現 ～15 プログラミング実習(Java)

40 練習（マウスの扱い方） sample05.javaに対して ドラッグへの対応 形・色の追加 大きさの制御 ドラッグに対応するリスナを追加
配列に情報を追加 描画用メソッドの拡張 大きさの制御 ～15 プログラミング実習(Java)