外部サイトでJSONデータをJSONPとして公開している場合、そのデータを読み込んで利用することができます。
今回は、JSONデータの読み込みについて書きます。まず、ローカルフォルダにデータを用意して、それを読み込んでみます。次に、外部サイトにあるデータを読み込んでみます。その他に、JSONデータの整形とセキュリティリスクについて簡単に書いています。
- JSON(JavaScript Object Notation)
- JSONP(JSON with padding)
- ローカルのJSONデータの読み込み
- 外部のJSONデータの読み込み
- JSONデータの整形
- JSONPのセキュリティリスク
- 参考
JSON(JavaScript Object Notation)
以下は、JSONデータの記述例です。
{ "name": "sato", "mail": "sato@example.com" }
このままでは読み込めないので、JSONをJSONP(JSON with padding)形式にします。
JSONP(JSON with padding)
JSONPは、外部サイトのJSONデータを読み込む仕組みです。
JSONデータを読み込むために、JSONP形式にデータを加工します。具体的には、データをJavaScriptの関数(function名())で囲います。
//user.jsonp callback({ "name": "sato", "mail": "sato@example.com" });
ローカルのJSONデータの読み込み
まずは、ローカルフォルダにデータを用意して、それを読み込んでみます。用意するファイルは、以下です。
- index.html
- user.jsonp
ex.)ボタンクリックで、データを読み込みます。
//user.jsonp callback({ "name": "sato", "mail": "sato@example.com" });
<!-- index.html --> <form> <input type="button" id="btn" value="データ取得"> </form> <div id="result"></div>
<script> //データの読み込み document.getElementById('btn').addEventListener('click', function(){ const url = 'user.jsonp'; const scr = document.createElement('script'); scr.src = url; document.getElementsByTagName('body').item(0).appendChild(scr); }); //データの加工 function callback(data){ if(data === null || data === undefined){ result.textContent = 'データは存在しません。'; }else{ const user = data; const ul = document.createElement('ul'); const li = document.createElement('li'); const text = document.createTextNode(`${user.name}, ${user.mail}`); li.appendChild(text); ul.appendChild(li); result.appendChild(ul); } } </script>
scriptタグは、外部のJavaScriptファイルを読み込めます。この性質を利用して、JSONデータを読み込みます。<script src="user.jsonp"></script>を読み込むことでcallback関数が実行され、JSONデータを取得します。データ読み込みの原理を知るには、コールバック関数について調べると良いです。
外部のJSONデータの読み込み
はてなブックマークエントリー情報取得API | Hatena Developer Centerを利用して、JSONデータを読み込んでみます。
以下のページのデータを読み込んでみます。
https://b.hatena.ne.jp/entry/example.com/
ex.)ボタンクリックでデータを読み込み、コンソールに表示します。
<form> <input type="button" id="btn" value="データ取得"> </form> <div id="result"></div>
<script> //データの読み込み document.getElementById('btn').addEventListener('click', function(){ const url = 'http://example.com/'; const requestURL = 'https://b.hatena.ne.jp/entry/jsonlite/?callback=callback&url=' + encodeURIComponent(url); const scr = document.createElement('script'); scr.src = requestURL; document.getElementsByTagName('body').item(0).appendChild(scr); }); //データの加工 function callback(data){ if(data === null || data === undefined){ result.textContent = 'データは存在しません。'; }else{ const bmks = data; console.log(JSON.stringify(bmks, null, 2)); } } </script>
コンソールを表示すると外部JSONデータが読み込まれるのが、確認できると思います。
JSONデータの整形
JSONデータを取得すると人間には読みづらい形で取得されることがあります。そこで、読みやすいように整形する方法を2つご紹介します。
- JSON.stringify()
- console.dir()
JSON.stringify()
JSON.stringify()で、データを整形します。
//構文 JSON.stringify(JSONオブジェクト, null, インデント数);
JSON.stringify()の引数に関しては、各自で確認してください。*1
//サンプルコード console.log(JSON.stringify(data, null, 2));
console.dir()
オブジェクトの中身をコンソールで確認するだけなら、console.dir()を使います。
//構文
console.dir(JSONオブジェクト);
//サンプルコード
console.dir(data);
JSONPのセキュリティリスク
機密データをJSONPとして持ってしまうと、外部からアクセスできてしまいます。外部に見られても良いデータをJSONPとして持つのは問題ありませんが、外部に公開したくないデータはJSONPで持たないでください。
