CoffeeScript – geom2d.Vectorクラス

2016-07-24 / tau / コメントする

パッケージ

taustation_geom2d

クラス名

taustation_geom2d.Vector

クラス仕様

概要

x、y二つの成分を持ち、絶対値の計算や加減乗算など2次元ベクトルの代数演算を行うメソッドを提供する。

クラス変数

なし

クラス・メソッド

distance(pos1, pos2): 2つのVectorオブジェクトpos1、pos2を点を表す位置ベクトルとして、2点間の距離を返す。

インスタンス・プロパティ

x: ベクトルのx成分
y: ベクトルのy成分

コンストラクタ

constructor(x, y): x成分とY成分を指定してVectorのインスタンスを生成する。

インスタンス・メソッド

基本メソッド

set(x, y): Vectorのx成分とy成分をセットする。
toString(): Vectorの文字列形式の表現を返す。
getClone(): 元のVectorオブジェクトと同じ内容のクローンを生成して返す。

演算

abs: Vectorの絶対値(長さ)を返す。
times(coeff): Vectorに定数coeffを乗じたベクトルを新たに生成して返す。
timesEq(coeff): Vectorに定数coeffを乗じて変更する。新しいオブジェクトは生成しない。
div(coeff): Vectorを定数coeffで除したベクトルを新たに生成して返す。
divEq(coeff): Vectorを定数coeffで除して変更する。新しいオブジェクトは生成しない。
plus(other): Vectorにotherベクトルを加えたベクトルを新たに生成して返す。
plusEq(other): Vectorにotherベクトルを加えて変更する。新しいオブジェクトは生成しない。
minus(other): Vectorからotherベクトルを減じたベクトルを新たに生成して返す。
minusEq(other): Vectorからotherベクトルを減じて変更する。新しいオブジェクトは生成しない。
inprod(other): Vectorとotherベクトルの内積値を返す。
ang(other): Vectorとotherのなす角を計算する(0～π)。

新たなVectorの生成

getUnit(): Vectorと同じ向きの単位ベクトル(長さが1)を新たに生成して返す。
getInverse(): Vectorと逆向きのベクトルを新たに生成して返す。
getOrthogonalR(): Vectorから右に90度回転したベクトルを新たに生成して返す。
getOrthogonalL(): Vectorから左に90度回転したベクトルを新たに生成して返す。
getUnitOrthogonalR(): Vectorから右に90度回転した単位ベクトルを新たに生成して返す。
getUnitOrthogonalL(): Vectorから左に90度回転した単位ベクトルを新たに生成して返す。

判定

isHeadingToRightOf(other): このVectorオブジェクトの進行方向が、引数のVectorオブジェクトotherの進行方向より右方を指しているときtrue、左方を指しているときfalseを返す。
isHeadingToLeftOf(other): isHeadingToRightOf()と左右逆の判定結果を返す
isInFrontOf(movingAgent): このVectorオブジェクトが位置ベクトルとして、その点が引数のMovingAgentオブジェクトの前方(左右180度より進行方向の側)にあるときtrue、後方にあるときfalseを返す。真横の時は前方と判定される。
isIntheRearOf(movingAgent): isInFrontOf()と前後逆の判定結果を返す。
isOnTheRightOf(movingAgent): このVectorオブジェクトが位置ベクトルとして、その点が引数のMovingAgentオブジェクトの右方にあるときtrue、左方にあるときfalseを返す。進行方向の延長線上にあるときは右方と判定される。
isOnTheLeftOf(movingAgent): isOnTheRightOf()と左右逆の判定結果を返す。

コード

  class Vector
    # 2つの位置ベクトルで表される点の間の距離を返す
    @distance: (pos1, pos2) ->
      Math.sqrt((pos1.x - pos2.x) * (pos1.x - pos2.x) +
                (pos1.y - pos2.y) * (pos1.y - pos2.y))

    constructor: (@x, @y) ->

    set: (x, y) -> @x = x; @y = y; return
    toString: -> "(#{@x}, #{@y})"

    # 自身と同じ内容のVectorオブジェクトを生成して返す
    getClone: -> new Vector(@x, @y)

    # ベクトルの絶対値(長さ)
    abs: -> Math.sqrt(@x * @x + @y * @y)

    # ベクトルとスカラーの乗除算
    # 以降のメソッド群でも、Eqがついていれば元のオブジェクトを変更し、
    # Eqがついていなければ新しいベクトルを生成して返す
    times: (a) -> new Vector(@x * a, @y * a)
    timesEq: (a) -> @x *= a; @y *= a; return
    div: (a) -> new Vector(@x / a, @y / a)
    divEq: (a) -> @x /= a; @y /= a; return

    # ベクトル同士の加減算
    plus: (other) -> new Vector(@x + other.x, @y + other.y)
    plusEq: (other) -> @x += other.x; @y += other.y; return
    minus: (other) -> new Vector(@x - other.x, @y - other.y)
    minusEq: (other) -> @x -= other.x; @y -= other.y; return

    # 2つのベクトルの内席となす角
    inprod: (other) -> @x * other.x + @y * other.y
    ang: (other) -> Math.acos(@inprod(other) / @.abs() / other.abs())

    # 単位ベクトル、逆ベクトル、直交ベクトルを返す
    getUnit: -> a = @abs(); new Vector(@x / a, @y / a)
    getInverse: -> new Vector(-@x, -@y)
    getOrthogonalR: -> new Vector(@y, -@x)
    getOrthogonalL: -> new Vector(-@y, @x)
    getUnitOrthogonalR: -> a = @abs(); new Vector(@y / a, -@x / a)
    getUnitOrthogonalL: -> a = @abs(); new Vector(-@y / a, @x / a)

    # このVectorが引数のVectorの向きに対してどちらに向いているか
    isHeadingToRightOf: (other) ->
      if @x * other.y - @y * other.x >=0 then true else false

    isHeadingToLeftOf: (other) -> return not @isHeadingToRightOf(other)

    # 以下、Vectorを位置ベクトルと考えたときのMovingAgentとの位置関係
    #
    # Vectorの位置がMovingAgentの前方か
    isInFrontOf: (movingAgent) ->
      inprod = movingAgent.v.x * (@x - movingAgent.pos.x) +
               movingAgent.v.y * (@y - movingAgent.pos.y)
      if inprod >= 0 then true else false

    # Vectorの位置がMovingAgentの後方か
    isInTheRearOf: (movingAgent) -> not @isInFrontOf(movingAgent)

    # Vectorの位置がMovingAgentの右方か
    isOnTheRightOf: (movingAgent) ->
      inprod = (@x - movingAgent.pos.x) * movingAgent.v.y -
               (@y - movingAgent.pos.y) * movingAgent.v.x
      if inprod >= 0 then true else false

    # Vectorの位置がMovingAgentの左方か
    isOnTheLeftOf: (movingAgent) -> not @isOnTheRightOf(movingAgent)

class Vector

# 2つの位置ベクトルで表される点の間の距離を返す

@distance: (pos1, pos2) ->

Math.sqrt((pos1.x - pos2.x) * (pos1.x - pos2.x) +

(pos1.y - pos2.y) * (pos1.y - pos2.y))

constructor: (@x, @y) ->

set: (x, y) -> @x = x; @y = y; return

toString: -> "(#{@x}, #{@y})"

# 自身と同じ内容のVectorオブジェクトを生成して返す

getClone: -> new Vector(@x, @y)

# ベクトルの絶対値(長さ)

abs: -> Math.sqrt(@x * @x + @y * @y)

# ベクトルとスカラーの乗除算

# 以降のメソッド群でも、Eqがついていれば元のオブジェクトを変更し、

# Eqがついていなければ新しいベクトルを生成して返す

times: (a) -> new Vector(@x * a, @y * a)

timesEq: (a) -> @x *= a; @y *= a; return

div: (a) -> new Vector(@x / a, @y / a)

divEq: (a) -> @x /= a; @y /= a; return

# ベクトル同士の加減算

plus: (other) -> new Vector(@x + other.x, @y + other.y)

plusEq: (other) -> @x += other.x; @y += other.y; return

minus: (other) -> new Vector(@x - other.x, @y - other.y)

minusEq: (other) -> @x -= other.x; @y -= other.y; return

# 2つのベクトルの内席となす角

inprod: (other) -> @x * other.x + @y * other.y

ang: (other) -> Math.acos(@inprod(other) / @.abs() / other.abs())

# 単位ベクトル、逆ベクトル、直交ベクトルを返す

getUnit: -> a = @abs(); new Vector(@x / a, @y / a)

getInverse: -> new Vector(-@x, -@y)

getOrthogonalR: -> new Vector(@y, -@x)

getOrthogonalL: -> new Vector(-@y, @x)

getUnitOrthogonalR: -> a = @abs(); new Vector(@y / a, -@x / a)

getUnitOrthogonalL: -> a = @abs(); new Vector(-@y / a, @x / a)

# このVectorが引数のVectorの向きに対してどちらに向いているか

isHeadingToRightOf: (other) ->

if @x * other.y - @y * other.x >=0 then true else false

isHeadingToLeftOf: (other) -> return not @isHeadingToRightOf(other)

# 以下、Vectorを位置ベクトルと考えたときのMovingAgentとの位置関係

# Vectorの位置がMovingAgentの前方か

isInFrontOf: (movingAgent) ->

inprod = movingAgent.v.x * (@x - movingAgent.pos.x) +

movingAgent.v.y * (@y - movingAgent.pos.y)

if inprod >= 0 then true else false

# Vectorの位置がMovingAgentの後方か

isInTheRearOf: (movingAgent) -> not @isInFrontOf(movingAgent)

# Vectorの位置がMovingAgentの右方か

isOnTheRightOf: (movingAgent) ->

inprod = (@x - movingAgent.pos.x) * movingAgent.v.y -

(@y - movingAgent.pos.y) * movingAgent.v.x

if inprod >= 0 then true else false

# Vectorの位置がMovingAgentの左方か

isOnTheLeftOf: (movingAgent) -> not @isOnTheRightOf(movingAgent)

CoffeeScript – グローバル変数

2016-07-24 / tau / コメントする

グローバルにならない

CoffeeScriptでグローバル変数を期待して以下のように書いたとする。

globalVar = 1 # グローバル変数のつもり

console.log(globalVar)

globalVar = 1 # グローバル変数のつもり

console.log(globalVar)

一見すると問題なく動いているように見えるが、これを別ファイルのパッケージにして動かそうとすると問題が顕在化する。以下のように”globalVarが存在しないよ”というエラーが出るのである。

>>> package1.coffeeファイル
globalVar = 1

>>> main.coffeeファイル
console.log(globalVar) # globalVar is not defined

>>> package1.coffeeファイル

globalVar = 1

>>> main.coffeeファイル

console.log(globalVar) # globalVar is not defined

これら2つのファイルをjsにコンパイルしてブラウザのscript要素で読み込んだ場合、そのイメージは以下のようになる。

(function() {
  globalVar a;
  globalVar = 1;
}).call(this);

(function() {
  console.log(globalVar);
}).call(this);

(function() {

globalVar a;

globalVar = 1;

}).call(this);

(function() {

console.log(globalVar);

}).call(this);

パッケージでグローバル定義したつもりだが、コンパイル時に無名関数でクロージングされるため、グローバルにならず、他のファイルから読み込むことができない。

解決策1

グローバル変数をwindowオブジェクトの要素にしてしまう。

>>> package1.coffeeファイル
window.globalVar = 1

>>> main.coffeeファイル
console.log(window.globalVar)

>>> package1.coffeeファイル

window.globalVar = 1

>>> main.coffeeファイル

console.log(window.globalVar)

解決策2

rootコンテキストで、以下のパターンを使う。

>>> package1.coffeeファイル
exports = this
exports.globalVar = 1

>>> main.coffeeファイル
console.log(globalVar)

>>> package1.coffeeファイル

exports = this

exports.globalVar = 1

>>> main.coffeeファイル

console.log(globalVar)

WordPress – Faviconの追加

2016-07-19 / tau / コメントする

概要

WordPressで作っているサイトのアイコン(ブラウザのお気に入りなどで表示される小さいアイコン)が透過色の書類マークのままで殺風景なので、自分用のFaviconを作って適用してみた。

Faviconとは、Favorite Iconの略だそうである。

アイコン画像の準備

アイコン画像を作成し、透過色を指定してPNGやGIFで保存する。

今回は、PowerPointで作成した図柄をPNG形式で保存し、ペイントアプリケーションで切り取ってPNG形式で保存。

透過色の指定は、Exce使った方法で行った。

icoファイル化

FavIcon from Picsというサイトで、PNGファイルをicoファイル化。Webサイトにファイルをアップロードし、変換されたファイルをダウンロード。

WordPressへのFaviconの登録

Faviconファイルやその元となったファイルをWordPressのメディアに登録。

テーマのheader.phpを編集する方法とプラグインを利用する方法があるが、今回はFavicon Rotatorというプラグインを使った。

Favicon RotatorをインストールするとWordPressの”外観”メニューに”Favicon”メニューが追加されるので、それをクリック。

ファイルを新たにアップロードするとメディアに追加されるが、ここでは先にメディアに追加済のicoファイルを指定。

これでお気に入りに表示されるFaviconが変更される。

WordPressでCanvas要素が消える

2016-07-19 / tau / 4件のコメント

消えるcanvas

WordPressのテキストモードでcanvas要素を書いて、ビジュアルモードに切り替えてもう一度テキストモードに戻ったとき、canvas要素が消えてしまうことがあった。

いろいろと試しているうちに、以下のような挙動があることがわかってきた。

<canvas>タグと</canvas>タグを直接一行でつないだ時に消えるらしい
canvas要素の前後が空行かどうかでも結果が変わるらしい

そこで、タグの書き方と前後の空行の入れ方の組み合わせで、canvasが消えるかどうかをチェックした。

canvasが消える条件

<canvas></canvas>のように開始タグと改行タグが連続して書かれていて、なおかつ以下のケースの時にcanvas要素が消える。

ケース1：ファイルの中に単独で書いた場合

開始タグと終了タグが<canvas></canvas>のように連続しており、それのみがファイルの中に書かれている場合、ビジュアルエディタを経由すると要素が消える。行末の改行があってもなくても結果は同じ。

<!-- 改行なし -->
[ファイル開始]<canvas></canvas>[ファイル終了] 

<!-- 改行あり -->
[ファイル開始]<canvas></canvas>[改行]
[ファイル終了]

[ファイル開始]<canvas></canvas>[ファイル終了]

[ファイル開始]<canvas></canvas>[改行]

[ファイル終了]

ケース2：前後に空行がある場合

開始タグと終了タグが<canvas></canvas>のように連続しており、その行の前後に空行がある場合、ビジュアルエディタを経由すると要素が消え、&nbspに書き換えられる。

<!-- 前後に空行がある場合 -->
・・・前行

<canvas></canvas>

・・・後行

<!-- 以下のように書き換わる -->
・・・前行

&nbsp

・・・後行

・・・前行

・・・後行

・・・前行

&nbsp

・・・後行

実質的にファイルの中にcanvas要素のみがあることは稀なので、問題となるのは上記の”<canvas></canvas>の前後に空行がある場合”となる。

canvasが消えない条件

canvasが消えない条件は、上の「canvasが消える条件」の裏返しも含めて以下のようになる。

ケース1：開始タグと終了タグの間に文字があること

開始タグと終了タグの間に文字があれば、周辺条件がどうであってもcanvas要素は消えない。

canvas要素非対応のブラウザ対応のために、この方針をとることには意義がある。

ただし、間にある文字がスペースだけの場合は意味がなく、開始タグと終了タグが連続している場合と同様の結果になる。

<!-- 以下のようにすると、前後に空行があっても消えない -->

<canvas>a</canvas>

ケース2：開始タグと終了タグの間で改行されていること

開始タグと終了タグの間で改行されていれば、周辺状況がどうであってもcanvas要素は消えない。

canvas要素内に文を書かない場合は、簡易な一つの解決策。

ただし、開始タグと終了タグの間に空行が入っている場合は結果は複雑で、要素全体が消えたり、いずれかのタグだけが消えたりと結果は複雑になる。

<!-- 以下のようにしても、canvas要素は消えない -->

<canvas>
</canvas>

</canvas>

ケース3：前後に空行がないこと

前後に行があれば(どちらも空行でなければ)開始タグと終了タグが連続していてもcanvas要素は消えない。

ただし、確実にこの記述方法に拠ることを担保しがたい。

<!-- 前後が空行でなければcanvas要素は消えない -->
preceding line
<canvas></canvas>
succeeding line

preceding line

succeeding line

結論

以下の2つのうちいずれかを推奨。

開始タグと終了タグの間にcanvas非対応用の文を書く
開始タグ<canvas>の後で改行し、すぐ次の行に終了タグ</canvas>を書く

Windows – 透過色の図形

2016-07-19 / tau / コメントする

Windowsで透過色を含んだpngやgifファイルを作成するのに、同梱アプリケーションの「ペイント」では、疑似的にしか再現できない。

ネット上で調べると、以下のような方法があることがわかったので記録。

「ペイント」などで図形を描いて保存(pngやgifで）
図形ファイルをExcelで読み込み
「書式」→「色の変更」→「透過色を指定」
透過色に変更したい色の部分をクリック
web形式で保存し、必要なファイルを取り出す

CoffeeScript – パッケージ管理

2016-07-11 / tau / コメントする

パッケージ化の方法について

簡単な方法～齟齬あり

クラス／オブジェクトのプロパティにする

クラスやオブジェクトをパッケージの名前とし、パッケージ内のクラスなどはそのプロパティとして定義する。

ただしこの方法は、最適とは言えない。

# Package 1
class Pack1

class MyClass
  constructor: -> @name = "P1-MyClass"

Pack1.MyClass = MyClass

#Package 2
Pack2 = {}

# not in package
class MyClass
  constructor: -> @name = "P2-MyClass"

Pack2.MyClass = MyClass

ins1 = new Pack1.MyClass()
ins2 = new Pack2.MyClass()
ins3 = new MyClass()

console.log(ins1.name) # P1-MyClass
console.log(ins2.name) # P2-MyClass
console.log(ins3.name) # P2-MyClass

# Package 1

class Pack1

class MyClass

constructor: -> @name = "P1-MyClass"

Pack1.MyClass = MyClass

#Package 2

Pack2 = {}

# not in package

class MyClass

constructor: -> @name = "P2-MyClass"

Pack2.MyClass = MyClass

ins1 = new Pack1.MyClass()

ins2 = new Pack2.MyClass()

ins3 = new MyClass()

console.log(ins1.name) # P1-MyClass

console.log(ins2.name) # P2-MyClass

console.log(ins3.name) # P2-MyClass

1行目で名前空間に用いるクラスを定義し、7行目でMyClassをPack1のプロパティとしている。

10行目で名前空間に用いるオブジェクトを定義し、16行目でMyClassPack2のプロパティとしている。

20行目でMyClass単独を用いた場合、直前に13行で定義されたMyClassが参照される。

パッケージ内での名前参照の祖語

パッケージ間で名前が重複する場合、下手をすると想定外のオブジェクトが使われてしまう。

次の例は、Pack1とPack2の2つのパッケージで同じクラス名を使い、各パッケージの中ではパッケージ名なしで使おうとしたもの。

class Pack1

class InnerClass
  constructor: -> @name = "P1-Inner"

class MyClass
  constructor: ->
    @name = "P1-MyClass"
    @inner = new InnerClass()

Pack1.MyClass = MyClass

Pack2 = {}

class InnerClass
  constructor: -> @name = "P2-Inner"

class MyClass
  constructor: ->
    @name = "P2-MyClass"
    @inner = new InnerClass()

Pack2.MyClass = MyClass

ins1 = new Pack1.MyClass()
ins2 = new Pack2.MyClass()

console.log(ins1.name)       # P1-MyClass
console.log(ins1.inner.name) # P2-Inner!!
console.log(ins2.name)       # P2-MyClass
console.log(ins2.inner.name) # P2-Inner

class Pack1

class InnerClass

constructor: -> @name = "P1-Inner"

class MyClass

constructor: ->

@name = "P1-MyClass"

@inner = new InnerClass()

Pack1.MyClass = MyClass

Pack2 = {}

class InnerClass

constructor: -> @name = "P2-Inner"

class MyClass

constructor: ->

@name = "P2-MyClass"

@inner = new InnerClass()

Pack2.MyClass = MyClass

ins1 = new Pack1.MyClass()

ins2 = new Pack2.MyClass()

console.log(ins1.name) # P1-MyClass

console.log(ins1.inner.name) # P2-Inner!!

console.log(ins2.name) # P2-MyClass

console.log(ins2.inner.name) # P2-Inner

ところが29行目で、Pack1のクラスのはずのところがInnerClassにはPack2のものが使われてしまっている。

これは、25行目以降の実行文の前にグローバル変数InnerClassの内容がPack1のものからPack2のものへと上書き定義されたため。

結局この方法だと、各パッケージの中でもクラス名の前にパッケージ名をつけないといけないようで、コーディング上は元のクラス名に識別子を組み込むのとあまり変わらない。

有効な方法～即時実行関数

先の方法は、すべてグローバル領域で行われていたため、パッケージ内でのみ参照するクラスも上書きされてしまった。

そこで、パッケージごとに即時実行される無名関数で括ってみる。

Package1 = {}

do ->
  class InnerClass
    constructor: -> @name = "P1-Inner"

  class MyClass
    constructor: ->
      @name = "P1-Class"
      @inner = new InnerClass()

  Package1.MyClass = MyClass

Package2 = {}

do ->
  class InnerClass
    constructor: -> @name = "P2-Inner"

  class MyClass
    constructor: ->
      @name = "P2-Class"
      @inner = new InnerClass()

  Package2.MyClass = MyClass

ins1 = new Package1.MyClass()
ins2 = new Package2.MyClass()

console.log(ins1.name)       # P1-Class
console.log(ins1.inner.name) # P1-Inner
console.log(ins2.name)       # P2-Class
console.log(ins2.inner.name) # P2-Inner

Package1 = {}

do ->

class InnerClass

constructor: -> @name = "P1-Inner"

class MyClass

constructor: ->

@name = "P1-Class"

@inner = new InnerClass()

Package1.MyClass = MyClass

Package2 = {}

do ->

class InnerClass

constructor: -> @name = "P2-Inner"

class MyClass

constructor: ->

@name = "P2-Class"

@inner = new InnerClass()

Package2.MyClass = MyClass

ins1 = new Package1.MyClass()

ins2 = new Package2.MyClass()

console.log(ins1.name) # P1-Class

console.log(ins1.inner.name) # P1-Inner

console.log(ins2.name) # P2-Class

console.log(ins2.inner.name) # P2-Inner

1行目のようにグローバル領域でパッケージ名に使うオブジェクト／クラスを定義し、パッケージごとに即時無名関数で括る。

パッケージ内ではパッケージなしでアクセスし、外からアクセスするときはパッケージ名を付してアクセス。

これで一応、パッケージ化とコーディングの簡易化を両立させることができる。

パッケージ名について

パッケージ名は、「世界規模での名前衝突を避ける」ように潔癖を極めるなら、Javaで行われているようなドメイン名管理が答となる。

com.taustation.game.MyClass

do ->
  class MyClass
    ...

com.taustation.game.MyClass

do ->

class MyClass

...

なお、Javaの場合はimport文で指定したパッケージはクラス名のみで使えるが、Javascriptではエイリアスを明示的に指定しなければならないらしい。

JavaScriptスタイルガイドでは、「長い型名をエイリアスし可読性を向上させる」ために以下のように示唆されている。

“ローカルのエイリアスを使うことで長い型名の可読性を向上できる場合はそうしてください. エイリアスの名前は型名の最後の部分にしてください.”

/**
 * @constructor
 */
some.long.namespace.MyClass = function() {
};

/**
 * @param {some.long.namespace.MyClass} a
 */
some.long.namespace.MyClass.staticHelper = function(a) {
  ...
};

myapp.main = function() {
  var MyClass = some.long.namespace.MyClass;
  var staticHelper = some.long.namespace.MyClass.staticHelper;
  staticHelper(new MyClass());
};

/**

* @constructor

some.long.namespace.MyClass = function() {

};

/**

* @param {some.long.namespace.MyClass} a

some.long.namespace.MyClass.staticHelper = function(a) {

...

};

myapp.main = function() {

var MyClass = some.long.namespace.MyClass;

var staticHelper = some.long.namespace.MyClass.staticHelper;

staticHelper(new MyClass());

};

なお、npmのサイトでいろいろなパッケージを見てみると、区切りにはアンダースコア(_)ではなくマイナス(-)を使っている。

CoffeeScript – タイマ

2016-07-10 / tau / コメントする

setInterval

setInterval()関数の引数に、アニメーションフレームを描画する関数と時間間隔を指定する。時間間隔はミリ秒単位。

描画の開始／停止をコントロールするには、setInterval()関数の戻り値を変数に保存しておき、停止するときにclearInterval()関数の引数でその変数を指定する。

timer = setInterval(drawFunction(), intervalInMilliSeconds)

clearInterval(timer)

timer = setInterval(drawFunction(), intervalInMilliSeconds)

clearInterval(timer)

一時停止／再開の機能は特に実装されていないが、描画関数を工夫することで可能。

描画関数を、以下のように無名関数で書くこともできる。

timer = setInterval ->
  複数行の処理
  return
, interval

timer = setInterval ->

複数行の処理

return

, interval

この処理を他のオブジェクトのメソッドの中に書いて、オブジェクトのプロパティを利用する場合は、1行目のアローをファットアロー(=>)にする。

CoffeeScript – クラスのメソッド

2016-07-03 / tau / コメントする

アクセス可能性

以下のコードで、クラスの関数へのアクセス可能性を確認する。

class Person
  method1: -> console.log("method1")
  @method2: -> console.log("method2")
  method3 = -> console.log("method3")
  @method4 = -> console.log("method4")

  method: ->
    # method1() # Error, is not defined
    # method2() # Error, is not defined
    method3()   # method3
    # method4() # Error, is not defined

  method_a: ->
    @method1()   # method1
    # @method2() # Error, is not a function
    # @method3() # Error, is not a function
    # @method4() # Error, is not a function

# Person.method1() # Error, is not a function
Person.method2()   # method2
# Person.method3() # Error, is not a function
Person.method4()   # method4

console.log()
john = new Person()
john.method1()   # method1
# john.method2() # Error, is not a function
# john.method3() # Error, is not a function
# john.method4() # Error, is not a function

console.log()
john.method()

console.log()
john.method_a()

class Person

method1: -> console.log("method1")

@method2: -> console.log("method2")

method3 = -> console.log("method3")

@method4 = -> console.log("method4")

method: ->

# method1() # Error, is not defined

# method2() # Error, is not defined

method3() # method3

# method4() # Error, is not defined

method_a: ->

@method1() # method1

# @method2() # Error, is not a function

# @method3() # Error, is not a function

# @method4() # Error, is not a function

# Person.method1() # Error, is not a function

Person.method2() # method2

# Person.method3() # Error, is not a function

Person.method4() # method4

console.log()

john = new Person()

john.method1() # method1

# john.method2() # Error, is not a function

# john.method3() # Error, is not a function

# john.method4() # Error, is not a function

console.log()

john.method()

console.log()

john.method_a()

各関数へのアクセス可能性は以下の通り。

定義＼引用	クラス	インスタンス	メソッド内 (@なし)	メソッド内 (@つき)
`fnc: ->`	TypeError	○	ReffError	○
`@fnc: ->`	○	TypeError	ReffError	TypeError
`fnc = ->`	TypeError	TypeError	○	TypeError
`@fnc = ->`	○	TypeError	ReffError	TypeError

なお、上記コードの定義部分のJavaScriptコンパイル結果は以下の通り。

(function() {
  var Person, john;

  Person = (function() {
    var method3;

    function Person() {}

    Person.prototype.method1 = function() {
      return console.log("method1");
    };

    Person.method2 = function() {
      return console.log("method2");
    };

    method3 = function() {
      return console.log("method3");
    };

    Person.method4 = function() {
      return console.log("method4");
    };

(function() {

var Person, john;

Person = (function() {

var method3;

function Person() {}

Person.prototype.method1 = function() {

return console.log("method1");

};

Person.method2 = function() {

return console.log("method2");

};

method3 = function() {

return console.log("method3");

};

Person.method4 = function() {

return console.log("method4");

};

クラス・メソッド

クラス内で@つきでメソッドを定義すると、クラスメソッドになる。

class MyClass
  @method1: -> console.log("method1")
  @method2 = -> console.log("method2")

class MyClass

@method1: -> console.log("method1")

@method2 = -> console.log("method2")

上記のいずれもJavaScriptへのコンパイル結果は同じになる。

  Person = (function() {

    function Person() {}

    Person.method1 = function() {
      return console.log("method1");
    };

    Person.method2 = function() {
      return console.log("method2");
    };

Person = (function() {

function Person() {}

Person.method1 = function() {

return console.log("method1");

};

Person.method2 = function() {

return console.log("method2");

};

クラスメソッドは、クラス内で呼び出すときでもクラス名をつける。

class MyClass
  @classMethod: -> console.log("Public Static")
  instanceMethod: ->
    console.log("Instance Method calling...")
    MyClass.classMethod()

MyClass.classMethod()
myObj = new MyClass()
myObj.instanceMethod()

# 実行結果
# Public Static
# Instance Method calling...
# Public Static

class MyClass

@classMethod: -> console.log("Public Static")

instanceMethod: ->

console.log("Instance Method calling...")

MyClass.classMethod()

myObj = new MyClass()

myObj.instanceMethod()

# 実行結果

# Public Static

# Instance Method calling...

# Public Static

publicなインスタンス・メソッド

最も多く用いる形で、クラス内でコロン(:)によって関数を定義すると、インスタンス・メソッドになる。

class MyClass
  method: -> console.log("method")

1 2	class MyClass method: -> console.log("method")

JavaScriptへのコンパイル結果では、prototype宣言されている。

(function() {
  var MyClass;

  MyClass = (function() {

    function MyClass() {}

    MyClass.prototype.method = function() {
      return console.log("method");
    };

(function() {

var MyClass;

MyClass = (function() {

function MyClass() {}

MyClass.prototype.method = function() {

return console.log("method");

};

同じクラスのメソッド内で呼び出すときは、@つきで。

class MyClass
  method1: -> console.log("metod1")
  method2: ->
    console.log("method2 calling...")
    @method1()

myObj = new MyClass()
myObj.method2()

# 実行結果
# method2 calling...
# metod1

class MyClass

method1: -> console.log("metod1")

method2: ->

console.log("method2 calling...")

@method1()

myObj = new MyClass()

myObj.method2()

# 実行結果

# method2 calling...

# metod1

privateなクラス・メソッド

クラス内でfnc = ->のように定義すると、クラスの外からは見えないprivateなメソッドになる。

class MyClass
  publicMethod: ->
    console.log("Public Method calling...")
    privateMethod()

  privateMethod = ->
    console.log("Private Method")

myObj = new MyClass()
myObj.publicMethod()
# myObj.privateMethod() # Type Error: is not a function

# 実行結果
# Public Method calling...
# Private Method

class MyClass

publicMethod: ->

console.log("Public Method calling...")

privateMethod()

privateMethod = ->

console.log("Private Method")

myObj = new MyClass()

myObj.publicMethod()

# myObj.privateMethod() # Type Error: is not a function

# 実行結果

# Public Method calling...

# Private Method

JavaScriptコードでは、クラス内のスコープで宣言されており、外からは見えない。

  MyClass = (function() {
    var privateMethod;

    function MyClass() {}

    MyClass.prototype.publicMethod = function() {
      console.log("Public Method calling...");
      return privateMethod();
    };

    privateMethod = function() {
      return console.log("Private Method");
    };

    return MyClass;

  })();

MyClass = (function() {

var privateMethod;

function MyClass() {}

MyClass.prototype.publicMethod = function() {

console.log("Public Method calling...");

return privateMethod();

};

privateMethod = function() {

return console.log("Private Method");

};

return MyClass;

})();

CoffeeScript – クラスのプロパティ

2016-07-03 / tau / コメントする

アクセス可能性

以下のコードで、クラスに関する変数へのアクセス可能性を確認する。

class Person
  member1 = 1
  @meber2 = 2
  member3: 3
  @member4: 4

  constructor: ->
    member5 = 5
    @member6 = 6

  dispMember1: ->
    console.log(member1) # 1
    # console.log(member2) # Error, not defined
    # console.log(member3) # Error, not defined
    # console.log(member4) # Error, not defined
    # console.log(member5) # Error, not defined
    # console.log(member6) # Error, not defined
    console.log("-----")

  dispMember2: ->
    console.log(@member1) # undefined
    console.log(@member2) # undefined
    console.log(@member3) # 3
    console.log(@member4) # undefined
    console.log(@member5) # undefined
    console.log(@member6) # 6
    console.log("-----")

john = new Person()

console.log(Person.member1) # undefined
console.log(Person.member2) # undefined
console.log(Person.member3) # undefined
console.log(Person.member4) # 4
console.log(Person.member5) # undefined
console.log(Person.member6) # undefined
console.log("-----")

console.log(john.member1) # undefined
console.log(john.member2) # undefined
console.log(john.member3) # 3
console.log(john.member4) # undefined
console.log(john.member5) # undefined
console.log(john.member6) # 6
console.log("-----")

john.dispMember1()

john.dispMember2()

class Person

member1 = 1

@meber2 = 2

member3: 3

@member4: 4

constructor: ->

member5 = 5

@member6 = 6

dispMember1: ->

console.log(member1) # 1

# console.log(member2) # Error, not defined

# console.log(member3) # Error, not defined

# console.log(member4) # Error, not defined

# console.log(member5) # Error, not defined

# console.log(member6) # Error, not defined

console.log("-----")

dispMember2: ->

console.log(@member1) # undefined

console.log(@member2) # undefined

console.log(@member3) # 3

console.log(@member4) # undefined

console.log(@member5) # undefined

console.log(@member6) # 6

console.log("-----")

john = new Person()

console.log(Person.member1) # undefined

console.log(Person.member2) # undefined

console.log(Person.member3) # undefined

console.log(Person.member4) # 4

console.log(Person.member5) # undefined

console.log(Person.member6) # undefined

console.log("-----")

console.log(john.member1) # undefined

console.log(john.member2) # undefined

console.log(john.member3) # 3

console.log(john.member4) # undefined

console.log(john.member5) # undefined

console.log(john.member6) # 6

console.log("-----")

john.dispMember1()

john.dispMember2()

各変数へのアクセス可能性は以下の通り。

定義＼引用		クラス	インスタンス	メソッド内 (@なし)	メソッド内 (@つき)
クラス直下	`v=val`	undef	undef	○	undef
	`@v=val`	undef	undef	RefError	undef
	`v:val`	undef	○	RefError	○
	`@v:val`	○	undef	RefError	undef
コンストラクタ	`v=val`	undef	undef	RefError	undef
コンストラクタ	`@v=val`	undef	○	RefError	○

この表から、以下のように整理できる。特にpublicなインスタンス・プロパティとstaticなクラス・プロパティを使っていくことになる。

クラス直下で`@v:val`定義	staticなクラス・プロパティ
クラス直下で`v:val`	publicなインスタンス・プロパティ
コンストラクタで`@v=val`	publicなインスタンス・プロパティ
クラス直下で`v=va`l	privateなクラス・プロパティ

なお、定義部分のJavaScriptへのコンパイル結果は以下の通り。

// Generated by CoffeeScript 1.10.0
(function() {
  var Person;

  Person = (function() {
    var member1;

    member1 = 1;

    Person.meber2 = 2;

    Person.prototype.member3 = 3;

    Person.member4 = 4;

    function Person() {
      var member5;
      member5 = 5;
      this.member6 = 6;
    }

    return Person;

  })();

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

var Person;

Person = (function() {

var member1;

member1 = 1;

Person.meber2 = 2;

Person.prototype.member3 = 3;

Person.member4 = 4;

function Person() {

var member5;

member5 = 5;

this.member6 = 6;

}

return Person;

})();

}).call(this);

クラス・プロパティ

クラス直下で@v:valでプロパティを定義する場合、プロパティはクラスに一つの共有のものとして扱われる。コンパイルされたJavaScriptコードでは正に”[クラス名].[プロパティ名]“となっている

インスタンスの中から参照する場合も、[クラス名].[プロパティ名]で参照する。

class Person
  @member: 1

  dispMember: ->
    console.log(Person.member)

john = new Person()

console.log(Person.member) # 1
john.dispMember()          # 1
Person.member++
console.log(Person.member) # 2
john.dispMember()          # 2

class Person

@member: 1

dispMember: ->

console.log(Person.member)

john = new Person()

console.log(Person.member) # 1

john.dispMember() # 1

Person.member++

console.log(Person.member) # 2

john.dispMember() # 2

publicなインスタンス・プロパティ

クラス直下でv:valと定義した場合とコンストラクタで@v=valと定義した場合は、いずれもインスタンス・プロパティとして扱われる。

class Person
  member1: 1

  constructor: ->
    @member2 = 2

  dispMember: ->
    console.log(@member1)
    console.log(@member2)

john = new Person()
luice = new Person()

console.log("--John--")
console.log(john.member1) # 1
console.log(john.member2) # 2
console.log("--Luice--")
console.log(john.member1) # 1
console.log(john.member2) # 2

john.member1 *= 10
john.member2 *= 10

console.log("--John--")
john.dispMember()
# 10
# 20
console.log("--Luice--")
luice.dispMember()
# 1
# 2

class Person

member1: 1

constructor: ->

@member2 = 2

dispMember: ->

console.log(@member1)

console.log(@member2)

john = new Person()

luice = new Person()

console.log("--John--")

console.log(john.member1) # 1

console.log(john.member2) # 2

console.log("--Luice--")

console.log(john.member1) # 1

console.log(john.member2) # 2

john.member1 *= 10

john.member2 *= 10

console.log("--John--")

john.dispMember()

# 10

# 20

console.log("--Luice--")

luice.dispMember()

# 1

# 2

挙動としては同じなのでどちらでもよさそうだが、インスタンス・プロパティとしてはコンストラクタで定義する形式の方がよいと考えた。

以下のように、それぞれの定義方法でJavaScriptのコードが異なるが、メソッドのようにクラス内で共通化したい場合はprototypeがよいが、そもそもインスタンスごとに異なる値をとることを想定しているプロパティの場合は、thisによる定義の方が意味に即している。

class Person
  member1: 1
　# JavaSceiptでは、Personクラスの定義の冒頭で
  # "Person.prototype.member1 = 1"と定義される。

  constructor: ->
    @member2 = 2
    # JavaScriptでは、Person()コンストラクタの中で
    # "this.member2 = 2"と定義される。

class Person

member1: 1

　# JavaSceiptでは、Personクラスの定義の冒頭で

# "Person.prototype.member1 = 1"と定義される。

constructor: ->

@member2 = 2

# JavaScriptでは、Person()コンストラクタの中で

# "this.member2 = 2"と定義される。

privateなクラス・プロパティ

クラス直下でv=valと定義すると、そのクラスの各インスタンスで共有されたprivateなプロパティになる。

class Person
  _member = 1

  getMember: ->
    return _member

  setMember: (m) ->
    _member = m

john = new Person()
luice = new Person()

console.log("--John--")
console.log(john._member)      # undefined
console.log(john.getMember())  # 1
console.log("--Luice--")
console.log(luice._member)     # undefined
console.log(luice.getMember()) # 1

console.log()
john.setMember(5)
console.log(john.getMember())  # 5
console.log(luice.getMember()) # 5

class Person

_member = 1

getMember: ->

return _member

setMember: (m) ->

_member = m

john = new Person()

luice = new Person()

console.log("--John--")

console.log(john._member) # undefined

console.log(john.getMember()) # 1

console.log("--Luice--")

console.log(luice._member) # undefined

console.log(luice.getMember()) # 1

console.log()

john.setMember(5)

console.log(john.getMember()) # 5

console.log(luice.getMember()) # 5

JavaScriptコードを見るとクラス宣言の最初でvar宣言されているため、クラス内スコープで外からは見えない変数となる。

  Person = (function() {
    var _member;

    function Person() {}

    _member = 1;

Person = (function() {

var _member;

function Person() {}

_member = 1;

CoffeeScript – jQueryによるINPUT要素の操作

2016-07-02 / tau / コメントする

jQueryによるINPUT要素の操作

ボタンのテスト

ここではボタン操作に対するイベントを確認している。

ボタンはinput要素のタイプの一つとして作成される。
ボタンが押された時のイベントはonclick属性で定義してもよいが、ここではそれを使わず、jQueryのハンドラで処理している。

<input type="button" id="btn_button" value="押してください" /><br />

1	<input type="button" id="btn_button" value="押してください" /><br />

ボタンが押下されたときのイベントは、(そのボタンが動的に後から追加されたものでなければ)click()で捕捉される。

  $("#btn_button").click ->
    alert("ボタンを押しましたね。")

1 2	$("#btn_button").click -> alert("ボタンを押しましたね。")

テキストボックスのテスト

入力：
出力：

ここではテキストボックスの内容の取得や書き込みについて確認している。

入力：<input type="text" id="txt_input" /><br />
出力：<input type="text" id="txt_output" /><br />
<input type="button" id="btn_text" value="コピー" />

入力：<input type="text" id="txt_input" /><br />

出力：<input type="text" id="txt_output" /><br />

テキストボックスの内容の取得や設定はval()メソッドで行う。

  $("#btn_text").click ->
    txt = $("#txt_input").val()
    $("#txt_output").val(txt)

$("#btn_text").click ->

txt = $("#txt_input").val()

$("#txt_output").val(txt)

チェックボックスのテスト

同意しますか？

チェックボックスの確認。

<p>
<label><input type="checkbox" id="chk_accept" value="accept" />同意しますか？</label>
</p>
<input type="button" id="btn_checkbox" value="決定">

<p>

<label><input type="checkbox" id="chk_accept" value="accept" />同意しますか？</label>

</p>

チェックボックスのチェック状態の取得には、prop()メソッドを用いる。

  $("#btn_checkbox").click ->
    if $("#chk_accept").prop("checked")
      alert("あなたは同意しました。")
    else
      alert("あなたは同意しませんでした。")

$("#btn_checkbox").click ->

if $("#chk_accept").prop("checked")

alert("あなたは同意しました。")

else

alert("あなたは同意しませんでした。")

ラジオボタンのテスト

通知エリア

One　Two　Three

Dog　Monkey　Pheasant

ラジオボタンの動作を確認している。ここでは選択状態が変わるごとにイベントが発生して、通知エリアの表示が変わる。

<div id="radio_notation">通知エリア</div>

<p>
<label><input type="radio" name="number" value="壱" onChange="onChangeNumber()" />One</label>
<label><input type="radio" name="number" value="弐" onChange="onChangeNumber()"checked="checked" />Two</label>
<label><input type="radio" name="number" value="参"onChange="onChangeNumber()" />Three</label>
</p>
<p>
<label><input type="radio" name="animal" id="dog" value="犬" />Dog</label>
<label><input type="radio" name="animal" id="monkey"value="猿" />Monkey</label>
<label><input type="radio" name="animal" id="pheasant" value="雉" checked="checked" />Pheasant</label>
</p>

<div id="radio_notation">通知エリア</div>

<p>

<label><input type="radio" name="number" value="参"onChange="onChangeNumber()" />Three</label>

</p>

<p>

<label><input type="radio" name="animal" id="monkey"value="猿" />Monkey</label>

<label><input type="radio" name="animal" id="pheasant" value="雉" checked="checked" />Pheasant</label>

</p>

上段はブラウザ側のonchange属性でイベントハンドラを指定し、下段はjQueryのハンドラを使っている。

  # ブラウザ側で定義したイベントハンドラ
  window.onChangeNumber = ->
    number = $("input[name=number]:checked").val()
    $("#radio_notation").html("#{number}番が選択されました")

  # jQuery側で準備されたイベントハンドラ
  $("input[name=animal]").change ->
    animal = $("input[name=animal]:checked").val()
    $("#radio_notation").html("#{animal}を連れていく")

# ブラウザ側で定義したイベントハンドラ

window.onChangeNumber = ->

number = $("input[name=number]:checked").val()

$("#radio_notation").html("#{number}番が選択されました")

# jQuery側で準備されたイベントハンドラ

$("input[name=animal]").change ->

animal = $("input[name=animal]:checked").val()

$("#radio_notation").html("#{animal}を連れていく")

セレクトボックスのテスト

通知エリア

セレクトボックス(ドロップダウンリスト)の例。

ボックス内の選択肢を選ぶたびに通知エリアの表示が変わる
“LONDONへ”ボタンを押すと、ロンドンが選択された状態になる。
“追加”ボタンで選択肢に”パリ”が追加され、”削除”ボタンで削除される

<div id="select_notation">通知エリア</div>

<select id="capital">
  <option value="Tokyo">東京</option>
  <option value="Washington D.C." selected>ワシントンDC</option>
  <option value="London">ロンドン</option>
</select><br />
<input type="button" id="btn_select" value="Londonへ"><br />
<input type="button" id="btn_select_append" value="追加"><br />
<input type="button" id="btn_select_delete" value="削除">

<div id="select_notation">通知エリア</div>

<option value="Washington D.C." selected>ワシントンDC</option>

</select><br />

セレクトボックスの状態変化のイベントは、change()メソッドで捕捉される。

“追加”と”削除”のボタンはprop()メソッドを使って選択状態をトグルさせているが、ページのテーマ／デザインによっては明確にはわからないことがある。

  appended = no

  capital = $("#capital").val()

  $("#select_notation").html("首都は#{capital}が選択されています")

  $("#capital").change ->
    capital = $(this).val()
    capitalText = $("#capital option:selected").text()
    $("#select_notation").html("首都が#{capital}=#{capitalText}に変更されました")

  $("#btn_select").click ->
    $("#capital").val("London")

  $("#btn_select_append").click ->
    $("#capital").append('<option value="Paris">パリ</option>')
    $("#btn_select_append").prop("disabled", true)
    $("#btn_select_delete").prop("disabled", false)

  $("#btn_select_delete").click ->
    $("#capital option[value='Paris']").remove()
    $("#btn_select_append").prop("disabled", false)
    $("#btn_select_delete").prop("disabled", true)

appended = no

capital = $("#capital").val()

$("#select_notation").html("首都は#{capital}が選択されています")

$("#capital").change ->

capital = $(this).val()

capitalText = $("#capital option:selected").text()

$("#select_notation").html("首都が#{capital}=#{capitalText}に変更されました")

$("#btn_select").click ->

$("#capital").val("London")

$("#btn_select_append").click ->

$("#capital").append('<option value="Paris">パリ</option>')

$("#btn_select_append").prop("disabled", true)

$("#btn_select_delete").prop("disabled", false)

$("#btn_select_delete").click ->

$("#capital option[value='Paris']").remove()

$("#btn_select_append").prop("disabled", false)

$("#btn_select_delete").prop("disabled", true)