2013-01-23

JavaScriptで数値のゼロパディング（一定の桁数にゼロ埋めする）

f:id:eiji_sm:20130123123129p:plain

ifやlengthで泥臭い実装を何箇所かでやってしまっていたので、もっとスマートにできないかと調べたら、以下のコードでいけるみたい。

("0" + num).slice(-2)

strObj.slice(start, end)
"0"を加える事で文字列に変換し、sliceは負数を引数として指定できる。
underscore.jsなどでもっとよさそうなメソッド無いか探してみたけど見当たらない。

他に良いパターンあれば教えて下さいまし。

2013-01-19

jQueryの$(document).onと$('section').onでは後者を推奨したいという話

JavaScript jQuery 雑記

f:id:eiji_sm:20130119231600p:plain

先日jQueryの1.9正式版が公開されて、.live()などのAPIが削除されました。

まぁ、ほとんどの方は既に.on()に乗り換えて使っているかとは思います。

その.on()メソッドですが、$(document).onと$('section').onでは前者の方が高速です。
ですが、例えばsection要素内のbuttonを指定したい場合、前者だと

$(document).on('eventName', 'section button', function () {});

後者だと

$('section').on('eventName', 'button', function () {});

となって、個人的にはすっきり書ける後者の方が好きなわけですよ。

後者の場合、さらにセレクタを $('.hoge', 'section').find('button').on といった感じで絞り込めて、使いやすい！。。と思うんだけど、世間的には前者が人気なのかな、オラよくわかんねえべ

2012-12-02

データビジュアライゼーションのためのJavaScriptライブラリ『D3.js』

JavaScript ビジュアライゼーション d3.js

f:id:eiji_sm:20121202193435j:plain

ビジュアライゼーションについて

大量のデータの中から価値のある情報を抽出する技術をデータマイニングと呼びますが、目で見ても理解し難いデータをぱっと見分かりやすい形に変える技術のことを可視化、あるいはデータビジュアライゼーションと呼びます。

ソーシャルメディアの影響で膨大な情報がネット上に溢れるようになり、ビジュアライゼーションに対する需要が世界的に高まっているのを肌で感じます。

D3.jsとは

D3.jsはデータビジュアライゼーション用の人気の高いJavaScriptライブラリの一つ。
D3.js
D3はData-Driven Documentsの略で、データに基づくドキュメント（HTML, CSS, SVGなど）の操作を行うためのライブラリ。

D3.jsでできること

データの可視化ができる。といってしまうと漠然的すぎるが、データを可視化するあらゆるグラフを作成可能。D3.jsがデフォルトでサポートしている図の形式もあるし、無いものでもD3を巧みに操れば、多種多様なビジュアラーゼーションが実現できる。
サンプルについては公式が充実しているのと、
Tributary
上記のような、ブラウザ上で作成、実行出来るサイトがあったりします。
そこでもサンプルが幾つかある。

サンプルコード

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.append("g").selectAll("path")
    .data(chord.groups)
  .enter().append("path")
    .style("fill", function(d) { return fill(d.index); })
    .style("stroke", function(d) { return fill(d.index); })
    .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
    .on("mouseover", fade(.1))
    .on("mouseout", fade(1));

細かなメソッドについては公式APIを参照してください。
API Reference
基本として、d3.select(*)、あるいはd3.selectAll(*)でDOMの指定を行います。
CSS セレクタを使用でき、以降のメソッドはd3のオブジェクトを返すため、メソッドチェーンで書いていくことができます。
このあたりの使用感はjQueryに近いので馴染みやすい人も多いはず。
DOMを指定したあと、data()メソッドでDOMにデータを紐付けます。（逆もできたりする）
そしてそのオブジェクトに対してattr()、style()といったメソッドでviewの部分を操作したり、on()メソッドでイベントハンドラの登録をしたりします。（このあたりはまた別記事書こうと思う）
d3.jsの性質上、dataとviewを紐付けて操作を行うのと、メソッドチェーンで細かい動作の指定ができるため、どうしてもコードが縦長になりがち。

コードの見通しを良くするために

・メソッドの中身を分割する
attr(), style()など、引数にオブジェクトでまとめて指定できるので、できるだけオブジェクトにまとめて、メソッドの外で設定をする。
・MVCを使う
Backbone.jsなどのMVC フレームワークを使い、できるだけModel（データ）と、View（DOM、attr、イベントハンドラ）を分離する。
・CoffeeScriptを使う
jQueryのようにコールバックを多用するライブラリのため、CoffeeScriptに限る必要はないですが、中間言語はコールバックを簡潔に書けるものが多いため、それを利用することもオススメ。

これらを用いてできるだけスマートなコードにしたい。
個々のTIPSはまた別記事で書いていく予定。

まとめ

Webアプリケーション制作の機会が増え、サーバとクライアントサイド間で扱うデータ操作の頻度がが増加し、そしてデータビジュアライゼーションを行う必要性が増しています。今後も増えていくでしょう。
以上、データの可視化を行う際の選択肢として、d3.jsの紹介記事でした。

2012-11-24

Google Chart Tools の Geochart API を使って都道府県別グラフを描画する

JavaScript 備忘録ビジュアライゼーション GoogleChartTools

可視化のためのJavascriptライブラリは数多くありますが、Google Chart Toolsは、googleが提供する可視化を実現するAPI群です。

Google Chart Tools

今回はその中から Geochart API を使ったサンプルとして、都道府県別グラフを描いてみました。

また、他にも様々なAPIが提供されているので、日本語の紹介、解説のエントリも多く存在しています。

Google Chart Toolsの基礎

簡単にグラフを作れる Google Chart Tools を使ってグラフを作成する方法

Google Chart Toolsを使ってサイトマップを描こう！

2012-11-20

jQueryUIでイベントの制御を行う

備忘録 JavaScript jQueryUI

f:id:eiji_sm:20121120202903j:plain

jQueryUIについて

jQueryUIには便利なUI操作のメソッドが用意されています。
ドラッグ&ドロップ、選択、リサイズ、ソートなどのマウスの挙動を扱うInteractions群や、アコーディオンやスライダー、ダイアログなどを扱うWidgets群が用意されており、いずれも簡単にインタラクティブなUIを実装することが可能です。

イベント制御

これらのメソッドには、オプションのオブジェクトを指定することも出来る。
細かなタイミングを制御するためのイベントもプロパティに登録されており、ほとんどのメソッドは、
Events: function (event, ui) { // 処理 }
の形で、様々なタイミングをサポートしている。
引数のuiには、メソッドの振る舞いで用いるjQueryオブジェクトのターゲットなどが格納されており、DOM操作も非常に楽です。

ToDoDoDo

WEBとクリエイティブな何かについて