xmlファイルを受け取って指定した箇所を書き換えてxmlファイルを返す処理

data.xmlというxmlファイル(実を言うとgraphmlファイル)が与えられています。

XML
1<!--前略-->
2<node id="hoge1">
3  <data key="d0" >
4    <y:ShapeNode >
5    <y:Geometry width="30.0" height="30.0" x="0.0" y="0.0"/>
6    <y:Fill color="#FF0000" transparent="false" />
7    <y:BorderStyle type="line" width="1.0" hasColor="false" />
8    <y:NodeLabel color="#949494" visible="true">hoge1</y:NodeLabel>
9    <y:Shape type="circle" />
10    </y:ShapeNode>
11  </data>
12</node>
13<node id="hoge2">
14  <!--中略-->
15</node>
16<!--省略-->

といった形で各nodeが書かれているとします。

JavaScriptにより
sample_tsv.txt
hoge1 piyo1 #fuga1
hoge2 piyo2 #fuga2
というTSVを受け取って、TSVの最初の列で指定したnode idのnodeの、
・y:GeometryのwidthとheightをTSVの第2列で指定した数値の10倍だけ倍にする
という操作や、
・y:Fill colorをTSVの第3列で指定した色コードに書き換える
という操作をdata.xmlに対して行いたいです。処理後はdata_ed.xmlなど何か別名のxmlファイルとしたいです。

理想は何かウェブブラウザ上のUIでそういった処理を行いたいところですが、現時点ではとりあえずjsのコードと同じディレクトリにあるtsvやxmlを受け取る形です。

http://www.openspc2.org/reibun/D3.js/code/file/xml/0001/index.htmlを参照しながら
d3.xmlによりnodeタグの要素を取り出し、そのタグの数だけforで処理しようとしました。
まず前述のサイトのように、tsvによる指定などはしないでhoge1などだけを表示しようといましたが、
以下のようにJSコードを書き換えて上述の私のdata.xmlを用いたのですが、コンソールに
yNodeLabel[0].firstChild is null
と表示されてしまいました。

JavaScript
1d3.xml("data/data.xml", "application/xml", function(error, xmlRoot){
2	var node = xmlRoot.getElementsByTagName("node");
3	var text = "";
4	for(var i=0; i<node.length; i++){	// 指定タグの数だけ処理
5		var yNodeLabel= node[i].getElementsByTagName("y:NodeLabel");
6		text += yNodeLabel[0].firstChild.nodeValue +"<br>";
7	}
8	d3.select("#result").html(text);
9});

当方、Windows8.1で、ブラウザはFirefoxです。
なお、上述のサイトはオンラインであればchromeでも「サンプルを実行する」ことができるようですが、
DLしたサンプルを動かしてみるとchromeではD3.jsサンプルという太字だけが出現しました。

以上長くなってしまいましたが、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

jsのコードと同じディレクトリにあるtsvやxmlを受け取る

つまりリソースはサーバー上ですよね。

サーバー上のリソースを XMLHttpRequest (Ajax に使われる技術) で受信することは可能ですが、それをサーバー上に (JavaScript で) 保存することはできません。
ブラウザからサーバーにおいてあるデータを書き換えることができたら怖いですよね。
いろんなウェブサイトを改変し放題です。

ただし、サーバーに送信することはできます。
サーバーがそれをどう扱うか、どこにどういう名前で保存するかはサーバーサイドプログラムの実装次第です。

また、ローカルで動かないのも同じくセキュリティ上の問題です。
ダウンロードした HTML からローカルのファイルを相対パスで読み込めたら怖いですよね。
JavaScript のプログラムから PC の中が覗き放題です。
覗くだけならまだしも、上で述べたようにサーバーに送信することができてしまいます。
サーバーが受け取った個人情報をどう扱うかはプログラム次第で、どうにでも出来てしまいます。

案としては、JavaScript 上で作成したファイルを、サーバーに送るのではなくブラウザでダウンロードする方法があります。
ブラウザ上で作られたファイルを保存するだけなので厳密にはダウンロードではないのですが、挙動としてはダウンロードと同様の動きとなります。
またはサーバーに送信し、サーバーサイドプログラムを使用して保存する事もできます。

また、元となるファイルもサーバー上においておく方法と、ブラウザ上でファイル選択ダイアログを使って渡す方法があります。
ユーザーが自分の操作で選んだファイルに限ってはローカルファイルでも読み込み可能です。

・JavaScriptでローカルファイルを自在に操る - File API | Think IT（シンクイット）
・javascript - JavaScriptからファイルをダウンロードさせるのはどうしたら良いですか？ - スタック・オーバーフロー

まずは読み込み・書き込みともに、どのような動作が理想なのかを検討して手法を決めて、具体的な実装方法で詰まったら改めてご質問されると良いと思います。

投稿2015/11/06 05:23

tozjp

総合スコア790

chijan

2015/11/11 06:32 編集

D3はそのファイルをDLしておいて持ってくることにより、オフライン作業でブラウザはUIに過ぎないという場合にしても、そもそもJSでXMLファイルの中身を書き換えるということはできないということでしょうか？ setAttributeを使っても、ファイル自体は書き換えられませんでした. LocalStorageにXMLファイルを保存してから書き換えるようにするべきでしょうか？

tozjp

2015/11/11 08:29

何が起こっているかのイメージです。 ================== chijan さんのコード：d3.xml(); を実行 ↓ D3.js：XMLHttpRequest を実行 ↓ ブラウザ：data.xml というURLにアクセスを試みる ↓リクエストサーバー：data.xml を見つけた。中身を文字列で送り返す ↓レスポンスブラウザ：文字列で受け取る ↓XMLHttpRequest のコールバック D3.js：構文解析してオブジェクト型の値を作る ↓d3.xml(); のコールバック chijan さんのコード：オブジェクトを書き換える ================== ということで、書き換えているのは元のファイルとは程遠い、ただの変数です。 > LocalStorageにXMLファイルを保存してから書き換える関係ないです。 LocalStorage はファイルを保存するところではありません。文字列しか保存できません。ブラウザ上の JavaScript でファイル操作するなら、まずはローカルファイルとリモートファイルが別物だということをしっかり意識してください。これは HTML ファイルがローカルにあったとしてもです。もし HTML をサーバーにアップロードして実行したら、そのファイルはどちらにあるかでイメージしてください。ローカルファイルはファイル選択ダイアログで読み込み、ダウンロードで書き込みします。それ以外の方法で JavaScript 上からパス指定などでアクセスするファイルはすべてリモートファイルです。JSから読み書きはできません。 JS でできるのは、リクエストで「中身を教えてもらう」「書き換えてもらう」ことを依頼することまでです。依頼を受け取ったサーバーサイトプログラムが、実際にファイルを見たり、ファイルがなくても嘘の中身を送り返したり、ファイルを書き込んだり、書き込んだふりをして成功しましたと返したりします。

chijan

2015/11/11 11:12

ありがとうございます。ダウンロードによる書き込みの指針で考えていきます。

行動規範の内容に同意します