6月 « 2008 « mojalog

2008年6月のアーカイブ

やる夫が2,400円分のロト6を買うようです

2008年6月28日土曜日

　　はぁー。
　　働けども働けどもお金が貯まらないお。
　　システムエンジニアなんてキーボードとマウスで
　　カチコチパタパタやってりゃ
　　万札風呂につかれるんじゃなかったのかお
　 　　　＿＿＿_
　　　／　　 　 　＼ （ ;;;;(
　 ／　　＿ノ　 ヽ__＼) ;;;;)
／ 　　 （─） 　（─ /;;／
|　 　　 　 （__人__） l;;,´
/　　　 　 ∩ ノ)━・'／
(　 ＼　／ ＿ノ´.|　 |
.＼　 " 　／＿＿|　 |
　　＼ ／＿＿＿
　　おいらの才能を薄給で買い叩くのはけしからんお！
　　こんなサラリーじゃ
　　人生設計に宝くじを組み込まないとやってらｒ・・
　 　　　　 　ﾉ Ｌ＿＿＿_
　　　　　　　⌒　＼　／ ＼
　　　　　　／　（○）　（○）＼
　　　　 ／　　　 （__人__）　　 ＼
　　　 　|　 　 　　　|::::::|　　　　　|
　　　　 ＼ 　 　 　 l;;;;;;l　　 　／l!| !
　　　 　／　　　　　`ｰ'　 　　＼ |i
　　　／　　　　　　　　　　ヽ !l　ヽi
　　 （　　 丶- 、　　　　　　 しＥ　|そ　　ドンッ！！
　　　　`ー､＿ﾉ 　 　 　 ∑　l､Ｅ ﾉ　<
　　　　　　　　　　　　　　　ﾚY^Ｖ^ヽｌ
　　・・・お。ロト６がこの前で４００回をこえてるお。
　　　　　 　　　＿＿＿_
　　　　　　　／　　 　 　＼
　　　　 　／　　─　 　 ─＼
　　　　／ 　　 （●） 　（●） ＼
　　　　|　 　　 　 （__人__）　 　 |　＿＿＿＿＿＿＿_
　 　　 ＼　　 　　 ｀ ⌒´ 　 ,／　.| |　　　　　　　　　　|
　　　　ノ　　　　　　　　　　　＼　| |　　　　　　　　　　|
　 ／´ 　 　　　　　　　　　　　 　 | |　　　　　　　　　　|
　|　　　　ｌ 　 　 　 　 　 　　　　　| |　　　　　　　　　　|
　ヽ　　　 -一ー_~､⌒)^),-､　　　| |_＿＿＿＿＿＿__|
　　ヽ ＿＿＿＿,ノγ⌒ヽ)ニニ-￣　　　| |　　|
　　４００回もやってりゃいいサンプルになるお！
　　スーパーハカーの才能を生かして
　　ロト６当ててMACBOOK買うお！
　　プログラマでMACBOOK使ってりゃエライ箔がつくお！
　　　　　　　　　＿＿＿
　　　　　　　／ ⌒　　⌒＼
　　　　　 ／　（⌒）　 （⌒） ＼
　　　　／ 　 ///（__人__）/// ＼
　　 　 |　　 u. 　 `Y⌒y'´　　　 |
　 　 　 ＼ 　 　 　 ﾞー ′　　,／
　　　 　 /⌒ヽ　 　ー‐ 　 　ｨヽ
　 　 　 / rｰ'ゝ　　　　　　　〆ヽ
　　　　/,ﾉヾ　,>　　　　　　ヾ_ノ,|
　　　　|　ヽ〆　　　　　　　　|´　|
　　ふむ。。４３個の数字から６個選ぶと。。。
　　ということは・・・
　　順列組み合わせで6096454通り。
　　スーパーハカーの分析で当選確立をあげるお
　 　　　＿＿＿_
　　　／　　 　 　＼
　 ／　　─　 　 ─＼
／ 　　 （●） 　（●） ＼
|　 　　 　 （__人__）　 　 |
/　　　　 ∩ノ ⊃　　／
(　 ＼　／ ＿ノ　|　 |
.＼　“　　／＿＿|　 |
　　＼ ／＿＿＿ ／
　　　・・・まず、
　　　過去４００回から当選数字の嵩みをとって
　　　当選数字の傾向と対策を練ってみるお！！
　　　　　　　　　＿＿＿
　　　　　　　／ ⌒　　⌒＼
　　　　　 ／　（○）　 （○） ＼
　　　　／ 　 ///（__人__）/// ＼
　　 　 |　　 u. 　 `Y⌒y'´　　　 |
　 　 　 ＼ 　 　 　 ﾞー ′　　,／
　　　 　 /⌒ヽ　 　ー‐ 　 　ｨヽ
　 　 　 / rｰ'ゝ　　　　　　　〆ヽ
　　　　/,ﾉヾ　,>　　　　　　ヾ_ノ,|
　　　　|　ヽ〆　　　　　　　　|´　|

ということでやる夫はこれまでのロト６の当選番号を洗い出してみました。
やる夫は過去の当選リストをエクセルに書き出します。（Googleスプレッドシート）
そして、ロト６の当選数字にはボーナス数字というものがあるのでこれも考慮に入れて嵩みを数えていきます。例えば[ 2, 8, 10, 13, 27, 30 ] bonus[ 39 ]という当選数字の場合、先頭の2という数字に対する8, 10, 13, 27, 30に当選番号として2点与えます。39はボーナス数字なので半分の1点を与えてあげます。2以降の数字8, 10, 13, 27, 30にも点数を与えていきます。ボーナス数字が与える点数は常に1点としていきます。
これを４００回分、総当りで全ての数字で点数をつけていきます。するとこんな表が完成しました。

　 　 　　　＿＿＿_　　　やばいお！
　 　　　／⌒　　⌒＼　神懸った美しい表が完成したお！
　　　／（ ＞） 　（＜）＼　これを分析すれば当選間違いなしだお！
　 ／::::::⌒（__人__）⌒::::: ＼ （※勘違いもは甚だしいです）
　 |　　　　/| | | | |　　　　　|
　 ＼　 (、`ー―'´,　　 　／
　　　　　 ￣￣￣
　　ほう。ざっと眺めてみると、
　　22と24のセットはボーナス数字を含めて、
　　１度も一緒に当選番号になったことがないのかお
　　きっと仲が悪い数字どうしだお。。。
　　これは外しておきたいセットだお。。。
　 　　　＿＿＿_
　　　／　　 　 　＼
　 ／　　─　 　 ─＼
／ 　　 （●） 　（●） ＼
|　 　　 　 （__人__）　 　 |
/　　　　 ∩ノ ⊃　　／
(　 ＼　／ ＿ノ　|　 |
.＼　“　　／＿＿|　 |
　　＼ ／＿＿＿ ／
　　ふむ。で、この表をどうやって分析するかだお。
　　６つの数字が合致して初めて当選となると
　　これまででてきた
　　当選数字同士は仲がいい同士だということだお
　 　　　＿＿＿_
　　　／　　 　 　＼
　 ／　　─　 　 ─＼
／ 　　 （―） 　（―） ＼
|　 　　 　 （__人__）　 　 |
/　　　　 ∩ノ ⊃　　／
(　 ＼　／ ＿ノ　|　 |
.＼　“　　／＿＿|　 |
　　＼ ／＿＿＿ ／
　　　ふ・・・む。ということは、
　　　この表がそのままつかえる・・・
　 　　　＿＿＿_
　　　／　　 　 　＼
　 ／　　─　 　 ─＼
／ 　　 （―） 　（●） ＼
|　 　　 　 （__人__）　 　 |
/　　　　 ∩ノ ⊃　　／
(　 ＼　／ ＿ノ　|　 |
.＼　“　　／＿＿|　 |
　　＼ ／＿＿＿ ／
　　　　クラスター分析にかけてみるお！！！！
　 　　　　 　ﾉ Ｌ＿＿＿_
　　　　　　　⌒　＼　／ ＼
　　　　　　／　（○）　（○）＼
　　　　 ／　　　 （__人__）　　 ＼
　　　 　|　 　 　　　|::::::|　　　　　|
　　　　 ＼ 　 　 　 l;;;;;;l　　 　／l!| !
　　　 　／　　　　　`ｰ'　 　　＼ |i
　　　／　　　　　　　　　　ヽ !l　ヽi
　　 （　　 丶- 、　　　　　　 しＥ　|そ　　ドンッ！！
　　　　`ー､＿ﾉ 　 　 　 ∑　l､Ｅ ﾉ　<
　　　　　　　　　　　　　　　ﾚY^Ｖ^ヽｌ

クラスター分析とは、乱暴に言ってしまうとデータをグループ分けする分析です。少し前にjavascriptでクラスター分析するというエントリを書いたのですが、コレを試してみればグループ分けされる状況が分かってくるかと思います。

やる夫が作成した表は43個それぞれの数字に対して、43個が総当りで出現回数に点数をつけて測定したものです。それぞれの数字がつけた嵩み（採点）に似通ったものが出てきたものを仲間だとみなし、その仲間が6個集まったものが当選数字になるというオカルトじみた思い付きをしました。
方法は、この表を直接クラスター分析にかけ、43グループから少しずつグループを減らしていくことにより6個の数字のグループが出現したものを当選数字とするものです。
クラスター分析結果はコチラです。

　　43個で分割したら確かにグループが43個に分かれたお
　　みんないい子だお。
　 　 　　　＿＿＿_
　 　　　／⌒　　⌒＼
　　　／（ ―） 　（―）＼
　 ／::::::⌒（__人__）⌒::::: ＼
　 |　　　　　　　　　　　　　 |
　 ＼ 　　 　 　　 　 　 　 ／
------------------------------------------------
42個で分割
1
2,32
3
・・・
------------------------------------------------
　　ふむ。42グループにしたら2と32のグループができたお。
　　この2つは仲がいいらしいお。
　　早く6個のグループに育って当選数字になれお
　 　 　　　＿＿＿_
　 　　　／⌒　　⌒＼
　　　／（ ―） 　（―）＼
　 ／::::::⌒（__人__）⌒::::: ＼
　 |　　　　　　　　　　　　　 |
　 ＼ 　　 　 　　 　 　 　 ／
------------------------------------------------
34個で分割
1
2,14,32,42
3,38
・・・
------------------------------------------------
　　34分割で「2,14,32,42」からなる
　　4つの数字グループができたお！
　　あと数字２つで6個そろうお！
　　　　　　＿＿＿_
　　　　 ／＼　　／＼
　　　／（ ●） 　（●）＼
　 ／ :::::⌒（__人__）⌒:::::＼
　 |　　　　　|r┬-| 　 　 　 |
　 ＼ 　 　　｀ ー'´ 　 　 ／
------------------------------------------------
27個で分割
1
2,14,24,32,42
3,38
・・・
------------------------------------------------
　　27分割で「2,14,24,32,42」からなる
　　5つの数字グループができたお！
　　あと１つだお！！！！！
　　　　　　＿＿＿_
　　　　 ／＼　　／＼　　ハァ
　　　／（ ○） 　（○）＼　　ハァ
　 ／ :::::⌒（__人__）⌒:::::＼
　 |　　　　　|r┬-| 　 　 　 |
　 ＼ 　 　　｀ ー'´ 　 　 ／
------------------------------------------------
23個で分割
1,33
2,14,24,32,42
3,38,40
4,6,10,19
・・・
------------------------------------------------
　　23分割で「4,6,10,19」からなるグループが台頭してきたお！
　　「2,14,24,32,42」と
　　「4,6,10,19」の
　　グループの争いが始まるお！
　　　　　　＿＿＿_
　　　　 ／＼　　／＼　　ハァ　ハヒ
　　　／（ ◎） 　（◎）＼　　ハァ　ハフ
　 ／ :::::⌒（__人__）⌒:::::＼
　 |　　　　　|r┬-| 　 　 　 |
　 ＼ 　 　　｀ ー'´ 　 　 ／
------------------------------------------------
17個で分割
1,9,25,33,43
2,14,24,32,42
3,38,40
4,6,10,19
・・・
------------------------------------------------
　　ぎゃひー！！！！
　　17分割で「4,6,10,19」を抜いて
　　『1,9,25,33,43』が5数字のグループになったお！
　　「2,14,24,32,42」との仁義なき戦いだお！
　　クラスター分析アツイお！！パネェお！！
　 　 　　　＿＿＿_
　 　　　／ノ 　 ヽ､_＼
　　　／（ ○）}liil{（○）＼
　 ／　　　 （__人__）　　　＼
　 |　　　ヽ　|!!il|!|!l|　/　　　|
　 ＼　　　　|ｪｪｪｪ| 　 　 ／
------------------------------------------------
16個で分割
1,9,25,33,43
2,14,24,32,42
3,38,40
4,6,10,16,19,23,35
・・・
------------------------------------------------
　　16分割で
　　「4,6,10,19」だったのが「4,6,10,16,19,23,35」
　　の7個のグループに急成長したお。。。
　　何だっていきなり4個から7個に飛ぶんだお。。。
　　7個の数字を選んだら窓口のおばちゃんにどつかれるお。。
　　　　　　 　 　 ＿＿＿
　　　　　＿___,.／ 　　　　 ＼
　　　 ノ　　 ／　 　　　　　　 ＼
　 ／　　 ／　　 　　　　　　　　 ＼
　|　　 　 |::..　　　　　　　　　　 ...::::|
　ヽ　　　 `一ー――――-､;;;;::／`一ー―-､
　　ヽ＿＿＿＿(⌒)(⌒)⌒)　)　　(⌒＿(⌒)⌒)⌒))
　　まあいいお。他のグループが6個の数字になるまで
　　グループを追いかけてみｒ・・・
　　　　　　　 ／￣￣￣＼
　 　 　 　 ／　　　　　　　 ＼
　　　　　/　　 ─　　　─　　ヽ
　　　 　 |　　 （●） 　（●）　　|
　　　　　＼　　 （__人__）　__,／
　 　 　　／＿＿＿＿＿＿_＼　　　
　　　　 　　　＿＿＿_
　　　 ／::::::─三三─＼
　　／:::::::: （ ○）三（○）＼
　　|::::::::::::::::::::（__人__）:::: 　|　 ＿＿＿＿＿
　 　＼:::::::::　 　|r┬-| 　,／　.| |　　　　　　　　
　　　ノ::::::::　　　`ー'´　　＼　| |　　　　　　　　
　　　 　　　＿＿＿＿
　　　　 ／:∪::─ﾆ三─ヾ
　　　／:::::::: （ ○）三（○）＼
　　（:::::∪:::::::::: （__人__）:::::　i|　＿＿＿＿
　 　＼::::::::: 　 　|r┬-|　::::ノ 　| | 　　　　　
　　　ﾘ::::::::　　　 `ー'´　 ::＼ 　| | 　　　　　　
　　　 　　　＿＿＿＿__
　　　　 ／:∪::─ﾆjjﾆ─ヾ　　・・・・・・・・。
　　　／:::li|.:（ ○）三 （○）＼
　　（:::||!.:∪::::: （__人__）)::::　i|　＿＿＿＿
　 　 ）::::::::::::: 　 |r┬-|　li::::/ 　| |　　　　　　
　 ／::::::::::::::: 　　`ー '　::::::ヽ 　| |　　　　　　
------------------------------------------------
12個で分割
1,9,25,33,43
2,14,24,32,42
3,7,12,21,38,40
4,6,10,16,19,23,35
・・・
------------------------------------------------
　　　あったお！！！！！
　　　12分割で「3,7,12,21,38,40」がちょうど
　　　6個の数字で仲よしこよしだお！！！！！
　　　　　　　　　＿＿＿
　　　　　　　／ ⌒　　⌒＼
　　　　　 ／　（○）　 （○） ＼
　　　　／ 　 ///（__人__）/// ＼
　　 　 |　　 u. 　 `Y⌒y'´　　　 |
　 　 　 ＼ 　 　 　 ﾞー ′　　,／
　　　 　 /⌒ヽ　 　ー‐ 　 　ｨヽ
　 　 　 / rｰ'ゝ　　　　　　　〆ヽ
　　　　/,ﾉヾ　,>　　　　　　ヾ_ノ,|
　　　　|　ヽ〆　　　　　　　　|´　|
　　こいつを買えば当選確率がドンと跳ね上がるお！
　　（※1/6096454です）
　　 　　　 ＿＿＿_
　 　　　／_ノ '　ヽ_＼
　　　／（≡） 　 （≡）＼
　 ／::::::⌒（__人__）⌒::::: ＼
　 |　　　　　|r┬-|　　　　　|
　 ＼ 　　 　 `ー'´ 　 　 ／
　　でも12分割あたりに
　　仲間が出来たグループが何個かあるお
　　こいつも網羅してやれば当選確率は何十倍にも跳ね上がるお！
　　（※ません）
　 　 　＿＿＿＿
　 　 / ⌒　　⌒　 ＼
　　./( ―） （　●）　 ＼
　 /::⌒（_人＿）⌒::::: 　|　チラッ
　 |　　　 ー　　　　　 　.|
　 ＼ 　　 　　　　　　／

結局やる夫が分析結果から購入を決めた番号は以下のとおりになりました。

6個確定

3, 7, 12, 21, 38, 40

[ 1, 9, 25, 33, 43 ]で流す

1, 9, 25, 33, 43, 20
1, 9, 25, 33, 43, 39
1, 9, 25, 33, 43, 41

6番目の数字として追加した[ 20, 39, 41 ] は、6分割目でグループに入ってくる番号

[ 2, 14, 24, 32, 42 ]で流す

2, 5, 14, 24, 32, 42
2, 14, 22, 24, 32, 42
2, 14, 24, 26, 32, 42
2, 14, 24, 29, 32, 42
2, 14, 24, 32, 34, 42

6番目の数字として追加した[ 5, 22, 26, 29, 34 ]は、5分割目でグループに入ってくる番号

[ 4, 6, 10, 19 ]で流す

4, 6, 10, 16, 19, 23
4, 6, 10, 16, 19, 35
4, 6, 10, 16, 23, 35

5,6番目の数字として追加した[ 16, 23, 35 ]は、16分割目で加わった番号

　　　この12個の組み合わせで確定だお！
　　　　　　＿＿＿_
　　　　 ／＼　　／＼
　　　／（ ●） 　（●）＼
　 ／ :::::⌒（__人__）⌒:::::＼
　 |　　　　　|r┬-| 　 　 　 |
　 ＼ 　 　　｀ ー'´ 　 　 ／
　　　[ 2,14,22,24,32,42 ]
　　・・・ん。んー＿
　　よくみると22, 24という
　　今まで当選数字に組み合わせの一度もない
　　数字が予想番号に入ってきてるお。
　　外して置いた方がいい思ってマークしたやつだお
　　　　　 　　 ＿＿＿＿
　　　　 　／::::::─三三─＼
　　　　／:::::::: （ ○）三（○）＼
　　　　|::::::::::::::::::::（__人__）:::: 　|　＿＿＿＿＿＿＿_
　 　　 ＼:::::::::　 　|r┬-|　　／　| |　　　　　　　　　　|
　　　　ノ::::::::::::　　`ー'´　　　＼ | |　　　　　　　　　　|
　　　[ 2,5,14,24,32,42 ]
　　　[ 2,14,22,24,32,42 ]
　　　[ 2,14,24,26,32,42 ]
　　　[ 2,14,24,29,32,42 ]
　　　[ 2,14,24,32,34,42 ]
　　・・ん。んー！！？しかも24と言う数字は
　　過去に40回という出現数が１番低い数字だお！
　　（1番出現率が高いのは30で83回）
　　おいらの分析は大丈夫かお！！？
　　　 　　　＿＿＿＿
　　　　 ／:∪::─ﾆ三─ヾ
　　　／:::::::: （ ○）三（○）＼
　　（:::::∪:::::::::: （__人__）:::::　i|　＿＿＿＿
　 　＼::::::::: 　 　|r┬-|　::::ノ 　| | 　　　　　
　　　ﾘ::::::::　　　 `ー'´　 ::＼ 　| | 　　　　　　
　　さらに詳しく見てみると、[ 2, 14, 24, 32, 42 ]流しは
　　どの数字も当選回数ワースト５以内に入っているお！！！
　　　 　　　＿＿＿＿__
　　　　 ／:∪::─ﾆjjﾆ─ヾ
　　　／:::li|.:（ ○）三 （○）＼
　　（:::||!.:∪::::: （__人__）)::::　i|　＿＿＿＿
　 　 ）::::::::::::: 　 |r┬-|　li::::/ 　| |　　　　　　
　 ／::::::::::::::: 　　`ー '　::::::ヽ 　| |　　　　　　
　 　　　＿＿＿_
　　　／　　 　 　＼ （ ;;;;(　・・・。
　 ／　　＿ノ　 ヽ__＼) ;;;;)　・・・・・・。
／ 　　 （─） 　（─ /;;／　　ふむ。
|　 　　 　 （__人__） l;;,´
/　　　 　 ∩ ノ)━・'／
(　 ＼　／ ＿ノ´.|　 |
.＼　 " 　／＿＿|　 |
　　＼ ／＿＿＿
　 　　　＿＿＿_
　　　／　　 　 　＼ （ ;;;;(　・・・。
　 ／　　＿ノ　 ヽ__＼) ;;;;)　・・・・・・。
／ 　　 （○） 　（○ /;;／　　　！？
|　 　　 　 （__人__） l;;,´
/　　　 　 ∩ ノ)━・'／
(　 ＼　／ ＿ノ´.|　 |
.＼　 " 　／＿＿|　 |
　　＼ ／＿＿＿
　　これはどうみても逆張りだお！
　　分析に信憑性が増してきたお！
　　　　　　　　　＿＿＿
　　　　　　　／ ⌒　　⌒＼
　　　　　 ／　（○）　 （○） ＼
　　　　／ 　 ///（__人__）/// ＼
　　 　 |　　 u. 　 `Y⌒y'´　　　 |
　 　 　 ＼ 　 　 　 ﾞー ′　　,／
　　　 　 /⌒ヽ　 　ー‐ 　 　ｨヽ
　 　 　 / rｰ'ゝ　　　　　　　〆ヽ
　　　　/,ﾉヾ　,>　　　　　　ヾ_ノ,|
　　　　|　ヽ〆　　　　　　　　|´　|
　　当選数字が一番少ないと言うことは
　　当選エネルギーを一番溜め込んでいると言うことだお
　　他のグループにもMMRっぽく解釈すれば
　　当選確実な番号に見えてくるお！！！
　 　 　＿＿＿＿
　 　 / ⌒　　⌒　 ＼
　　./( ―） （　●）　 ＼
　 /::⌒（_人＿）⌒::::: 　|　チラッ
　 |　　　 ー　　　　　 　.|
　 ＼ 　　 　　　　　　／
　　　　　てめ。仕事しろや・・・。
　　　　 　　　／￣￣＼　　　　　　　　　はい。当たるので辞めます！
　　　　　　／　　　 　　 ＼ 　　　　　　＿＿＿　
　　　　　　|:::::: 　 　　 　　｜　　　　／　　　　 ＼
　　　　　.　|:::::::::::　　　　　｜　　 ／⌒　　　⌒　 ＼
　　　　　　 |::::::::::::::　　　　｜　／　（●）　（●） 　　＼
　　　　　.　 |::::::::::::::　　　　} 　|　 　　（__人__）　　　　　|　
　　　　　.　 ヽ:::::::::::::: 　　 }　　＼　　 ｀ ⌒´ 　　　　_／
　　　　　　　 ヽ::::::::::　　ノ　　　　|　　　　　　　　　　 ＼
　　　　　　　　/:::::::::::: く　　　　　|　|　　　　　　　　 | 　|
-―――――|:::::::::::::::: ＼――┴┴―――――┴┴――

カテゴリー: ソフトウェア技術, ネットウォッチ | 2件のコメント »

Ext.DomQueryの基本的な使い方#1

2008年6月26日木曜日

ExtJSのエントリはこちらにまとめてあります

ExtJSのDOMセレクタはExt.query()というメソッドで使えるようになっています。Ext.query()メソッドは2つのパラメータを持ち、第1パラメータに取得したい場所を書式に基づいた文字列で与えて、第2パラメータにエレメントのidを渡します。第2パラメータは省略可能ですのでこれを使わずとも、第1パラメータだけでかなり柔軟な取得ができます。また、Ext.query()メソッドはExt.DomQuery.select()のエイリアス(shorthand)ですので、どちらを使ってもいいようです。
動作サンプル

DomQueryで探索するサンプルHTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="fuga" class="piyo">
ここはdiv#fuga.piyoです。
<span class="fuga">
ここはspan.fugaです。div#fuga.piyoの中に配置されています。
</span>
<a href="#" class="piyo">
ここはa.piyoです。span.fugaと同じ高さで、その直後に配置されています
</a>
</div>
<div id="piyo" class="fuga">
ここはdiv#piyo.fugaです。
<a href="#">
ここはaです。div#piyo.fuga直下に配置されています。
</a>
<p>
ここはpです。div#piyo.fugaの中に配置されています。
<a href="#">
ここはaです。div#piyo.fuga内ですがその直下にはありません。
</a>
<a href="#">
ここはaです。div#piyo.fuga内ですがその直下にはありません。
</a>
</p>
<span class="fuga">
ここはspan.fugaです。div#piyo.fugaの中に配置されています。
</span>
<p class="piyo">
ここはp.piyoです。span.fugaと同じ高さでその直後に配置されています
</p>
</div>
<p class="piyo">
ここはp.piyoです。div#piyo.fugaと同じ高さでその直後に配置されています
</p>
</body>
</html>

Elementセレクタ

Element(要素)とは？を先に説明しておきますと

<a href="#" >リンク</a>

このタグ開始～タグ終了セットをElementと呼んでいます。よくタグとエレメントがごっちゃになったりしますが、タグは開始タグも終了タグもタグですので、エレメントより分解された言い方ですね。『タグと要素（エレメント）の違いを説明して』がわかりやすいです。

で、ちょっと余談ですが、じゃあエレメントとノードの違いって何よ？って疑問があって、C#でパタパタ実装しているとXmlElementとXmlNodeなんてのを使うことになるんですが、XmlElementとXmlNodeというクラスの扱いだけで言うと、「りんご:XmlElement」と「フルーツ:XmlNode」くらいに覚えておけばいいみたいです。XmlNodeのほうが抽象化されてるってか一般化されてるって言うかそういう風に腹に落としました。ふーん。
で、javascriptのgetElementByIdだとエレメントが返るぞと言われてる気がするのですが、selectSingleNodeっていわれるとノードだと言われる。後者はXPathで指定するので手続きは違うとして、返って来たモノはなんだろね。呼び方の違い？まぁタイプセーフではないのでごちゃごちゃいわないことにします。（余談なげー）

ということでElementセレクタの説明です。

Ext.query( "span" ); // [ span.fuga, span.fuga ]

このクエリは[ span.fuga, span.fuga ]という２つの要素からなる配列を返します。全ドキュメントからspanエレメントに合致するものを拾ってきます。

Ext.query( "span", "fuga" ); // [ span.fuga ]

このクエリは[ span.fuga ]という1つの要素からなる配列を返します。サンプルHTMLにはspanエレメントが2つありますが、idが”fuga”からなるdiv内のspanを指定していますので、前者のほうが返ります。

次は書式付の第1パラメータで取得する方法です。

id指定:”#”

idを指定してエレメントを拾いたい場合は、”#”をプレフィックスとして与えてあげます。

Ext.query( "#piyo" ); // [ div#piyo.fuga ]

このクエリは、idが”piyo”でclassが”fuga”のdivが返ります。2つあるdivのうち後者のほうが返ります。

class指定:”.”

classを指定してエレメントを拾いたい場合は、”.”をプレフィックスとして与えてあげます。

Ext.query( ".piyo" ); // [ div#fuga.piyo, a.piyo, p.piyo, p.piyo ]

このクエリは、classが”piyo”のエレメントを返します。

全指定:”*”

全ての要素を拾いたい場合は”*”を指定することで拾えます。

Ext.query( "*" ); // [ html, head, meta, body, div#fuga.piyo, span.fuga, a.piyo, div#piyo.fuga, a, p, a, a, span.fuga, p.piyo, p.piyo ]

子エレメント指定:” “(スペース)

あるエレメント内で指定した全ての子エレメントを拾う場合は、” “（スペース）を間にはさんで与えてあげます。

Ext.query( "div p" ); // [ p, p.piyo ]

このクエリは親にdivエレメントを持つ p を返します。

Ext.query( "div span" ); // [ span.fuga, span.fuga ]

このクエリは親にdivエレメントを持つspanエレメントを返すので、２つのspanが返ります。

直下の子エレメント指定:”>”または”/”

あるエレメント内の直下の子エレメントを指定して拾う場合は”>”または”/”を間にはさんで与えてあげます。

Ext.query( "div/a" ); // [ a.piyo, a ]

div#fuga.piyo直下のa.piyoエレメントとdiv#piyo.fuga直下のaエレメントを返します。pエレメント内の２つのaエレメントは直下にないので返しません。

直後の同じ高さ(兄弟要素)のエレメント指定:”+”

あるエレメントと同じ高さにいるエレメントで、その直後にいるエレメントを拾う場合は”+”を間にはさんで与えてあげます。一応挙動も確認したのですが（あまり使いそうにないなーと思いながら）、ちょっと自信ないです。

Ext.query( ".fuga+.piyo" ); // [ a.piyo, p.piyo, p.piyo ]

ちょっとわかりにくいですが、class=”fuga”のエレメントと同じ高さにいて、その直後でclass=”piyo”のエレメントを返しています。

後方の同じ高さ（兄弟要素）のエレメント指定:”+”

あるエレメントと同じ高さにいるエレメントで、その後方にいるエレメントを拾う場合は”~”を間にはさんで与えてあげます。

Ext.query( "a~span" ); // [ span.fuga ]

これもちょっとわかりにくいですが、aと同じ高さにいるspan.fugaを拾っています。”+”と違い、拾ってきたspan.fugaはaの直後にいません。これも一応挙動も確認したのですが、かなり自信ないです。

ほかにもアトリビュートから指定してエレメントを取得したり出来るのですがまた次回に紹介します。

via : DomQueryのチュートリアル
via : APIDoc

カテゴリー: ソフトウェア技術 | コメントはまだありません »

ExtJSの質問を見つけたので横から回答してみます。

ExtJSの質問を見つけたので横から回答してみます。をdel.icio.usに追加

2008年6月24日火曜日

ExtJSの使い方で、ちょっと徘徊してましたらmojalogのエントリを参照していただいた方がおりましたので、ちょっとその回答を横から入らせていただこうかと思います。
内容はコチラで、girdのヘッダの隠し方と、gridのボーダーの消し方を質問されていました。ワタシはそのサービスのアカウントを持っておりませんので回答も何も出来なかったのでちょっとこちらから。

var grid = new Ext.grid.EditorGridPanel({
store:store,
hideHeaders:true,    //<- gridのヘッダを隠します。
colModel:clmnModel,
renderTo:'renderTarget',
title:'simple-editorgrid',
stripeRows:false,
height:200,
width:320,
frame:true,
clicksToEdit:1
});
// cssセレクタでx-grid3-rowを検出して、メソッドに渡します。
rmvGridBorder( Ext.query("*[class=x-grid3-row]") );
function rmvGridBorder( els ){
for( var x = 0 ; x < els.length; x++ ){
var el = Ext.get( els[ x ] );
if( el ) {
if( el.hasClass( "x-grid3-row" ) ){
el.dom.style.border='0px';
}
}
}
};

本筋の使い方ではないかと思いますが、CSSにアクセスしてエレメントからdomのスタイルを直接いじっています。ちなみにEditorGridはレコードがコミットされるとスタイルも初期化されるようですので注意する必要があります。
反射的に書いたエントリですのでそのうちDOM/CSSセレクタあたりをまとめてみたいと思います。

カテゴリー: ソフトウェア技術 | コメントはまだありません »