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

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

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

Classroom の共有ボタンを使用すると、Google Classroom 内からコンテンツにアクセスできるようになります。デベロッパーは、短いスクリプトをアプリに埋め込んでボタンを生成できます。これにより、ユーザーはポップアップ iframe で Classroom の課題、質問、お知らせ、教材を作成できます。

ユーザーが [Classroom と共有] ボタンをクリックして、学習教材へのリンクを含む Classroom 課題を作成する例

図 1. ユーザーが [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>

ボタンは、クラス属性を g-sharetoclassroom に設定し、ボタン属性に data- を接頭辞として追加することで、標準 HTML を使用してレンダリングすることもできます。次に例を示します。

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-sharetoclassroom"
     data-url="https://developers.google.com/workspace/classroom/"
     data-size="32">
</div>

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

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

構成

以降のセクションでは、共有ボタンのキー値と構成オプションについて説明します。

これらの属性は、各ボタンの設定を制御します。これらの属性は、共有ボタンの HTML タグで attribute=value ペアとして設定するか、JavaScript API を使用して gapi.sharetoclassroom.render の呼び出しで JavaScript key:value ペアとして設定できます。

必須パラメータは url のみです。この属性は、Classroom と共有するターゲット URL を明示的に定義します。共有ボタンをレンダリングするには、この属性を設定する必要があります。

属性	値	デフォルト	説明
`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 では動作しません（下記を参照）。一部のデベロッパーから、`onsharecomplete` の動作が意図したとおりに機能しないという報告が寄せられています。これがユースケースに影響している場合は、公開バグトラッカーでフィードバックを共有してください。
`onsharestart`	文字列	null	指定すると、共有ダイアログが開いたときに呼び出されるグローバル名前空間の関数の名前が設定されます。パラメータ経由で引数を `gapi.sharetoclassroom.render` に渡す場合は、関数自体を使用することもできます。この機能は Internet Explorer では動作しません（下記を参照）。一部のデベロッパーから、`onsharestart` の動作が意図したとおりに機能しないという報告が寄せられています。これがユースケースに影響している場合は、公開バグトラッカーでフィードバックを共有してください。
`size`	int	null	共有ボタンのサイズをピクセル単位で設定します。サイズを省略した場合、ボタンには 32 が使用されます。
`theme`	`classic`、`dark`、または `light`	`classic`	選択したテーマのボタンアイコンを設定します。
`title`	文字列	null	Classroom に共有するアイテムのタイトルを設定します。
`url`	共有する URL	null	Classroom で共有する URL を設定します。`gapi.sharetoclassroom.render` を使用してこの属性を設定する場合は、URL をエスケープしないでください。

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

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

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

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

使用できる値は次のとおりです。

onload

ページ上のすべての共有ボタンは、ページの読み込み後に自動的にレンダリングされます。

明示

共有ボタンは、

gapi.sharetoclassroom.go または gapi.sharetoclassroom.render

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

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

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

テーマ	例
クラシック
ダーク
軽度

カスタマイズ

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

JavaScript API

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

メソッド説明

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

gapi.sharetoclassroom.render(
 container,
 parameters
)

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

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

gapi.sharetoclassroom.go(
 opt_container
)

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

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

例

以下に、Classroom で共有ボタンの実装例を示します。

基本ページ

<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 への共有をテストするには、Classroom テストアカウントをリクエストしてください。

1 つのページに複数のボタンを配置し、それらすべてが異なる URL を共有することはできますか？

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

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

ページとユーザーを最もよくご存じなのはお客様ですので、最も効果的と思われる場所にボタンを配置することをおすすめします。多くの場合、ページのタイトルの近く、共有リンクの近く、またはページ上部に配置すると効果的です。作成したコンテンツの最初と最後に共有ボタンを配置することも効果的です。

ページ内の `script` タグの位置がレイテンシに影響しますか？

いいえ。script タグの配置によるレイテンシへの影響はほとんどありません。ただし、タグをドキュメントの下部、body タグの閉じる直前に配置すると、ページの読み込み速度が向上する可能性があります。

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

いいえ。script タグはページ内のどこにでも配置できます。

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

はい。JavaScript API メソッドを使用する場合は、script の記述後にページに配置する必要があります。また、JavaScript API のどのメソッドでも async defer を使用できません。

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

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

共有ボタンのあるページを表示すると、一部のユーザーにセキュリティ警告が表示されます。非表示にするにはどうすればよいですか？

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

サポートされているウェブブラウザ

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

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

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