チュートリアル

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

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 しないように、.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 で指定したポートでサーバーが起動します。