[Web] JSONPを用いてクロスドメイン制約を超える
先日Twitter ShootingというWebゲームを作成しました。
TwitterのIDを入力してもらい、その人の画像とフォロワーの画像を使って、 シューティングゲームを行うというしろものです。
Twitter Shooting
このゲームは、HTML + JavaScript + CSSのみで作成されています。 Twitterから画像データを取得したいのですが、 私のブログのドメイン「www.yoheim.net」からTwitter APIのドメイン「dev.twitter.com」へAJAXで アクセスしようとしたら、クロスドメイン制約に引っかかってしまいました。。
なんとか出来ないものかと調べていたらJSONPというモノを用いたら、 クロスドメイン制約を超えてTwitter APIを使うことができたので、そのまとめを記載したいと思います。
引用：http://ja.wikipedia.org/wiki/JSONP
色々と説明がありますが、scriptタグのsrc属性を用いる事で、クロスドメイン制約を超えることが出来るらしい。
scriptタグの例）
上記例では、「another.domain.example.com/getjson」の処理結果として、 parseResponse関数が呼ばれるように指定しています。
parseResponse関数の引数にサーバーからの戻り値が入ります。
コールバック関数の例）
■注意1
なおJSONPはサーバー側がJSONPに対応している必要があります。
対応しているサーバーは、指定されたコールバック関数に戻り値のjsonを渡した形式の文字列を クライアント側に返します。クライアントでは、その文字列をJavaScriptとして評価して 実行します。
Twitter APIの一部はJSONPに対応しています。
■注意2
コールバック関数を指定するURLのクエリ文字列の多くはcallbackですが、 サーバーによっては異なる文字列の場合もあるので、注意が必要です。
JavaScriptの実行時に動的にJSONP用のscriptタグを出力したい場合なんか、とても便利です。
jQueryの詳細は、こちら（http://jquery.com/）を参照ください。 なおjQueryには日本語説明ページもありますが、jQueryのバージョンアップに付いて行けず、 古い情報を掲載している場合も多いので、jquery.comのページを参照するのがおすすめです。
jQueryを用いてJSONPを扱う方法も何個かありますが、$.ajax関数を使った例を紹介します。
■セキュリティ問題
CSRF（wiki:http://ja.wikipedia.org/wiki/クロスサイトリクエストフォージェリ） などの攻撃を受ける可能性があります。 そのため、JSONPで配信する情報には、機密情報や個人情報を含めることは避けるべき。
■リクエストエラー時の対応
ページが見つからない、API呼び出しが不適切など、 サーバーから200ステータス以外が返ってくる場合、JSONPではエラーレスポンスを捕獲することが出来ません。
例えば「Twitter APIのリクエスト上限数を超えた」などのエラーのハンドリング方法は要検討です。 一定時間経ったらエラーと認識するなどの対策が考えられます。
Webの世界は調べると色々な新しいことが学べていいですね。 次も何か新しいことを見つけてブログに書くぞー！！
TwitterのIDを入力してもらい、その人の画像とフォロワーの画像を使って、 シューティングゲームを行うというしろものです。
Twitter Shooting
このゲームは、HTML + JavaScript + CSSのみで作成されています。 Twitterから画像データを取得したいのですが、 私のブログのドメイン「www.yoheim.net」からTwitter APIのドメイン「dev.twitter.com」へAJAXで アクセスしようとしたら、クロスドメイン制約に引っかかってしまいました。。
なんとか出来ないものかと調べていたらJSONPというモノを用いたら、 クロスドメイン制約を超えてTwitter APIを使うことができたので、そのまとめを記載したいと思います。
JSONPとは
wikipediaでは、以下のように解説されています。JSONP（JSON with padding）とは、scriptタグを使用してクロスドメインなデータを取得する仕組みのことである。HTMLのscriptタグ、JavaScript（関数）、JSONを組み合わせて実現される。
ブラウザなどに実装されている「同一生成元ポリシー」という制約により、Webページは通常、自分を生成したドメイン以外のドメインのサーバと通信することはできない。 しかし、HTMLのscriptタグのsrc属性には別ドメインのURLを指定して通信することができるという点を利用することによって別ドメインのサーバからデータを取得することが可能になる。
引用：http://ja.wikipedia.org/wiki/JSONP
色々と説明がありますが、scriptタグのsrc属性を用いる事で、クロスドメイン制約を超えることが出来るらしい。
JSONPの使い方
JSONPは、scriptタグのsrc属性に対象のURLとコールバック関数を指定することで実行出来ます。scriptタグの例）
<script type='text/javascript' src='http://another.domain.example.com/getjson?callback=parseResponse'>
上記例では、「another.domain.example.com/getjson」の処理結果として、 parseResponse関数が呼ばれるように指定しています。
parseResponse関数の引数にサーバーからの戻り値が入ります。
コールバック関数の例）
<script>
var parseResponse = function(json) {
alert("Name: " + json.name + " Age: " + json.age);
}
</script>
■注意1
なおJSONPはサーバー側がJSONPに対応している必要があります。
対応しているサーバーは、指定されたコールバック関数に戻り値のjsonを渡した形式の文字列を クライアント側に返します。クライアントでは、その文字列をJavaScriptとして評価して 実行します。
Twitter APIの一部はJSONPに対応しています。
■注意2
コールバック関数を指定するURLのクエリ文字列の多くはcallbackですが、 サーバーによっては異なる文字列の場合もあるので、注意が必要です。
JSONPの使い方
jQueryを用いると、簡単にJSONPを使う事が可能です。JavaScriptの実行時に動的にJSONP用のscriptタグを出力したい場合なんか、とても便利です。
jQueryの詳細は、こちら（http://jquery.com/）を参照ください。 なおjQueryには日本語説明ページもありますが、jQueryのバージョンアップに付いて行けず、 古い情報を掲載している場合も多いので、jquery.comのページを参照するのがおすすめです。
jQueryを用いてJSONPを扱う方法も何個かありますが、$.ajax関数を使った例を紹介します。
$.ajax({
url : "https://api.twitter.com/1/users/lookup.json",
data : {screen_name : userName},
dataType : "jsonp", // ここをJSONPと指定する
success : function(json){
alert("Name: " + json.name + " Age: " + json.age);
}
});
これで、JavaScript実行時に、jQueryが動的にscriptタグを書き出してくれます。JSONPを使う上での注意点
JSONPを使う場合には、以下の注意が必要です。他にもあるかも。。■セキュリティ問題
CSRF（wiki:http://ja.wikipedia.org/wiki/クロスサイトリクエストフォージェリ） などの攻撃を受ける可能性があります。 そのため、JSONPで配信する情報には、機密情報や個人情報を含めることは避けるべき。
■リクエストエラー時の対応
ページが見つからない、API呼び出しが不適切など、 サーバーから200ステータス以外が返ってくる場合、JSONPではエラーレスポンスを捕獲することが出来ません。
例えば「Twitter APIのリクエスト上限数を超えた」などのエラーのハンドリング方法は要検討です。 一定時間経ったらエラーと認識するなどの対策が考えられます。
最後に
JSONPはクロスドメイン制約を超えることが出来る便利な方法ですが、 サーバーが対応している必要があったり、エラーハンドリングが出来なかったりと、 利用する上での制約もあるようです。使うには注意せねば♪(´ε｀ )Webの世界は調べると色々な新しいことが学べていいですね。 次も何か新しいことを見つけてブログに書くぞー！！
