WebClass R&D Team Blog

次回リリースされる Webclassバージョン12.1.0 から新しい文章エディターが使用できるようになります。

新エディターでは 見出し文・箇条書き・表・引用などのブロックをマウス操作で簡単に挿入できるほか
太字やハイライトといった 文字の装飾 、LaTeX形式での 数式記述 なども可能になりました。

新エディターは

• コース内の「お知らせ」「メッセージ」の作成
• 「資料」「テスト」「アンケート」「レポート」の教材の作成

に使用できます。

新エディタを利用するためにはWebclass12.1.0へのアップデート後、システム管理者がオプション設定の「NEW_EDITOR」を有効にする必要があります。
また、学生が回答欄に使用することはできません。ご了承ください。

ブロックの挿入

テキストの入力欄に表示される青い + マークをクリックすると挿入するブロックを選択できます。

例えば［テーブル］の機能では表を挿入できます。
列や行の追加・削除 は表の各セルの左上にカーソルを合わせることで表示される[•••]のボタンから行うことができます。

テキストの装飾

入力した文字をドラッグで選択すると文字装飾のメニューが表示されます。

行える装飾は以下の通り

• 太字
• 斜体
• 下線
• 取り消し線
• 上付き・下付き文字（x², F_x )
• ハイライト
• 文字色の変更
• 関数表記 (χ)
• コード表記 < / >
• リンク埋め込み

中でも「関数表記」の機能は工学部や理学部といった数式を多用する学部で非常に便利な機能です。
これから詳しく紹介します

数式の入力

先ほどの装飾メニューで 関数表記 を適用した文字をクリックすると関数のメニューが開きます。
画像上部の [KeyBoard] [LaTeX] のボタンから2つのモードを切り替えることができます。

KeyBoardモードでは数式によく使われる文字や記号がマウス操作で簡単に入力できます。

[123][abc]などの部分もタブになっているほか、Shiftキーを押すことで各文字の右上に表示されている青い文字に切り替わるため 逆三角関数 や 行列 などかなりの種類に対応しています。

手書きだと非常に描きづらいξ(グザイ)なども綺麗に簡単に入力することができます
大学の授業で使われる文字や記号のほとんどが入力可能です。

LaTeXモードでは LaTeX形式での数式入力 が可能です。
Keyboardモードで入力した文字も自動でLaTeX表記に変換されるため、2つのタブを切り替えながら入力することもできます。

新エディタではこんな教材が作成できます(学生画面)

Junieとは

JunieはJetBrains IDE上で動作するAIコーディングエージェントです。
依頼すると、リポジトリ内を探索したり、時には自ら書いたコードを実行したりして、試行錯誤しながらコーディングや調査を行なってくれます。

対応しているIDEやインストール方法などは、JetBrains公式のJunie紹介ページをご覧ください。

概要

Junieは自律的に試行錯誤してコーディングを行なってくれますが、そのままだと、プロジェクト外のリソースにアクセスし、複雑な操作を行うことは不得手です。

例えば、ブラウザでWebページを開いて操作したり、Notionのページを編集したりするのは、難しいです。しかし、MCPサーバーに接続すれば、Junieができることが大きく広がり、例に挙げたようなこともできるようになります。ここでは、Webページの操作を例に挙げながら、JunieでMCPサーバーに接続する方法を説明します。

前提条件

以下がインストール済みであること。

• Docker Desktop 4.42以降
• PhpStorm 2025.1.3
  • Junieに対応しているJetBrains IDEなら動くはずです
• JetBrains Junie

注意点

設定するMCPサーバーの例として、Playwrightを使用します。AIがブラウザ操作を行うためのMCPサーバーです。これは使いたいMCPサーバーによって変えていいです。

使いたいMCPサーバーによって変わる部分はわかりやすいように太字にしておきます。

設定方法

1. Docker Desktopを開く
2. MCP Toolkit>Catalogから「Playwright（MCPサーバー名)」で検索する

3. 出てきたPlaywright(Windowsアイコンのもの)の右上の+をクリックする
4. MCP Toolkit>Servers>Playwright>Overviewから一番下までスクロールし、Use this MCP Serverの下のjsonのplaywrightの部分（以下参照)をコピー

    "playwright": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "mcp/playwright"
      ]
    }

5. PhpStormを開く
6. Settings(歯車)>Pluginsから「JetBrains Junie」を開き、最新版にアップデートする
7. Settings>Tools>Junie>MCP Settingsから、MCP Serversの「＋」をクリック
8. “mcpServers”の値となるオブジェクトに先ほどコピーした値をペーストしてOKしてMCP SettingsでApply（既にMCPサーバーが1つ以上設定済みの時は、オブジェクト末尾に, を入力してからペーストする)

9. Statusが✅になったらOK

使ってみた

JunieがWebページを操作できるか、開発環境のWebClassで試してみました。

WebClassは開こうとすると以下のようなログインページが出ます。

ユーザIDとパスワードを入力してログインすると以下のような画面が表示されます。

Junieがきちんとログインして、開いたページの情報を読み取れるかどうか、試してみます。

⚠️Playwrightはコンテナ内で動いているので、localhostにアクセスする場合はhost.docker.internalとしなければいけないことに注意！

以下をJunieのチャットで送信してみました。（開発環境なので問題ありませんが、URLやログイン情報は一応黒塗りにしておきます)

あなたに試してもらいたいことがあります。
このプロジェクトの開発環境のWebServerはhost.docker.internal:███にあり、
http://host.docker.internal:███/█████ がログイン画面です。
ログインできるか試してみてくれないですか？
ユーザIDが █████ でパスワードが █████ です。ログインできたらわかったことを報告してください。

いくつか許可を求めてくるので承認していくと……(以下Junieの応答)

### ログイン結果報告

指定されたURLとログイン情報を使用してWebClassシステムへのログインを試みました。結果は以下の通りです：

#### ログイン成功

ユーザーID「 █████ 」とパスワード「 █████ 」を使用して、http://host.docker.internal:███/█████ へのログインに成功しました。

#### ログイン後の観察結果

1. **ユーザー情報**：
   - ログインユーザー名：「鈴木 先生」として表示されています
   - 未読メッセージが20件以上あります（「20+」と表示）

2. **コース情報**：
   - 「My Courses」セクションに以下のコースが表示されています：
     - 「WebClass Template Course」
     - 「ネットワーク講習会(検証)」（説明：今年初めてアカウントを取る人のための講座です）

3. **システム情報**：
   - システムタイトル：「List of Courses - WebClass」
   - 学期選択機能があり、現在「2025年春学期」が選択されています
   - 言語切り替え機能があります
   - 「Add Course」（コース追加）機能があります
   - コース検索機能があります

4. **ナビゲーション**：
   - 「Course」「Manuals」などのメニューがあります
   - 「Logout」ボタンでログアウト可能です

以上の結果から、開発環境のWebClassシステムは正常に動作しており、█████ ユーザーでログインして各種機能にアクセスできることを確認しました。

成功しました！！ばっちりWebClassにログインして、画面が見れています！！

こんにちは、福岡です。

ここ数年は、フリーランスエンジニアが開発にフルリモートで加わったり、退職したエンジニアがいたり、学生アルバイトスタッフも出入りがあったりと体制が変化していました。そうこうして忙しくしていて、しばらくこのブログはブラウザリリースのチェック記事しかだせていませんでした。

改めて学生アルバイトの募集をかけたりするなかで、改めて私達はどんなチームで、どんな雰囲気を共有できる人に来てほしいのかを整理する必要を再認識しています。

一応、こういうページでいろいろと書いていますが

• https://webclass.jp/about-us
• https://webclass.jp/work-with-us

我ながら文書が長い。。。

4月にはアルバイトスタッフの発案で説明回を開催して、合計14人の学生が参加してくれました。ここでは学生アルバイトスタッフが説明などもしてくれました。勉強会もしたいと声を上げてくれています。この勢いでいろいろとチャレンジしたいと思います。

2004−7年頃、WebClass を社長の平1人では開発しきれなくてアルバイトを募集し始めた頃、平があちこち営業に飛び回って一方、学生アルバイトが事務所として借りていたマンションの一室に集まって開発についてあーだこーだ言いながらいろんなことを試して開発の仕組みを整えてきました。ほとんど何も整備されていませんでしたが、無いということはむしろ何でも自分たちの手で作れるということでした。それを楽しんでいたので、何冊も本を読むのも何の苦でもなく、知るほどにすぐ試したくてわくわくしていました。

昔話ではありますが、こういう雰囲気がこのチームの文化の原点だと思っています。そこに向かっていきたいと思います。

概要

このドキュメントは、WebClass の WebAPI の利用手順について記載します。
WebClassで利用できるWebAPIの詳細ついては以下のドキュメントをご覧ください。

WebClass APIドキュメント

WebAPI の有効化

WebAPI を利用するには、事前に WebClass に ClientID と トークン取得用認証キー を設定する必要があります。この設定はサポートが行いますので、ClientID を指定してください。

• ClientID は、API を利用するシステムを識別するためのものです。

• URL または英数字の文字列を使用します。

  例: https://some.existing.service/

サポートが認証キーを生成し、ClientID と一緒に登録します。登録後、認証キーを通知します。

トークンの取得

ClientID と トークン取得用認証キー を使用してアクセストークンを取得します。

Form形式の場合

curl -X POST https://your.webclass.site/webclass/api.php/auth/token \
  -H "Content-Type: application/x-www-form-urlencoded" \
  -d "client_id=YOUR-CLIENT-ID&key=YOUR-SECRET-KEY"

JSON形式の場合 (WebClass v12 以降)

curl -X POST https://your.webclass.site/webclass/api.php/auth/token \
  -H "Content-Type: application/json" \
  -d '{"client_id":"YOUR-CLIENT-ID", "key":"YOUR-SECRET-KEY"}'

レスポンス例

{
  "result": "OK",
  "token": "xxxxxxxxxx"
}

API の利用

取得したトークンを Bearer ヘッダー に設定して API を呼び出します。

教材の成績データ取得API の例

:contents_id はデータを取り出す教材 ID に置き換えます。

curl -X GET https://your.webclass.site/webclass/api.php/rest/contents/:contents_id/scores \
  -H "Authorization: Bearer xxxxxxxx"

利用例

WebAPIの利用例として、ユーザ登録APIとコースユーザ登録APIの利用方法を紹介します。

ユーザ登録

ユーザ登録 API を利用して、新しいユーザを登録します。

• メソッド: POST
• Content-Type: application/json

ユーザ登録 API エンドポイント

https://サーバホスト/webclass/api.php/rest/user

送信データ例

{
  "user_id": "id000001",
  "fullname": "鈴木 先生",
  "email": "suzukisensei@example.com",
  "perm": "1",
  "student_id": "2022000001",
  "login_id": "extid000001"
}

返却データ例

{
  "result": "Registration successful. user_id <id000001> added."
}

コースユーザ登録

コースユーザ登録 API を利用して、コースにユーザを登録します。

• メソッド: POST
• Content-Type: application/json

コースユーザ登録 API エンドポイント

https://サーバホスト/webclass/api.php/rest/course/APITestCourse/member

送信データ例

{
  "user_id": "id000001",
  "course_perm": "0"
}

返却データ例

{
  "result": "Registration successful. user_id <id000001> added."
}

WebClass v11.14.1 がリリースされます。修学カルテに追加される新機能について、用例とともにご紹介します。

ルーブリックに初期値を設定できるようになった

ルーブリックの各行に対して、初期値を設定できるようになりました。以下のように、<dimension>タグにdefault属性を設定します。

<field_template id="cook" type="rubric" title="調理実践" >
  <rubric>
    <rubric_header>
      <level value="0"/>
      <level value="1"/>
      <level value="2"/>
      <level value="3"/>
      <level value="4"/>
    </rubric_header>
    <dimension
        id="cut"
        title="切る"
        description="切り方の習熟度合を評価します"
        default="2">
      <option level="0">まったくできなかった</option>
      <option level="1">あまりできなかった</option>
      <option level="2">ふつう</option>
      <option level="3">少しできた</option>
      <option level="4">よくできた</option>
    </dimension>
  </rubric>
</field_template>

<mark-complete>タグに親子関係を設定して、複数カードの「済」と「未」のステータスを一度に変更できるようになった

<mark-complete>は、カード上部に完了ボタンを設置する機能です。

<static_card id="grade1" title="1年次" edit-protect-target="false">
     <mark-complete id="complete" title="全課程修了" complete-target="self" edit-auth="self"></mark-complete>
     <field id="cook" ref="cook"></field>
</static_card>

完了ボタンをクリックすると、完了状態に切り替わります。

アドバイザーからは、どの学生が完了状態になっているかが一覧で確認できます。

今回の機能追加で、<mark-complete>下に<child>を設定することで、一つの完了ボタンを押すと、同時に他のカードの完了ボタンも一括でステータスが変わるようになりました。

記述式の入力欄でform_type=texareaのとき、初期の行数の高さを設定できるようになった

テキスト入力欄の行数（高さ）を、rows属性で設定できます。

<field_template
  id="summarize"
  type="text"
  form_type="textarea"
  title="総括"
  edit-auth="self"
  rows="20" ></field_template>