Classroom アドオンを作成する

Python

この Python の例では、Flask フレームワークを使用します。すべてのチュートリアルの完全なソースコードは、[概要] ページからダウンロードできます。このチュートリアルのコードは、/flask/01-basic-app/ ディレクトリにあります。

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

python -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 フレームワークを使用しています。すべてのチュートリアルの完全なソースコードは、[概要] ページからダウンロードできます。

必要に応じて、NodeJS 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

アプリケーション ディレクトリを設定する

この例では、アプリケーション ロジックを Python モジュールとして構造化します。上記の例では、これは webapp ディレクトリです。

サーバー モジュールのディレクトリ（webapp など）を作成します。static ディレクトリをモジュール ディレクトリに移動します。モジュール ディレクトリには、template ディレクトリも作成します。HTML ファイルはここに配置します。

サーバー モジュールをビルドする*

モジュール ディレクトリに __init__.py ファイルを作成し、次のインポートと宣言を追加します。

from flask import Flask
import config

app = Flask(__name__)
app.config.from_object(config.Config)

# Load other module script files. This import statement refers to the
# 'routes.py' file described below.
from webapp import routes

次に、ウェブアプリのルートを処理するファイルを作成します。上記の例では、webapp/routes.py です。このファイルに 2 つのルートを実装します。

from webapp import app
import flask

@app.route("/")
def index():
    return flask.render_template("index.html",
                                message="You've reached the index page.")

@app.route("/classroom-addon")
def classroom_addon():
    return flask.render_template(
        "addon-discovery.html",
        message="You've reached the addon discovery page.")

どちらのルートも、message 変数をそれぞれの Jinja テンプレートに渡します。ユーザーがアクセスしたページを特定するのに便利です。

構成ファイルを作成して起動する

アプリケーションのルート ディレクトリに、main.py ファイルと config.py ファイルを作成します。config.py で秘密鍵を構成します。

import os

class Config(object):
    # Note: A secret key is included in the sample so that it works.
    # If you use this code in your application, replace this with a truly secret
    # key. See https://flask.palletsprojects.com/quickstart/#sessions.
    SECRET_KEY = os.environ.get(
        'SECRET_KEY') or "REPLACE ME - this value is here as a placeholder."

main.py ファイルでモジュールをインポートし、Flask サーバーを起動します。

from webapp import app

if __name__ == "__main__":
    # Run the application over HTTPs with a locally stored certificate and key.
    # Defaults to https://localhost:5000.
    app.run(
        host="localhost",
        ssl_context=("localhost.pem", "localhost-key.pem"),
        debug=True)

Node.js

ルートは、次の行を使用して app.js ファイルに登録されます。

const websiteRouter = require('./routes/index');
const addonRouter = require('./routes/classroom-addon');

app.use('/', websiteRouter);
app.use('/addon-discovery', addonRouter);

/01-basic-app/routes/index.js を開き、コードを確認します。このルートは、エンドユーザーが会社のウェブサイトにアクセスしたときに到達します。ルートは、index Handlebars テンプレートを使用してレスポンスをレンダリングし、title 変数と message 変数を含むデータ オブジェクトをテンプレートに渡します。

router.get('/', function (req, res, next) {
  res.render('index', {
    title: 'Education Technology',
    message: 'Welcome to our website!'
  });
});

2 番目のルート /01-basic-app/routes/classroom-addon.js を開き、コードを確認します。このルートは、エンドユーザーがアドオンにアクセスしたときに到達します。このルートでは、discovery Handlebars テンプレート、さらに addon.hbs レイアウトを使用して、会社のウェブサイトとは異なる方法でページをレンダリングしています。

router.get('/', function (req, res, next) {
  res.render('discovery', {
    layout: 'addon.hbs',
    title: 'Education Technology Classroom add-on',
    message: `Welcome.`
  });
});

Java

Java コードの例では、モジュールを使用して一連のチュートリアル ステップをパッケージ化しています。これは最初のチュートリアルであるため、コードは step_01_basic_app モジュールにあります。モジュールを使用してプロジェクトを実装することは想定されていません。チュートリアルの各ステップを実施しながら、単一のプロジェクト上でビルドすることをおすすめします。

このサンプル プロジェクトでは、エンドポイントを定義するコントローラ クラス Controller.java を作成します。このファイルで、spring-boot-starter-web 依存関係から @GetMapping アノテーションをインポートします。

import org.springframework.web.bind.annotation.GetMapping;

クラス定義の前に Spring フレームワーク コントローラ アノテーションを追加して、クラスの目的を示します。

@org.springframework.stereotype.Controller
public class Controller {

次に、2 つのルートと、エラー処理用の追加のルートを実装します。

/** Returns the index page that will be displayed when the add-on opens in a
*   new tab.
*   @param model the Model interface to pass error information that's
*   displayed on the error page.
*   @return the index page template if successful, or the onError method to
*   handle and display the error message.
*/
@GetMapping(value = {"/"})
public String index(Model model) {
  try {
    return "index";
  } catch (Exception e) {
    return onError(e.getMessage(), model);
  }
}

/** Returns the add-on discovery page that will be displayed when the iframe
*   is first opened in Classroom.
*   @param model the Model interface to pass error information that's
*   displayed on the error page.
*   @return the addon-discovery page.
*/
@GetMapping(value = {"/addon-discovery"})
public String addon_discovery(Model model) {
  try {
    return "addon-discovery";
  } catch (Exception e) {
    return onError(e.getMessage(), model);
  }
}

/** Handles application errors.
*   @param errorMessage message to be displayed on the error page.
*   @param model the Model interface to pass error information to display on
*   the error page.
*   @return the error page.
*/
@GetMapping(value = {"/error"})
public String onError(String errorMessage, Model model) {
  model.addAttribute("error", errorMessage);
  return "error";
}