2011年6月8日水曜日

Google +1 Buttonのテスト

Google +1 Buttonを設置してみたので、
試しにおして見るためのテスト記事

2011年5月31日火曜日

JSONPで遊んでみた

最近JavaScript界隈のことが全然分かってないことに気づき、
ちょっとあせったので手始めにJSONPで遊んでみた。

ことの始まりは、下記の記事を発見したこと。

内容は、jsonip.comというサイトにアクセスすると
JSON形式で自分のIPが返ってくるというもので、さらにしらべてみると、
URLの末尾に/xxxをつけるとJSONPになるらしい。
JSONPというのは、呼び出し側で指定したコールバック関数に、
JSON形式の値を適用する形(↓の形で)でJavaScriptを
返してくれる仕組みのこと。

例えば、 http://jsonip.com/callback と指定したら下記のようになる。
callback({"ip":"xx.xx.xx.xx"});
(xxの部分はホントは数字)

難しいことは分からないけど、このやり方だと別のドメイン間でも
呼び出しができるらしい。

ということで、早速実践。まずはローカルのHTMLでjsonip.comに
アクセスして自分のIPを表示させてみる。全体の流れはこんな感じ。
  1. コールバック関数の定義
  2. JSONP実行
2.の部分はいろいろやり方あるみたいだけど、今回は
一番お手軽なscriptタグのsrc属性でURLを指定するやり方を使う。

自分のIPを表示(HTML版)
<html>
<head>
<script>
<!--
function callback(obj) {
     // 受け取ったJSONオブジェクトのipの値表示するだけ
     alert(obj.ip);
}
// -->
</script>
</head>
<body>
<script type="text/javascript" src="http://jsonip.com/callback"></script><p>test</p>
</body>
</html>

これだけだとおもしろくないので、次はこれをブックマークレットにしてみる。
やりかたは別ドメインの外部スクリプトを実行するブックマークレットを参考にした。

説明が面倒くさくなったので、ポイントだけいうと下記の2点がHTML版とちがうところ。
  • コールバック関数を呼び出せるようにwindowオブジェクトに定義する
  • JSONP呼び出しのために動的にscript要素を生成する
自分のIPを表示(ブックマークレット版)
javascript:(function(){
window.callback = function(obj) {
 alert('あなたのIPは ' + obj.ip + ' です。');
};
var d = document;
var e = d.createElement('script');
e.charset='utf-8';
e.src = 'http://jsonip.com/callback';
d.getElementsByTagName('head')[0].appendChild(e);
})();

これを使うとわざわざ確認君にいかなくてもIPアドレスが分かります。

実用性ほぼ0だけど、数時間で動くものができたのでよしとしよう。