Polymer-Googleクライアントローダー

特定のクライアントをロードするには、JavaScriptクライアントライブラリGoogle-client-loaderを使用したGoogle APIが使用されます。

次のコマンドを実行してプロジェクトディレクトリにインストールすることにより、アプリケーションでPolymer_google-client-loaderを使用できます。

bower install --save GoogleWebComponents/google-apis

このコマンドは、bower_componentsフォルダーの下にPolymer_google-client-loaderのすべての関連要素をインストールします。

例

次の例では、Polymer.jsでPolymer_google-client-loaderの使用を指定しています。 indexlファイルを作成し、その中に次のコードを追加します。

<html>
   <head>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/google-apis/google-apisl">
   </head>

   <body>
      <div id = "loadedmsg"></div>
      <template  id = "googleclient" is = "dom-bind">
         <google-client-loader id = "shortener"
            name = "urlshortener"
            version = "v1"
            on-google-api-load = "loadedShortener">
         </google-client-loader>

         <google-js-api
            on-js-api-load = "msgloaded">
         </google-js-api>

         <google-plusone-api
            on-api-load = "msgloaded">
         </google-plusone-api>
      </template>

      <script>
         var googleclient = document.querySelector('#googleclient');
         googleclient.loadedShortener  = function(event) {
            var request = event.target.api.url.get ({
               shortUrl: 'http://goo.gl/fbsS'
            })
            request.execute(function(resp) {
            });
         };
         googleclient.msgloaded = function(e) {
            document.querySelector('#loadedmsg').innerHTML +=
               e.target.localName + ' is loaded' + '<br>';
         };
      </script>
   </body>
</html>

出力

アプリケーションを実行するには、作成されたプロジェクトディレクトリに移動し、次のコマンドを実行します。

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

polymer_google-client-loader

Polymer-google-client-loader

Polymer-Googleクライアントローダー

例

出力