以前作成した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）
