closure library jsonpについて
ぷりっぷりのおしり
closure libraryのgoog.net.Jsonpに関する質問です。
closure libraryの管理下でtwitter anywhereを使いたいと思っています。
下記のようなソースコードで、ReferenceError: twttr is not definedというエラーが出てひっかかっています。
解決策をご存知の方いましたら、ご教授ください。
goog.provide('test.Twitter');
goog.require('goog.net.Jsonp');
/** @constructor */
test.Twitter = function() {
var jsonp = new goog.net.Jsonp("http://platform.twitter.com/
anywhere.js");
twttr.anywhere(function (T) {
T("#login_twitter").connectButton({ size: "large" });
});
};
goog.addSingletonGetter(test.Twitter);
test.Twitter.getInstance();
よろしくお願い致します。
ぷりっぷりのおしり
師匠募集
http://qiita.com/items/1359
puriketu99
Shumpei Shiraishi
白石です。
取り急ぎ、twttrが宣言されていないということは、Twitter Anywhereがロードできていないんじゃないかと思いました。
ロード失敗→twttrが宣言されておらずundefinedのまま→メソッドを呼びだそうとすると「twttr is not defined」
ということではないかと。
ClosureもTwitter Anywhereも全然知らないので、あまり参考にならない意見だとは思いますが取り急ぎ！
よろしくお願いいたします。
2012年3月8日22:57 ぷりっぷりのおしり <puriket...@gmail.com>:
> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
>
ぷりっぷりのおしり
ぷりけつです。ご返答ありがとうございます。
おかげさまで問題解決しました。
一部推測が混じっていますが、ご報告です。
1.Jsonpはコンストラクタに第一引数でuriを引き渡した後に、sendメソッドを使わなければ読み込まない。
2.sendメソッドは非同期に読み込むため、使えるようになるまでのタイミングとの時差がある
3.Jsonpはevents.EventTargetを継承していないため(?)、SUCCESS時のコールバックを直接設定できないような気がしま
した(未検証)
4.なので、おそらくdom操作に関するイベントをしかけてやらなければいけない(未検証)
5.closure libraryは公式ドキュメントが使いにくい(サンプルがない)のですが、ソース自体は非常に読みやすかったです
詳細は下記をごらんください。
http://qiita.com/items/3094
On 3月9日, 午前10:21, Shumpei Shiraishi <shumpei.shirai...@gmail.com>
wrote:
>
> 白石です。
>
> 取り急ぎ、twttrが宣言されていないということは、Twitter Anywhereがロードできていないんじゃないかと思いました。
> ロード失敗→twttrが宣言されておらずundefinedのまま→メソッドを呼びだそうとすると「twttr is not defined」
>
> ということではないかと。
>
> ClosureもTwitter Anywhereも全然知らないので、あまり参考にならない意見だとは思いますが取り急ぎ！
> よろしくお願いいたします。
>
Wataru Kanzaki
自分のメールが届かないまま他の方のメールが先にきたので、
ちょっと時間が空いていますが。
JSONPというのは、ドキュメントに<script src=“”></script>を追加して、
そのスクリプトファイルの中に書かれた内容を実行します。
<script>
function myfunc(arg){
alert(arg);
}
</script>
と書いておいて、
other.js
-----------
myfunc(‘hello');
-----------
という1行を書いておいたファイルを
<script src=“other.js”></script>
として読み込むと、myfunc()が実行されるのと同じです。
>3.Jsonpはevents.EventTargetを継承していないため(?)、SUCCESS時のコールバックを直接設定できないような気がしま
>した(未検証)コールバック関数は第二引数に指定できます。
http://closure-library.googlecode.com/svn/docs/class_goog_net_Jsonp.html
goog.net.Jsonp(url, ‘callback’);
としておくと、
function callback(arg){
alert(arg);
}
と、あらかじめ作っておいた関数が実行されます。
先のURLに書かれたe.g.のURLに、以下のようにしてアクセスすると、
http://maps.google.com/maps/geo?callback=myfunc
myfunc()が呼び出されるJavaScriptコードを確認できます。
これが
<script src="http://maps.google.com/maps/geo?callback=myfunc”></scrip>
という形でドキュメントに挿入されるので、myfunc()が実行されます。
＊JSONPに対応したURLでないと、JSONPとして機能しません。
>4.なので、おそらくdom操作に関するイベントをしかけてやらなければいけない(未検証)JSONPをライブラリ読み込みのためのライブラリと誤解されているような気がしますが、、、
JSONPライブラリというのは、
<script type=“text/javascript” url=“http://・・・/anywhere.js”></script>
というのを任意のタイミングで書いているにすぎないので、
コンストラクタ定義のファイルを読み込むのであれば、
JSONPのライブラリよりも、ドキュメント読み込み前にロードするタイプ、
function loadFile(url){
document.write(‘<script src=“’+url+’”></script>’);
}
このようなライブラリの方が使いやすいです。
http://code.google.com/intl/ja/apis/libraries/
google.load("jquery", "1.7.1");
＊『使いやすい』と書いたのは、方法がないわけではないです。
ただ、ちょっと複雑になります。
JSONPライブラリを呼んだ後で。
http://platform.twitter.com/anywhere.js 限定。未検証です。
window.timeid=setInterval(function(){
if(!window.twttr){ return true; }
clearInterval(window.timeid);
// ライブラリを使ってやりたい処理をここに記述
}, 1000);
-----
Wings-Winds
http://www.wi-wi.jp/
神崎渉瑠
2012年3月8日木曜日22時57分01秒 UTC+9 ぷりっぷりのおしり:
2012年3月8日木曜日22時57分01秒 UTC+9 ぷりっぷりのおしり:
ぷりっぷりのおしり
><script type=“text/javascript” url=“http://・・・/anywhere.js”></script>
>JSONPのライブラリよりも、ドキュメント読み込み前にロードするタイプ、
2012年3月12日月曜日18時39分06秒 UTC+9 Wataru Kanzaki:
Akitoshi Manabe
Jsonpライブラリを使う目的は、「JSONデータ」を読む事ですね。
機能面では仰るとおり、「ユーザーの訪問時の体感的なレスポンスを向上させる」ものですが、今のブラウザなら、技術的にはXHR2を使うことも可能なわけで。
JSONP(JSON with padding）
は「クロスドメイン」なHttpローディングの手法。発案された当初は、唯一、クロスドメインでの読み込みが可能な「SCRIPT要素を用いる」のが特徴です。
１）HTML上にSCRIPT要素を動的出力すると、そのタイミングで読み込みが開始される（XHR同様に任意のタイミングで実行可能）
２）読み込んだ内容は、JSONの書かれたテキストデータだけど、JabaScriptソースと扱われるので、何らかの方法で変数に格納する必要があった。関数の引数にJSONを与えて、その関数で変数に格納。
JSONPに限らず、ライブラリ化された技術は、検索すれば開発された経緯や特徴を知ることができますよ。
google closure librery のAPIリファレンス：
http://closure-library.googlecode.com/svn/docs/index.html
closure libreryは「goog.(技術区分).(技術名)」
のような名前空間でクラスが割り当てられ、保存先ディレクトリも対応してると思います。結構な数のファイルがありますが、オープンソースなので、closure
librery のソースを読むこともおすすめです。
１）名前空間から推察して技術概要を知る（キホン）
２）APIリファレンスを読む
３）ソースを読む
で、ほぼ解決できるはず。
2012年3月12日21:35 ぷりっぷりのおしり <puriket...@gmail.com>:
> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/YqVIdU73XiwJ
> にアクセスしてください。
ぷりっぷりのおしり
2012年3月12日月曜日23時36分25秒 UTC+9 aki_mana:
> このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developers-jp+unsubscribe@googlegroups.com
Wataru Kanzaki
>この"任意のタイミングで書いているにすぎない"というのは、つまり、”Jsonpライブラリを使う主な目的は、読み込みのタイミングを後にずらすことで、ユーザーの訪問時の体感的なレスポンスを向上させる”ということでしょうか？
<script src=“anywhere.js” defer async></script>
HTMLファイルの読み込みも終わり、画面全体の描画も終わってるのに
スクリプトファイルが読み込まれていないという状態が発生しますので、滅多に使われることはありません。
（<noscript>の内容が表示されるわけでもない、JavaScriptを使って操作する状態でもない、
最初のメールにあったような、オブジェクトが存在しないというエラーになる、
中途半端な状態ですから、制作者としては非常にマズいわけです。）
defer属性を付けない場合は、スクリプトファイルが読み込めない場合は見た目でわかりますが、
（<script>から先のHTMLも読まれないので、画面全体が真っ白なままで止まります。）
defer属性がついていると、スクリプトファイルが読み込めないまま、画面が描画され、クリックもできるようになります。
（正確には、画面が描画が終わってからスクリプトファイルのダウンロードを開始します。
Safari5.1はdeferもasyncと見なしているようです。）
ですから、「JavaScript対応ブラウザでJavaScriptが使えない状態（ただし<noscript>ではない）」にも対応するページの作り方をしなければならなくなります。
で、そのdeferに対応する方法の一つが、私が書いたsetIntervalです。
JSONPでライブラリファイルを読み込むことは、できないわけではありませんが、
読み込みが完了した後、ドキュメントから<script>要素を取り除くライブラリもあると思いますし、
取り除いた後、そのスクリプトファイル内に書かれていた内容がどのように扱われるか（変数なども消去されるのかどうかなど）というのは、わかりません。
JSONPはあくまで通信方法、（狭義の）Ajaxの代替品ですね。
余談ですが、
JSONPでもAJaxでも、「必要なデータが読めない場合」の処置（通信を中断・中止したりなど）は必要だと思います。
はじめまして。ぷりっぷりのおしりと申します。
Tohru Ike
Wataru Kanzaki
> この"任意のタイミングで書いているにすぎない"というのは、つまり、”Jsonpライブラリを使う主な目的は、読み込みのタイミングを後にずらすことで、ユーザーの訪問時の体感的なレスポンスを向上させる”ということでしょうか？
読み込みタイミングをずらすのはdefer属性（と、async属性）です。
<script src=“anywhere.js” defer async></script>
HTMLファイルの読み込みも終わり、画面全体の描画も終わってるのに
スクリプトファイルが読み込まれていないという状態が発生しますので、滅多に使われることはありません。
（<noscript>の内容が表示されるわけでもない、JavaScriptを使って操作する状態でもない、
最初のメールにあったような、オブジェクトが存在しないというエラーになる、
中途半端な状態ですから、制作者としては非常にマズいわけです。）
defer属性を付けない場合は、スクリプトファイルが読み込めない場合は見た目でわかりますが、
（<script>から先のHTMLも読まれないので、画面全体が真っ白なままで止まります。）
defer属性がついていると、スクリプトファイルが読み込めないまま、画面が描画され、クリックもできるようになります。
（正確には、画面が描画が終わってからスクリプトファイルのダウンロードを開始します。
Safari5.1はdeferもasyncと見なしているようです。）
ですから、「JavaScript対応ブラウザでJavaScriptが使えない状態（ただし<noscript>ではない）」にも対応するページの作り方をしなければならなくなります。
で、そのdeferに対応する方法の一つが、私が書いたsetIntervalです。
JSONPでライブラリファイルを読み込むことは、できないわけではありませんが、
読み込みが完了した後、ドキュメントから<script>要素を取り除くライブラリもあると思いますし、
取り除いた後、そのスクリプトファイル内に書かれていた内容がどのように扱われるか（変数なども消去されるのかどうかなど）というのは、わかりません。
JSONPはあくまで通信方法、（狭義の）Ajaxの代替品ですね。
余談ですが、
JSONPでもAJaxでも、「必要なデータが読めない場合」の処置（通信を中断・中止したりなど）は必要だと思います。
-----
Wings-Winds
http://www.wi-wi.jp/
神崎渉瑠
Wataru Kanzaki
ちょっと時間が空いていますが。
JSONPというのは、ドキュメントに<script src=“”></script>を追加して、
そのスクリプトファイルの中に書かれた内容を実行します。
というか、<script>を読み込んだらそのファイルの内容を勝手にブラウザが実行するのを利用しています。
先のURLに書かれたe.g.のURLに、以下のようにしてアクセスすると、
http://maps.google.com/maps/geo?callback=myfunc
＊JSONPに対応したURLでないと、JSONPとして機能しません。
> 4.なので、おそらくdom操作に関するイベントをしかけてやらなければいけない(未検証)
JSONPをライブラリ読み込みのためのライブラリと誤解されているような気がしますが、、、
このようなライブラリの方が使いやすいです。
http://code.google.com/intl/ja/apis/libraries/
// ライブラリを使ってやりたい処理をここに記述
}, 1000);
hagino3000
ちょっと補足です。
> 読み込みが完了した後、ドキュメントから<script>要素を取り除くライブラリもあると思いますし
> 取り除いた後、そのスクリプトファイル内に書かれていた内容がどのように扱われるか（変数なども消去されるのかどうかなど）というのは、わかりません。
定期的にロードする様なアプリだと不要なDOMが延々と蓄積されていってしまいます。
ライブラリのロードに使った<script>要素ですが、例えばTwitterのWebの画面で
$('script').each(function(idx, s){s.parentNode.removeChild(s)});
とやって<script>要素を全て除いた状態でも、そのまま画面が操作できるのが確認できますね。
<style>や<link>と違って、一旦JavaScriptとして実行された物はDOMの世界とは別の所で動き続けます。
//----------------------------------------------
hagino3000
http://d.hatena.ne.jp/hagino_3000
> window.timeid=setInterval(function(){
> if(!window.twttr){ return true; }
> clearInterval(window.timeid);
>
> // ライブラリを使ってやりたい処理をここに記述
>
> }, 1000);
>
> -----
Akitoshi Manabe
SCRIPT要素の削除について、基礎知識としては有用ですね。
goog.net.jsonp ではその辺も実装されてます。
[closure-library-20110323-r790.zip]
closure/goog/net/jsonp.js
323: goog.dom.removeNode(scriptNode); // ここ。
2012年3月14日10:21 hagino3000 <hagin...@gmail.com>:
ぷりっぷりのおしり
2012年3月13日火曜日18時14分27秒 UTC+9 Wataru Kanzaki:
ぷりっぷりのおしり
2012年3月14日水曜日12時52分36秒 UTC+9 ぷりっぷりのおしり:
Akitoshi Manabe
ディスカッションとして公開されるものですし、私は問題ありません。
ただ、せっかくまとめるのであれば「クロスドメイン」のキーワードを加えた方が良いと思います。
JSONPについては、オリジナルドメインであればXHRで簡単にできることを、クロスドメインでどうするか？という問題を「 関数でpadding
したJSONソース（テキストデータ）なら、SCRIPT要素で簡単に変数に格納できる！」という驚きがあり、広く使われるようになったと記憶しています。
2012年3月14日13:01 ぷりっぷりのおしり <puriket...@gmail.com>:
> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/a4ZAhpitg1AJ
> にアクセスしてください。
masato kawaguchi
ぷりっぷりのおしり
2012年3月14日水曜日13時10分15秒 UTC+9 aki_mana:
> このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developers-jp+unsubscribe@googlegroups.com
ぷりっぷりのおしり
2012年3月14日水曜日12時56分07秒 UTC+9 masato kawaguchi:
このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。
このグループから退会するには、html5-developers-jp+unsubscribe@googlegroups.com にメールを送信してください。
詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。