Google Classroom アドオンの一般提供が開始されました。詳しくは、アドオンのドキュメントをご覧ください。

このページは Cloud Translation API によって翻訳されました。

Classroom の共有ボタンを追加する

Classroom の共有ボタン

ウェブサイトのニーズに合わせて、Classroom の共有ボタンを追加してカスタマイズすることができます（ボタンのサイズや読み込み方法の変更など）。ウェブサイトに Classroom の共有ボタンを追加すると、ユーザーはあなたのコンテンツをクラスで共有し、サイトへのトラフィックを促進できます。

はじめに

シンプルなボタン

ページに Classroom の共有ボタンを追加する最も簡単な方法は、必要な JavaScript リソースを追加して、共有ボタンタグを追加することです。

<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:sharetoclassroom url="http://url-to-share" size="32"></g:sharetoclassroom>

スクリプトは HTTPS プロトコルを使用して読み込む必要があり、ページの任意の場所から制限なく含めることができます。詳しくは、よくある質問をご覧ください。

また、クラス属性を g-sharetoclassroom に設定し、ボタン属性の前に data- を付けることで、HTML5 有効な共有タグを使用することもできます。

<div class="g-sharetoclassroom" data-size="32" data-url="..." ></div>

デフォルトでは、付属のスクリプトは DOM を走査し、共有タグをボタンとしてレンダリングします。JavaScript API を使用してページ内の 1 つの要素のみを走査するか、特定の要素を共有ボタンとしてレンダリングすると、大規模なページのレンダリング時間を短縮できます。

`onLoad` とスクリプトタグパラメータを使用した遅延実行

parsetags スクリプトタグパラメータを onload（デフォルト）または explicit に設定して、ボタンコードが実行されるタイミングを決定します。スクリプトタグパラメータを指定するには、次の構文を使用します。

<script >
  window.___gcfg = {
    parsetags: 'onload'
  };
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>

設定

Classroom で共有する URL の設定

Classroom で共有される URL は、ボタンの url 属性によって決まります。この属性は、共有するターゲット URL を明示的に定義し、共有ボタンを表示するには設定する必要があります。

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

これらのパラメータは、platform.js スクリプトを読み込む前に実行する必要がある <script /> 要素内で定義します。これらのパラメータは、ウェブページ全体で使用されるボタン読み込みメカニズムを制御します。

使用できるパラメータは次のとおりです。

onload: ページ上のすべての共有ボタンは、ページが読み込まれると自動的にレンダリングされます。遅延実行 onLoad の例をご覧ください。
明示: 共有ボタンは、gapi.sharetoclassroom.go または gapi.sharetoclassroom.render を明示的に呼び出した場合にのみレンダリングされます。

明示的な読み込みを、ページの特定のコンテナを指す go and render 呼び出しと組み合わせて使用すると、スクリプトが DOM 全体を走査できなくなり、ボタンのレンダリング時間が短縮されます。gapi.sharetoclassroom.go と gapi.sharetoclassroom.render の例をご覧ください。

タグ属性を共有する

これらのパラメータは、各ボタンの設定を制御します。これらのパラメータは、共有ボタンタグの attribute=value ペアとして、または gapi.sharetoclassroom.render の呼び出しの JavaScript key:value ペアとして設定できます。

属性	値	デフォルト	説明
`body`	文字列	null	Classroom と共有するアイテムの本文テキストを設定します。
`courseid`	文字列	null	指定すると、ユーザーが共有ボタンをクリックしたときに表示される [クラスを選択] メニューでコース ID が事前選択されるように設定されます。ユーザーは必要に応じて、この事前選択されている値を変更できます。
`itemtype`	`announcement`、`assignment`、`material`、または `question`	null	これにより、ユーザーが最初にコースを選択した後（または `courseid` も指定されている場合はすぐに）作成ダイアログが自動的に表示されます。生徒がクラスを選択した場合、または教師が生徒であるクラスを選択した場合、この値は無視されます。
`locale`	RFC 3066 準拠の言語タグ	`en-US`	ユーザー補助を目的として、ボタン `aria-label` の言語を設定します。これは、ユーザーがボタンをクリックしたときに表示される共有ダイアログの言語には影響しません。共有ダイアログの言語は、ユーザーのブラウザの設定の影響を受けます。
`onsharecomplete`	文字列	null	指定すると、ユーザーがリンクの共有を終了したときに呼び出される関数の名前をグローバル名前空間に設定します。パラメータを介して `gapi.sharetoclassroom.render` に引数を渡す場合は、関数自体を使用することもできます。この機能は Internet Explorer では動作しません（下記を参照）
`onsharestart`	文字列	null	指定すると、共有ダイアログが開いたときに呼び出されるグローバル名前空間に関数の名前が設定されます。パラメータを介して `gapi.sharetoclassroom.render` に引数を渡す場合は、関数自体を使用することもできます。この機能は Internet Explorer では動作しません（下記をご覧ください）。
`size`	int	null	共有ボタンのサイズをピクセル単位で設定します。サイズを省略すると、32 が使用されます。
`theme`	`classic`、`dark`、または `light`	`classic`	選択したテーマのボタンアイコンを設定します。
`title`	文字列	null	Classroom で共有するアイテムのタイトルを設定します。
`url`	共有する URL	null	Classroom に共有する URL を設定します。`gapi.sharetoclassroom.render` を使用してこの属性を設定する場合は、URL をエスケープしないでください。

Classroom の共有ボタンに関するガイドライン

Classroom の共有ボタンの表示は、Google の最小～最大サイズに関するガイドラインと、関連する色/ボタンテンプレートに準拠している必要があります。ボタンは、最小サイズ 32 ピクセルから最大 96 ピクセルまで、さまざまなサイズをサポートしています。

テーマ	例
従来
ダーク
低

カスタマイズ

どのような形であれ、アイコンを変更または作り直すことはおすすめしません。ただし、複数のサードパーティのソーシャルアイコンをアプリに一緒に表示する場合は、アプリのスタイルに合わせて Classroom アイコンをカスタマイズできます。その場合は、すべてのボタンが同じようなスタイルでカスタマイズされていること、また、カスタマイズが Classroom のブランドの取り扱いガイドラインに準拠していることを確認してください。共有ボタンの外観と動作を完全に制御する場合は、https://classroom.google.com/share?url={url-to-share} という構造の URL を使用して共有を開始できます。

JavaScript API

共有ボタンの JavaScript は、gapi.sharetoclassroom 名前空間に 2 つのボタンレンダリング関数を定義します。parsetag を explicit に設定して自動レンダリングを無効にする場合は、これらの関数のいずれかを呼び出す必要があります。

メソッド説明

メソッド	説明
gapi.sharetoclassroom.render( container, parameters )	指定されたコンテナを共有ボタンとしてレンダリングします。コンテナ共有ボタンとしてレンダリングするコンテナ。コンテナの ID（文字列）または DOM 要素自体を指定します。パラメータタグ属性を `key=value` ペアとして含むオブジェクト。例: `{"size": "300", "theme": "light"}`
gapi.sharetoclassroom.go( opt_container )	指定されたコンテナ内のすべての共有ボタンのタグとクラスをレンダリングします。この関数は、`parsetags` が `explicit` に設定されている場合にのみ使用してください。これはパフォーマンス上の理由から行うことがあります。オプションのコンテナレンダリングする共有ボタンのタグを含むコンテナ。コンテナの ID（文字列）または DOM 要素自体を指定します。`opt_container` パラメータを省略すると、ページ上のすべての共有ボタンタグがレンダリングされます。

gapi.sharetoclassroom.render(
 container,
 parameters
)

指定されたコンテナを共有ボタンとしてレンダリングします。

コンテナ: 共有ボタンとしてレンダリングするコンテナ。コンテナの ID（文字列）または DOM 要素自体を指定します。
パラメータ: タグ属性を key=value ペアとして含むオブジェクト。例: {"size": "300", "theme": "light"}

gapi.sharetoclassroom.go(
 opt_container
)

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

オプションのコンテナ: レンダリングする共有ボタンのタグを含むコンテナ。コンテナの ID（文字列）または DOM 要素自体を指定します。opt_container パラメータを省略すると、ページ上のすべての共有ボタンタグがレンダリングされます。

例

基本ページ

<html>
  <head>
    <title>Classroom demo: Basic page</title>
    <link href="http://www.example.com" />
    <script src="https://apis.google.com/js/platform.js" async defer>
    </script>
  </head>
  <body>
    <g:sharetoclassroom size=32 url="http://google.com"></g:sharetoclassroom>
  </body>
</html>

DOM のサブセットでタグを明示的に読み込む

<html>
  <head>
    <title>Demo: Explicit load of a Classroom share button</title>
    <link href="http://www.example.com" />
    <script>
      window.___gcfg = {
        parsetags: 'explicit'
      };
    </script>
    <script src="https://apis.google.com/js/platform.js">
    </script>
  </head>
  <body>
    <div id="content">
      <div class="g-sharetoclassroom" data-size="32" data-url="..." ></div>
    </div>
    <script>
      gapi.sharetoclassroom.go("content");
    </script>
  </body>
</html>

明示的なレンダリング

<html>
  <head>
    <title>Demo: Explicit render of a Classroom share button</title>
    <link href="http://www.example.com" />
    <script>
      window.___gcfg = {
        parsetags: 'explicit'
      };
      function renderWidget() {
        gapi.sharetoclassroom.render("widget-div",
            {"url": "http://www.google.com"} );
      }
    </script>
    <script src="https://apis.google.com/js/platform.js">
    </script>
  </head>
  <body>
    <a href="#" onClick="renderWidget();">Render the Classroom share button</a>
    <div id="widget-div"></div>
  </body>
</html>

よくある質問

以下のよくある質問では、技術的な考慮事項と実装の詳細について説明しています。その他のリソースについては、一般的なよくある質問をご覧ください。

Classroom の共有ボタンの統合をテストするにはどうすればよいですか？

統合から Classroom への共有をテストするには、Classroom テストアカウントをリクエストしてください。

1 つのページに異なる URL を共有する複数のボタンを配置できますか？

はい。共有タグパラメータで指定されている url 属性を使用して、Classroom と共有する URL を指定します。

共有ボタンはページのどこに配置すればよいですか？

ページとユーザーを一番よく理解しているのはパブリッシャー様です。最も効果的だと思われる場所にボタンを配置することをおすすめします。通常は、スクロールせずに見える範囲、ページのタイトルの近く、共有リンクの近くに配置することをおすすめします。また、作成したコンテンツの末尾と先頭の両方に共有ボタンを配置すると効果的な場合があります。

ページの `<script>` タグの位置によって遅延に影響はありますか？

いいえ。<script> タグの配置によるレイテンシに大きな影響はありません。ただし、ドキュメントの下部にある </body> 終了タグの直前にタグを配置すれば、ページの読み込み速度が向上する可能性があります。

共有タグの前に `<script>` タグを含める必要がありますか？

いいえ。<script> タグはページのどこにでも含めることができます。

別の `<script>` タグが JavaScript API セクションのいずれかのメソッドを呼び出す前に、`<script>` タグを含める必要がありますか？

はい。JavaScript API メソッドを使用する場合は、ページ内で <script> インクルードの後に配置する必要があります。また、async defer は JavaScript API メソッドと併用できません。

`url` 属性を使用する必要はありますか？

url 属性は必須です。url を明示的に設定しないと、共有ボタンはレンダリングされません。詳しくは、共有ターゲット URL をご覧ください。

共有ボタンのあるページを表示したときに、一部のユーザーがセキュリティ警告を受け取る。これを取り除くにはどうすればよいですか？

共有ボタンのコードには、Google のサーバーのスクリプトが必要です。このエラーは、https:// を介して読み込まれたページに、http:// を介してスクリプトを含める場合に発生することがあります。https:// を使用してスクリプトを含めることをおすすめします。

<script src="https://apis.google.com/js/platform.js" async defer></script>

どのウェブブラウザに対応していますか？

Classroom の共有ボタンは、Classroom のウェブインターフェースと同じウェブブラウザ（Chrome、Firefox®、Internet Explorer®、Safari® など）に対応しています。注: onsharestart と onsharecomplete で指定された関数は、Internet Explorer ユーザーに対しては呼び出されません。

Classroom の共有ボタンをクリックすると、Classroom にどのようなデータが送信されますか。

ユーザーが共有ボタンをクリックすると、G Suite for Education アカウントでログインするように求められます。認証後、ユーザーアカウントと url 属性は Classroom に送信され、投稿は完了します。