HTML内で表示しないデータを持ちたい

質問

jqueryなどで操作するデータをHTML内に非表示で埋め込みたいのですが、
どうやるのが一般的かわからず、質問させていただきました。

たとえば、テストの点数をデータとして持ちたい場合、XMLチックに

<result date="20111120">
　<record class="国語" point="80" />
　<record class="数学" point="60" />
　<record class="英語" point="90" />
</result>

といった持たせ方を考えたのですが、これが良いのかわからず、かといって、<div>タグで

<div id="testResult" date="20111120" style="display:none">
　<div tagId="record" class="国語" point="80" />
　<div tagId="record" class="国語" point="80" />
　<div tagId="record" class="国語" point="80" />
</div>

などとやるのが良いのかも良くわかりません。

どのようにやるのがスマートな方法なのでしょうか？

よろしくお願いします。

回答No.5

ORUKA1951

HTML内に非表示でということは、ソース表示あるいはjavascript,CSSのいずれかが使えないと見られると言うことでよいのですか？
通常はご自身が書かれているようにXMLでデータを持ち、XSLTでHTML(XHTML)に変換し、そのプレゼンテーションをJQuery,CSSでコントロールする形だと思いますが・・・

回答No.4

神崎 渉瑠（@taloo）

すみません、補足追加です。
No.3の（jQueryはよくわかりませんので、、、）の下に挿入して考えてください。

--------------
>jqueryなどで操作するデータをHTML内に非表示で埋め込みたいのですが、
>どうやるのが一般的かわからず、

『一般的』にはXMLDocumentを生成する方法ではなく、JSONで作っておいた物をそのまま使用する、２番目の例のような方法だと思います。

ですが最近では、Ajaxも『一般的』に使用されています。

つまり、HTML内にデータを保持するのではなく、
XMLデータはサーバーで生成（当然、CGI（Perl、PHPなど）が絡む）するのも『一般的』です。

$('#output').load({url: 'http://・・・', some:some, any: any});

jQuery.load()は、JavaScriptでXMLをHTMLに変換する物ではなく、サーバーでHTMLを生成しておいた物を挿入するだけだったと思うので、質問の目的とは若干、意味は違いますが、、、

データのすべてがサーバーに保存されていれば、簡単に生のデータを見る事はできませんから、
データを隠蔽できる＝スマート、という言い方はできるかもしれません。
データを直接扱うCGIスクリプトがどんなにめちゃくちゃでも、他人にはわかりませんしね。（笑）

補足

丁寧にありがとうございます。

ただ、やはりJSONでデータを持つ形式はやりたくないのです。

CSSを差し替えれば、表示が変わり
javascriptを差し替えれば、動作が変わり、
HTML部分の値を差し替えれば、データが変わる。

といった形がやはりスマートだと思います。

いろいろ考えましたが、
tableタグなどでデータを持ち非表示にすることで対応したいと思います。

回答No.3

神崎 渉瑠（@taloo）

「スマートの定義」は何ですか？

<script>
var data='<result date="20111120">'+
　'<record class="国語" point="80" />'+
　'<record class="数学" point="60" />'+
　'<record class="英語" point="90" />'+
'</result>';
</script>

としておけば、

$('document').ready(function(){
var doc=new XMLDocument(data);
var date=docs.getElementsByTagName('result')[0].getAttribute('date');
var html='<p>'+date + '</p>';
html+='<dl>';
var recs=doc.getElementsByTagName('record');
for(var i=0,rec;rec=recs[i];i++){
　var cls = rec.getAttribute('class');
　var pts = rec.getAttribute('point');
　html += '<dt>' + cls + '</dt><dd>'+ pts + '</dd>');
}
html+='</dl>';

$('#output').html(html);
});

などという書き方もできると思います。

JSONなら以下のようになると思います。

<script>
var data={date : "20111120",
　record : [
　　{'class': '国語' : point : 80},
　　{'class': '数学' : point : 60},
　　{'class': '英語' : point : 90}
　}
}

$('document').ready(function(){
var html='<p>'+data.date + '</p>';
html+='<dl>';
var recs=data.record;
for(var i=0,rec;rec=recs[i];i++){
　var cls = rec.class;
　var pts = rec.point;
　html += '<dt>' + cls + '</dt><dd>'+ pts + '</dd>');
}
html+='</dl>';

$('#output').html(html);
});

（jQueryはよくわかりませんので、適宜最適化してください。）

XMLデータやJSONデータを別ファイルとして保存しておいたり、CGIで動的に生成した物をAjaxで取得するなら、data変数やrec変数の初期化の仕方がまた違ってきますが、
データの保存場所として、
・<script>タグで記述した部分にするか、
・別ファイルとして保存しておいて、XHR（XMLHttpRequest、いわゆるAjax）で取得するか
その違いだけだと思います。

ですが、<div>タグで持たせる方法はお勧めしません。

var docs=document.getElementById('testResult');
とやれば、XMLの例と全く同じ方法で作る事はできます。
ですが、スクリプトとCSSを停止したブラウザで、そのデータが丸々表示されます。
これは、利用者に「何が書かれているのか」と混乱させる原因となります。
もちろん、スクリプト、CSS必須が閲覧条件のサイト（ページ）にするなら、この限りではありません。

データの保存方法について、以下のページも参考になると思います。
http://okwave.jp/qa/q7122714.html

回答No.2

lupin-333333

＞この分離の原則が崩れてしまうため、避けたいのです。

その意味合い、少し誤解しているかも。単にカプセル化の話をしていると思いますよ。例えばプラグインの開発とか、フレームワークなど原則論がないと、まとまりがつかないですからね。自己仕様なら、どうでもかまわないと思いますが・・・。

第3三者に公開する場合の、こころえと思えばいいのではないでしょうか。

いずれにせよ、HTMLソースに含めるなら、XML対応ブラウザ、非対応ブラウザに対する動作の違いを考量してください。非対応なら、そのまま文字列として表示してしまいますね。

それとDOMとして取得するに当たって、どう動くかも違ってきます。ためせば分かります。

回答No.1

hanabutako

普通そういうことをしたい場合はJSON形式でデータを与えそうな気がしますが。
データの置き場所としては別ファイルのデータをscriptタグで参照することで読んできてもいいですし、同じJavaScriptのプログラム中に書いても良いと思いますが。

補足

jqueryの書籍を買ったのですが、そこに手続き(jquery)とデータ(HTML)と表示(CSS)の分離がjqueryの最大の目的と書かれていました。

このjqueryをフルに使用したサイトを作成したいと思っており、
JSONでデータを持ってしまうと、この分離の原則が崩れてしまうため、避けたいのです。

よろしくお願いします。