XML を JSON に変換するサービス - ベータ版を公開
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は、軽量のデータ交換フォーマットです。人間にとって読み書きが容易で、マシンにとっても簡単にパースや生成を行なえる形式です。JavaScriptプログラミング言語（ECMA-262標準第3版 1999年12月）の一部をベースに作られています。JSONは完全に言語から独立したテキスト形式ですが、C、C++、C#、Java、JavaScript、Perl、Python、その他多くのCファミリーの言語を使用するプログラマにとっては、馴染み深い規約が使われています。これらの性質が、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 http://app.drk7.jp/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 id="id_result"></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 = 'http://app.drk7.jp/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
forecastdateを表示すると、名古屋以外は、その日の日付データがでません。
なので、天気予報が全く当たらない状態です。
livedoorが悪いのでしょうか。。
東京（63）に関してはtodayでやって、
現在28日ですが、25日が表示されてしまいます。
このサービスが使えて大変感謝しております。
ひとつ質問があります。
本日（１９日）の天気予報を表示すると内容が１７日の天気予報が表示しています。
LivedoorのＸＭＬの内容は本日の内容を表示しますが、なぜでしょうか？
ちなみに地区のコード（city）は73です。
教えてください。よろしくお願い致します。
そこでお尋ねしたいことがあります。
時々表示されなくなる場合があります。
これは、
> アクセス数制限があるサービスに対しては、ご利用をお控え下さい。
> すぐにアクセス数制限を超えてアクセス不可になると思います。
という内容に該当するものなのでしょうか？
また、１日どのくらいのアクセスでアクセス不可になりますか？
１日の最大アクセス数を教えていただけますでしょうか？
とても便利です！がんばってください！
ちなみにIntelMacを使ってますが、FireFoxとSafari3.0.4では動作しました。
大阪の天気予報をブログに載せました。
ありがとうございます。
最高気温と最低気温も追加させていただきましたが、
問題なかったでしょうか？
便利な機能ですね。ありがとうございました。
Youtube.APIのXMLのリストのVideo件数が１件しか無い場合や１件のみ切り出そうとした場合と
リストのVideo件数が複数件ある場合とでdrk7さんを通したときのJSONの形が違うようです。
１０件切り出したときはvideoの下にid階層があるのに対して、
１件切り出したときはvideoの下にid階層がありません。
これでちょっと悩みましたが、問題は解決しましたので、
http://netoureseach.blog92.fc2.com/
に実装してみました。
以前と見た目は同じなんですが(＾＾；
良いサービスをどうもありがとうございます。
ちょっと使わせて頂こうと思いいろいろやっていました。
YoutubeからAPIをdrk7さんを通して引っ張ってきたんです。
ところが、Youtube.APIのXMLのリスト件数が１件しか無い場合や１件のみ切り出そうとした場合にJSONを受け取れないようなのです。
(両方共ブラウザでXMLが出力されているか確認済み)
Youtube.APIのXMLのリスト件数が複数ある場合にはJSONを受け取れるので、
私のJavaScriptに問題があるのかもしれませんが、
ちょっとこちらでは原因がわかりません。
http://netoureseach.blog92.fc2.com/file/ytfr.html
Youtube.APIのXMLのリスト件数が１件しか無い場合や１件のみ切り出そうとした場合
なにか特別な方法があるのでしょうか？
差し出がましくも提案があるのですが、コールバックとしてvar.onload(responseJSON)という関数を呼び出していますが、特定のコンテキストから呼び出せるようにするとオブジェクト指向で書いている時に便利だと思います。
var.onload.call(loader,responseJSON)と呼び出すイメージです。（varと同じようにloaderはURLのQueryStringで設定できるようにする）
call関数がどの程度ブラウザ互換なのか知らないのですが、オプションとしてあれば便利だと思います。
ただの思い付きですので・・・。突然に失礼しました。
キャッシュは現行３時間ですがサーバの負荷次第で適当に変更する可能性があります。
お伺いしたいことが2点ほどあります。
1) キャッシュ時間は何分くらいでしょうか？
2) XMLorRSSがエラーだった場合のResponseが、JSONPの形ではなく、素のJSONなので、Scriptとしてimportするとエラーになるのですが意図した動作なのでしょうか。
以上です。
思います。
Ajaxのクロスドメイン問題。いろんな回避策はあるものの、どれも迂回ルートで釈然と
しませんでした。
それと、XMLそのものがシステムにとっても利用者にとっても使いやすいとは言いがたいので、
JSONは注目していました。
＃設定ファイルのXML化が流行していて、設定ファイルが肥大化してわけわかん
＃なくなりますよね。
今、Ajaxの書籍を執筆中なのですが、クロスドメイン問題の記事を書いていて、この
xml2jsonサービスにいきつきました。この紹介をここのURLとあわせて紹介させて
もらってもいいでしょうか。
ご検討をおねがいいたします。
ちなみにJSON with Padding(jsonp)のような形式のコールバックに対応することは不可能でしょうか？最近のYahooやDel.icio.usはこの形式を採用してるみたいです。
http://ajaxian.com/archives/jsonp-json-with-padding
Operaでの表示ですが
lwws1.onload = function disp(data){
というように関数名をつけて、スクリプトの動的追加の前に宣言してやると、動作しました。
それと、サンプルソースの中の
LWWS(city, day, name, proxy);
は、必要ないかと。
あと、Javascript 2.0 は将来バージョン2.0が出た時にややこしそうです。
Javascript Programminng 2.0 ではいかがでしょうか？
細かいつっこみですみません。
