Googleボタンとの統合を使用した導入の推進

Googleサービスとの統合ボタンは、訪問者がG Suiteにウェブ上のどこからでも公に可視アプリケーションを統合できます。管理者は、自分のドメインにアプリをインストールするためにボタンをクリックするだけです。

入門

一般に、Googleとの統合ボタンを表示するには、ボタンをレンダリングするために必要なJavaScriptリソースを含めてから、サイトのHTMLのどこにボタンを配置するかを指定します。ボタンをG Suite Marketplaceリストにリンクするパラメータも提供します。

このセクションでは、ボタンをレンダリングするさまざまな方法があります。

タグマークアップ
HTML5マークアップ
JavaScript

最も単純なケースは、タグをタグマークアップでレンダリングすることです。

タグマークアップでレンダリングする

タグマークアップを使用してレンダリングするには、platform.jsスクリプトを含め、[ Googleと統合 ]ボタンをレンダリングする場所に<g:additnow>タグを配置します。このタグのプロパティは、統合するアプリケーションを指定します。このプロパティの詳細については、「Googleボタンタグ属性との統合」を参照してください。applicationid

次の例は、タグマークアップを使用してボタンをレンダリングする簡単な例を示しています。

<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<g:additnow applicationid="your-app-id"></g:additnow>

スクリプトはhttpsとして提供する必要があり、ページの任意の場所に含めることができます。

HTML5のマークアップでレンダリングする

タグマークアップの代わりに、標準のHTML5マークアップを使用して[Googleと統合 ]ボタンを指定できます。HTML5マークアップを使用するにplatform.jsは、HTML要素で使用するクラスをインクルードして設定しますg-additnow。

次の例は、HTML5マークアップを使用して[ Googleと統合 ]ボタンを表示する単純なケースを示しています。

<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<div class="g-additnow" data-applicationid="your-app-id"></div>

JavaScriptでレンダリングする

レンダリングすることで、Googleのと統合 JavaScriptでボタンは、ページ内の任意の要素をターゲットにし、プログラムのGoogleボタンと統合レンダリングすることができます。

JavaScriptでIntegrate with Googleボタンを表示するには、まずJavaScriptファイルをインクルードします：

<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>

JavaScriptファイルをインクルードした後、HTMLコンテナを指定して、[ Googleと統合 ]ボタンとしてレンダリングする必要があります。

<div id="placeholder-div"></div>

最後に、以下を使用してボタンをレンダリングしますgapi.additnow.render()。

<script>gapi.additnow.render('placeholder-div', { 'applicationid': 'your-app-id' });</script>

gapi.additnow.renderメソッドに渡される最初のパラメータは、[ Googleと統合 ]ボタンをホストするために使用されるターゲットHTMLコンテナを受け入れます。2番目のパラメータは、開始するアプリ、モードなどの情報を示すパラメータを含むオブジェクトです。詳細については、「Googleと統合」ボタンの属性を参照してください。

スクリプトの非同期ロード

ページの読み込み時間を改善するには、JavaScriptを非同期に読み込む必要があります。この方法では、ブラウザがページとJavaScriptファイルを並行して読み込むことができます。最高のパフォーマンスを得るには、\</body>タグの前に次のJavaScriptを配置します。

<script type="text/javascript">
  (function(w) {
    if (!(w.gapi && w.gapi._pl)) {
      var d = w.document;
      var po = d.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/platform.js?onload=onLoadCallback';
      var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    }
  })(window);
</script>

すべての依存関係がロードされた後で、非同期ロードを使用してコードの実行を開始するときに、onloadコールバックを使用できます。

JavaScriptを非同期にロードするときは、スクリプトタグのパラメータを別に指定する必要があります。代わりに次の構文を使用します。

<script type="text/javascript">
  window.___gcfg = {
    parsetags: 'onload'
  };
  (function(w) {
    if (!(w.gapi && w.gapi._pl)) {
      var d = w.document;
      var po = d.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/platform.js?onload=onLoadCallback';
      var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    }
  })(window);
</script>

Googleボタンのパラメータと属性との統合

[ Googleと統合 ]ボタンには、ボタンを構成する属性、ボタンに関連付けられたアプリケーション、およびユーザーがボタンをクリックしたときに呼び出されるコールバックから返される属性が含まれています。

スクリプトタグパラメータ

これらのパラメータは<script />要素内で定義されます。パラメータは、Webページ全体で使用されるボタン読み込みメカニズムを制御します。

キー値デフォルト説明

キー	値	デフォルト	説明
`parsetags`	`explicit,onload`	`onload`	使用するロードメカニズムを設定します。オンロードページ上のすべての[Googleと統合]ボタンは、ページが読み込まれた後に自動的にレンダリングされます。遅延実行onLoadの例を参照してください。明白な Googleボタンとの統合ボタンは、`gapi.additnow.go` またはでの明示的な呼び出しでのみレンダリングされます`gapi.additnow.render`。あなたが使用した場合`explicit`と一緒に負荷を `go`し、`render`あなたのページ内の特定のコンテナにそのポイントを呼び出し、ボタンのレンダリング時間を向上させることができます全体のDOMを、トラバースからスクリプトを防ぎます。gapi.additnow.goとgapi.additnow.renderの例を参照してください。

parsetags

explicit,onload

onload

使用するロードメカニズムを設定します。

オンロード: ページ上のすべての[Googleと統合]ボタンは、ページが読み込まれた後に自動的にレンダリングされます。遅延実行onLoadの例を参照してください。
明白な: Googleボタンとの統合ボタンは、gapi.additnow.go またはでの明示的な呼び出しでのみレンダリングされますgapi.additnow.render。あなたが使用した場合explicitと一緒に負荷を goし、renderあなたのページ内の特定のコンテナにそのポイントを呼び出し、ボタンのレンダリング時間を向上させることができます全体のDOMを、トラバースからスクリプトを防ぎます。gapi.additnow.goとgapi.additnow.renderの例を参照してください。

Googleのボタンタグ属性との統合

次のタグ属性は、[ Googleと統合 ]ボタンの初期化に使用されます。管理者がボタンをクリックしたときにインストールされるアプリケーションを指定します。

パラメータ	タイプ	説明
`applicationid`	数	ボタンが統合するアプリケーションを指定します。これはプロジェクト番号で、G Suite Marketplace API設定のApp IDフィールドに配置できます。

JavaScript APIメソッド

Integrate with GoogleボタンJavaScriptは、gapi.additnow名前空間の下にある2つのボタン描画関数を定義します。parsetags「explicit」に設定して自動レンダリングを無効にすると、これらの機能のいずれかを呼び出す必要があります。

方法説明

方法	説明
`gapi.additnow.render( container, parameters )`	指定したコンテナを[Googleと統合]ボタンとしてレンダリングします。コンテナコンテナは[Googleと統合]ボタンとしてレンダリングされます。コンテナのID（文字列）またはDOM要素自体を指定します。パラメータータグ属性をkey = valueの組として含むオブジェクト。たとえば、 `{"width": "300", "theme": "light"}.`
`gapi.additnow.go( opt_container )`	指定されたコンテナのGoogleボタンタグとクラスとの統合をすべてレンダリングします。この関数は、`parsetags` がに設定されている場合にのみ使用する必要が`explicit`あります。これは、パフォーマンスの理由から行う可能性があります。 opt_container [Integrate with Google]ボタンタグが含まれているコンテナで、レンダリングします。コンテナのID（文字列）またはDOM要素自体を指定します。場合は`opt_container`、パラメータが省略されている、すべてのページにGoogleボタンタグと統合レンダリングされます。

gapi.additnow.render(

 container,

 parameters

)

指定したコンテナを[Googleと統合]ボタンとしてレンダリングします。

コンテナ: コンテナは[Googleと統合]ボタンとしてレンダリングされます。コンテナのID（文字列）またはDOM要素自体を指定します。
パラメーター: タグ属性をkey = valueの組として含むオブジェクト。たとえば、 {"width": "300", "theme": "light"}.

gapi.additnow.go(

 opt_container

)

指定されたコンテナのGoogleボタンタグとクラスとの統合をすべてレンダリングします。この関数は、parsetags がに設定されている場合にのみ使用する必要がexplicitあります。これは、パフォーマンスの理由から行う可能性があります。

opt_container: [Integrate with Google]ボタンタグが含まれているコンテナで、レンダリングします。コンテナのID（文字列）またはDOM要素自体を指定します。場合はopt_container、パラメータが省略されている、すべてのページにGoogleボタンタグと統合レンダリングされます。

例

次のセクションでは、[ Googleと統合 ]ボタンを使用する方法の簡単な例を示します。

HTML5マークアップを使用する基本ページ

<html>
  <head>
    <title>Integrate with Google button demo</title>
    <script type="text/javascript" src="https://apis.google.com/js/platform.js">
    </script>
  </head>
  <body>
    <g:additnow applicationid="YOUR-APP-ID"></g:additnow>
  </body>
</html>

カスタムタグマークアップを含む基本ページ

<html>
  <head>
    <title>Integrate with Google button demo: custom tag</title>
    <script type="text/javascript" src="https://apis.google.com/js/platform.js">
    </script>
  </head>
  <body>
    <g:additnow applicationid="your-app-id"”></g:additnow>
  </body>
</html>