仕事が多すぎて日曜日までずれ込んだ。まだ動かしていないけど、今日はここまで。

/// <reference path="scripts/typings/easeljs/easeljs.d.ts" />
module SHChart {
export class CandleStick implements GraphElement {
//ローソク本体
private body: createjs.Shape;
//上ヒゲ
private uShadow: createjs.Shape;
//下ヒゲ
private lShadow: createjs.Shape;
//陽線か？
private isYang: boolean;
constructor(public date: Date, public open: number, public high: number, public low: number, public close: number) {
this.isYang = open < close;
}
public getMax(): number {
return this.high;
}
public getMin(): number {
return this.low;
}
public paint(stage: createjs.Stage, min: number, max: number, x: number, width: number, xmin: number, xmax: number, ymin: number, ymax: number): void  {
//座標決定
//ToDo:0.8でいいのか？
var bodyWidth = width * 0.8;
var bodyXmin = x - width / 2;
var bodyXmax = x + width / 2;
var bodyYmin = ymin + (ymax - ymin) * ((max - (this.isYang ? this.close : this.open)) / (max - min));
var bodyYmax = ymin + (ymax - ymin) * ((max - (this.isYang ? this.open : this.close)) / (max - min));
var uShadowYmin = ymin + (ymax - ymin) * ((max - this.high) / (max - min));
var lShadowYmax = ymin + (ymax - ymin) * ((max - this.low) / (max - min));
//本体描画
var g: createjs.Graphics = new createjs.Graphics();
//ToDo:色の変更
g.beginStroke("#000000");
if (!this.isYang) g.beginFill("#000000");
g.drawEllipse(bodyXmin, bodyYmin, bodyXmax - bodyXmin, bodyYmax - bodyYmin);
this.body = new createjs.Shape(g);
stage.addChild(this.body);
//ヒゲの描画
if (uShadowYmin < bodyYmin) {
g = new createjs.Graphics();
//ToDo:色の変更
g.beginStroke("#000000")
.moveTo(x, bodyYmin)
.lineTo(x, uShadowYmin)
.closePath();
this.uShadow = new createjs.Shape(g);
stage.addChild(this.uShadow);
}
if (lShadowYmax > bodyYmax) {
g = new createjs.Graphics();
//ToDo:色の変更
g.beginStroke("#000000")
.moveTo(x, bodyYmax)
.lineTo(x, lShadowYmax)
.closePath();
this.lShadow = new createjs.Shape(g);
stage.addChild(this.lShadow);
}
}
public drop(stage: createjs.Stage) {
if(this.body) stage.removeChild(this.body);
if(this.uShadow) stage.removeChild(this.uShadow);
if(this.lShadow) stage.removeChild(this.lShadow);
}
}
}

クラス図としては
Chart(canvas1枚に対応) ← ChartHandler(UI担当)

Graph(グラフ1本に対応)-固定要素、xy軸情報、マウスカーソルに対応する情報など

GraphElement(グラフの値1日分に対応) 派生：CandleStick, Bar, Line
という感じか？まだまだ、完成しそうにない。来週中には、UIは度外視してグラフくらいは描けるようになるかもしれない。
時間がかかっても自作にこだわる理由。他人が作ったグラフや指標、シグナルを使うのってなんか悔しいじゃない。自分に都合がいいように改良できなくてもどかしいし、他人と同じことをやってるんじゃだめでしょ？

Tweet

Visual Studio 2013でTypeScriptを使用して、ファイル分割して作成したアプリケーションを1ファイルにまとめるには、プロジェクトをwebアプリケーションとして作成した上で、
プロジェクト
→「”プロジェクト名”のプロパティ」を選択
→「TypeScript ビルド」セクションの「出力」の「JavaScript 出力をファイルに結合する」を選択し、出力したいファイル名(??????.js)を入力
→コンパイルすれば、プロジェクトファイルと同じフォルダに、jsファイルが作成されます。あとはこのファイルをお好きなhtmlファイルから呼び出してやればOK！
簡単な設定なのに、意外とここにたどり着くまで時間がかかった。。

Tweet

easeljs.d.ts を導入して、やったぜタイプセーフwebプログラミング始まる！と思っていたら、導入直後にコンパイルエラーが同時多発で48か所も発生した。

export class AlphaMapFilter extends Filter {
constructor(alphaMap: HTMLImageElement | HTMLCanvasElement);
// properties
alphaMap: HTMLImageElement | HTMLCanvasElement;
// methods
clone(): AlphaMapFilter;
}

こういう | で結ばれたのがコンパイルエラーになる。で、このパイプで結ばれたプロパティはなんじゃらほい、見慣れた記号だしどっちの型でもいいってことじゃないかな、と思ってしばらく調べると、TypeScript1.4でサポートされたUnion typesという機能らしい。やはり、どっちの型でもよいという意味だった。VS2013はインストール時TypeScript1.0までしかサポートされていない。しかしつい最近、2015/01/17にアップデート用モジュールがリリースされていた！
TypeScript 1.4 for Visual Studio 2013 extension
インストールしたらコンパイルエラーが絶滅した。やった！
1.0からの大きな変更点は
・protectedのサポート
・tuple typesのサポート：var tuple: [number, string, boolean] = [1, “str”, true]; //こういう配列の型定義
・union typesのサポート：前述
・type aliasのサポート：declare type PropertyKey = string | number | Symbol; //PropertyKeyは3つのいずれかの型をとる
このくらいか。日々バージョンアップが繰り返されており、今後も目が離せない。

Tweet

Handbook – Welcome to TypeScript
を読んだ！！言語仕様は大まかに把握できたので、もう少しで実装に入れる。クラスベースでwebアプリケーションが作成できるなんて、夢のようだ。特に、プロジェクトが大きくなればなるほど、恩恵を受けられることだろう。d.tsファイルを揃えれば、有名どころのjsライブラリでも型セーフなプログラミングが可能、というところもすごい。
実装には北米Yahoo!Financeのチャートがとても参考になりそうだ。ほぼ、このグラフと同じ機能でいいのではないか。見た目が

Tweet