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)

CoffeeScript – CSソースとJSコンパイル結果

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

概要

様々なソースに対するコンパイル結果。

クロージャと変数のスコープ

グローバルなし

グローバルのつもりでも、必ず無名関数で括られる。

a = 1

a = 1

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

  a = 1;

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

var a;

a = 1;

}).call(this);

変数の宣言位置

変数は、それが属する関数の先頭で必ずvar宣言される。つまり、各変数はそれが属する関数内のローカルスコープを持つ。

func = ->
  console.log("start")
  a = 1

b = 2

func = ->

console.log("start")

a = 1

b = 2

// Generated by CoffeeScript 1.10.0
(function() {
  var func, b;

  func = function() {
    var a;
    console.log("start");
    return a = 1;
  };

  b = 2;

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

var func, b;

func = function() {

var a;

console.log("start");

return a = 1;

};

b = 2;

}).call(this);

引数なしの無名関数によるクロージャ

->
  console.log("here")

1 2	-> console.log("here")

// Generated by CoffeeScript 1.10.0
(function() {
  (function() {
    return console.log("here");
  });

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

return console.log("here");

});

}).call(this);

引数ありの無名関数によるクロージャ

(x) ->
  console.log(x * 2)

1 2	(x) -> console.log(x * 2)

// Generated by CoffeeScript 1.10.0
(function() {
  (function(x) {
    return console.log(x * 2);
  });

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

(function(x) {

return console.log(x * 2);

});

}).call(this);

クロージャとdoの違い

->

do ->

do ->

// Generated by CoffeeScript 1.10.0
(function() {
  (function() {});

  (function() {})();

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

(function() {});

(function() {})();

}).call(this);

クラス

プロパティの宣言

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

  constructor: ->
    member5 = 5
    @member6 = 6

class Person

member1 = 1

@meber2 = 2

member3: 3

@member4: 4

constructor: ->

member5 = 5

@member6 = 6

// 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);

WordPressでjQueryを使う場合

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

WordPressにはもともとjQueryがビルトインされて読み込まれるので、headセクションで読み込むとかjQueryサイトから引っ張ってこなくても、すぐに使えるらしい。

ただ、”$”が他のエイリアスになっているらしく、常套句である以下の表現は使えない。

$ ->
  jQuery構文

1 2	$ -> jQuery構文

これに対しては、最初のclosureの部分だけを書き換えれば、その中では”jQuery”→”$”と通常の構文が使えるとのこと。

jQuery ($) ->
  $("bra bra...

1 2	jQuery ($) -> $("bra bra...

この際、headerセクションでjquery関係のファイルを読み込む必要はない。