オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf ·...
Transcript of オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf ·...
![Page 1: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/1.jpg)
オブジェクト指向プログラミング演習
第2回 クラス・インスタンス・メソッド・コンストラクタ
2018.04.20
![Page 2: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/2.jpg)
先週の出席確認
2018.04.20
NHK「チコちゃんに叱られる!」
Webブラウザはどのようなプログラムでできているか
この問に答える前に… Webブラウザとは、何か?
普段使ってますよね?
Webブラウザを使ってできることと
Webブラウザがやっていることを
区別する必要がある
何をすれば
Webブラウザ
と言えるのか
![Page 3: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/3.jpg)
2018.04.20
Webブラウザがやっていること
Webページを表示する
サーバに接続してWebページの情報を受け取る
受け取った情報(HTMLなど)を解釈して表示する
表示しているページに対する操作に対応する
リンクがクリックされたら、リンク先のページを表示する
入力欄のあるページに入力された情報を記憶する
TABで入力欄のフォーカスを移動する
submitが押された・enterキーが押されたときにサーバに接続して入力された情報を渡す
![Page 4: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/4.jpg)
Webブラウザがやっていること
サーバに接続してWebページの情報を受け取る
サーバに接続するには、サーバのアドレスなどを知る必要がある
http://sun.ac.jp/prof/yamagu/
URLを解釈して、プロトコル・サーバのアドレス・情報の位置を識別(取り出す)機能を持っている
プロトコルに従ってサーバと通信する
http, https など2018.04.20
プロトコル サーバ上の情報の位置サーバのアドレス
![Page 5: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/5.jpg)
Webブラウザがやっていること
受け取った情報(HTMLなど)を解釈して表示する
HTMLの解釈・表示
CSSの解釈
JavaScriptの解釈・実行
画像情報の解釈(解凍)・表示
その他(pdf とか Flash とか)
プラグインを導入できるようにしておく
プラグインに情報を渡す
プラグインが画像や音声を出力できるようなインタフェースが必要
2018.04.20
![Page 6: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/6.jpg)
Webブラウザがやっていること
リンクがクリックされたら、リンク先のページを表示する
画面上の位置とHTML中の位置を対応づける
リンク先は URL
URLの解釈をする
URLが省略されていることもある
URLの補完をしている
2018.04.20
![Page 7: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/7.jpg)
Webブラウザがやっていること
Webページの閲覧を便利にする機能
閲覧履歴を記録する
履歴の中を前ページを表示する
履歴の中の次ページを表示する
再読込
ブックマーク(お気に入り)を記録する
複数タブ/複数ウィンドウ
Cookie の記録・管理
2018.04.20
![Page 8: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/8.jpg)
Webブラウザの部品
ユーザとのインタフェース
テキストの入力欄
ボタン
Webページを表示する画面
HTMLの Form タグ内で使われる入力の仕組み
2018.04.20
![Page 9: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/9.jpg)
Webブラウザがやっていないこと
サーバ名からIPアドレスを得る
これは DNS の仕事
Webブラウザは DNS への問い合わせをする
検索
これは検索エンジンの仕事
Webブラウザは検索エンジンに検索語を渡し、応答として返ってきたWebページを表示している
HTMLやCSSの記述
これはWebページを作る人の仕事
問は「Webページがどうできているか」ではない
Webブラウザは、HTMLやCSSを解釈して、Webページの表示を行っている
ネットワーク上の他のパソコンから接続される
これは(Web)サーバの仕事2018.04.20
![Page 10: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/10.jpg)
Webブラウザがやっていることだが…
ブックマークの機能だけ述べた回答がありました
インタフェースについてだけ述べた回答がありました
…Webブラウザの中心的な機能はWebページの表示です
当たり前のことが意識できていない回答です
2018.04.20
![Page 11: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/11.jpg)
整理をし、言葉を選んで、回答すること
「Webブラウザの画面はHTMLとCSSでできている」
という回答がありました。
HTMLとCSSで出来ているのは Webページです
Webブラウザは、Webページを表示する機能を持っていますが、それはブラウザの一部です
この回答は、
整理ができていない、または
分かって書いているのなら、言葉が足りない
2018.04.20
![Page 12: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/12.jpg)
演習への回答に際しての注意事項
当たり前のことをきちんと書きましょう
本質(もっとも重要なこと)は何かを、はっきりさせるため
当たり前のことだけで終わってはダメ
定義を書いただけ・言い換えただけになるので
本質について、より深く考えて下さい
ブックマークの機能がなくてもWebブラウザとして成立しますよね?
2018.04.20
![Page 13: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/13.jpg)
今日のお題
クラス
インスタンス
メソッド
コンストラクタ
2018.04.20
モノの種類オブジェクト
モノの実体
関数のようなもの。モノの機能を表す計算手順
新しいインスタンスを作るときに呼び出される計算手順
本演習のWebページがあります:http://sun.ac.jp/prof/yamagu/2018OOP/
![Page 14: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/14.jpg)
Java の型とクラス
(C言語と同様に)変数や返戻値は型を持つ
型には、プリミティブ型とクラスがある
プリミティブ型:int, double など
プリミティブ型の変数は、その型の値を記憶する
クラス
最初から用意されているもの・自分で定義したもの
文字列は String クラスで表される
クラスを型とする変数は、そのクラスのインスタンスを記憶する
↑インスタンスが値として扱われている
2018.04.20
primitive は原始的な/単純な/元々のといった意味
![Page 15: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/15.jpg)
f に記憶されているFrame のインスタンスのsetVisible メソッドを呼び出す
ウィンドウが見えるようになる
サンプルプログラム
import java.awt.*;
public class Oop2 {
public static void main(String args[]) {
Frame f;
f = new Frame();
f.setVisible(true);
}
}
2018.04.20
今日は Oop2.java というファイルを書き換えながら演習します
java.awtパッケージの下にあるすべてのクラスを利用可能にする
Frame クラスのインスタンスを記憶できる変数 f を宣言
新しく Frame クラスのインスタンスを作って、f に代入
java.awt パッケージは、GUIを作るのに使えるクラスを提供する
Oop2.java というファイルを作り、javac Oop2.java
でコンパイルjava Oop2
で実行
画面上にウィンドウ(枠)を出すためのデータを用意している
![Page 16: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/16.jpg)
画面上にウィンドウを表示するプログラム
import java.awt.*;
public class Oop2 {
public static void main(String args[]) {
Frame f;
f = new Frame();
f.setSize(200,200);
f.setVisible(true);
}
}
2018.04.20
このままだと、あまりに小さいので…Frame のインスタンスを見えるようにする前に大きさを設定する
f (に記憶されているFrame のインスタンス)の大きさを 200×200 にする
![Page 17: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/17.jpg)
サンプルプログラム
import java.awt.*;
public class Oop2 {
public static void main(String args[]) {
Frame f;
f = new Frame();
f.setSize(200,200);
f.setVisible(true);
f = new Frame();
f.setSize(100,200);
f.setVisible(true);
}
}
2018.04.20
ためしに、もう一つ Frame のインスタンスを作ってみる。
新しく Frame クラスのインスタンスを作って、f に代入
改めて Frame クラスのインスタンスを作って、f に代入
区別できるように、大きさを変える
ウィンドウが二つ現れる
![Page 18: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/18.jpg)
ここまでのまとめ
Frame クラスのインスタンスを作る
new Frame()
ウィンドウが作られる
Frameクラスは、可視/不可視を制御する機能を持つ
setVisible メソッドを呼ぶ
Frameクラスは、大きさを変える機能を持つ
setSize メソッドを呼ぶ
2018.04.20
![Page 19: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/19.jpg)
コンストラクタ
インスタンスを生成するときに呼ばれる
個々のインスタンスに初期設定をするなど
Java の API を参照して、Frame クラスに
どんなコンストラクタがあるか、調べてみよう: Frame()
Frame(GraphicsConfiguration gc)
Frame(String title)
Frame(String title, GraphicsConfiguration gc)
2018.04.20
タイトルを指定できる
![Page 20: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/20.jpg)
コンストラクタの利用例
new クラス名 に続く括弧内に、コンストラクタへの引数を渡す
2018.04.20
import java.awt.*;
public class Oop2 {
public static void main(String args[]) {
Frame f;
f = new Frame("OOP");
f.setSize(200,200);
f.setVisible(true);
}
}
新しく Frame クラスのインスタンスを作るとき、タイトルを指定している。
![Page 21: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/21.jpg)
ここまでは、既存のクラスの既存のコンストラクタやメソッドを使った。
次は、自分でコンストラクタやメソッドを定義してみよう
2018.04.20
![Page 22: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/22.jpg)
Frameを持つクラスを定義してみる
import java.awt.*;
public class Oop2 {
Frame fr;
Oop2() {
fr = new Frame("Oop2");
fr.setSize(200,200);
fr.setVisible(true);
}
public static void main(String args[]) {
Oop2 test;
test = new Oop2();
}
}
2018.04.20
Oop2 は Frame
を一つ持つ。これはフィールド。
Oop2 のインスタンスを作る。ウィンドウが現れる。
フィールドの宣言には、型 フィールド名;
というパターンを書く。public や static などの修飾が付くこともある。
Oop2のコンストラクタの定義コンストラクタは、
クラス名(仮引数列){...}というパターンで定義する
コンストラクタの定義には、public などの修飾が付くこともある。
![Page 23: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/23.jpg)
メソッドの定義と呼出し
2018.04.20
import java.awt.*;
public class Oop2 {
Frame fr;
Oop2() {
fr = new Frame("Oop2");
fr.setSize(200,200);
fr.setVisible(true);
}
void large() {
fr.setSize(400,400);
}
public static void main(String args[]) {
Oop2 test;
test = new Oop2();
test.large();
}
}
メソッドの定義は、返戻値の型 メソッド名(仮引数列){…}
というパターンを、クラスの定義の中に書く
メソッドの呼出し。変数 test(に記憶されているOop2のインスタンス)の large メソッドを呼んでいる
メソッドの定義には、public や static
などの修飾が付くこともある。
C言語では引数を持たない関数では、仮引数列に void
と書くことを推奨したが、Java では仮引数列に void
と書くことができない。
![Page 24: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/24.jpg)
2018.04.20
今日のまとめ
クラス class というキーワードを使って定義する。その中身には、フィールド・メソッド・コンストラクタを書く。
インスタンス new というキーワードを使って、生成する。
メソッドインスタンス i のメソッド m を i.m(...) というパターンで呼び出す。
クラスの定義の中で、メソッドを定義する。
コンストラクタ new を使うと呼び出される
コンストラクタの定義も、クラスの定義の中に書く。
![Page 25: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/25.jpg)
作ったインスタンスを受け取る変数が必要なワケではない。
import java.awt.*;
public class Oop2 {
Frame fr;
Oop2() {
fr = new Frame("Oop2");
Canvas cv = new Canvas() {
public void paint(Graphics gc) {
gc.setColor(new Color(255,255,255));
gc.fillRect(0,0,200,200);
gc.setColor(new Color(0,0,0));
gc.drawLine(50,50,150,150);
}
};
cv.setSize(200,200);
fr.add(cv);
fr.pack();
fr.setVisible(true);
}
public static void main(String args[]) {
new Oop2();
}
}
おまけ: 絵を描くくらいしたい
2018.04.20
絵を描くにはCanvas クラスを使う
Canvas のサブクラスを名前を付けずに定義して、そのインスタンスを作っている
描画の命令は Graphics
クラスのインスタンスを通じて行う
白で200×200の領域を塗りつぶす
Canvas の大きさを設定する
黒い線を一本描く
Frame に Canvas を入れる
Frame の大きさを計算する。ここでは Canvas に合う大きさになる。
![Page 26: オブジェクト指向 プログラミング演習sun.ac.jp/prof/yamagu/2018OOP/OOP02.pdf · 2018. 4. 13. · オブジェクト指向 プログラミング演習 第2回クラス・インスタンス・](https://reader034.fdocuments.net/reader034/viewer/2022051906/5ff9190bb0ac1846ee264ae0/html5/thumbnails/26.jpg)
次回予告
アクセス制御
2018.04.20