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

twitter
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

師匠募集
http://qiita.com/items/1359
twitter
puriketu99

On 3月9日, 午前10:21, Shumpei Shiraishi <shumpei.shirai...@gmail.com>
wrote:

> んーと、ハンドルネームを呼びづらいな・・・(^^;
>
> 白石です。
>
> 取り急ぎ、twttrが宣言されていないということは、Twitter Anywhereがロードできていないんじゃないかと思いました。
> ロード失敗→twttrが宣言されておらずundefinedのまま→メソッドを呼びだそうとすると「twttr is not defined」
>
> ということではないかと。
>
> ClosureもTwitter Anywhereも全然知らないので、あまり参考にならない意見だとは思いますが取り急ぎ！
> よろしくお願いいたします。
>

> 2012年3月8日22:57 ぷりっぷりのおしり <puriketu.wh...@gmail.com>:

[Wataru Kanzaki]

神崎渉瑠です。
自分のメールが届かないまま他の方のメールが先にきたので、

送信に失敗したのかもしれませんしGoogleサイトから再送です。

二重になってたらすみませんが、捨ててください。

ちょっと時間が空いていますが。

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 ぷりっぷりのおしり:

[ぷりっぷりのおしり]

ぷりけつです。

丁寧なわかりやすい解説をありがとうございます。

>JSONPをライブラリ読み込みのためのライブラリと誤解されているような気がしますが、、、

まさしく、外部ファイル読み込み用ライブラリと勘違いしていました。

>JSONPライブラリというのは、
><script type=“text/javascript” url=“http://・・・/anywhere.js”></script>

>というのを任意のタイミングで書いているにすぎないので、

>コンストラクタ定義のファイルを読み込むのであれば、
>JSONPのライブラリよりも、ドキュメント読み込み前にロードするタイプ、

ここの部分がちょっとわからなかったので、お手数でなければ解説よろしくお願い致します。

この"任意のタイミングで書いているにすぎない"というのは、つまり、”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
> にアクセスしてください。

[ぷりっぷりのおしり]

ぷりけつです。

丁寧な解説・ご指導ありがとうございます。

JSONPについては、「外部ファイル読み込んでクロスドメインの問題解消」くらいのざっくりとした認識しかありませんでした。

特に、下記については知りませんでした。勉強になります。

>２）読み込んだ内容は、JSONの書かれたテキストデータだけど、JavaScriptソースと扱われるので、何らかの方法で変数に格納する必要があった。関数の引数にJSONを与えて、その関数で変数に格納。

>今のブラウザなら、技術的にはXHR2を使うことも可能なわけで。

2012年3月12日月曜日23時36分25秒 UTC+9 aki_mana:

> このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developers-jp+unsubscribe@googlegroups.com

[Wataru Kanzaki]

神崎渉瑠です。

遅くなり済みません。

メールを送信してもGoogleに届きませんね。何なんでしょうか。

話が別の所に飛んじゃってるかもしれません。ご了承ください。

>この"任意のタイミングで書いているにすぎない"というのは、つまり、”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/
神崎渉瑠

2012年3月8日木曜日22時57分01秒 UTC+9 ぷりっぷりのおしり:

はじめまして。ぷりっぷりのおしりと申します。

[Tohru Ike]

池(id:rokujyouhitoma)です。

ClosureLibraryの局所的な話題で恐縮です。

前職で1年近くClosureLibraryで仕事をしておりました。

>5.closure libraryは公式ドキュメントが使いにくい(サンプルがない)のですが、ソース自体は非常に読みやすかったです

Closure Libraryにおいて。"サンプルがない"とのことですが、各パッケージに対応する_test.htmlというテストコードを読むことをおすすめします。

今回の場合は、goog.net.jsonp_test.htmlです。

http://closure-library.googlecode.com/svn/trunk/closure/goog/net/jsonp_test.html

以上、ClosureLibraryのコールドリーディングの参考までに。

池徹

id:rokujyouhitoma

2012年3月9日23:14 ぷりっぷりのおしり <puriket...@gmail.com>:

[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]

hagino3000です

ちょっと補足です。

> 読み込みが完了した後、ドキュメントから<script>要素を取り除くライブラリもあると思いますし
> 取り除いた後、そのスクリプトファイル内に書かれていた内容がどのように扱われるか（変数なども消去されるのかどうかなど）というのは、わかりません。

JSONPした後、使った<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

> JSONPライブラリを呼んだ後で。http://platform.twitter.com/anywhere.js限定。未検証です。

>
> window.timeid=setInterval(function(){
> if(!window.twttr){ return true; }
> clearInterval(window.timeid);
>
> // ライブラリを使ってやりたい処理をここに記述
>
> }, 1000);
>
> -----

> Wings-Windshttp://www.wi-wi.jp/

[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>:

[ぷりっぷりのおしり]

ぷりけつです。

皆様ありがとうございます。頂いた情報をQiitaにまとめました。

http://qiita.com/items/3166

勉強になりました。今後ともよろしくお願い致します。

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]

ぷりけつさん

はじめまして、やり取り拝見していました。

まとめ良いですね。

--
このメールは Google グループのグループ「html5j.org」の登録者に送られています。

このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/FR87d7xHUN0J にアクセスしてください。

[ぷりっぷりのおしり]

ぷりけつです。

ご指摘ありがとうございます。

追記しました。

2012年3月14日水曜日13時10分15秒 UTC+9 aki_mana:

> このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developers-jp+unsubscribe@googlegroups.com

[ぷりっぷりのおしり]

ぷりけつです。

ありがとうございます。

教えを乞う立場でこう言うのもなんですが、教えを乞う人は、質問をして回答をまとめるところまでやれば、自分の血肉になるだけでなく、コミュニティへの貢献になると思うので、ぜひそこまでやって欲しいです。特に、各ユーザーグループは、良いメンバー、良い情報が集まっているにも関わらず、色々な理由から可読性が低いため(標準でシンタックスハイライトもない、メーリス形式)、まとめることの価値が高い領域です。また、ドキュメントの価値は、情報そのものの価値だけでなく、「どこにおいてあるか」ということ、検索性に依拠する部分もあるので、個人的には、まとめる際はQiitaをおすすめします。

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 からこのグループにアクセスしてください。