覚書 Wiki*

作成物

Greasemonkey関連はFirefox

canvasの習作1, 人口ピラミッド作成器

人口ピラミッドをexcelなどで書くのは繰り返しが多く、大変だし、拡張性に乏しいと感じたので、javascriptでかいてみた。
textareaに入力された表を変換しているだけの簡単な作り。アイテム数などは決め打ちしてしまっているので、適宜書き換えてご利用ください。
暇だったらもっと拡張性に富んだバージョンをつくる。
キーワード: HTML5, canvas, 人口ピラミッド, population pyramid, javascript, jquery
利用: canvas, javascript, jquery
pyramid.zip

<2010-11-22>よくかんがえたらsvgで書いたほうがよい。いずれ作る。

memo

Xpathのつかいかた

取得方式によって使い方が微妙にちがう。普通の配列で返してくれればいいものを。

FIRST_ORDERED_NODE_TYPE: ドキュメント内で最初に見つかったものを返す
doc.evaluate("//h1[@class='TR']",doc,null,XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue

ORDERED_NODE_ITERATOR_TYPE: ドキュメント内で見つかったものを順に返す

var r = doc.evaluate("//table[@cellpadding='1' and @border='0']//tr/td", doc, null,
                            XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
try {
 var node = r.iterateNext();
 while(node){
   node = r.iterateNext();
 }
} catch (e) {
 dump("Error: document tree modified during iteraton " + e);
}

Introduction to using XPath in JavaScript - MDC Doc Centerを参考にした。
Xpath式のかきかたについてはXPath Syntax。

trim

target = target.replace(/(^\s+)|(\s+$)/g, "");

onkeyup/onkeypress/onkeydownイベントハンドラ

<input type="text" onkeyup="isEnter(event);" name="fill_1">
<select on_change="isEnter(event)" name="nantoka">（もちろん_はなし）

こんな感じで使う。isEnterにあたる関数は複数引数を引けない？気がする。

isEnter(e){
 element = e.target?e.target:window.event.srcElement;
}

IEとFirefoxでどこから呼ばれたかを表す変数が違う。三項演算子をつかって適当に処理してるが、はたしてopera等でもちゃんとうごくのかは不明。

呼ぶ順番

HTMLがパースされ終わった後に処理しなければいけないような文は、ちゃんとパースした後に処理するように書かないといけない。
そうしないと対象エレメントがなくて表示出来ないてなことになる。

jQuery

基本：CSSのセレクタのように。$([Selector]...)

Googleから頂く方法

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery");</script>

直接いただく

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

click属性

普通のattrセットではブラウザによってうまく設定できる時とできないときがあるそうなので、使わない。
しかし、内臓関数の.click(function(){})を使ってセットすると、このセットがすでに同じボタンのクリックから呼ばれているとき（例えばクリックするたびにそのボタンの動作を書き換えるとき）に無限に近いループを起こす。スクリプトが止まる。
打開策としては、setAttributeを使う。

$('#'+column+'button').children().get(0).
set_Attribute('on click','showColumn(''+column+'');return false;'); (_->'')

でも汚いし、jQueryのありがたみない。・・・もしかしてelementつかってDOM叩いた方が早いんじゃ。。。

画像表示

http://neil.fraser.name/software/bmp_lib/

javascriptでビットマップを生成。ふつうにbmpファイルを生成するのは性質上困難なので、base64でコードしている。
ただビットマップの各点の色を決めて書いていくだけ。簡単。

配列のコピー

普通に配列を代入でコピーすると、参照になる。
コピーするには色々やり方がある。

http://stonedsoul.org/post/116226943/javascript

とりあえず、javascriptの配列は遅いし扱いにくい。もしかしたらJSON、HTML,XMLなどにいれちゃったほうが早い・・

スクレイピング

Greasemonkey上でスクレイピングする機会は多いわけだが、どうも使い勝手が良くない。

jQueryが使いにくい

そもそも、ロードしにくい（下に書いた）
jqueryのAjaxは一部プロトコル以外のクロスドメインには対応していないそうだ。
対して、GM_xmlhttpRequestは対応しているし使いやすい。しかしセレクタが使いにくい
無理やりぶち破ってるコードもあるみたいだけど：
http://code.google.com/p/opensocial-jquery/wiki/Ajax

GM+jQueryのセレクタ

GM_xmlhttpRequestでGETして、どこからかデータを読み込み、コールバック関数に飛ばす
全HTMLデータをjQueryにあげて、jQueryオブジェクトをもらう。
欲しいところを切りだして、つっこむ。（find関数を連鎖させる）

Greasemonkeyの制限

安全のためにGreaseMonkeyには様々な制限がかかっているが、そのひとつ
エラーはNS_ERROR_NOT_AVAILABLEなど。
~~たとえばparentなどが使えないみたい~~ parentNodeだった。
さらに、elementの要素を=でセットするのはだめみたい。setAttributeを使おう
https://developer.mozilla.org/en/XPCNativeWrapper#Limitations_of_XPCNativeWrapper

javascriptでjsファイルをロード

たとえば、

javascript:(function(){var s = document.createElement('script');
s.src = 'java script source';s.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(s)})()

改行は抜く。

さらにGreaseMonkeyで読みたい

とかやらなくても今はこれをヘッダに書けばいいらしい
@require script url

JavaScript

作成物