2007年05月17日

タイトル取得API for JSONP このエントリーをはてなブックマークに追加

こんにちは、大洋ホエールズのパチョレックです(嘘です)。

以前作成したURLを渡すとそのURLのタイトルをJSON形式で取得するAPIを作ってみたが、戻り値がJSON形式なので、扱いが面倒かもと思い、JSONPで返すよーなものを作ってみた。まあ、仮に「タイトル取得API for JSONP」とでもしておこう。
で、以下、その説明。
end point URL:
http://www.usamimi.info/~ryouchi/title/get_title_jsonp.php
パラメータ:callback:
コールバック関数名を指定
パラメータ:url:
タイトルを取得したいURLをencodeして指定

使い方:
callback関数:viewtitle()
URL:http://ryouchi.seesaa.net/
の場合、
http://www.usamimi.info/~ryouchi/title/get_title_jsonp.php?callback=viewtitle&url=http%3A//ryouchi.seesaa.net/
などと指定する。

取得データはこんな感じになる。
viewtitle( {"url":"http:\/\/ryouchi.seesaa.net\/" , "title":"\u308a\u3087\u30fc\u3061\u306e\u99c4\u6587\u3068\u66f8\u8a55"} );

このAPIを利用して簡単なデモを作ってみた。



ボタンを押すと、テキストボックスの中身を取得し、「タイトル取得API for JSONP」に渡すパラメータを作成する。

下記のよーな感じになるっす。

function gettitle(){
// データを渡すためのパラメータ作成
  requesturl = "http://www.usamimi.info/~ryouchi/title/get_title_jsonp.php";
// urlはinput タグのid=urlの値を取得し、escapeしたもの
// callbackは以下に記載するviewtitle()関数を指定する
  requesturl += "?callback=viewtitle&url="+escape(document.getElementById('url').value);
// jsonpで取得したデータをscriptとして扱うために読み込むエレメント作成
  var script = document.createElement('script');
  script.src = requesturl;
  script.type = 'text/javascript';
  document.body.appendChild(script);
// prototype.jsの$()関数を使い、id=rurlの値を変更
  $(ruri).innerHTML = '<a href="'+requesturl+'" target="_blank">'+requesturl+'</a>';
}
function viewtitle(obj) {
// callback関数
// obj.titleには取得したタイトル名が入っている
  $(title).innerHTML = obj.title;
// obj.urlには指定したURLが入っている
  $(uri).innerHTML = obj.url;
// 上記の情報を元にリンクを作成してみる
  $(link).innerHTML = '<a href="'+obj.url+'" target="_blank">'+obj.title+'</a>';
}


JSONP だと JavaScript の XMLhttpRequest() 関数を利用しなくても、
<script type="text/javascript" src"=http://・・・・"></script>
のよーに読み込むような感じでオブジェクトとして直ぐに使えるってのが便利かも。
クロスドメインによりアクセスが制限されている場合などはこんな感じでやればよかろう。今後APIの提供もJSONP形式で提供されることが多くなるよーな予感がするっす。
(といっても、実際はJSONもJSONPもまだ今ひとつよくわかってないっす・・・orz)
posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: