WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:DOMを用いるとは?

0:[投稿] りん [2003/05/23 23:04 ][環境:IE6 サーブレットとJSP]

以前にこのサイトでHTMLのソートの書き方を拝見した者です。
http://tohoho.wakusei.ne.jp/wwwxx038.htmを参照するように
かかれていましたが、そのままコーディングしても動いてくれま
せんでした。DOMを用いるとは、何かインストールをしなけれ
ばいけないのでしょうか?


1:[回答] 平野 敬 [MAIL] [URL] [2003/05/25 07:23 ]

DOMの利用されたページを正常に閲覧するには、DOM対応のブラウザを使う必要があります。当該ページには IE6.0/Netscape 6.1/Netscape7.01/Opera7 で動作が確認された旨が書かれていますね。

お書きになったプログラムにミスはないかどうか、確かめてください。


2:[回答] りん [2003/05/26 18:43 ]

もう一度書き直してみます。ありがとうございます。


3:[回答] りん [2003/05/26 18:43 ]

もう一度書き直してみます。ありがとうございます。


4:[質問] りん [2003/05/26 21:41 ]

何度も申し訳ないのですが、やはり書きなおしてみても、直接
ソースをコピーしても動きません。ほかの方は、同じように
書いても動くのでしょうか?環境はIE6.0なんですが・・・


5:[回答] ween [2003/05/26 21:51 ]

http://tohoho.wakusei.ne.jp/wwwxx038.htm
のページにある「■ 実例」自体もIE6で動きませんか?


6:[完了] りん [2003/05/27 09:15 ]

何度も同じ質問をしてすいませんでした。
動きました。
ありがとうございました。


7:[回答] りん [2003/05/27 12:00 ]

何度もすみません。上記のソートで伺いたいのですが、表の中に
ラジオボタンが入っていた場合、エラーになります。ラジオボタン
のソートボタンはなくてもいいのですが、このエラーを回避する
方法はあるのでしょうか?


8:[質問] りん [2003/05/27 14:05 ]

何度もすみません。上記のソートで伺いたいのですが、
表の中にラジオボタンが入っていた場合、動かなくなります。
ラジオボタンのソートボタンはなくてもいいのですが、
これを回避する方法はあるのでしょうか?


9:[回答] ma-to [2003/05/28 00:14 ]


> ラジオボタンのソートボタンはなくてもいいのですが、

わけも分からず言っているのだろうが、ボタンのある無しに関わらず、列をまとめておかないと、セル同士の関連付けが壊れるだろ、アホボケカス。
仮に端から関連が無いとすれば、ほぼ間違いなくそのマークアップに難があるな。

HTMLでtableを使う時、
「私は人を目が見えるかどうかで差別しています。」
と世界に向けて宣言したくないなら、少なくともこのくらい面倒なことになる。因みに、これではまだAHLで100点にはならない。だからというわけでは決してないが、何にせよ、世に出すためにはもう少し面倒なことになる。

    <table id="ROLL">
        <caption>名簿</caption>

        <col><col><col><col><col><col><col><col>

        <thead>
            <tr>
                <th id="A0:ROLL" scope="col" abbr="名前">名前\項目</th>
                <th id="B0:ROLL" scope="col" abbr="項目1">項目1</th>
                <th id="C0:ROLL" scope="col" abbr="項目2">項目2</th>
                <th id="D0:ROLL" scope="col" abbr="項目3">項目3</th>
                <th id="E0:ROLL" scope="col" abbr="項目4">項目4</th>
                <th id="F0:ROLL" scope="col" abbr="項目5">項目5</th>
                <th id="G0:ROLL" scope="col" abbr="項目6">項目6</th>
                <th id="H0:ROLL" scope="col" abbr="項目7">項目7</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th id="A1:ROLL" headers="A0:ROLL" scope="row" abbr="あいうえお"><input type="radio" name="name"> あいうえお</th>
                <td headers="B0:ROLL A1:ROLL">55</td>
                <td headers="C0:ROLL A1:ROLL">1980/04</td>
                <td headers="D0:ROLL A1:ROLL">20</td>
                <td headers="E0:ROLL A1:ROLL">15</td>
                <td headers="F0:ROLL A1:ROLL">500</td>
                <td headers="G0:ROLL A1:ROLL">.360</td>
                <td headers="H0:ROLL A1:ROLL">+10800.2</td>
            </tr>
            <tr>
                <th id="A2:ROLL" headers="A0:ROLL" scope="row" abbr="かきくけこ"><input type="radio" name="name"> かきくけこ</th>
                <td headers="B0:ROLL A2:ROLL">24</td>
                <td headers="C0:ROLL A2:ROLL">2003/04</td>
                <td headers="D0:ROLL A2:ROLL">5</td>
                <td headers="E0:ROLL A2:ROLL">12</td>
                <td headers="F0:ROLL A2:ROLL">1000</td>
                <td headers="G0:ROLL A2:ROLL">.478</td>
                <td headers="H0:ROLL A2:ROLL">+39.6</td>
            </tr>
            <tr>
                <th id="A3:ROLL" headers="A0:ROLL" scope="row" abbr="さしすせそ"><input type="radio" name="name"> さしすせそ</th>
                <td headers="B0:ROLL A3:ROLL">35</td>
                <td headers="C0:ROLL A3:ROLL">1995/10</td>
                <td headers="D0:ROLL A3:ROLL">25</td>
                <td headers="E0:ROLL A3:ROLL">18</td>
                <td headers="F0:ROLL A3:ROLL">860</td>
                <td headers="G0:ROLL A3:ROLL">.874</td>
                <td headers="H0:ROLL A3:ROLL">-408.5</td>
            </tr>
            <tr>
                <th id="A4:ROLL" headers="A0:ROLL" scope="row" abbr="たちつてと"><input type="radio" name="name"> たちつてと</th>
                <td headers="B0:ROLL A4:ROLL">46</td>
                <td headers="C0:ROLL A4:ROLL">1979/04</td>
                <td headers="D0:ROLL A4:ROLL">10</td>
                <td headers="E0:ROLL A4:ROLL">9</td>
                <td headers="F0:ROLL A4:ROLL">690</td>
                <td headers="G0:ROLL A4:ROLL">.760</td>
                <td headers="H0:ROLL A4:ROLL">-2067.3</td>
            </tr>
            <tr>
                <th id="A5:ROLL" headers="A0:ROLL" scope="row" abbr="なにぬねの"><input type="radio" name="name"> なにぬねの</th>
                <td headers="B0:ROLL A5:ROLL">28</td>
                <td headers="C0:ROLL A5:ROLL">1998/09</td>
                <td headers="D0:ROLL A5:ROLL">13</td>
                <td headers="E0:ROLL A5:ROLL">13</td>
                <td headers="F0:ROLL A5:ROLL">900</td>
                <td headers="G0:ROLL A5:ROLL">.339</td>
                <td headers="H0:ROLL A5:ROLL">+8.2</td>
            </tr>
        </tbody>
    </table>


こういう感じで、あなたのHTMLを書いてみてはいかがだろう。


10:[回答] ma-to [2003/05/28 00:54 ]


訂正。
> 列をまとめて
--> 行をまとめて


テスト。

    <p id="P">hoge</p>

    var
        p = document.getElementById('P'),
        hoge = p.firstChild;

    //alert(hoge.nodeValue); // 'hoge'

    hoge.nodeValue = 'hoge';

    alert(p.firstChild == hoge); // true


意味が分からないと思うが、これは、そのwww入門の作者が結果的にitとoneの区別 (参照なのか値なのかの区別) が出来ていることを示す。正直言って驚いたが、多分、無闇に標準化していった結果の良好な副作用だろうと想像する。何故なら、「書き出す」という発想に帰着させること自体が理解不足を示しているから。
まあ、何にせよ、出来の良いものではないので、それを無視したい。

オリジナル、とでも言おうか、特に英語圏のサイトで時々遭遇する「部品」がヴェンダーのサイトにある。
http://msdn.microsoft.com/library/en-us/dndude/html/qualsort.asp
これは良い。まるでアルゴリズムの講義の課題へのレポートのような香ばしい出来だ。参考にするならこういうものをするべきだ。


11:[回答] ma-to [2003/05/28 04:34 ]


小汚い部品を書いてみた。セル内のマーク付けは自由に出来る。

    <PUBLIC:COMPONENT NAME="sorter" lightWeight="true">
        
    <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="sorter();"/>
    <!--
    例えば、hogeという名前の部品を先に使う可能性がある場合、
        onevent="if (element.hoge) sorter(); else setTimeout(sorter, 1000);"
    のように、緩衝を入れる工夫が必要。
    -->
    
    <SCRIPT LANGUAGE="JScript">
        
    // 変数 ////////
        
    sorter.sorted = null;
      
    // イベント ////////
    sorter.eventListeners =
    {
        
        setSorted : function($_) {
            if (sorter.sorted && sorter.sorted.contains($_.srcElement)) {
                sorter.doSort(sorter.sorted.reverseList);

                sorter.sorted = null;
            }
            else {
                sorter.sorted = $_.srcElement;

                while (sorter.sorted.parentNode != sorter.row)
                    sorter.sorted = sorter.sorted.parentNode;

                sorter.doSort(sorter.sorted.list);
            }
        }
    ,
    
        stopPropagation : function($_) {
            $_.cancelBubble = true;
        }
    
    }
      
    // 関数 ////////
        
    sorter.parse = function() {
        this.makeLists(tFoot ? 2 : 1, rows[0].cells);
        this.makeSorter('on' + 'click', this.eventListeners.setSorted);
    }
    
    sorter.makeLists = function($initialRowIndex, $headingCells) {
        var
            testCells = rows[$initialRowIndex].cells,
            rowIndex = $initialRowIndex,
            cellIndex = 0;

        try {
            do
                makeList(isNaN(Number(testCells[cellIndex].innerText)) ? String : Number, new Array);
            while (++cellIndex);
        } catch (sentinel) {
            ;
        }

        // ----
        function makeList($Object, $list) {
            try {
                while (($list[$list.length] = new $Object(rows[rowIndex].cells[cellIndex].innerText)).row = rows[rowIndex++])
                    ;
            } catch (sentinel) {
                rowIndex = $initialRowIndex;

                $Object == String ?
                    $list.sort() :
                    $list.sort(sorter.compareNumbers);

                $headingCells[cellIndex].list = $list;
                $headingCells[cellIndex].reverseList = $list.slice(0).reverse();
            }
        }
    }
    
    sorter.makeSorter = function($type, $eventListener) {
        var
            cells = (sorter.row = rows[0]).cells,
            cellIndex = 0;

        sorter.row.attachEvent($type, sorter.eventListeners.stopPropagation);

        try {
            while (cells[cellIndex++].attachEvent($type, $eventListener))
                ;
        } catch (sentinel) {
            ;
        }
    }
    
    sorter.doSort = function($list) {
        var
            tbody = tBodies[0] || element,
            sectionRowIndex = 0;

        try {
            while (tbody.appendChild($list[sectionRowIndex++].row))
                ;
        } catch (sentinel) {
            ;
        }
    }
    
    sorter.compareNumbers = function($0, $1) {
        return $0 - $1;
    }
      
    function sorter() {
        with (sorter) {
            parse();

            delete parse;
            delete makeLists;
            delete makeSorter;
            delete compareNumbers;
        }
    }
    
    </SCRIPT>
      
    </PUBLIC:COMPONENT>
      

最初にセルのデータを別途配列に格納する。この余計な手間は、実行時の速度を上げるため。格納に際して、参照を格納する。数値であればNumber、文字列であればString、として。そうすれば、各データがもともと帰属していた行への参照をプロパティとして持つことが出来る。これをすることで、配列作成の時点でソートしてしまえるという利点も生じる。つまり、実行時には、ソート無しに、配列要素の順番通りにappendChildすれば行入れ替えが完了する。また、配列にすることで、それに実装されているsortを利用できる。スクリプトでいくらがんばっても、速度に桁違いの差が出るから、実装されているメソッドがあればそれを使うに越したことはない。理屈の上では、実行速度は最大の部類に入ると思われる。
注意することは、イベント(名)を、ondocumentreadyにすること。単独で使う場合、oncontentreadyで何の障害も無いが、あくまで部品だから、他との兼ね合いというものがある。例えば、近隣のスレッドが求めている「テーブルを分割してそれに横スクロールを出す」という危険な部品を作って組み合わせる場合、oncontentreadyだと、キャッシュを再利用しようとする挙動によってIEが簡単におちる。

また、behaviorはCSSを利用したIEの優れた機能であるが、CSSに不正な記述を含めるべきではない。

    <!--[if gte IE 5.5000]>
        <script type="text/jscript">
        with (document.createStyleSheet()) {
            media = 'screen';
            addRule('#ROLL', 'behavior: url(http......./sorter.htc);');
        }
        </script>
    <![endif]-->

のようにして、切り分けられるべきだ。CSSが外から再利用される可能性を保有していることを常に頭に入れておくべきで、特にスクリプト関連の記述は絶対に含まれてはいけない。これに限らず、
「スクリプトで操作するCSSは、たとえ不正ではなくても別にする。」
ということが徹底されるべきだと思っている。徹底すれば、スクリプト無効の環境ではdisplay:noneが開かない、という類のアホ丸出しサイトがこの世から無くなる。

意味があるとは思えないが、Mozillaに対応する場合、述語をW3C化して、過去ログでTreeWalker使用のgetInnerText(ween氏)をHTMLTableCellElement.prototypeに__defineGetter__して、一通り使い終わったらdeleteすれば良い。(deleteするためには、最初に、HTMLTableCellElement.getInnerTextなどと定義されなければならない。)


12:[回答] chintara [2003/05/28 12:28 ]

データバインドはどう?
http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/content/data_binding.htm


13:[完了] りん [2003/05/29 13:53 ]

ありがとうございます。
難しいですが、がんばってやってみます。


14:[完了] ma-to [2003/05/29 22:50 ]


>>12

あるもの利用、ということからすれば、ここの過去ログにもどこかにあったように、transformNodeということになるし、あるいは、そのデータバインドもあるが、それでは、オブジェクトが丸ごとクローンで入れ替わってしまう。だからあえて泥臭くDHTMLな方法を採るのだと考えられる。HTCでなくても、こういうのは部品だから、丸ごと入れ替えることは避けられるべきではないかと。


15:[完了] ひじ [2003/05/31 10:23 ]

>>9
間違ってはいないけど、冗長とは思う。
このくらい単純な表であれば、必要なのはscope属性だけで、headers属性は必要ないと思う。
table要素のsummary属性はつけておいた方がよいと思う。Another HTML-Lintでもチェックできます。


16:[完了] ma-to [2003/05/31 12:20 ]

>>15

はあ?


17:[完了] ma-to [2003/05/31 12:53 ]

個人的に12は管理人臭いと思い込んでいるので、14では一応、礼儀知らずなりに言葉を選んでみたが、はっきり言うと、何も分かっていない。15にしてもそうだ。ポイントがずれている。いくらなんでも、HTMLの手本を書きたかったわけではないことくらい理解しろ。

「それ(それら)」を「それ(それら)」として扱わなければならないという明確な基準があった時にどうするか、ということだ。www入門というサイトはかなり有名で、カスどもの信頼を得ているから、そこにあるわけのわからんもののコピーが日本のサイトに溢れるのは宜しくないと感じたまでの話だ。

冗長だと? んなこたあ分かってるよ。興味を持った誰かが実験する時に、idだのheadersだのは必要なの。実験する奴など皆無だろうが、それでもやはり、書いておくことで勘の良い人には伝わるものだ。


18:[完了] ma-to [2003/05/31 13:15 ]


つーかー。冗長と感じた時点で、こいつは何でこんなことするんだろう、と疑問を持て。

邪推。
www入門の作者は、マイクロソフトの香ばしいのを見た時に、そこでなされているセレクションソートを冗長と感じただろう。でも、プレインCの技術者には良くある事だが、疑問を持てなかった。結果、マクロメディアのリファレンスにありそうなひょんな比較関数をでっちあげて、枠固定でTextオブジェクトだけを移動させるという信じ難い荒業を披露している。多分、本人は、小洒落た工夫でもしているつもりだろう。アホだ。

# 悪口の後では意味ないが、別にそのwww入門の作者に私怨があるわけでもなんでもない。
# 学生時代の講座の研究テーマが近いからか、その作者には寧ろ親近感すら憶える。
# アホがわけのわかっていないことをしたり顔で書いてきたので悪口が過ぎた。


19:[完了] chintara [2003/05/31 15:54 ]

私は管理人ではありません。12は8に対する回答です。9から11を無視した書き込みが礼儀知らずと思われたのでしょうが、知ったことではありません。何様だお前。


20:[完了] 管理人 [2003/05/31 17:08 ]

すっかりご無沙汰の管理人こと『ちゃいちゃんパパ』です。

実は、WEB相談室を閉鎖したいと思っているこの頃です。

ログのディスクスペースが思うようにとれないことの問題や、仕事が忙しくて趣味(本BBS等)などやっていられない状況で...。
そもそも私自身が、この系に対して情熱がなくなってきました...。

まして、BBSでは、ケンカや荒らしは付き物ですし、仲裁も煩わしい。

とにかく、ケンカは、お止め下さい!


21:[完了] chintara [2003/05/31 17:24 ]

ぜひ閉鎖してください。


22:[完了] ma-to [2003/05/31 20:01 ]


>>19

礼儀知らずの「私なりに」言葉をえらんでみたが


23:[完了] ma-to [2003/05/31 21:33 ]

19の「8への回答」という言葉を読む限りでは、まだ「全然」分かっていないようで、そういう「論外」「部外」者から文句を言われるのも照れるが。


関係無い話。

ほう。違うんだ。私の推理も大したこと無いな。。。にしても似ているねえ。。。
ところで、似ているだけの他人なのに、
「ぜひ閉鎖してください。」
と丁寧語で命令できてしまうのは何故かな。「ぜひ」ねえ。。。
何にせよ、ここに登場して間もない人間の言葉ではないな。

結論::管理人の多重ハンドルに触れてはならない。


24:[完了] chintara [2003/05/31 22:18 ]

>>22
私の誤読でしたか。失礼いたしました。

>>23
14の「オブジェクトが丸ごとクローンで入れ替わってしまう。だからあえて泥臭くDHTMLな方法を採るのだと考えられる」という推測に疑問を感じるんですよね。9で「わけも分からず言っているのだろうが」と質問者を愚弄したのはma-toさんではありませんか。もしかして、これも誤読で、「だからあえて泥臭くDHTMLな方法を採る」の主語は「質問者」ではなくなっているのかな?

最後に、繰り返しになりますが、私は管理人ではありません。そんなに似てますか?


25:[完了] ma-to [2003/06/01 00:01 ]


「だからあえて泥臭くDHTMLな方法を採る」の主語は「マイクロソフトの例の作者」または「質問者が参照したwww入門の作者」

後者にその思想は感じられないが、結果的に、部品として使えてしまうから、一応。


> 愚弄

質問者の連打に押し付けがましさを感じたから、気分を害した、というのは確か。基本的にそういうのは無視するに限るな。


26:[完了] chintara [2003/06/01 07:42 ]

8のエラーはデータバインドでも回避できるという証拠に、サンプルを作りました。
クズ以外の何物でもないことは承知していますので、気分を害された方には無視していただきたく存じます。

[test.htm]
<object id="dsoCustomer" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="test.csv">
<param name="UseHeader" value="true">
</object>
<script language="JScript">
function sort(datafld) {
    dsoCustomer.sort = datafld;
    dsoCustomer.reset();
}
</script>
<form>
<table datasrc="#dsoCustomer" border="1">
<thead>
<tr>
<th>選択</th>
<th><input type="button" value="名前" onclick="sort('Name');"></th>
<th><input type="button" value="年齢" onclick="sort('Age');"></th>
</tr>
</thead>
<tr>
<td><span datafld="ID" dataformatas="html"></span></td>
<td><span datafld="Name"></span></td>
<td><span datafld="Age"></span></td>
</tr>
</table>
<input type="submit" value="送信">
</form>

[test.csv]
ID,Name,Age
<input type="radio" name="ID" value="1">,Cindy,48
<input type="radio" name="ID" value="2">,Daisy,24
<input type="radio" name="ID" value="3">,Alice,36
<input type="radio" name="ID" value="4">,Ellen,18
<input type="radio" name="ID" value="5">,Barbara,52


27:[完了] ma-to [2003/06/03 03:36 ]


# chintaraという人間が日本語音痴なのはよく分かった。
# 言葉が通じない人間に、独り言を吐いていたようだ。アホらしい。


俺の言っていることを理解してくれないか。何ヶ月もかかるようなことを求めているのかもしれないが、だったら、理解できないのにわけの分からんことをするのは止めてくれないか。


出来る出来ない、ではない。もっと言えば、互換性があるとかないとかの問題でもない。だから、
> trasformNodeということになるし、あるいは、そのデータバインドもある
と言った。なのに何をわざわざ。。。よく読め。

ところで、荒らしのひじ氏は、このform直下のインライン要素を許容できるのか、見ものだ(笑)。


あと、エラーって、質問者レベルのそれはほんの染み出しに過ぎず、裏に完全なミスがあると指摘しているのだが。。。痛すぎる。


何で部品にこだわるか。

誰が使うか、を考えてみれば分かる。エキセントリックな初学者とエキセントリックなウェブ作成業者の一部だろう。普通の大人はこんな小技を使わない。そういう連中は、ページに色んな小技を共存させたがる傾向にある。そういう馬鹿相手に作られる小技は、部品としての体裁を取っていないと、実用的ではない。


ここから先は、自習してくれ。分かってないのはchintara氏だけかもしれないよ。


28:[完了] chintara [2003/06/03 22:17 ]

意外に思われるかもしれませんが、私も「クライアントサイドスクリプトでテーブルのソート」といった小技には感心しません。スクリプト非対応のUAのことを考えてもそうですし、ma-toさんのような上級者でなければ理想的な部品を作れないという現実を想起してもそうです。
では、なぜデータバインドのような部品ですらないものを私が推すのか。前段で述べた理由により、わざわざ部品を作るほどのものではないと感じたからです。もちろん作っても良いですが、使わざるをえない場面がいつ訪れるというのか。あるもの利用で充分ではないか。
ASP.NETを見れば分かるように、その是非はともかく、MSには部品への執着などありません。質問者が対象クライアントをIE6のみとしていることも、データバインドを推したもう一つの理由です。
以上、自習の結果報告でした。


29:[完了] ma-to [2003/06/04 03:00 ]


何のことかよく分からなくなった。

私はchintara氏という人に、いつもの管理人腹話術だろう、程度以上の関心を今まで持っていたわけでもなく、また、ここでも、氏に立腹したという事実は全く無い。逆に、右も左も分からない初心者の私が紳士を立腹させて小汚い言葉を意図せず吐かせてしまったことは、これを心から申し訳ないと思っている。

- - - -

土曜日に、WEB相談室を見ていた。2chWEBスレサポーターで荒しのひじ氏が所々でゲリラ活動をした痕跡が目に入った。
「マック? そのための条件コメント条件コンパイルじゃん。」
「横スクロールとか同期とか書いてるスレでよくこれだけ的外れなことを真剣ぶって書けるものだ。循環すれば済む話。」
などと呟いていたら、見憶えのあるスレッドにも活動の痕跡が。しかも荒し氏、思いっきりやっちゃってる。
突沸した。もしHTMLの講釈をしたかったのなら、AHLで-567点という偉業を達成している近所のスレッドでゲリラしただろうし。こいつ、冷たいの決めた勢いで、売ってんのかなあ、と思えた。荒し氏の朦朧とした視野のどこかで動いてしまったらしいが、何で俺だ、という疑問は今も消えない。
沸騰したが、今は冷めた。冷めていても、ここぞという時にはいつでも沸騰しなければならないのが男のつらいところだ。UZZA。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World