C84 技術情報誌 ぷれすと HTML5 + TypeScript でアイコンジェネレーター作成!

2014/05/13DevelopmentTypeScript

WP_20130812_002

コミケ84 2013/8/12 西き 38b「Applest」の技術情報誌 ぷれすと(表紙はプロ生ちゃん)に寄稿していた「HTML5 + TypeScript でアイコンジェネレーター作成!」を公開します。4ページしかない内容ですけど。

なぜ このタイミングかというと、誌面にコード場所の GitHub の URL を書いていたのだけど、今まで空のリポジトリがあるだけの状態だったのを、コミットしました!

記事 & コード

表示がきれいでないのでダウンロードしてみてください。元データも見当たらず、見本 PDF から抽出しました。

TypeScript でミニマムなアイコンジェネレーターのコードのつもりです。

class Canvas {
element: HTMLCanvasElement;
private context: CanvasRenderingContext2D;
constructor(element: HTMLCanvasElement) {
this.element = element;
this.context = element.getContext("2d");
}
drawImage(src: string) {
var img = new Image();
img.onload = () => {
this.context.drawImage(img, 0, 0, this.element.width, this.element.height);
};
img.src = src;
}
drawBackground(backColor: any) {
this.context.fillStyle = backColor;
this.context.fillRect(0, 0, this.element.width, this.element.height);
}
convertToImage(type: string = "image/png"): HTMLImageElement {
var img = new Image();
img.src = this.element.toDataURL(type);
return img;
}
}
window.onload = () => {
var c = new Canvas(<HTMLCanvasElement>document.getElementById("canvas"));
c.drawBackground("#c0ffee");
c.drawImage("images/character.png");
var btn = <HTMLButtonElement>document.getElementById("pattern1");
btn.onclick = () => {
c.drawBackground("#c0ffee");
c.drawImage("images/character.png");
};
var gen = <HTMLButtonElement>document.getElementById("gen");
gen.onclick = () => {
var result = c.convertToImage();
var div = <HTMLDivElement>document.getElementById("result");
if (div.childNodes.length > 0) {
div.removeChild(div.childNodes[0]);
}
div.appendChild(result);
};
};

view raw
gistfile1.ts
hosted with ❤ by GitHub

誌面では発展したコードが置いているように記載していますが、誌面通りに書くとできるコードのみです。元のコードもすぐ見当たらず記事を読みながら書きました。気付いた点は character のスペルミスがあるところぐらいでした。

Visual Studio から操作して GitHub と同期とったのだけど、うまくいかず一回リポジトリ消しました。簡単な操作については今後別の記事にしたい。

もっといろいろ機能を作ったアイコンジェネレーターがこちら。でも、JavaScript で書きました。

Windows 8/Windows Phone アプリ開発

同誌に掲載されている @daisuke_nomura 氏の「niconico Windows 8 アプリの通信を見てみよう」と C85 版の「Windows Phone で niconico 風のコメントを表示する」はきちんと改訂して公開されています。