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

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

チュートリアル

この一連のチュートリアルでは、動作する Classroom アドオンのすべての可動部分について説明します。各チュートリアルのステップでは、特定のコンセプトを取り上げ、単一のウェブアプリケーションに実装します。このチュートリアルの目的は、機能するアドオンの設定、構成、起動を支援することです。

アドオンは Google Cloud プロジェクト と連携する必要があります。Google Cloud を初めて使用する場合は、スタートガイドを読むことをおすすめします。認証情報、API アクセス、Google Workspace Marketplace SDK は、Google Cloud コンソールで管理します。Marketplace SDK の詳細については、Google Workspace Marketplace 掲載ガイドのページをご覧ください。

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

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

このガイドは、プログラミングと基本的なウェブ開発のコンセプトを理解していることを前提としています。チュートリアルを開始する前に、プロジェクト構成ガイドを読むことを強くおすすめします。このページには、チュートリアルでは十分に説明されていない重要な構成の詳細が含まれています。

実装の例

完全なリファレンス例は Python で提供されています。部分的な実装は Java と Node.js でも利用できます。これらの実装は、以降のページに記載されているサンプルコードのソースです。

ダウンロード場所

Python と Java の例は、GitHub リポジトリで入手できます。

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

Node.js アーカイブ

前提条件

新しいアドオンプロジェクトを準備するには、次のセクションをご覧ください。

HTTPS 証明書

アプリは任意の開発環境でホストできますが、Classroom アドオンは https:// でのみ利用できます。そのため、アプリをデプロイしたり、アドオンの iframe 内でテストしたりするには、SSL 暗号化されたサーバーが必要です。

SSL 証明書で localhost を使用することもできます。ローカル開発用の証明書を作成する必要がある場合は、mkcert を検討してください。

Google Cloud プロジェクト

これらの例で使用する Google Cloud プロジェクトを構成する必要があります。開始に必要な手順の概要については、 Google Cloud プロジェクトの作成ガイドをご覧ください。最初のチュートリアルの Google Cloud プロジェクトを設定するセクションでは、具体的な構成手順についても説明します。

完了したら、OAuth 2.0 クライアント ID を JSON ファイルとしてダウンロードします。この認証情報ファイルを解凍したサンプルディレクトリに追加する必要があります。具体的な場所については、ファイルを理解するをご覧ください。

OAuth 認証情報

キーポイント: ウェブアプリは、Google Cloud で管理される OAuth 2.0 認証情報を使用する必要があります。

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

[Google Cloud 認証情報] ページに移動します。画面上部で正しいプロジェクトが選択されていることを確認してください。
[認証情報を作成] をクリックし、プルダウンから [OAuth クライアント ID] を選択します。
次のページで、次の操作を行います。
- [アプリケーションの種類] を [ウェブアプリケーション] に設定します。
- [承認済みのリダイレクト URI] で、[URI を追加] をクリックします。アプリケーションのコールバックルートの完全パスを追加します。たとえば、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 を使用して、必要な Node モジュールをインストールします。

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 Cloud からダウンロードしたクライアントシークレットファイル。これはサンプルアーカイブには含まれていません。ダウンロードした認証情報ファイルの名前を変更して、各ディレクトリのルートにコピーする必要があります。
  
  **重要:** 例を実行する前に、**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 ディレクトリには、HTML ファイルと JavaScript ファイルを含む templates ディレクトリが含まれています。また、サーバーを実行するポート、キーストアファイルのパス、templates ディレクトリのパスを指定する application.properties ファイルも含まれています。この例では、キーストアファイルが resources ディレクトリに含まれています。任意の場所に保存できますが、それに応じて application.properties ファイルのパスを更新してください。
- pom.xml には、プロジェクトのビルドに必要な情報と、必要な依存関係の定義が含まれています。
- .gitignore には、git にアップロードしないファイル名が含まれています。この .gitignore にキーストアのパスを追加してください。提供されている例では、secrets/*.p12 です（キーストアの目的については、以下のセクションで説明します）。チュートリアル 2 以降では、client_secret.json ファイルのパスも含めて、シークレットがリモートリポジトリに含まれないようにする必要があります。チュートリアル 3 以降では、H2 データベースファイルとファイルデータストアファクトリのパスを追加する必要があります。これらのデータストアの設定の詳細については、再訪問の処理に関する 3 番目のチュートリアルをご覧ください。
- mvnw と mvnw.cmd は、それぞれ Unix と Windows 用の Maven ラッパー実行可能ファイルです。たとえば、Unix で ./mvnw --version を実行すると、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_context 引数に SSL 鍵ファイルのタプルを指定する必要があります。

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 経由でサーバーを実行するには、HTTPS 経由でアプリケーションを実行するために使用される自己証明書を作成する必要があります。これらの認証情報は、リポジトリのルートフォルダに sslcert/cert.pem と sslcert/key.pem として保存する必要があります。ブラウザでこれらの鍵を受け入れるには、OS のキーチェーンにこれらの鍵を追加する必要がある場合があります。

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

サーバーを起動する

次のコマンドを使用してアプリケーションを実行できます。step01 は、サーバーとして実行する正しいステップに置き換えます（たとえば、01-basic-app の場合は step01、02-sign-in の場合は step02）。

npm run step01

または

npm run step02

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

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

Java

サーバーを構成する

HTTPS 経由でサーバーを実行するには、HTTPS 経由でアプリケーションを実行するために使用される自己証明書を作成する必要があります。

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

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

この例では、キーストアファイルが resources ディレクトリに含まれています。任意の場所に保存できますが、それに応じて application.properties ファイルのパスを更新してください。ドメイン名は、プロジェクトを実行するドメインです（例: localhost）。

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

サーバーを起動する

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

チュートリアル

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