【IE8】parseIntのハマりどころ

ちょっとハマってしまった事柄があったので、備忘録的なノリで書いておきます。

parseInt()

文字列の引数をパースし、指定された基数の整数を返します。

var num1 = '07', num2 = '08';

console.log(parseInt(num1)); // a
console.log(parseInt(num2)); // b

この場合、aは7、bは8と出力されますね。

…。
いやまて、本当にそうなのか???

これはあくまでChromeとかでの話。

一方IE8では

ハマったのは、IE8での出来事。

同じコードを実行してみましょう。

var num1 = '07', num2 = '08';

console.log(parseInt(num1)); // a
console.log(parseInt(num2)); // b

この場合、aは7、bは0が返ってきます。

ちなみにparseInt('09')これも0です。
parseInt('10')は10です。

解決方法

ここで重要なのは、

指定された基数の整数を返します。

指定された基数

こいつが犯人です。

var num = '08';

console.log(parseInt(num, 10)); // 8

第2引数を付けましょう。基数は10だよ!って付けてあげましょう。
期待に応えてくれるでしょう。

こんなことで30分〜1時間ハマってたなんて言いたくない。
むしろ、Stack Overflowでささっと調べるべきでした。

これを読んだ方はお気をつけください。。。

発表しながら簡単なDEMOをする

もう10月です。はやい...。

先日、発表をする機会がありまして、
前日まで資料に手を付けず、あたふたしておりました。
会社のPCにはOfficeあるけど、プライベートのPCにはOfficeもなく、
グーグルドライブを使うか…どうするかと考えたわけです。

結局、reveal.jsを使って資料をささっと作ってみました。

何ができるの?

HTMLと、Markdownを使ってかっこいいスライドが簡単に作れます。
非常に便利できました。

資料中にコードを書きたいときにも、<pre><code></code></pre>で囲ってやれば、
それなりに見えますし、Markdownならば、```で囲えばなんのもっと楽に書くことができます。

コードの実行結果

SlideShareなんかを見ていても、技術系のスライドには、
コードが書かれていることが比較的多いと思います。

大体、実行結果とかのキャプチャが貼り付けてあるか、
別でDEMOとして見せるかの2択ですよね。

発表しつつ、ページの移動なく、その場で実行結果をDEMOできたら…

こんなことをふと思ったわけです。
既出かとは思いますが…。

さて、reveal.jsはあくまで、revael.jsを<script>で読み込んで、
HTMLとかで書いていくことになります。

今回の発表はD3.jsの発表をしたのですが、
ここでreveal.jsと一緒に<script src='d3.min.js'></script>をしたら、
簡単なDEMOしながら、資料書けるんじゃ?

やってみよう！

できました。

方法

Markdownで書いている時には上手くいかず...。
かなり面倒な書き方で実現してますが、何かもっと良い方法があるかもです。

<section>
<pre>
  <code class='javascript'>
    var svg = d3.select('#demo').append('svg')
      .attr({ width: 200, height: 100 });
    // 見せたいコードを書いておく
  </code>
</pre>
<div id='demo'></div>

<script>
var svg, circle;
// 実行するコードを書いておく
svg = d3.select('#demo').append('svg')
  .attr({ width: 200, height: 100 });

circle = svg.append('circle').attr({
  cx: 50,
  cy: 50,
  r: 10,
  fill: 'orange'
});
</script>
</section>

見せたいコードと同じことを、scriptで書いておけば良いです。

HTMLなので、<button id='transition'>Start</button>みたいに、ボタンを作っておいて、 ↑と同じ感じで、

// 例えば作った円を移動させる
d3.select('#transition').on('click', function () {
  circle.transition().duration(1000)
    .attr({
      cx: 100,
      fill: 'steelblue'
    });
});

とかしておけば、ボタン押下で動作なんてことも。

気づき

気づけば、ああそうか！確かに！
となりましたが、reveal.jsでささっと資料作る時、
さらにjs系の発表なら、使えるテクニックかなぁと思ってます。

特に、簡単なサンプルを〜となると、初心者向けだとか、
基礎的なところとかを説明するのにはなかなか使えるのではないでしょうか。

AngularJSリファレンス

先日発売しました、AngularJSリファレンスを購入しました。

やらないと...

最近は便利なAPIが増えてきているおかげもあって、
APIからデータとってきて、何か作るということが増えてきているわけで。

むしろこれから機会も増えそう。

そこで使う言語って何よってなると、JavaScriptです。
APIからもらったデータをクライアント側で加工してごにょごにょ。

だけど、機能が増えて、ページが増えて...ってなるとかなり面倒。
(直面中)

SPAなんて言葉も出てきているし。

触っておくと

どこかで便利できそうなので、買ってしまった。
4000円超えちゃう辺りが、ネックですが、ちょいちょいやっていこうかと思います。

OpenLayers3用のリポジトリ

OpenLayers3用のリポジトリを作った。

ol-sample

印象

OpenLayers2と比較して、なんだかとっつきにくい印象。
まだ深く触っていないからというのもあるけど…。

前にQuickStartだけ触った記事を書いたけど、完全に内容忘れてた。

OpenLayers3をここからダウンロードして始めるのが正解。
こっちをやると、ファイル多すぎてうわあああってなるので、注意。

実際やったんですけどね！ｗ

とっつきにくいとは言ったけど、OpenLayers2に関しても、
慣れるまでは時間がかかったから、3も慣れるまでの問題だとは思います。

ちょいちょい触りながら、exampleも沢山あるので、サンプル追加していけたらと思います。
探してみると、まだまだOpenLayers3関係の記事は少ないようで、
OpenLayers3と検索すると、ここのしょーもない記事が引っかかるような状態。

今なら間に合う！！

D3.jsのforce layoutで遊ぶ

前回はtransitionで、ひたすら円を動かし、そして消すをやりました。
今回は、見た目難しそうなアレをやってみます。

force layout

力学モデル
Wikipedia見ましょう。

あんなやつです。

作ってみる

データの用意

nodes用のデータ、links用のデータの2つを用意します。
データの例として、

var data = {
  nodes: [
    { name: 'Alice' },
    { name: 'Bob' },
    { name: 'Eve' }
  ],
  links: [
    { source: 0, target: 1 },
    { source: 0, target: 2 },
    { source: 1, target: 2 }
  ]
};

nodesにはAlice、Bob、Eveの3要素。
linksにはnodesのどの要素が、どの要素と繋がりがあるかを表しています。
例のデータだと、
source: 0, target: 1で、nodesの0番目(Alice)から1番目(Bob)へと繋がるようなイメージ。
Alice → Bob、Alice → Eve、 Bob → Eveと繋がるので、結果は三角形が出来上がります。

このようなデータだと良さ気です。

データを使って、作る

svg要素を作るところはカット。
force、line、circleを作ります。

var force, line, circle;

force = d3.layout.force()
  .nodes(data.nodes)
  .links(data.links)
  .size([200, 200])
  .linkDistance([100])
  .charge([-100])
  .start();

line = d3.selectAll('line')
  .data(data.links)
  .enter()
  .style({
    // お好みの線の色と太さ
  });

circle = d3.selectAll('circle')
  .data(data.nodes)
  .enter()
  .attr('r', 20)
  .call(force.drag);

forceのnodes、linksでデータを指定してやります。
linkDistanceはnodes同士の間隔。
chargeは反発力みたいな。そんな感じです。
正の値を入れると面白い動きをします。
そして、circleの最後のcall(force.drag)。
これで、マウスドラッグが可能になります。

tick

最後にtickを。

force.on('tick', function () {
  line.attr({
    'x1': function (d) { return d.source.x; },
    'y1': function (d) { return d.source.y; },
    'x2': function (d) { return d.target.x; },
    'y2': function (d) { return d.target.y; }
  });

  circle.attr({
    'cx': function (d) { return d.x; },
    'cy': function (d) { return d.y; }
  });
});

これで大体完成となります。
意味なんかはreference読むのが一番かなぁと思っていますが、
きの基本形覚えてしまえば、いろいろ応用が利くはずです。

サンプル

今回もサンプルを作りました。
今回は、TwitterのREST APIから自分のアカウントのフォローしているアカウント一覧を取得。
jsonファイルに落とし込んで、フォローしている人との繋がりを描画しました。
要するに、0が自分で、targetをフォローしているユーザとするだけです。

{ source: 0, target: 1 },
{ suurce: 0, target: 2 }
// ....

nodeはcircleではなく、imageを使用し、フォローしている方のアイコンを表示しています。

デモはこちら (URL間違ってたから修正w) ※重いので注意
ソースはこちら

最後に

難しそうなものですが、案外やってみると簡単に作れてしまいます。
どちらかというと、データに何を使うか、繋がりをどう表すのかが重要になりそうです。

今度は何をしよう。。。

D3.jsのtransitionで遊んでみる

地図ばかりいじってきましたが、transitionを使い、
図形を遷移させて遊んでみたいと思います。

SVGと、図形の描画

ここはD3の基本的なところです。
まずはいつも通り、svg要素を作成します。

// svg
var svg = d3.select('body').append('svg').attr({width: 500, height: 500});

次に図形を追加しましょう。
今回はcircle要素を追加します。

// circle
var circle = svg.append('circle')
  .attr({
    cx: 100,
    cy: 100,
    r: 20,
    fill: 'red'
  });

これで、X座標100、Y座標100に半径20で赤色の円が描画できます。

図形を遷移させる

使うのは3つです。

• transition: 遷移開始
• duration(ms): 遷移にかける時間をミリ秒で指定
• ease('linear'): どのように動かすのか

easeは何パターンかあるのですが、詳しくはこちらのEasingの項を参照。

// transition
circle.transition()
  .duration(1000)
  .ease('linear')
  .attr({
    cx: 200,
    cy: 200,
    r: 50,
    fill: 'blue'
  });

例えば、このように書いたとすると、
1秒間かけて、X,Y = (200, 200)に移動させつつ、半径を50、色を青にする。
となります。

遷移が終わった時に何かしたいと思うと、このように書くことができます。

// 上記コードの続き
  .each('end', function () {
    d3.select(this).remove();
  });

こうすると、遷移が終わった段階で、遷移させていた図形を削除することが可能です。

さらに、transitionは続けて書くことができます。

circle.transition()
  .duration(1000)
  .attr(/* 何か */)
  .transition()
  .duration(500)
  // 略 

この例だと、1秒かけて遷移、その後0.5秒また遷移という風になります。

サンプル

今回の記事の内容を使い、サンプルを作ってみました。
よければどうぞ。

デモはこちら
ソースはこちら

D3.jsで地図を手動で回転させる

前回は自動で回転させましたが、今回は手動で回転させてみます。
手動で回転させる際に参考にしたのは、D3.jsのexampleのこちらになります。
ほぼソースは同じですね。

exampleとの差異

exampleのソースを見てみると...

var feature;

var projection = d3.geo.azimuthal()
    .scale(380)
    .origin([-71.03,42.37])
    .mode("orthographic")
    .translate([640, 400]);

var circle = d3.geo.greatCircle()
    .origin(projection.origin());

こんな感じのコードになってました。
projectionの辺りですが、azimuthalを指定しています。
が、これを指定するとどうもそんなfunctionないよと怒られます。
ついでにoriginも怒られます。
circleの方もgreatCircleで怒られたり。。。

ですので、projectionは

// projection
    projection = d3.geo.orthographic()
      .scale(200)
      .translate([w /2, h / 2])
      .clipAngle(90),

こんな感じに。前回と同じものを。circleも同じく、svgにappendする形です。
ここ以外はほぼ弄っていないので…。

イベント処理の追加

このexampleでは、

1. mousedown
2. mouseup
3. mousemove

など、イベントを結構使っています。

mousedownに、その時点のX座標とY座標を取得したり、
mousemove、mouseupの連携で、mousedownからupまでの
X、Yの差を取り、最後にその差を適用させるというようなやり方になります。

書くのは良いんですが、ほぼexampleと同じなので、ソース自体はこちらを参照くださいませ。

動く方はこちらです。マウスでグリグリしてみてください。
動くサンプル

ひとこと

記事が手抜きすぎる!