G Suite 開発
Googleボタンとの統合を使用した導入の推進
2017-07-26 G Suite 開発
Googleサービスとの統合ボタンは、訪問者がG Suiteにウェブ上のどこからでも公に可視アプリケーションを統合できます。管理者は、自分のドメインにアプリをインストールするためにボタンをクリックするだけです。 入門 一般に、Googleとの統合ボタンを表示するには、ボタンをレンダリングするために必要なJavaScriptリソースを含めてから、サイトのHTMLのどこにボタンを配置するかを指定します。ボタンをG Suite Marketplaceリストにリンクするパラメータも提供します。 このセクションでは、ボタンをレンダリングするさまざまな方法があります。 タグマークアップ HTML5マークアップ JavaScript 最も単純なケースは 、タグをタグマークアップでレンダリングすることです。 注：アプリがGoogle App Marketplaceに公開された後、[ Googleと統合 ]ボタンがアプリを正常にインストールするまでに数日かかることがあります。地元のページでそれを試して、ライブWebサイトにボタンを配置する前にそれが機能していることを確認してください。 タグマークアップでレンダリングする タグマークアップを使用してレンダリングするには、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> 注：platform.jsスクリプトをインクルードすると、ボタンのレンダリングに使用するgapi.additnowメソッドが自動的に読み込まれます。 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 …
