UstreamのAPIをjavascriptで利用しようと思っています。

APIの使い方は、指定のパラメータを含んだURLをブラウザのアドレスバーに入力するとJSON形式のアウトプットがブラウザに表示されるというスタイルです。

例えば、
http://api.ustream.tv/json/channel/xxxx/getValueOf/status?key=xxxx

という文字列をアドレスバーに打ち込んでアクセスすると

{"results":"offline","msg":null,"error":null,"processTime":true,"version":"mashery-r10"}

という文字列がブラウザに表示されます。
このAPIにjavascriptからアクセスし、戻り値として上記のような文字列を得る為にはどのようにコーディングしたら良いでしょうか?

ご存知の方がいらっしゃいましたらご教示ください。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2011/03/29 13:06:53
  • 終了:2011/03/29 22:45:22

ベストアンサー

id:Cherenkov No.3

Cherenkov回答回数1502ベストアンサー獲得回数4922011/03/29 19:00:50

ポイント51pt

JSONPとクロスドメインの制限は以下のページがわかりやすいです。

これでできる! クロスブラウザJavaScript入門:第11回 JSONP入門|gihyo.jp … 技術評論社


Data API - Documentation | Ustream Developer Network

ustreamのドキュメントに明記されていませんでしたが、callbackパラメータによるJSONPが使えるようなので、一番シンプルにやるならこうです。

xxxxという名前のchannnelの情報を取得しています。(この場合はkeyもいらないみたいですね)

JSONPの場合、callbackパラメータで指定した関数を実行してくれるので事前に仕込んでおきます。


DEMO: http://jsfiddle.net/LNYAX/


<html>
<head>
<script>
function hoge(json) {
  console.log(json);
  alert(json.url);
}
</script>
<script src="http://api.ustream.tv/json/channel/xxxx/getInfo/status?key=your_key&callback=hoge"></script>
</head>
<body>
</body>
</html>

scriptタグ以外の方法はjQueryで$.ajaxや$.getJSONを使うと便利だと思います。





回答1の方法は、ustream側がAccess-Control-Allow-Originを許可していないと使えない。

404 Blog Not Found:Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin


回答2のリンク先のようにローカルファイルをXMLHttpRequestで読み込むならば同一生成元ポリシーに引っかかりませんが、質問のように外部のAPIから取得する場合は上記と同じくAccess-Control-Allow-Originが必要になります。

id:MR_sunekichi

Cherenkov さんありがとうございます。

詳しい説明を頂いた為に解決する事ができました。

ありがとうございました。

2011/03/29 22:44:24

その他の回答(3件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492011/03/29 14:36:27

ポイント23pt

javascriptによる非同期通信の単純な例

xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.ustream.tv/json/channel/xxxx/getValueOf/status?key=xxxx", false);
xhr.send(null);

alert(xhr.responseText);

下記も参照

http://ja.wikipedia.org/wiki/XMLHttpRequest

 

XMLHttpRequestを直接利用して自力でJSONを扱う方法以外に、

jqueryなどのjavascriptライブラリを使う方法もありますので参考まで

http://semooh.jp/jquery/api/ajax/jQuery.getJSON/+url%2C+data%2C+...

id:MR_sunekichi

windofjuly さんありがとうございます。

試してみましたが上記のコードでsendでエラーが出てしまいました。

Wikipediaにあるコードも試してみましたがどうも上手く行きません。

引き続き回答を募集いたします。

2011/03/29 17:20:10
id:pretaroe No.2

pretaroe回答回数531ベストアンサー獲得回数752011/03/29 17:06:10

ポイント23pt

http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter03/006...

こんな感じで簡単に取得できます。

Javascript JSON で探せばいろいろな処理が見つかると思いますよ。

id:MR_sunekichi

pretaroeさんありがとうございます。

どこをどう参照して切り出せばいいのかがわからないので

コピペで動くようなコードを記載していただけると助かります。

引き続き回答を募集いたします。

2011/03/29 17:31:57
id:Cherenkov No.3

Cherenkov回答回数1502ベストアンサー獲得回数4922011/03/29 19:00:50ここでベストアンサー

ポイント51pt

JSONPとクロスドメインの制限は以下のページがわかりやすいです。

これでできる! クロスブラウザJavaScript入門:第11回 JSONP入門|gihyo.jp … 技術評論社


Data API - Documentation | Ustream Developer Network

ustreamのドキュメントに明記されていませんでしたが、callbackパラメータによるJSONPが使えるようなので、一番シンプルにやるならこうです。

xxxxという名前のchannnelの情報を取得しています。(この場合はkeyもいらないみたいですね)

JSONPの場合、callbackパラメータで指定した関数を実行してくれるので事前に仕込んでおきます。


DEMO: http://jsfiddle.net/LNYAX/


<html>
<head>
<script>
function hoge(json) {
  console.log(json);
  alert(json.url);
}
</script>
<script src="http://api.ustream.tv/json/channel/xxxx/getInfo/status?key=your_key&callback=hoge"></script>
</head>
<body>
</body>
</html>

scriptタグ以外の方法はjQueryで$.ajaxや$.getJSONを使うと便利だと思います。





回答1の方法は、ustream側がAccess-Control-Allow-Originを許可していないと使えない。

404 Blog Not Found:Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin


回答2のリンク先のようにローカルファイルをXMLHttpRequestで読み込むならば同一生成元ポリシーに引っかかりませんが、質問のように外部のAPIから取得する場合は上記と同じくAccess-Control-Allow-Originが必要になります。

id:MR_sunekichi

Cherenkov さんありがとうございます。

詳しい説明を頂いた為に解決する事ができました。

ありがとうございました。

2011/03/29 22:44:24
id:tama213 No.4

tama213回答回数486ベストアンサー獲得回数302011/03/29 20:00:15

ポイント5pt

JSONPという手法を使うべきでしょう

http://labs.s-koichi.info/blog/archives/2009/06/12/1833-94.php

id:MR_sunekichi

tama213 さんありがとうございます。

参考にします。

2011/03/29 22:44:26

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

  • Ustream Data API で JSONP UstreamDataAPIのフォーマットは、htmlやxml、json、phpですが、JavaScriptに組み込んで処理をゴニョゴニョできないなと思ってたら、jsonpも使えるみたいですね。 UstreamのAPIをjavas
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません