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

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

チュートリアル

この一連のチュートリアルでは、インフラストラクチャの Classroom アドオン。各チュートリアルステップでは、単一のウェブアプリケーションに実装できます。このガイドは、設定、構成、起動するうえで役立ちます

アドオンは Google Cloud プロジェクトとやり取りする必要があります。Google Cloud のスタートガイドを一読することをおすすめします。管理者認証情報、API アクセス、Google Workspace Marketplace SDK を Google Cloud コンソール。詳細については、 Google Workspace Marketplace SDK とリスティングに関するページをご覧ください。

このガイドの内容は次のとおりです。

Google Cloud を使用して、iframe に表示するページを作成する Classroom。
Google シングルサインオン（SSO）を追加し、ユーザーがログインできるようにします。
API 呼び出しを行ってアドオンを課題に添付します。
アドオンの送信に関する主要な要件と必須機能に対処します。

このガイドは、読者がプログラミングと基本的なウェブコンテンツに精通していることを前提としています開発の概念に関するものです。プロジェクトの構成ガイドをご覧ください。このページには重要な構成の詳細については、チュートリアルでは説明しません。

実装の例

Python で完全なリファレンスサンプルを確認できます。部分的な実装 Java と Node.js でも使用できます。これらの実装は、後続のページにあるサンプルコードのソースを参照します。

ダウンロード場所

Python と Java のサンプルは、GitHub リポジトリで入手できます。

Node.js サンプルは、zip ファイルとしてダウンロードできます。

Node.js アーカイブ

前提条件

以下のセクションを確認して、新しいアドオンプロジェクトを準備します。

HTTPS 証明書

アプリはどの開発環境でもホストできますが、 Classroom アドオンは https:// からのみご利用いただけます。したがって、アプリのデプロイや内部テストのために、SSL で暗号化されたサーバーを追加します。

localhost は SSL 証明書で使用できます。次の場合は mkcert を検討しますローカルで開発するための証明書を作成する必要があります。

Google Cloud プロジェクト

これらの例で使用するには、Google Cloud プロジェクトを構成する必要があります。詳しくは、 Google Cloud プロジェクトの作成ガイドをご覧ください。ご覧くださいGoogle Cloud プロジェクトをセットアップする特定の構成手順についても、最初のチュートリアルでとるべきアクションです。

完了したら、OAuth 2.0 クライアント ID を JSON ファイルとしてダウンロードします。追加する必要があります展開したサンプルディレクトリに配置します。詳しくは、ファイルを特定の場所に保存できます。

OAuth 認証情報

新しい OAuth 認証情報を作成する手順は次のとおりです。

Google Cloud の [認証情報] ページに移動します。必ず正しいプロジェクトが選択されていることを確認します。
[認証情報を作成] をクリックし、表示された認証情報から [OAuth クライアント ID] を選択します。選択します。
次のページで、以下の操作を行います。
- [アプリケーションの種類] を [ウェブアプリケーション] に設定します。
- [承認済みのリダイレクト URI] で、[URI を追加] をクリックします。完全な path: アプリケーションのコールバックルート。たとえば https://my.domain.com/auth-callback または https://localhost:5000/callback。このルートを作成して処理する後ほど説明しますこのようなルートはいつでも編集または追加できます。
- [作成] をクリックします。
新しく作成した認証情報を示すダイアログが表示されます。[ [JSON をダウンロード] オプション。ダウンロードした JSON ファイルをサーバーにコピーするされます。

言語固有の前提条件

各リポジトリの README ファイルで、あります。

Python

この Python の例では、Flask フレームワークを使用します。ダウンロード提供されたリンクから完全なソースコードを入手します。

必要に応じて、Python 3.7+ をインストールし、pip が使用可能であることを確認します。

python3 -m ensurepip --upgrade

また、新しい Python 仮想マシンを作成して有効にすることも、できます。

python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate

各チュートリアルのサブディレクトリには、requirements.txt があります。ダウンロードされます。次のコマンドを使用して、必要なライブラリをすばやくインストールできます。 pip。次のコマンドを使用して、必要なライブラリをインストールします。説明します

cd flask/01-basic-app
pip install -r requirements.txt

Node.js

この Node.js の例では、Express フレームワークを使用しています。次のアプリをダウンロードできます。提供されたリンクから完全なソースコードを入手する。

この例では、Node.js v16.13 以降が必要です。

npm を使用して必要なノードモジュールをインストールします。

npm install

Java

この Java の例では、Spring Boot フレームワークを使用しています。次のアプリをダウンロードできます。提供されたリンクから完全なソースコードを入手する。

Java 11 以降をマシンにインストールしていない場合はインストールします。

Spring Boot アプリケーションで Gradle または Maven を使用してビルドを処理し、確認します。この例に含まれている Maven ラッパーは、 Maven 自体をインストールしなくてもビルドを成功させることができます。

プロジェクトをダウンロードまたはクローンを作成したディレクトリで、次のコマンドを実行します。プロジェクトを実行するための前提条件があることを確認してください。

java --version
./mvnw --version

Windows の場合:

java -version
mvnw.cmd --version

ファイルについて

以降のセクションでは、サンプルディレクトリのレイアウトについて説明します。

ディレクトリ名

各リポジトリには、名前が数字で始まる複数のディレクトリ、 /01-basic-app/ など。番号は特定のチュートリアルのステップに対応しています。各ディレクトリには、機能を実装した、完全に機能するウェブアプリが含まれています特定のチュートリアルのとおりです。たとえば、/01-basic-app/ ディレクトリには、アドオンを作成するの最終的な実装が含まれています。説明します。

ディレクトリの内容

ディレクトリの内容は実装言語によって異なります。

Python

ディレクトリルートには、次のファイルが含まれています。
- main.py - Python アプリケーションのエントリポイント。サーバーを指定する構成を選択して実行し、起動します。
- requirements.txt - ウェブアプリの実行に必要な Python モジュール。これらは pip install -r requirements.txt を使用して自動的にインストールできます。
- client_secret.json - Google からダウンロードされたクライアントシークレットファイル説明します。これはサンプルアーカイブには含まれていません。ダウンロードした認証情報ファイルの名前を変更し、各ファイルにディレクトリのルートです。
  
  重要: Google Cloud プロジェクトを実行することをおすすめします。
config.py - Flask サーバーの構成オプション。
webapp ディレクトリには、ウェブアプリケーションのコンテンツが含まれています。次のツールが含まれています。
さまざまなページ用の Jinja テンプレートが格納されている /templates/ ディレクトリ。
画像、CSS、補助的な JavaScript が含まれる /static/ ディレクトリできます。
routes.py - ウェブアプリケーションルートのハンドラメソッド。
__init__.py - webapp モジュールのイニシャライザ。このイニシャライザが Flask サーバーを起動し、構成オプションを読み込む config.py で設定。
特定のチュートリアルステップで必要となる追加のファイル。

Node.js

ウォークスルーの各ステップは、それぞれの <step> で確認できます表示されます。各ステップには以下が含まれます。

JavaScript、CSS、画像などの静的ファイルは、 ./<step>/public フォルダ。
Express ルーターは ./<step>/routes フォルダにあります。
HTML テンプレートは ./<step>/views フォルダにあります。
サーバーアプリケーションは ./<step>/app.js です。

Java

プロジェクトディレクトリには次のものが含まれます。

src.main ディレクトリには、ソースコードと実行の構成が含まれます。ダウンロードされます。このディレクトリには次のものが含まれます。 + java.com.addons.spring ディレクトリには、 Application.java ファイルと Controller.java ファイル。「 Application.java ファイルは、次のタスクの実行を担当します。アプリケーションサーバーは処理され、Controller.java ファイルはロジックを記述できます。 + resources ディレクトリには、次の内容を含む templates ディレクトリが含まれます。 HTML ファイルと JavaScript ファイル。また、実行するポートを指定する application.properties ファイルサーバー、キーストアファイルへのパス、 templates ディレクトリ。この例にはキーストアファイルが resources ディレクトリ。どこにでも保存できます好みですが、application.properties を必ず更新してください。そのパスを適宜指定します。
- pom.xml には、プロジェクトのビルドに必要な情報が含まれています。必要な依存関係を定義します。
- .gitignore には、git にアップロードすべきでないファイル名が含まれています。この .gitignore にキーストアへのパスを必ず追加してください。上記の例では、これは secrets/*.p12 です（キーストアについては後述します）。チュートリアル 2 とさらに、環境変数に client_secret.json ファイルを含め、保存する必要があります。チュートリアル 3 以降では H2 データベースファイルとファイルデータストアへのパスを追加する必要があります。できます。これらのデータストアの設定については、再訪問の処理に関する 3 番目のチュートリアルをご覧ください。
- mvnw と mvnw.cmd は、Unix と Windows 用の Maven ラッパー実行可能ファイルです。定義します。たとえば、次のように ./mvnw --version を実行すると、 Unix の場合は、Apache Maven のバージョンなどの情報が出力されます。
- .mvn ディレクトリには、Maven ラッパーの構成が含まれています。

サンプルサーバーを実行する

サーバーをテストするには、サーバーを起動する必要があります。以下の手順に沿って操作してください。任意の言語でサンプルサーバーを実行します。

Python

Oauth 認証情報

前述の説明のとおりに OAuth 認証情報を作成してダウンロードします。場所 JSON ファイルは、アプリケーションのサーバーと並行してルートディレクトリにあります。指定します。

サーバーを構成する

ウェブサーバーを実行するには、いくつかの方法があります。最後に、 Python ファイルに次のいずれかを追加します。

localhost は保護されていません。なお、この方法は、ブラウザウィンドウのみに表示されます。セキュリティで保護されていないドメインは、 Classroom アドオン iframe。
```
if __name__ == "__main__":
  # Disable OAuthlib's HTTPs verification.
  os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"

  # Run the web app at http://localhost:5000.
  app.run(debug=True)
```

localhost を保護。SSL 鍵ファイルのタプルを ssl_context 引数。

if __name__ == "__main__":
  # Run the web app at https://localhost:5000.
  app.run(host="localhost",
          ssl_context=("localhost.pem", "localhost-key.pem"),
          debug=True)

Gunicorn サーバー。本番環境に対応したサーバーやクラウドデプロイです。PORT 環境変数を設定することをおすすめします。使用します。

if __name__ == "__main__":
  # Run the web app at https://<your domain>:<server_port>.
  # Defaults to https://<your domain>:8080.
  server_port = os.environ.get("PORT", "8080")
  app.run(debug=True, port=server_port, host="0.0.0.0")

サーバーを起動する

Python アプリケーションを実行し、確認できます。

python main.py

表示された URL をクリックして、ブラウザでウェブアプリを表示し、確認します

Node.js

サーバーを構成する

HTTPS 経由でサーバーを実行するには、自己証明書を作成する必要があります内部 IP アドレスを使用して通信しますこれらの認証情報は、リポジトリルートに sslcert/cert.pem と sslcert/key.pem として保存フォルダに配置されます。以下の目的のために、これらのキーを OS キーチェーンに追加する必要があります受け入れることができます。

.gitignore ファイルに *.pem が含まれていないことを確認してください。 git に commit します

サーバーを起動する

step01 を置き換えて次のコマンドでアプリケーションを実行できます。サーバーとして実行する適切なステップ（例: step01） 01-basic-app 用、02-sign-in 用 step02）。

npm run step01

または

npm run step02

これにより、https://localhost:5000 のウェブサーバーが起動します。

ターミナルで Control + C を使用してサーバーを終了することもできます。

Java

サーバーを構成する

HTTPS 経由でサーバーを実行するには、自己証明書を作成する必要があります内部 IP アドレスを使用して通信します

ローカルでの開発には mkcert の使用を検討してください。mkcert をインストールすると、次のコマンドは、ローカルに保存された証明書を生成して実行します。提供します。

mkcert -install
mkcert -pkcs12 -p12-file <path_to_keystore> <domain_name>

この例では、キーストアファイルがリソースディレクトリに含まれています。。任意の場所に保存できますが、 application.properties ファイルを適切なパスに置き換えます。ドメイン名はプロジェクトを実行しているドメイン（例: localhost）。

.gitignore ファイルに *.p12 が含まれていることを確認してください。 git に commit します

サーバーを起動する

Application.java で main メソッドを実行してサーバーを起動します。表示されます。たとえば IntelliJ では Application.java >Run 'Application' src/main/java/com/addons/spring ディレクトリまたは Application.java を開きます main(String[] args) の左側にある緑色の矢印をクリックします。メソッドシグネチャ。または、ターミナルでプロジェクトを実行することもできます。ウィンドウ:

./mvnw spring-boot:run

Windows の場合

mvnw.cmd spring-boot:run

これにより、https://localhost:5000 または指定したポートでサーバーが起動します。 application.properties で指定します。

チュートリアル

実装の例

ダウンロード場所

前提条件

HTTPS 証明書

Google Cloud プロジェクト

OAuth 認証情報

言語固有の前提条件

Python

Node.js

Java

ファイルについて

ディレクトリ名

ディレクトリの内容

Python

Node.js

Java

サンプル サーバーを実行する

Python

Node.js

Java

サンプルサーバーを実行する