チュートリアル

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

Python

• ディレクトリのルートには、次のファイルが含まれています。

  • main.py - Python アプリケーションのエントリ ポイント。このファイルで使用するサーバー構成を指定し、ファイルを実行してサーバーを起動します。
  • requirements.txt - ウェブアプリの実行に必要な Python モジュール。これらは pip install -r requirements.txt を使用して自動的にインストールできます。

  • client_secret.json - 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 ファイルの末尾に、次のいずれかを追加します。

1. 保護されていない 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)
   

2. localhost を保護します。ssl_context 引数には、SSL 認証鍵ファイルの Tuple を指定する必要があります。

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

3. 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 しないため、*.pem が .gitignore ファイルにあることを確認します。

サーバーを起動する

次のコマンドを使用して、サーバーで実行する正しいステップに 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>

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

ファイルを git に commit しないため、*.p12 が .gitignore ファイルにあることを確認します。

サーバーを起動する

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

./mvnw spring-boot:run

Windows の場合

mvnw.cmd spring-boot:run

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