Catalyst::View::JSONとjQueryの組み合わせでJSONデータのやりとりは簡単にできるのでたまにグラフを書きたくなったらFlotを使うとよさげな感じ

あんま凝ったことはできないのでちょっとした折れ線グラフかヒストグラムな用途

tickに数字以外のものを表示させるメモ

data:  [[0,2],[1,4],[2,6]]
ticks: [[0, "red"], [1, "brue"], [2, "pink"]]

という感じで　xの値と対応させたい文字列を合わせてticksに指定する。

はてなブックマークでつけられたコメントをblosxomにインクルード はprototype.jsが必要なのだけれども、今作ってるやつがMochikitなのでモチキなはてブ。

MochiKit で JSONP の利用のライブラリを使えばさくっと。

var ker = '/Computer/W2K/meadow061111.html';
var url = 'http://b.hatena.ne.jp/entry/json/?url=' + encodeURIComponent(ker);
var d = sendJSONPRequest(url, 'callback');

d.addCallback(function(json) {
replaceChildNodes($('comments'),
          DIV(null,
              map(function(data) {
                  return DIV({class:'hateb'},
                     IMG({class:'hateb',
                          src:'http://www.hatena.ne.jp/users/' + data.user.slice(0,2) + '/'+ data.user + '/profile_s.gif'}),
                     ' ' + data.user + ' @ ',
                     data.timestamp,BR(),
                     data.comment,
                     A({href: 'http://b.hatena.ne.jp/' + data.user})
                     );
              }, 
              filter(function (b){if (b.comment.length > 0 ){return b;}},json.bookmarks))));
});

Mochikitだと関数型言語っぽくリストを扱えるのとDOMの関数がわかりやすかったりするので、JSONPで返ってきたJSONを処理するのにはよい気がする。

Mochikitの角丸めの関数はdivとかでpadding入れるとずれてしまうので困った。div->divって入れ子にするのもどうかと思うが、とりあえずいきあたりばったりの処理。

MochiKitはIter([list])でイテレータにlist(iterator)でリストになる。

で、最近お気に入りのInterpreterで動かしてみた。

>>> l = [1,2,3,4,5,6,7]
[1, 2, 3, 4, 5, 6, 7]
>>> i = iter(l)
arrayLikeIter(...)
>>> i.next()
1
>>> i.next()
2
>>> i.next()
3
>>> list(i)
[4, 5, 6, 7]

なるほど牧場。

MochiKitのSignalとかイテレータの使い方がイマイチわからんなぁと思ってたがMochiKitのテストスクリプトを読めばいいことに気がついた。

あとinterpreterを使いまくってるのと、Firebugの便利さを理解した。

javascript第3版を読んでから、WEB+DB PRESS Vol.35のAjax特集など読み返していたら、オブジェクトのメソッドをイベントハンドラにするっていうところでちょっと分からないことがあった。

WEB+DB PRESS Vol.35

技術評論社 / ?円 ( 2006-10-21 )

function Human(name){
    this.name = name;
}

Human.prototype = {
    sayMyName: function(){
        alert('My name is'  + this.name + '.');
    }
};

var kzfm = new Human('kzfmix');
setTimeout(kzfm.sayMyName, 1000);

はだめで、

setTimeout(function(){kzfm.sayMyName()}, 1000);

とする必要があると。一緒に乗ってたコンストラクタでやる例をみても、あー、クロージャなんだなってことで納得したんだけど、クロージャ使わない最初の例だとthisって何を指すんだろうと気になったので調べてみた(googleで)。

くーすーって美味しいよね クロージャとthisスコープ

このコードがなぜいけないかというと、イベントに渡された関数オブジェクトに含まれるthisが参照するのは、インスタンスのメソッドではないからだ。何をさしているかというとこの場合、thisはelementノードをさしている。

ふむー。なるほど。しかしjavascriptの場合ダンプってどうやるのかは分からずじまい。perlのData::Dumperみたいのはないんだろうか。

と思って、debug javascript dumperで検索かけたらビンゴ。はてなでも質問されてた

あとでちょっと使ってみる。

COMいじりのjavascriptのデバッグめんどくさい。というわけで、win版spidermonkeyはないのか？

ということで、探したらこんなのあること知りました。素晴らしい。早速IE呼び出して試すか？なんて思ったらたつをの ChangeLogにそういうスクリプトありました。をを～

でも、ブラウザが見えるやつも書いておきます（忘れると困るから）。

js> var ie = new ActiveXObject("InternetExplorer.Application"); js> ie.navigate("http://www.google.co.jp/"); js> ie.visible=1

すんげー便利。今までちまちまエディタでhtml書いてたけど、開放された。Excelいじくるスクリプト試してみたり、pythonのwin32comで作ったコネクタのデバッグに使ったり、色々できてイイ。

DBICちょっと覚えて、TTにバカスカデータを送ると見栄えとか操作性がやたらと気になってくるのだけど、javascriptがいまいち分かってないので、なかなか思ったように動いてくれない。過去にもやらなきゃやらなきゃと思ったことは何度かあったのだけど、なかなか集中して勉強する機会が、、、

と言い訳するのは他にも英語とか。

JavaScript
デイビッド フラナガン
オライリー・ジャパン / ?円 ( 2000-12 )

JavaScript & DHTMLクックブック―Webエキスパート必携テクニック集
ダニー グッドマン
オライリージャパン / ?円 ( 2004-01 )

さすがにこのままじゃまずいと、これからこいつらを読みながら勉強してみることにした。本当はc++の写経でもしようかと思ってたのだが後回し。

まるごとJavaScript & Ajax ! Vol.1
天野 仁史
インプレスジャパン / ?円 ( 2007-02-15 )

まるごとJavaScript & Ajax !も予約したけど、、、

到着する頃には内容が分かるようになりたいなぁ。

今日は終日、javascript+activeXObjectでWEBからインタラクティブに操作できるビューアーがないか調べていたヨ。開発中が多くていまいちいいのが見つからないというか、javascriptもactiveXもほとんどいじったことがないでよくわからないというのが正直なところ。

pyMOLもcueMOLもスクリプトで制御できるのでWSHとかperlとかでガリガリやればできるとは思うんだがこれだとまぁ、インタラクティブではないよなぁ。

あー、javascriptとかactiveXまじめに取り組もう。

• http://pymol.sourceforge.net/
• http://cuemol.sourceforge.jp/ja/index?FrontPage
• http://www.cgl.ucsf.edu/chimera/

Perlだけじゃなくて、JavascriptとかPythonも覚えナキャってことで、ちゃんと本を買って読んでみました。

JavaScript
デイビッド フラナガン
オライリー・ジャパン / ?円 ( 2000-12 )

さらっと流しただけだが、なんとなくJavascriptがどういう言語なのかは理解した（つもり） でも、実際にクックブックとか見ながら手動かしてみないといけないなぁ。