javascriptで、ロードしたファイルのハッシュを確認したい。

いつもお世話になります。

現在、javascriptでロードしたファイルのハッシュを確認したいと考えています。
（具体的には、Three.jsでjsonファイルのハッシュを確認しながらロードできないかと考えています。）

ファイルハッシュの取得に関して参考にしているのはこちらのGitHubです。
（参考にしたGitHub）
https://github.com/satazor/js-spark-md5
この中では、htmlのinputを使用してファイルを指定しています。

これをFile APIのfilereaderに、パスを引数に渡して読み込む…という様な感じにしたいのですが、過去ログを参考にすると、javascriptではできないみたいですね。
（参考にした過去ログ）
https://teratail.com/questions/39844

ただ、ハッシュをとりたいのがjsonloaderで読み込めるファイルである場合、何か方法があるのかも…と調べている次第です。しかし、これといった情報が見つかりません。これは矢張り不可能なのでしょうか？

もしご存じの方がいらっしゃいましたら、ご教示下さい。
よろしくお願いします。

kei344

2017/06/27 02:49

「javascriptでロードしたファイル」はどのような方法でロードするのでしょうか。

shi_ue

2017/06/27 03:03 編集

File APIが使えれば可能そうですが、「javascriptではできない」と判断された理由を教えてください。あ、いや、なんでもありません（笑）ローカルファイルは取得できませんでしたね。

essex

2017/06/27 05:12

kei344様　説明不足で申し訳ありません。Three.jsのjsonloaderで読み込むことを考えています。こんな感じです。http://kimuraya-bakery.la.coocan.jp/kabuto2/

essex

2017/06/27 05:15

shi_ue様　仰るとおりです。File APIのファイルオブジェクトのプロパティにも使えそうなものがなかったので、そのように考えました。

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

回答1件

ベストアンサー

ajaxでjsonを読み込むなら、

javascript
1var hexHash = SparkMD5.hash('Hi there');
2```と同じ方法でハッシュ出来そうですけど？
3
4追記
5---
6検証コードを作ってみました。
7`test.php`
8```php
9<?php
10header("Content-type: application/json; charset=utf-8");
11// Livedoorお天気Webサービス
12// http://weather.livedoor.com/weather_hacks/webservice
13echo file_get_contents("http://weather.livedoor.com/forecast/webservice/json/v1?city=130010");

test.html

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title></title>
6  <style>
7    * {box-sizing:border-box;}
8    #rawData {width:800px;height:300px}
9    #hash {width:400px;}
10  </style>
11  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
12  <script src="spark-md5.min.js"></script>
13  <script>
14    $(function(){
15      $.ajax({
16        cache: false,
17        dataType: "text",
18        url: 'test.php',
19        type: 'GET',
20        success: function(data) {
21          $('#rawData').val(data);
22          var hexHash = SparkMD5.hash(data);
23          $('#hash').val(hexHash);
24        }
25      });
26    });
27  </script>
28</head>
29<body>
30<p><textarea id="rawData"></textarea></p>
31<p><input type="text" id="hash"></p>
32</body>
33</html>
34```天気予報が変わるまでは、同じハッシュが返ります。
35キャッシュをクリアしても同じ値になるので、同じJSONだと確認できます。

投稿2017/06/27 03:04

編集2017/06/27 04:34

shi_ue

総合スコア4437

shi_ue

2017/06/27 04:40

既に読み込まれているなら、もっと簡単に、　　hash = SparkMD5.hash( JSON.stringify( json ) ); ってやれば、hashが取れますね。

essex

2017/06/27 07:48

shi_ue様ありがとうございます。 ajaxはやったことがありませんでしたが、検証コードまで作成して下さり、大変勉強になります。ただ、残念ながら今のところ、正しい値が取得できません。例えば私のHP内にある以下のjsonの場合、 http://kimuraya-bakery.la.coocan.jp/kabuto2/chassis.json 正しいハッシュは 49D517F7BA3855951604C7F065DCBE74 になるのかと思うのですが、その様に出力されません。また、以下の様な形でファイルロードしてみましたが、異なる値が表示されてしまいます。 var loader = new THREE.FileLoader(); loader.load( 'chassis.json', function ( data ) { var hash = SparkMD5.hash( JSON.stringify( data ) ); alert(hash); } ); 何が悪いのでしょうか……

shi_ue

2017/06/27 08:00

JSON を stringify した値と、JSONファイルをMD5した値は変わります。（ファイルは改行コードなどがありますので、変わります）なので、こちらのコードで出来上がったMD5を正しいとして扱ったらいかがでしょうか？

essex

2017/06/27 08:10

shi_ue様ご回答、ありがとうございます。ご指摘の通りでした。試しに　var hash = SparkMD5.hash( data ); としてみたところ、正しい値が表示されるのも確認できました。とても勉強になりました。ありがとうございました。

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