Google +1 Buttonを設置してみたので、
試しにおして見るためのテスト記事
2011年6月8日水曜日
2011年5月31日火曜日
JSONPで遊んでみた
最近JavaScript界隈のことが全然分かってないことに気づき、
ちょっとあせったので手始めにJSONPで遊んでみた。
内容は、jsonip.comというサイトにアクセスすると
自分のIPを表示(HTML版)
ちょっとあせったので手始めにJSONPで遊んでみた。
ことの始まりは、下記の記事を発見したこと。
内容は、jsonip.comというサイトにアクセスすると
JSON形式で自分のIPが返ってくるというもので、さらにしらべてみると、
URLの末尾に/xxxをつけるとJSONPになるらしい。
URLの末尾に/xxxをつけるとJSONPになるらしい。
JSONPというのは、呼び出し側で指定したコールバック関数に、
JSON形式の値を適用する形(↓の形で)でJavaScriptを
返してくれる仕組みのこと。
例えば、 http://jsonip.com/callback と指定したら下記のようになる。
JSON形式の値を適用する形(↓の形で)でJavaScriptを
返してくれる仕組みのこと。
例えば、 http://jsonip.com/callback と指定したら下記のようになる。
callback({"ip":"xx.xx.xx.xx"});
(xxの部分はホントは数字)
難しいことは分からないけど、このやり方だと別のドメイン間でも
呼び出しができるらしい。
ということで、早速実践。まずはローカルのHTMLでjsonip.comに
アクセスして自分のIPを表示させてみる。全体の流れはこんな感じ。
アクセスして自分のIPを表示させてみる。全体の流れはこんな感じ。
- コールバック関数の定義
- JSONP実行
2.の部分はいろいろやり方あるみたいだけど、今回は
一番お手軽なscriptタグのsrc属性でURLを指定するやり方を使う。
一番お手軽な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版とちがうところ。
自分のIPを表示(ブックマークレット版)やりかたは別ドメインの外部スクリプトを実行するブックマークレットを参考にした。
説明が面倒くさくなったので、ポイントだけいうと下記の2点がHTML版とちがうところ。
- コールバック関数を呼び出せるようにwindowオブジェクトに定義する
- JSONP呼び出しのために動的にscript要素を生成する
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だけど、数時間で動くものができたのでよしとしよう。
実用性ほぼ0だけど、数時間で動くものができたのでよしとしよう。
ラベル:
JavaScript
登録:
投稿 (Atom)