plusone.js あれこれ

Google I/O 2013 も (行けなかったけど) 終了して、早一週間。セッションのビデオも一通り公開されたのかな。字幕はまだ自動認識のものが多いようですが、そのうちすべて人の手による字幕が付くでしょう。セッション資料はまだ上がっていないようですが、こちらもそのうち公開されるはず。

三日目に行われた CodeLab は、ビデオは存在せず、また公式には資料も公開されません。しかし、一部の CodeLab の資料は入手可能になっています。 ⇒ Google I/O 2013 CodeLab materials summary #io13

資料が公開された CodeLab の一つに "From Zero to Hero: Integrating Google+ Sign-In on Android and Web in Less Than Three Hours" があります。この資料を見ていたところ以下のような記述を見つけました。

<script>
// Async load Google API scripts
(function() {
  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  po.src = 'https://apis.google.com/js/auth:plusone.js?onload=startApp';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

定番の記述ですが、 "auth:plusone.js" というのは見たことがない。 Google+ Platform の JavaScript API を見ても "pluson.js" と "client:plusone.js" というのはあるけど、 "auth:plusone.js" というのはない。先生にお伺いを立てても、 Google+ Platform の PhotoHunt sample app しか引っかからない。

というわけで、 Google+ で質問してみました。結果、 "client:plusone.js" は Google+ Platform の JavaScript API に加えてフルセットの Google APIs Client Library for JavaScript がロードされ、一方 "auth:plusone.js" は Google+ Platform の JavaScript API に加えて The standalone auth client のみがロードされるということだそうです。

まとめると、 "https://apis.google.com/js/" 以下に指定する js とロードされるものは以下の通り。

指定する JS	ロードされるもの
plusone.js	Google+ Platform JS API
client.js	Google APIs Client Library
auth.js	Standalone Auth Client
client:plusone.js	Google+ Platform JS API と Google APIs Client Library
auth:plusone.js	Google+ Platform JS API と Standalone Auth Client

また、 "plusone:client.js" は "client:plusone.js" と同じで、 "auth:plusone.js" は "plusone:auth.js" と同じです。つまり "foo:bar.js" の foo と bar の順序に意味はないということです。ついでに、 "client:auth.js" とか "client:auth:plusone.js" とかやってもエラーは出ませんが、 auth は client の subset なので特に意味はありません。

具体的には、 client を指定すると gapi.client 、 gapi.auth がロードされ、 auth を指定すると gapi.auth がロードされます。 plusone を指定すると gapi.signin 、 gapi.plusone 、 gapi.plus 、はたまた gapi.savetodrive 等々がロードされます。そしてそれらを ":" で区切って (https://apis.google.com/js/client:plusone.js のように) 指定すると、指定したものに対応するものが併せてロードされることになります。

というわけなのですが、実のところ "plusone.js" だけの指定でも gapi.auth や gapi.client がロードされたりもします。たとえば、 Google+ Sign-In ボタンを使用すると (class="g-signin" の要素を作るとか gapi.signin.render() するとかした場合) 、 gapi.client および gapi.auth が自動的にロードされます。自分の場合、この振る舞いに惑わされて、 "client:plusone.js" 、 "auth:plusone.js" 、 "plusone.js" の差異がわからないでいました。わかってしまえば何ということもないことでした。