チュートリアル

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 鍵ファイルのタプルを指定する必要があります。

   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>

この例では、キーストア ファイルを resources ディレクトリに含めています。保存場所は任意ですが、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 で指定したポートでサーバーが起動します。