ただの日記： HTML5 Canvas に挑戦したった。

（別に技術的な内容ではない。ただの日記だ。成果をまとめてるといつまでたってもブログが書けないし、それは自分の役割でもない気がする。ただ、近頃はこんなことをして遊んでるというだけの話だ。最近は時間がとれないので、こういう形が増えそうな気がする）

太平洋戦争期の艦隊編成を年表みたいに表示できたらいいなと思って（こんなかんじ）、いろいろ頑張ってみた。

最初は div を position: absolute で配置していく感じにしたのだけど、データが複雑になるにつれて破綻していくように思えたので、Canvas に図を書くことにした。Canvas に書いちゃうとテキストにリンクが貼れないのがちょっとアレだけど、それはそれで仕方ない。

とりあえず線を引くとこから始めて、半日後にはこんな感じに成長した。HTML5 Canvas は割りと低レベルな API っぽくて、線を一本引くだけでもダルい。みんなどうやっているんだろう。なんかラッパーを書くのかな？　ライブラリを使うのかな？

まぁ、それはともかく。

最初はグラフとデータが一体化していたのだけど（1941年12月8日は x px に、1945年8月15日は y px にマッピングしてそれを線で結ぶ、とかとか）、JavaScript に慣れるにしたがって少しずつ分けていった。そのデータも、最初は

var events = [];
events.push(new Event("1941/12/08", "開戦時編成"));
events.push(new Event("1943/7/1", "解体"));
events.push(new Event("1944/8/15", "再建"));
events.push(new Event("1945/2/10", "解体"));
events.push(new Event("1945/8/15", "終戦"));

みたいな糞ダサいコードで用意していたのだけど（とりあえず動いてくれ！！）、最後には

var model = {
"fleetEvents": [
{ "date": "1944/11/15", "title": "再編" },
{ "date": "1945/1/1", "title": "再編" },
{ "date": "1945/1/20", "title": "再編" },
{ "date": "1945/5/6", "title": "解体" },
],
"warEvents": [
{ "date": "1941/12/08", "title": "開戦" },
{ "date": "1942/2/27", "title": "スラバヤ沖海戦" },
{ "date": "1942/6/5", "title": "ミッドウェー海戦" },
{ "date": "1944/10/25", "title": "サマール沖海戦" },
{ "date": "1945/8/15", "title": "終戦" },
],
"ships": [
{
"name": "妙高",
"comm": "1929/7/31",
"lost": "1946/7/8",
"join": "1941/12/08",
"left": "1945/1/20",
"beforeJoin": "開戦時在籍",
"afterLeft": "第一南遣艦隊付属",
"damaged": [
{ "date": "1944/12/13", "title": "大破" }
]
},

みたいな JSON データを読み込む感じにできた。これで、こんな JSON を返すサーバーを作れば動的にグラフが書けるハズ（今度はどうやってサーバーを書けばいいかわからん。Dapper で少し考えてみたけど、自分は結合とかよくわかってないから SQL だけでサクッと書けない。まぁ、C# で書けばいいのか）。

最初のスクリーンショットは第二駆逐艦のデータを使ったけど、次は同じプレゼンテーションコードに第五戦隊のデータをぶち込んでみた。テキストが被りまくってるのを除けば、だいたいうまくできてる（ってことは、ちゃんとデータとビューが分離できたってことなのかな？）。あとは measureText() でちゃんとテキストの大きさを図って、ずらして描画していけばいいはず。

ちょっと JavaScript が楽しくなってきた。いまだに文法あんまり覚えてなくて、細かいところでハマって時間を浪費しているけれど、これから先 C# しかわかんないのもどうかと思うので頑張る。