JavaScript 2.0 支援ツール「XML 2 JSON service」って何？
XML を JSON に変換するサービスです。この技術を用いることで、
- クロスドメイン制限を超えて JSON 形式で XML 形式のデータを利用することが可能となります。
- JSON は XML と比較して JavaScript 上で非常に扱いやすいため、コツを掴めば簡単に自分のサイトで利用できます。
既に幾つかのサイトで実装されていますが、不特定多数の方にサービス提供するために負荷対策を施し、XML 2 JSON service ベータサービスを公開することにしました。
最近良く聞く Ajax とは何が違うの？
最近、流行りまくっている Web 2.0 と呼ばれるものの基礎技術の１つとして Ajax があげられます。Ajax は大変便利な技術なのですが、セキュリティの観点から自ドメインへのアクセスしか許可されていません（正確には、XMLHTTPRequest のクロスドメイン制限）。
Flash にも同じようにクロスドメイン制限がありますが、crossdomain.xml にて相手側のリクエストを許可する仕組みがありますが Ajax にはコレに相当する仕組みがありません。
そこで注目されはじめた技術が JSON (JavaScript Object Notation) と呼ばれる技術です。JSON は JavaScript 上でそのまま使えるデータ形式でクロスドメイン制限がないという特徴を持ちます。したがって、別ドメインで配布されている JSON を自ドメイン内から JavaScript レベルでデータを利用することができます。
JSON についてもう少し知りたい
Collection & Copy - JSON入門によれば、
JSONは2つの構造を基にしています。
- 名前/値のペアの集まり。様々な言語で、これはオブジェクト、レコード、構造体、ディクショナリ、ハッシュテーブル、キーのあるリスト、連想配列として実現されています。
- 値の順序付きリスト。ほとんどの言語で、これは配列として実現されています。
動作環境は？
サーバ側で必要なものは、JavaScript が記述可能な環境です。無料系ブログサービスでじゃ JavaScript を記述できないようになっているものもあります。そのような環境ではご利用頂けません。
クライアント環境として、閲覧可能なブラウザの検証は以下の通りです。Opera 系がＮＧなのでご注意下さい。
| ブラウザ | 動作検証 |
|---|---|
| Win IE | ○ |
| FireFox | ○ |
| Opera | × |
| Safari | ？ |
利用許諾
- 無料でお使い頂けます。ただし、当サイトの xml2json サーバが各サービスへのアクセスを中継する形となりますので、Yahoo! 検索WebサービスやGoogle Web API 等のようにアクセス数制限があるサービスに対しては、ご利用をお控え下さい。すぐにアクセス数制限を超えてアクセス不可になると思います。
- あまりに容量の大きい XML は破棄して処理を中断する仕組みが実装されています。
- 一定期間、結果をキャッシュします。最新の動きを追うような用途には期待した結果が得られません。
- 負荷の問題等で、突然サービスを終了する可能性もあります。ご了承下さい。
導入方法（ xml2json の利用方法）は？
xml2json サービスは REST API で行うことができます。必要なパラメータを GET で付加します。結果は JSON で取得できます。（サンプル：Livedoor Weather Web Service）
| URL | update.2020.11.9: SSL 対応のためURLが変更になりました https://www.drk7.jp/App/xml2json/ |
| Method | GET |
| Parameters | url： XML を結果として返す URL (URL Encoded) var： 結果を格納する JavaScript 内で定義したオブジェクト名 |
| Returns | JSON |
XML2JSON service を利用した簡単なサンプル
Livedoor Weather Web Service を利用して、東京の天気予報をサイトに貼り付ける demo
ソースファイルは以下のとおり。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>xml2json sample</title></head><body><div>結果（UTF8）：<span></span></div><div id='searching' style='display:none'>now searching...</div><script type="text/javascript">var city = '63';var day = 'tomorrow';var name = 'lwws1';var proxy = 'https://www.drk7.jp/App/xml2json/';var lwws1 = {};lwws1.init = function() { var script = document.createElement('script'); script.charset = 'UTF-8'; script.src = proxy + 'var=' + this.name + '&url=' + escape('http://weather.livedoor.com/forecast/webservice/rest/v1?city=' + this.city + '&day=' + this.day); document.body.appendChild(script);}lwws1.onload = function(data){ var d = document.getElementById('id_result'); d.innerHTML = data["location"]["pref"] +' '+ data["location"]["city"] +' '+ data["telop"] +' '+ '<img src="' + data["image"]["url"] + '"><br>'+ data["description"];}var old = window.onload;window.onload = (typeof old != 'function') ? lwws1.init : function(e) { old(e); return lwws1.init(e); };</script></body></html>結果は以下のように表示されると思います。
なんて具合に、ちょっとした JavaScript を埋め込むだけで、お天気情報を表示できたりします。当サイトで公開しているMTWeather と違い、MovableType 以外の方でもご利用頂けます。
update 06.02.20 / utf8 以外の XML に対応
update 06.03.11 / Sampleコードを変更
- 参考：XML 2 JSON serviceを使ってFlickr Badgeを作る - Ogawa::Memoranda
