文章エディターが大きくアップグレードされます(v12.1.0)

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

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

新しいエディターで作成したプログラミングの授業の小テスト

新エディターは

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

に使用できます。

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

ブロックの挿入

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

 + マークを押すとブロックのメニューが開く

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

[•••]のボタンを押した状態

テキストの装飾

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

文字装飾のメニュー

行える装飾は以下の通り

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

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

数式の入力

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


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

関数メニュー (Keyboardモード)

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

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

行列の表示

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

複雑なシュレーディンガー方程式も綺麗に入力することができます

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

人文系科目での使用例 引用ブロックを使用しています

新エディタは解説文の入力にも対応しています(画面右下)

「お知らせ」の作成にも使用可能です

これまで、数式の表示やテキストの装飾のために問題文にスクリーンショットを添付していたケースも多いかと思いますが、バージョン12.1.0からはこのようにWebclassの画面上で直接入力できるようになります。
リリース日はまだ決まっていませんが、詳細が決まり次第ご案内いたします。

JetBrains JunieがWebページを操作できるようにする方法

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サーバー名)」で検索する

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

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

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

  1. 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にログインして、画面が見れています!!

WebClass 開発チームの雰囲気

こんにちは、福岡です。

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

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

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

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

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

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

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

Chrome 135

Google Chrome 135 の安定版が4月1日にリリースされました。

Chrome 135 release note

以下のリンクに主な変更点の情報が記載されています。

https://chromestatus.com/roadmap

Pickup for WebClass

今回のリリースで、WebClassの機能に影響を与える変更点はありませんでした。

気になる変更点

NavigateEvent sourceElementの追加

要素(リンクのクリックやフォームの送信など)によってナビゲーションが開始されると、NavigateEvent の sourceElement プロパティは開始要素を返します。

このプロパティの追加によって、ナビゲーションイベントを開始した要素がどれかを簡単に特定できるようになります。バグの原因特定などをより早くできるようになるかもしれません。

今後の Chrome リリースについて

次回のリリースは2025年4月29日に予定されています。

その他ブラウザのリリースはこちらにまとめています。

Firefox 137

Firefox 137 release note

以下のリンクに主な変更点の情報が記載されています。

Pickup for WebClass

今回のリリースでは、WebClassに影響のある変更はありませんでした

気になる変更点

Firefox NightlyでTemporal APIがデフォルトで有効になりました

これまでJavaScriptでは Date オブジェクトを使って日付や時刻を扱ってきましたが、このオブジェクトには設計上の欠陥など問題がありました。特にタイムゾーンの扱いが不十分で、ローカルタイムとUTCしかサポートされないなど、柔軟な時間操作には不向きな場面も多くありました。

次世代の日時APIである Temporal API は、

  • 柔軟で正確な日付・時間の計算機能
  • 明確で誤解の少ない構文
  • 複数のタイムゾーンやカレンダー(和暦など)のサポート

など、豊富な機能を持つ、強力なAPIです。近い将来、標準化されると思われるので、他のブラウザも含め、今後の動向に注目したいです。

参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal

今後の Firefox リリースについて

次回のリリースは 4月29日に予定されています。

Firefox Release Calendar

その他ブラウザのリリースはこちらにまとめています。