かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

TypeScript

TypeScriptとAngularJSでボタンクリックしてみよう

ボタンクリックに反応するようにしてみました。やり方は簡単でボタン系のタグにng-click属性つけてやればいいみたいです。 コントローラとスコープのコードは以下のような感じ。 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> module MyApp { interface GreetScope extends ng.IScope { message: str</reference>…

TypeScript + AngularJSのHelloWorldしてみた

何事もHelloWorldみたいなのから。HelloWorldといっても、モジュールとスコープとコントローラ使う感じで。 プロジェクト 以下のライブラリをNuGetから突っ込みます。 angularjs angularjs.TypeScript.DefinitelyTyped スコープの定義 とりあえず、挨拶用の…

TypeScript + AngularJSでTodoのサンプルを書いてみた

2014/05/25追記 こういう書き方も出来ると紹介してもらいました。 @okazuki $scopeのメソッドの型をFunctionにしたくない場合 URL こーゆー感じで書くとコピペで済む+型チェックの恩恵が受けられるのでよいと思います。2014-05-25 02:06:40 via twicli to @o…

x軸のラベルに改行を入れたい

まぁそんなこともあるってことで。 元データがyyyyMMddHHmmssみたいなデータでこれを… MM/dd HH:mm みたいにラベルに表示したいってときです。ぐぐったらstackoverflowに答えが。もとのラベル決して、tspanでテキスト区切って座標の調整が必要みたいです。 j…

d3.jsのコレクション操作系関数

いろいろあるんですね…。知らないと損しちゃう。 D3: Array methods : circumstance evidence 個人的に特に便利と感じたのはnest関数からのkeyやrollupです。keyがgroup byみたいなものでrollupがグルーピングしたものを集計する処理です。 画面用にこんなHT…

TypeScriptでthree.js

今日デブサミ2013 Day0に行ったんですが、デバイスとかセンサーで得た情報を視覚化するのって大事だなと思ったりしたんですが、自分にはその手段がないということに気付きました。3Dグラフィックとか現実をシミュレートするような基礎的な知識が何もない。 …

TypeScriptとd3.jsで折れ線グラフ描いてみた

ということで、これまでの練習の成果という感じで折れ線グラフを1つ描いてみた。 TypeScriptとd3.js - かずきのBlog@hatena TypeScriptとd3.jsでグラフ描こうぞ - かずきのBlog@hatena TypeScriptとd3.jsでグラフを描こうぞ 2 - かずきのBlog@hatena 点と線 …

TypeScriptとd3.jsでグラフを描こうぞ 2

下の続き。 TypeScriptとd3.jsでグラフ描こうぞ - かずきのBlog@hatena y方向の値の調整 パソコンとかの描画関係のAPIの座標系は左上が0,0なのが一般的です。svgも例にもれず。でも、グラフの座標は左下が0,0だったりしますよね。ということで、y座標のスケ…

TypeScriptとd3.jsでグラフ描こうぞ

昨日の続きです。 TypeScriptとd3.js - かずきのBlog@hatena d3.jsで線を引きたい 基本的にSVGでやるのでpathを使うことになります。でもPathの書式が変態!!(XAMLとかもそうですけど、あんまり手書きするものではないですよね…) path要素の解説-SVG学習辞典…

TypeScriptとd3.js

グラフ描きたい・・・!Webで(詰んだ) HTML苦手 CSS苦手 JavaScript苦手 d3.js 苦手といっても何か使えるものはないか?ということで、探してみたのがd3.js。こいつjQueryみたいなセレクタで要素を選択したりもできるし、グラフ描いたりもできるとは…。素…