frostar@wiki
JSONPででたとこのデータ取得
最終更新:
frostar
-
view
先日、でたとこサーガの支援ツールを公開しました。
これは公式のキャラクター登録書からデータを取得しています。
公式のキャラクター登録書ではJSON形式のデータが公開されており、
キャラクターのURLに.jsonを付加することで、JSONのデータを参照することが可能です。
このJSONデータの中身を支援ツールの項目に反映させています。
これは公式のキャラクター登録書からデータを取得しています。
公式のキャラクター登録書ではJSON形式のデータが公開されており、
キャラクターのURLに.jsonを付加することで、JSONのデータを参照することが可能です。
このJSONデータの中身を支援ツールの項目に反映させています。
このように、Web上に公開されているデータを取得して扱うことはよくあるケースです。
データを取得するためにはXMLHttpRequestを使うことが多いですが、
XMLHttpRequestにはクロスドメイン制約というものがあるので、
自分と異なるドメインに存在するデータを取得する事ができません。
jQueryとjquery.xdomainajax.jsというプラグインを使うことで可能になるのですが、これはちとめんどい。
そこで、JSONPという技術があります。
JSONPに対応したページであれば、簡単にJSONのデータを取得することが可能になります。
JSONPはscriptタグのsrcとして、URLの最後にコールバック関数を指定すると、
そのURLのデータを取得し、コールバック関数が呼ばれます。
コールバック関数の引数にはJSONのデータが渡されてくるので、これを処理すればいいわけです。
データを取得するためにはXMLHttpRequestを使うことが多いですが、
XMLHttpRequestにはクロスドメイン制約というものがあるので、
自分と異なるドメインに存在するデータを取得する事ができません。
jQueryとjquery.xdomainajax.jsというプラグインを使うことで可能になるのですが、これはちとめんどい。
そこで、JSONPという技術があります。
JSONPに対応したページであれば、簡単にJSONのデータを取得することが可能になります。
JSONPはscriptタグのsrcとして、URLの最後にコールバック関数を指定すると、
そのURLのデータを取得し、コールバック関数が呼ばれます。
コールバック関数の引数にはJSONのデータが渡されてくるので、これを処理すればいいわけです。
例えば、でたとこサーガの公式登録書では
http://detatoko-saga.com/character/[Number].json
というURLで[Number]の番号のキャラクターのJSONファイルを参照することができるので、
<script src="http://detatoko-saga.com/character/1.json&callback=onload">
というタグを書けばキャラクター番号1番のデータを取得して、onloadという関数が呼び出されます。
onloadという関数を定義してその中でjsonデータを処理してやれば、公式登録書のデータを扱えます。
onloadという関数を定義してその中でjsonデータを処理してやれば、公式登録書のデータを扱えます。
function onload(json) { //jsonデータの処理 }
JSONPで得られるデータは{}で囲まれている部分はMap、[]で囲まれている部分は配列として戻ってきます。
公式登録書のデータ形式の仕様について詳しくは省略しますが、
例えば、キャラクターの名前はjson["name"]、
2つ目のスキルのスキルランクはjson[1]["rank"]で取得することができます。
あとは、これらを自分のツールのデータに適用するだけ!
もちろん、動的scriptタグを生成しても同様に読み込めるので、
目的のデータがJSONPにさえ対応していればこのように簡単に処理が可能です。
公式登録書のデータ形式の仕様について詳しくは省略しますが、
例えば、キャラクターの名前はjson["name"]、
2つ目のスキルのスキルランクはjson[1]["rank"]で取得することができます。
あとは、これらを自分のツールのデータに適用するだけ!
もちろん、動的scriptタグを生成しても同様に読み込めるので、
目的のデータがJSONPにさえ対応していればこのように簡単に処理が可能です。