javascriptのcanvas作成でやったくだらないミス

うわ
しばらくサボってたら2015終わるやん(´･ω･`)

タイトル通りなんてことはない話

通常javascriptでcanvasを描画する際は

    var canvas = document.createElement('canvas');
    canvas.width = 100;
    canvas.height = 100;
    var context = canvas.getContext('2d');
    context.font = "30px 'ＭＳ ゴシック'";
    context.textAlign = "left";
    context.textBaseline = "top";
    context.fillText("test", 0, 0);
    document.getElementById('canvas_target').appendChild(canvas);

単純にテキストを描画するだけのcanvas作成だが、
この width,heightは「数値で指定すること」というのがすっぽり抜け落ちてた、というだけの話。

なにをやったかというとオープンソースのライブラリをいじってた時、よくあるオプション設定中で

width: "480px"

とかやってるパラメータから流用しようと一生懸命引っ張ってきて設定しようとして
「あれれ〜？なんか設定されずにwidthが0になるぞ〜？(´･ω･`)」
とかアホ晒してたというだけ。
style属性に入るならよしなにやってくれるのに、直接width属性に当て込まれるせいかね…


久しぶりにjs触った結果起きたポカを晒して、ちゃんと書く習慣を取り戻したいというのが真の狙いだったりする(´･ω･`)

javascriptでもEnum型

以前javaのEnumをまとめたけど
javascriptでもやる機会があったので

javascriptでもEnum型

やり方は簡単.

var counter = {
    a: 0,
    b: 1,
    hoge: 10,
}

シンプル. これを呼びだすのも,

console.log("counter is " + counter.a);
// or
console.log("counter is " + counter["hoge"]);

なにがおいしいかって, 後から追加も楽なこと.
たとえば,

<div class=".hoge">
    <ul id="animal">
        <li></li>
        <li></li>
    </ul>
    <ul id="fish">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

なんていうのがあり, 各 ulの liを順番に表示, 非表示にするようなギャラリーが作りたい, なんて時. 順番に回すのはいいけれど, 今どれが表示されているのか管理したい！でもこの後 ulがどんどん増えて, counterに名前なんて付けてられない！なんて時. あるのかね(・ω・`)
.

$(".hoge ul").each(function(){
    var idName = $(this).attr("id");
    counter[idName] = 1;
});

だいたい想像はつくはず. これで,

    console.log(counter.animal);
    console.log(counter.fish);

でそれぞれのカウンターが用意される. 応用するといろいろできるはず！




ちなみに

window.location

なんてのもこれだったりする.

RECTの勘違い

ずっと勘違いしたまま何とかやってこれてしまったので

ここらで矯正

Rect()の範囲指定

特にGUIいじるときなんかに登場する, 四角形の範囲を宣言するクラス(?). 

Rect(x,y,width,height)

中の4つの引数で範囲を宣言するのだが, 何と混ざったか4つの引数を

左上(x0,y0)と右下(x1,y1)ととった四角形の2点

Rect(x0,y0,x1,y1)

でとるものとか勘違い.
正解は

Rect(x0,y0,x1-x0,y1-y0)

と左上の1点と幅高さで宣言するものとのこと.




どうしてこうなった…(・ω・`)

ClosureLinterによる静的解析

前回の続き.

コーディング規約どうしよう, というお話.
CheckStyleをjavascript用に作り直したりと, 手が無いこともないわけだが何より

時間がない

OTL

なので, 割と軽めに導入できるものを所望.
するとそこに現れたのが表題の, Closure Linter.
どうやらこいつは, Google先生が決めた規約にのっとったチェックをしてくれるツールらしい.
from GoogleDevelopers

条件反射で飛びついた自分の前に現れたのは, コマンドラインから起動されるClosureLinter.

ま た . b a t か よ ( ﾟдﾟ )

と反射的に考えてしまった自分はだいぶ.batに染まっているようですorz

何はともあれ使い方まとめ.

Ⅰ. Closure linter使い方 -準備編

1. Pythonで動きます. Python2.7.3.exeでPythonをインストールします.(Ver.2.7の理由は2. で)以降はデフォのディレクトリにインストールしたとします.
Python：http://python.org/download/ 自分のマシンに合ったものをどうぞ.
2. easy_installするためにsetuptools-0.6c11.win32-py2.7.exeを使用します.このsetuptools(ryが2.7を最後に更新されていないため, それ以降のPythonでは使えません.(1. の理由)
setuptools：http://pypi.python.org/pypi/setuptools Downloadsから
3. easy_installします. C:\Python27\Scriptsでcmdを起動します.パスを通しておくと楽かも.てゆうかbat使いたいなら通しておこう
4. easy_install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz と入力します. インストールが始まり, つらつらとメッセージが出てきます.
5. 準備完了

Ⅱ.　Closure linter使い方 -実行編

1. パスは通しておきましょう. 環境変数のpathの末尾に;C:\Python27\Scriptsを追加します.(cmdでpathと打ってみてちゃんと出てくることを確認しましょう.)
2. 早速解析しましょう. cmdを開き, gjslint 解析したい.jsのパス と入力します.
3. 成功していれば結果がコンソールに出ます.
4. パスのファイル名の部分を *.jsと置くと, そのディレクトリの.jsを順に全て解析してくれます.日本語にはならないみたいです(・ω・`)
5. 特別な.jsは他においておきましょう.一生懸命解析してダメだししてくれます. 正直鬱陶しいです. よけてくれる設定もあるらしいけど…

Ⅲ. Closure linter使い方 -.bat利用編

A. とりあえず修正するところを出力してくれるbat.

gjslint 解析したい.jsのパス > 結果を出力したい.txtなどへのパス

"解析したい.jsのパス"ディレクトリにある.jsを全てチェックし, その様子を"結果を出力したい.txtなどへのパス"に書き出してくれる. あくまで結果を教えてくれるだけ.直すのは自分で.(・д・`)
このままだと上書きするので, 過去ログ残したい！とか思うなら > を >> に置き換える. ファイル容量には注意. あくまで自己責任で.
ちなみに > はcmdのコマンド. Closure Linter とは関係ないので > 以下は無くてもOK. ただし結果がcmd上にしか出ないので出力してもらったほうが何かと便利.


B. コマンドで直せるものは直してもらうbat

copy  解析したい.jsのパス  C:\js_copy\ 
gjslint  解析したい.jsのパス  > 結果を出力したい.txtなどへのパス 
fixjsstyle 解析したい.jsのパス

1行目 とりあえず退避. "解析したい.jsのパス"にある全ての.jsをC:\js_copyにコピーする.
2行目 これは同じ. 解析結果の書き出し.
3行目 fixjsstyleのコマンドで, 直せるものは全部直してくれる. ただ改行とか空白とかは直してくれない. ; の打ち忘れなんかはやってくれる. あまり当てにしてはいけない.

なんかⅡとⅢを分ける必要なかった気がしたけど

まぁいっか+(・ω・0)*

Ⅳ. Closure linter使い方 -おまけ

http://www38.atwiki.jp/aias-jsstyleguide2/pages/1.html

→Closure linterがツッコミを入れる内容について書いてある. なにが突っ込まれるかチェックしたり, 突っ込まれた内容の確認にどうぞ

sinonを使ったjavascriptのテスト

前回でjavascriptの開発環境もできたので, いざコーディング！

･･･まではよかったのだが･･･

ここで課題が2つ.

1. テスト(特に通信系)どう書くの？

2. コーディング規約は？

とりあえず普通のテストはいいとして…通信…Mock？
とか調べてたら出てきたのが Sinon.js
ライブラリのように使え, いろいろと内蔵しているじゃじゃ馬
いろいろありすぎて手に負えませんorz

とりあえずjQuery.ajaxが使いたかったので, 有効そうな2つをピックアップ.

A. FakeServer
名前の通り偽者のサーバを立てる. 

var sinonTestCase = sinon.testCase({
    setUp : function() {
        this.server = sinon.fakeServer.create();
    },
    tearDown : function() {
        this.server.restore();
    },
    "test server":function () {
        this.server.respondWith("GET", "/some/article/comments.json",
                                [200, { "Content-Type": "application/json" },
                                 '[{ "id": 12, "comment": "Hey there" }]']);
        var callback = sinon.spy();
        jQuery.getJSON("/some/article/comments.json", callback);
        this.server.respond();
        sinon.assert.calledWith(callback, [{ id: 12, comment: "Hey there" }]);
    },
});

TestCase("Fakeserver test case", sinonTestCase); 

これで "Fakeserver test case" という名前のテストクラスが出来上がる.
setUp でfakeServerを立ち上げ
tearDown でその偽サーバを破棄している.
偽者とはいえ通信系, 破棄しておかないと特に通しのテストの時に…
"test server" がテストクラス名. 名前は test から始めないとテストとして認識されないので注意.
sinon.fakeServer.responsedWith で偽サーバのresponseの内容を決める.
sinon.spyは仮のcallback関数. これをテストしたい関数に組み込むことで, 後々sinon.assertが使えたりする. 詳しくはAPIで
server.respond() を呼ぶことでfakeServerが応答し, 先に設定したresponseを返す.

これにより, callbackにfakeServerからの応答が入る.

あとはsinon.assertを用いてきちんと応答が受け取れたことを確認する.


…すっごい不安だ('A`)

B. Stub
あるクラスの ある関数を 一時的に置き換える
stubのよるテスト例

var sinonTestCase = sinon.testCase({

    "test with stub" : function() {
        var json = [{"hoge":"hoge","foo":"foo","bar":"bar"},
        {"hoge2":"hoge2","foo2":"foo2","bar2":"bar2"},
        {"hoge3":"hoge3","foo3":"foo3","bar3":"bar3"}];

        var stub = sinon.stub(jQuery, "ajax");
      stub.yieldsTo("success", json);
  
        jQuery.ajax({
            success: function (data) {
                assertEquals(json, data);
            }
        });
       stub.restore();
    }
});

TestCase("Stub test case", sinonTestCase);

こちらは"Stub test case"クラス.
8行目にてstubを作成, 9行目にてjQuery.ajaxというメソッドの返り値を指定している.
11行目から実際にテストしたいメソッドを呼び, 値をチェックする.

こっちのほうが使いやすい気はした(･`ω･´) (ｷﾘｯ
restore()は忘れずに.(setUp&tearDownに入れたほうがいい気がした(^ω^；).

参考：SinonAPI

明らかにAPIのが正しいのでそちらを参考に…


コーディング規約についてはまた後日…(・ω・)ノシ

aptana ~導入編~

ついにコーディング！javascript!щ(ﾟДﾟщ)


…java…script?('A`)


orz


まぁ嘆いていても仕方ないので. javascript開発のIDEにEclipseの弟？のAptanaを導入することに.
一緒にjavascriptのテストを行なう"JS Test Driver"を導入. 若干めんどくさいのでメモメモφ(・ω・ )




1. aptanaをインストール
2. eclipse同様help→Install New Softwareを選択
3. http://js-test-driver.googlecode.com/svn/update/から JS Test Driverインストール. JS Test Driver Plugin for Eclipse ひとつを選択. 複数選択するとNG(同じ名前をインストールしようとしてぶつかる？)

3. インストールが終わったら, 同様にWindow→Preferencesで設定を開く
4. JS Test Driverの項でブラウザ名にあわせて使うブラウザの.exeのパスを設定する.
5. Port to start server on のボックスに使用していないポートが設定してあることを確認する.

6. js(or src)ディレクトリにソースコードの.jsを置く
7. testディレクトリを作成, テストコードの.jsを置く
8. test(or conf)ディレクトリにテストの設定を書いた.confを置く

9. Run→Run Configurationsから実行の構成を開く
10. JS Test Driver Testの項をダブルクリックして新しい構成を作成
11. Projectに用いるプロジェクト名, Conf Fileに8. で置いた.confのパスを設定する
12. Run on Every Save にチェックを入れておくと保存するたびにテストが走ってくれるようになる
13. Commonは特にいじらなくていい

14. Window→ShowViewからJS Test DriverのViewを出しておく(無ければotherから選択)
15. View右上のStart Serverをクリックし, サーバを開始する.
16. Viewのグレーのアイコンの中から使いたいブラウザのアイコンをクリックし, 色がつくのを眺める. 色がつかない場合, 4. か15. をしていない/出来ていない恐れあり
17. 15. →16. の間でhttp://127.0.0.1:(ポート番号. デフォは42442)/captureが赤→黄→緑に変化するのを眺める

18. eclipse同様Run→JS Test Driver Test を選択する
19. +(・ω・0)*


6. 7. 8. については自由に構成できる…が, ソースコードに関してはjsディレクトリに置いておいたほうが, 他のツールを使う際に楽…かもしれない.

12. は便利そうで意外と鬱陶しいので注意. 自分は入れて数回で外した(・д・`)

また, 8. にある.confはテストを行なうポートやテスト対象の宣言, 使うプラグインの宣言を行なうファイル. これを読み込んでテストを実行する重要なファイル.


ex>

server: http://localhost:42442

load:
  - js/vendor/jquery-1.7.2.js
  - js/*.js

test:
  - js/vendor/sinon-1.4.2.js
  - js/vendor/sinolog.js
  - test/*.js

a. server: http://localhost:42442
テスト時に使うポートの指定. 上でちょくちょく出てくるテストの設定と同じにすること

b. load: - ソースのパス
ワンセットっぽい. ファイル名を指定してやるとそれだけを見に行ってくれる.
ディレクトリ分けを行い, *(ワイルドカード)を使うとはかどる

c. test: - テストのパス
テスト対象らしい. ここに名前を連ねておくとテストしてくれる
ディレクトリ分けを(ry



タグ(load:など)の前にはスペースを入れると読み込みがうまくいきません('A`)



これで準備は完了. あとはTestCaseを書けばおｋ.

TestCaseの書き方参考: http://news.mynavi.jp/column/tool/013/index.html



…これでスタート地点に立ったわけだ…( ´_ゝ｀) =3