Chrome 112

Google Chrome 112 が3月29日にリリースされました。

Chrome 112 release note

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

https://chromestatus.com/roadmap

https://developer.chrome.com/blog/new-in-chrome-112/

Pickup for WebClass

今回の変更の中に、WebClassに影響があるものはありませんでした。

気になる変更点

CSS Nesting

CSSでネスト(入れ子)ができるようになりました。これにより、セレクタを繰り返して記述する必要性が減り、可読性や保守性を向上させることができます。これまでは、ネストを使うにはSassを使う必要がありました。従来の記述方法からどう変わるか、どのように活用できるかについて、詳しくはこちらを参照してください。

なお、CSS Nestingに現在対応しているブラウザは Chrome と Safari Technology Preview のみです。

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

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

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

Safari 16.4

Safari 16.4 が3月28日にリリースされました。

Safari 16.4 Release Notes

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

https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes

Pickup for WebClass

WebClass に影響のある変更はありませんでした。

気になる変更点

矢印キーを押下してスクロールした際の動作に変更がありました。

  • Safari 16.3

  • Safari 16.4

滑らかにスクロールされるようになり、スワイプと近い操作感が得られるようになりました。

最後に

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

Firefox 111

Firefox 111 が 3月14日にリリースされました。

Firefox 111 release note

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

Pickup for WebClass

今回のリリースでは、WebClass に影響はありません。

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

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

Firefox Release Calendar

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

Chrome 111

Google Chrome 111 が3月1日にリリースされました。

Chrome 111 release note

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

https://chromestatus.com/roadmap

https://developer.chrome.com/blog/new-in-chrome-111/

Pickup for WebClass

今回の変更の中に、WebClassに影響があるものはありませんでした。

気になる変更点

CSSで三角関数が利用可能に

CSSでsin、cos関数などの三角関数が利用可能になりました。これらの関数を利用してローディングアニメーションの実装や曲線状の要素の配置などを行うことができます。

具体的な実装例は以下のリンクから確認できます。

https://ics.media/entry/230126/

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

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

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

修学カルテの新機能について (WebClass v11.14.0)

WebClass v11.14.0 がリリースされます。この記事では、修学カルテに追加された機能について解説します。

積み上げ棒グラフ

修学カルテでは、入力状況をグラフで可視化できます。このリリースで、積み上げ棒グラフでの可視化に対応しました。

上のイメージは、学生が1年次から4年次までに受けた試験の合計点を可視化するグラフです。問題の分野別に点数を積み上げています。

積み上げ棒グラフを表示するためには、カルテXMLで<stacked-bar-graph>を指定します。詳しい説明はマニュアルをご覧ください。また、手元の環境ですぐに試してみたい方は、以下のXMLをダウンロードして登録してみてください。

積み上げ棒グラフ.xml

グラフをカード内に表示できるようになりました

これまで各種グラフはSummaryタブ内でのみ表示可能でしたが、カード内でも表示できるようになりました(今回対応しているカードは<static_card>のみです)。

グラフをカード内で表示するためには、これまで<summary>内で指定していた<rubric-chart>などを<static_card>直下に記述するだけです。

使用例は次の変更でまとめて紹介します。

入力フィールドの入力値を、別の場所に表示する

入力フィールドの入力値を、別の場所に表示できるようになりました。たとえば年度ごとに振り返りをするカルテで、 今年度の目標を入力する画面に、参考として前年度の振り返りを表示するような使い方ができます。

この画面の上半分は、前年度の振り返り時に入力した内容が表示されています。また、前年度の入力内容をレーダーチャートで可視化しています。これらを参照しながら、下半分で今年度の振り返りを入力していきます。

別の場所の入力フィールドを参照して表示するには、<copy-field>を使用します。詳しくはマニュアルを参照してください。

これらの機能を試してみたい方は、以下のXMLを使用してみてください。

入力フィールドの入力値を別の場所に表示する.xml

タブ、入力項目のラベルなどの色を変更できるようになった

以下のイメージでは、タブや入力項目のラベルの色を変更しています。年次や日などの入力タイミングの違いを分かりやすくするために、色の差で表現している例です。

設定例は以下のXMLを参照してください。

色変更.xml