時計アプリを作る

# 導入
今回は Pharo を使ってアナログ時計を作ってみます。
# Pharo
Pharo は以下からダウンロードできます。
https://pharo.org/
# Pharo の紹介
Pharo は Smalltalk 処理系の一種です。Smalltalk は「すべてはオブジェクトである」というパラダイムに基づくプログラミング言語です。Smalltalk においてはプログラムを書く人間も一個のオブジェクトと捉え、すべてのオブジェクトは「メッセージ」をやりとりすることによって対話し相互に作用する、という考え方に基づきます。
ここで注意して欲しいのは、オブジェクト指向言語にも「方向性」があり、それぞれ違っているという事実があります。ですので C 系のオブジェクト指向言語(C++, C#, Python など)の目指すオブジェクト指向と、Smalltalk の目指すオブジェクト指向は異なります。この事実を知っていないと、いろいろ不便な目に遭うというか、
```
「えらい遠回りしちまったなーこりゃ...。」
```
となりかねないので注意してください。目指している「方向」が違います。
# すべてはオブジェクトである
よく C 系のオブジェクト指向言語では、
```
・こういう継承はすべきじゃない
・これは良い継承で、これは悪い継承のしかただ。
・それは「なんとかパターン」で作るべき
```
とかよく言いますが、Smalltalk においては
```
すべてはオブジェクトである！
```
なのでとにかく継承しないとプログラミングが始まりません。「良い継承」とか「悪い継承」とかありません。最低でも Object クラスを継承しなければなりません。Object クラスを継承しない「何か」などが存在することは絶対に許されません。なぜなら「全てはオブジェクト」でなければならないからです。
```
オブジェクト指向原理主義。怖いでしょう？ｗ
```
パターンについては「ベストプラクティスパターン」と呼ばれるものならありますが、
```
あっ、これ◯◯パターンだ。いつの間にか使ってたわｗ
```
ってかんじです。あんまり意識しないというか気にしてません。たぶん。
# とにかく継承する
最初にすべきは、時計アプリ (ClockMorph) を作ります。Morph というのは Pharo における図形オブジェクトみたいなものです。Pharo の Browser (クラスブラウザ)や Playground のような GUI 部品はすべて Morph クラスのサブクラスです。Pharo のルート画面(デスクトップ)さえも Morph のサブクラスです。
```
EllipseMorph subclass: #ClockMorph
	instanceVariableNames: 'time'
	classVariableNames: ''
	package: 'PBE-Clock'
```
今回作る ClockMorph は EllipseMorph のサブクラスにします。
インスタンス変数は time です。現在の時刻を持ちます。
package は PBE-Clock となっていますが、ここは適当で良いです。例えば「My-Application」でも「Practice」でも何でもいいです。好きな名前にしてください。
# メソッドを実装していきます。
Pharo(Smalltalk)ではメソッド群を分類する「プロトコル」というものがあります。最初は「accessing」プロトコルからにしましょう。「accessing」プロトコルには主にインスタンス変数を参照するメソッドを書きます。自分自身の幅や高さを返すメソッド群も accessing で良いでしょう。
# accessing プロトコルメソッド
インスタンス変数や、自分オブジェクトの幅や高さ、針（長針、短針、秒針）の開始点・終了点の値などにアクセスするメソッドを書きます。
```
centerOfClock
	^ self halfWidth @ self halfHeight
```
```
halfHeight
	^ self height / 2
```
```
halfWidth
	^ self width / 2
```
```
headOfHourHand
	^ self halfWidth @ (self halfHeight * (5/10))
```
```
headOfLongScale
	^ self halfWidth @ 0
```
```
headOfMinuteHand
	^ self halfWidth @ (self halfHeight * (2/10))
```
```
headOfSecondHand
	^ self halfWidth @ (self halfHeight * (2/10))
```
```
headOfShortScale
	^ self halfWidth @ 0
```
```
tailOfHourHand
	^ self centerOfClock 
```
```
tailOfLongScale
	^ self halfWidth @ (self halfHeight * (3/20))
```
```
tailOfMinuteHand
	^ self centerOfClock 
```
```
tailOfSecondHand
	^ self halfWidth @ (self halfHeight * (12/10))
```
```
tailOfShortScale
	^ self halfWidth @ (self halfHeight * (1/10))
```
# constants プロトコルメソッド
定数を返すメソッドを書きます。
```
colorOfHourHand
	^ Color black
```
```
colorOfMinuteHand
	^ Color black
```
```
colorOfSecondHand
	^ Color black
```
```
radiusOfcenterPoint
	^ 3
```
```
widthOfHourHand
	^ 3
```
```
widthOfMinuteHand
	^ 2
```
```
widthOfSecondHand
	^ 1
```
# converting プロトコルメソッド
変換する処理を行うメソッドを書きます。
```
offset: coord
	^ coord translateBy: self bounds origin
```
```
point: aPoint rotateBy: radian
	| x y |
	x := radian cos * aPoint x - (radian sin * aPoint y).
	y := radian cos * aPoint y + (radian sin * aPoint x).
	^ x @ y
```
```
point: aPoint rotateBy: radian centerAt: center
	| newPoint |
	newPoint := self point: (aPoint translateBy: center negated) rotateBy: radian.
	^ newPoint translateBy: center
```
# drawing プロトコルメソッド
自分自身の領域内を描画するためのメソッドを書きます。
```
drawCenter: aCanvas
	| pt1 pt2 |
	pt1 := self offset: self centerOfClock - self radiusOfcenterPoint.
	pt2 := self offset: self centerOfClock + self radiusOfcenterPoint.
	aCanvas fillOval: (pt1 corner: pt2) color: Color black
```
```
drawClockFace: aCanvas
	aCanvas fillOval: self bounds color: Color paleGreen darker.
	self drawScales: aCanvas.
	self drawCenter: aCanvas.
```
```
drawHourHand: aCanvas
	self
		drawLineOn: aCanvas
		from: self headOfHourHand
		to: self tailOfHourHand
		width: self widthOfHourHand
		color: self colorOfHourHand
		rotate: self rotationOfHourHand
```
```
drawLineOn: aCanvas from: pt1 to: pt2 width: w color: c rotate: r
	self
		drawLineOn: aCanvas
		from: pt1
		to: pt2
		width: w
		color: c
		rotate: r
		centerAt: self centerOfClock
```
```
drawLineOn: aCanvas from: pt1 to: pt2 width: w color: c rotate: r centerAt: center 
	self
		canvas: aCanvas
		line: (self point: pt1 rotateBy: r centerAt: center)
		to: (self point: pt2 rotateBy: r centerAt: center)
		width: w
		color: c
```
```
drawMinuteHand: aCanvas
	self
		drawLineOn: aCanvas
		from: self headOfMinuteHand
		to: self tailOfMinuteHand
		width: self widthOfMinuteHand
		color: self colorOfMinuteHand 
		rotate: self rotationOfMinuteHand
```
```
drawOn: aCanvas
	self
		drawClockFace: aCanvas;
		drawHourHand: aCanvas;
		drawMinuteHand: aCanvas;
		drawSecondHand: aCanvas
```
```
drawScales: aCanvas
	| aBlock |
	aBlock := [ :radian :isLongScale | 
	| head tail w |
	isLongScale
		ifTrue: [ head := self headOfLongScale.
			tail := self tailOfLongScale.
			w := 2 ]
		ifFalse: [ head := self headOfShortScale.
			tail := self tailOfShortScale.
			w := 1 ].
	self
		drawLineOn: aCanvas
		from: head
		to: tail
		width: w
		color: Color black
		rotate: radian].
	6 to: 360 by: 6 do: [ :each | aBlock value: each / 360 * 2 * Float pi value: each % 30 == 0 ]
```
```
drawSecondHand: aCanvas
	self
		drawLineOn: aCanvas
		from: self headOfSecondHand
		to: self tailOfSecondHand
		width: self widthOfSecondHand
		color: self colorOfSecondHand 
		rotate: self rotationOfSecondHand
```
# initializing プロトコルメソッド
初期化を行うメソッドを書きます。initialize メソッドはスーパークラスにあるメソッドをオーバーライドしているので、最初に「super initialize.」と書き、スーパークラスの initialize (初期化処理)を実行するのを忘れないように注意してください。
```
initialize
	super initialize.
	self extent: 150 @ 150.
	time := Time now.
	self startStepping 
```
# private プロトコルメソッド
インスタンス変数への代入など、他のクラスから使ってもらいたくないプライベートなメソッドを書きます。
```
canvas: aCanvas line: pt1 to: pt2 width: w color: c
	aCanvas line: (self offset: pt1) to: (self offset: pt2) width: w color: c
```
```
time: newTime
	time := newTime
```
# rotation プロトコルメソッド
座標を回転するメソッドを書きます。
短針だけは長針の進み具合によって少しずつ回転するのをシミュレートします。例えば時刻が 10:30 のとき、短針はずっと 10 を指すのは不自然なので、10 と 11 の間の中央を指すようにします。
```
rotationOfHourHand
	^ (time hour12 / 6 + (time minute / 360)) * Float pi
```
```
rotationOfMinuteHand
	^ (time minute / 30) * Float pi
```
```
rotationOfSecondHand
	^ (time second / 30) * Float pi
```
# stepping プロトコルメソッド
時計の時刻を定期的に更新するメソッドと、更新間隔(ミリ秒)を書きます。
```
step
	time := Time now.
	self changed
```
```
stepTime
	^ 500
```
Pharo において自身を更新したい場合は、自分で何かを描画するメソッドを実行するのではなく、システムに対して「自分を更新したので再描画して欲しい」という事を伝えます。システムはすべてのアプリを管理しており、再描画依頼をもらった各アプリに対して順番に再描画を行います。この取り決めを守らない場合、アプリは必死に自分を描画しようとするため、激重になってシステム全体に悪影響を及ぼす事になります。

自身を再描画して欲しい時は、changed メッセージを送ります。
```
アプリ(送り側) ----- changed -----> システム(受け側)
```
すると、しばらく経った後、システム側から再描画していいよ！というメッセージが送られてきます。
```
アプリ(受け側) <---- drawOn: ----- システム(送り側)
```
アプリは drawOn: に自身を描画する方法を書いておきます。このようにして他のアプリと協調しながら自身を再描画します。
# overrides プロトコルメソッド
ここは自動的に作成されます。オーバーライドしているメソッドは以下の４つです。
```
drawOn:
initialize
step
stepTime
```
# 実行する
Playground を開き、以下を入力し、マウスを左クリックしながらなぞって全選択します。
```
ClockMorph new openInWorld
```
右クリックして表示されるプルダウンメニューから「do-it」を選びます。
![tokei.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3430684/de844076-c0ee-4fa2-bd54-36dfedec69c0.png)
このようなアナログ時計が Pharo のデスクトップの左上に現れます。