使いやすいチャートライブラリ C3.js

JavaScriptでグラフやチャートを描画するライブラリは山ほどあるが、C3.jsがけっこう使いやすかった。 C3.jsは、D3.jsを利用(ラップ)したライブラリである。D3.jsは、データをグラフィカルに表現するための手法を提供してくれる。 D3.jsを利用した同様のライブラリは非常にたくさんある。ありすぎて困る。 筆者がC3.jsを選んだ決め手は、「出力結果のチャートがシンプル」「APIがシンプルで使いやすそう」だからである。 http://c3js.org/ リアルタイムで書き換えて確認できるベンリなWebサンプル C3.jsのサイト上のすべてのサンプルコードは、 »

Google Maps を Angular.js から使う

Angular.js に Google Maps を組み込んだ。Google Maps JavaScript API は、とてもシンプルで使いやすいAPI だった。このAPI にはいくつかのバージョンがあり、この記事を書いている時点では v3 が最新だが、ネット上にある how to のほとんどは、古い v2 が対象になっている。 今回は、 »

HTML5 シングルページパズル

HTML5でパズルゲームを作った。 クロマル パズル PCの場合はカーソルキーで操作できる。スマートフォンでも十字キーで動くようになっている。 裏側の話を少しすると、、、 内部ロジックはTypeScriptで実装しており、メインとなるViewはcanvasだ。 TypeScriptの練習のために、学生の頃Javaで書いたものを移植したのが原型JavaScript初心者だった頃に作ったので、けっこう汚い。とりあえず公開できる状態にした。 うーん、、やっぱりタッチスクリーンで十字キーは使いにくいなぁ。 »

今更 Underscore.js を使い出す

Underscore.js は、割りと古くからあるjsライブラリである。単体でも使えるし、backbone.js などが依存している事で知られている。筆者は普段、C#を使うが、LINQによって強力なコレクション処理が出来る。LINQに慣れると、LINQ無しでコレクション処理を行うのが大変辛い、中毒症状に陥るのだ。Underscore.js を使うと、コレクション処理によく使うものが関数化されているし、extendやらtemplateなどベンリ関数も用意される。jsでちょっと複雑なコレクション処理を書く必要が出てきたので、使ってみた。(ただし、LINQと使い勝手の比較はしてはいけない。VisualStudioとの組み合わせによる入力補完や、遅延実行は本当にパワフルだ) »

iOSのcanvasがめっちゃ重い!

iOSのsafariでcanvasの操作がめっちゃ重い!解決策。 具体的には、このような症状。 iOS6系 もともと、position:absolute; 指定している。left と top を、setInterval()にて細かく設定。(動いているように見せる) けっこう巨大なcanvasです 測定してみると、CSS への設定は一瞬で終わっておりボトルネックでは無いように見えるが、画面がカクカクする。 iPhone5 では全く問題無いが、iPad mini だけ激重・ »